ワードプレス Stinger5で画像を横に並べる方法

最近ワードプレスのテンプレートをStinger5に変更しました。
優秀なテンプレートであるStinger5ですが画像を横に並べることができません。

僕はサイトで画像をよく使うのでかなり困りました。

調べても一つ一つ横に並べる方法しかなく、今までの記事すべてを手動で直していくのはちょっと現実的じゃありませんでした。

CSSを少し変えるだけで解決できたのでメモ代わりにここに書いておきます。
バージョンはstinger5ver20151005ですね。

原因は display: block;

CSSに書かれている「display: block;」がすべての原因でした。

これは「画像の前後で改行します」って言う意味です。

自動で改行してしまうので、画像を続けて使うと縦に並んでしまうんですね。

そこでこれを次のように変更します。

「display: inline;」

前後で改行しません。っていうか画像を使っても何もしませんという設定。

普通のテンプレートはこれです。(CSSに書かない場合のデフォルト設定)

CSSを変更する場所

外観>テーマ編集から、スタイルシート(style.css)を選択します。

テーマ編集を開いた時点でスタイルシートが表示されているはずです。

次の項目を探します。

検索窓を開いてimgで一番最初に出てきますし、
割と上の方にあるのでスクロールバーを少し動かすだけでも見つかります。

/* リンクにマウスオーバーした時の色 */
a:hover {
	color: #b22222;
}
img, video, object {
	max-width: 100%;
	height: auto;
	border: none;
	vertical-align: bottom;
	display: inline;

この一番下のdisplayの項目を「block」から「inline」に変更します。

これで画像を横並びで表示することができるようになりました。
(連続で画像を使うと自然とそうなります)

縦並びにしたい場合は普通に改行をしてください。

左寄せや右寄せでも並べて表示したい場合

上の操作ではデフォルト配置の時しか並べて表示できません。

左寄せや右寄せにするとまた縦配置に戻ってしまいます。

そういった場合も横並びに表示したい場合は、次の場所も変更します。

「display:」の項目をすべて「inline」に変更します。

/*画像 */
img.alignright {
 display: inline;
 margin: 0 0 0 auto;
}
img.alignleft {
 display: inline;
 margin: 0 auto 0 0;
}
img.aligncenter {
 display: inline;
 margin: 0 auto;
}
img.float-left {
 float: left;
}
img.float-right {
 float: right;
}
.wp-caption {
 text-align: center;
}
.aligncenter {
 clear: both;
 display: inline;
 margin-left: auto;
 margin-right: auto;
}

これでOK!( ´∀`)

Stinger5 はとても便利なテンプレートですから上手く使っていきたいですね。
CSSも見やすいので少し勉強すれば割と好きなようにカスタムできます。

Stinger5素晴らしいぞ~!(*^_^*)

4件のコメント

  • さき

    sitinger5に画像を並べたいのですが、うまくできません。
    CSSのどのあたりにそのコードを追加したら良いのか教えて頂けるとうれしいです。
    記事に記載されてる(img, video, object {)というところが見当たりません…
    よろしくお願いします。

    • しじみ

      >さき さん
      記事で書いているのはスタイルシートの36行目あたりです。
      配置変更後の方は500行目あたりになります。

      あと、追加ではなく変更なので気をつけてくださいね。

      本ページではstinger5ver20151005について書いていますので、表記が見当たらない場合はバージョンを確認してみてください。

      バージョンが違う場合でも「Ctrl+F」検索窓を出して「display」で検索すれば画像の項目が含まれています。画像部分だけ「block」から「inline」に変更すれば同じことができますよ~。

  • さき

    しじみさん並べて表示することができました。大変困っていたので助かりました。教えていただいて有難うございました。

    • しじみ

      >さきさん
      それは良かったです!(^o^)

しじみ にコメントする コメントをキャンセル