ブログカードの幅の調整ができない

ワードプレスのテンプレートを購入して、以前よりはユーザービリティが向上したと思いますが、まだまだ道半ばな状態です。テンプレートは比較的扱いが楽そうで、見栄えの良いTCDのmuumを導入していますが、デモサイトのようにきれいにはできません。

ワードプレスの有料テンプレートを導入すれば楽できると思っていましたが、いろいろな機能に振り回されたり、色合いを何回も確認したり毎日が試行錯誤です。比較的新しいテンプレートだったので細々としたところで、不具合があるのは仕方ないです。

ブログカードの幅を調整して見栄えをよくしたい

ワードプレスの編集画面には、ワードプレスの記事の埋め込みができる便利な機能（ブロックというらしい）があります。埋め込みのブロックに記事のURLを書き込むと、ブログカードができあがります。

そこで、2013年に復興ボランティア学で講演してくれた団体別にインデックスページを作ってみたところ、ブログカードがこんなことに。

画面の幅一杯に表示して欲しいのに、四角くて、幅も狭くて、何と言っても見栄えが悪い。

いろいろ調べたところ、カスタムCSSを追加すればいいことがわかりました。CSSとはカスケードスタイルシートといって、サイト内の文字や画像の位置など、細かい見え方を設定している仕様書のようなものです。よくスタイルシートと呼ばれています。

ブログカードを100%の幅に調整できた！

ワードプレスの場合はサーバーのCSSファイルをいじることなく、コントロール画面からできるというのです。

どうやったかというと、まずサイドメニューの「外観」→「カスタマイズ」でカスタマイズ画面を表示します。

次にカスタマイズ画面のサイドメニューから「追加CSS」を選ぶと書き込みができるテキストボックスが現れるので、そこに下記のCSSを書き込むだけでした。

.wp-embedded-content {width:100%;}

結果はこのとおり。ブログカードの横幅が広がって見栄えが良くなりました。

これからも、たまに備忘録的にワードプレスで行き当たった困りごとを書くつもりです。