wordpressで画像を並べる

wordpressで画像を並べるには「ギャラリー」という機能を使えばいいのだろうけど、このギャラリーはもう一つだ。
例えば、タイトルと説明をつけた画像をならべて、その説明にリンクを貼るといったことをしたい場合やはりhtmlとcssの出番となる。
それにはcssを登録してやらなければならないが、それを簡単に登録できるプラグインを先ず入れておこう。Simple Custom CSS というプラグインだ。
これはインストールすると「外観」の所に出てくる。そこを起動して、あらわれた画面にcssのコードを書いて、updateボタンを押してやるだけで反映する。
では、やってみよう。
記事は「テキスト」を選んで、以下を記述する。

そしてdtの「タイトル」の前に「メディアを追加」でimgを入れる。

ここではdl環境を使う。これはとても便利でtable環境より柔軟性があってレスポンシブにも対応しやすい。(この件については以前書いた。)
要するにdtに画像とそのタイトルをおいて、ddにその説明文を置く。その上でそのdlを一つのボックスのようにして、floatで並べるという方法だ。

cssは以下だ。これを先ほどのSimple Custom CSSを起動して現れた画面に書いて、updateボタンを押してやる。

実例は以下のようになる。

ファイル 2016-04-12 14 26 13タイトル
説明1
説明2
ファイル 2016-04-12 14 25 30タイトル
説明1
説明2
ファイル 2016-04-12 14 24 52タイトル
説明1
説明2

ただしここでしっかりそろえるには画像の縦横比が全て同じでなければならない点だ。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です