wordpressで画像を並べるには「ギャラリー」という機能を使えばいいのだろうけど、このギャラリーはもう一つだ。
例えば、タイトルと説明をつけた画像をならべて、その説明にリンクを貼るといったことをしたい場合やはりhtmlとcssの出番となる。
それにはcssを登録してやらなければならないが、それを簡単に登録できるプラグインを先ず入れておこう。Simple Custom CSS というプラグインだ。
これはインストールすると「外観」の所に出てくる。そこを起動して、あらわれた画面にcssのコードを書いて、updateボタンを押してやるだけで反映する。
では、やってみよう。
記事は「テキスト」を選んで、以下を記述する。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div> <dl> <dt>タイトル</dt> <dd>説明1</dd> <dd>説明2</dd> </dl> <dl> <dt>タイトル</dt> <dd>説明1</dd> <dd>説明2</dd> </dl> <dl> <dt>タイトル</dt> <dd>説明1</dd> <dd>説明2</dd> </dl> </div> |
そしてdtの「タイトル」の前に「メディアを追加」でimgを入れる。
ここではdl環境を使う。これはとても便利でtable環境より柔軟性があってレスポンシブにも対応しやすい。(この件については以前書いた。)
要するにdtに画像とそのタイトルをおいて、ddにその説明文を置く。その上でそのdlを一つのボックスのようにして、floatで並べるという方法だ。
cssは以下だ。これを先ほどのSimple Custom CSSを起動して現れた画面に書いて、updateボタンを押してやる。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
div{ overflow : hidden; } dl{ width : 200px; border-width : 1px; border-style : dotted; border-color : #4169E1; margin-right : 12px; padding : 5px 5px 10px; float : left; } dt{ border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color : #4169E1; padding-bottom : 3px; } dd{ padding-left : 10px; padding-right : 10px; font-size:70%; } dt img{ margin-bottom : 5px; display : block; width:100%; } |
実例は以下のようになる。
ただしここでしっかりそろえるには画像の縦横比が全て同じでなければならない点だ。