こんにちは。
WordPressのテーマって、作り方が分かってくると自作した方が良いケースが多いですよね。
不要な機能は削れますし、何より中身を全て把握できているテーマというのが私としては大変良いポイントだと思います。
しかし、だからこそ「当然ある」と思っていた機能が、実は実装されていない事があります。
（テーマの作成者の方々の凄さは、WordPressを使えば使うほど思い知らされます…。）
今回は自作したテーマで投稿に「メディアを追加」した時に気づき、学んだ事を綴っていきます。
メディアを追加
WordPressで記事の本文に画像や動画を組み込みたい場合、「メディアを追加」ボタンをクリックして挿入する方法があります。
こちらからメディアを追加すると、imgタグに色々なclassが自動で追加されます。
その中で、この記事の主役となるclassはこちらです。
- alignleft
- aligncenter
- alignright
これらのclassは「メディアを追加」で表示される「添付ファイルの表示設定」の「配置」という項目の値によって変わります。
classにCSSを指定する
メディアを追加する時に配置を指定する方法を書きましたが、自作したテーマではこの配置が反映されない事があります。
それは、alignleftやaligncenter等の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をStyle.cssに書いた記事の画像です。
メディアを指定した配置にできました。
marginの値は好みで調整して良いです。
私としては、alignleftのmargin-rightとalignrightのmargin-leftは0より大きい値の方が見栄えが良くみえるのでおすすめです。
まとめ
WordPressは手軽にWebサイトを作れて便利ですが、コーディングの知識がない人でも簡単にブログ記事を書いて投稿できるのも魅力の１つだと思います。
テーマを自作する際は、投稿者に寄り添った親切な作りを心掛けていきたいですね。
また、自作テーマに標準で搭載したい機能があったら記事にしていきたいです。
この記事を読んでいただきありがとうございました。
あなたのお役に立てれば幸いです。ではまた。