自作テーマで追加した
メディアについてのCSS

  • CAUTION
  • 1年以上
  • 古い記事

こんにちは。

WordPressのテーマって、作り方が分かってくると自作した方が良いケースが多いですよね。
不要な機能は削れますし、何より中身を全て把握できているテーマというのが私としては大変良いポイントだと思います。

しかし、だからこそ「当然ある」と思っていた機能が、実は実装されていない事があります。
(テーマの作成者の方々の凄さは、WordPressを使えば使うほど思い知らされます…。)

今回は自作したテーマで投稿に「メディアを追加」した時に気づき、学んだ事を綴っていきます。

メディアを追加

WordPressで記事の本文に画像や動画を組み込みたい場合、「メディアを追加」ボタンをクリックして挿入する方法があります。

エディターの左上にある「メディアを追加」ボタンです

こちらからメディアを追加すると、imgタグに色々なclassが自動で追加されます。

その中で、この記事の主役となるclassはこちらです。

  • alignleft
  • aligncenter
  • alignright

これらのclassは「メディアを追加」で表示される「添付ファイルの表示設定」の「配置」という項目の値によって変わります。

「メディアを追加」ボタンを押して表示される画面の右下の方にあります

classにCSSを指定する

メディアを追加する時に配置を指定する方法を書きましたが、自作したテーマではこの配置が反映されない事があります。

それは、alignleftaligncenter等のclassにCSSが指定されていない事が原因です。

CSSの書き方は色々ありますが、それっぽくメディアを配置できる一例をご紹介します。

記述例

.aligncenter {
	display: block;
	margin: 1em auto;
}
.alignleft {
	float: left;
	margin: 1em 1em 1em 0;
}
.alignright {
	float: right;
	margin: 1em 0 1em 1em;
}

CSSで指定していない場合と、記述例のCSSを適用した場合を比較してみます。

まずはCSSを指定していない記事の画像です。

CSSが反映されていないと配置を調整する事はできません

メディアを追加する時に配置を指定しても、反映されていないのが確認できると思います。

続いて、記述例のCSSをStyle.cssに書いた記事の画像です。

CSSで指定するとある程度は好きな位置に記事内にメディアを配置できます

メディアを指定した配置にできました。

marginの値は好みで調整して良いです。

私としては、alignleftのmargin-rightとalignrightのmargin-leftは0より大きい値の方が見栄えが良くみえるのでおすすめです。

まとめ

WordPressは手軽にWebサイトを作れて便利ですが、コーディングの知識がない人でも簡単にブログ記事を書いて投稿できるのも魅力の1つだと思います。

テーマを自作する際は、投稿者に寄り添った親切な作りを心掛けていきたいですね。

また、自作テーマに標準で搭載したい機能があったら記事にしていきたいです。

この記事を読んでいただきありがとうございました。
あなたのお役に立てれば幸いです。ではまた。