BLOG

WordPress記事内で画像を横並びにするシンプルなhtmlコード

WordPressの記事内で画像を横並びにするシンプルなやり方

画像(写真など)を横並びにしたい時があります。比較みたいな時に画像を並べると分かりやすい。ということで

画像を横並びにする

という方法を紹介しようと思います。もしかしたら、プラグインで画像を横並びにするものがあるかもしれません。

更に言えばWordPressのダッシュボードの外観からCSS編集も行なえるかもしれません。

今回は、いたってシンプルに記事編集画面のテキストでソースを書いてみることにします。

 

画像を横並びにするコードを書く

最近はhtmlやCSSを書ける人が増えてきたようです。しかし自分の場合頭の中でコードがぽーん!と出てくるといえばそうではなく、やっぱある程度どこかに書いておかないと忘れてしまうんです。

個人的にどこかに書いておけば思い出せるのですが、出来るだけもう頭の中でコード覚えておきたいですね~

画像を横並びにするコード

WordPressでコードを表示するために今回「Gist」を使用しました。

見やすくて便利だと思います。Gistの表示のやり方はこちらを参考にさせていただきました。

もっと知りたいリンゴあれこれ
https://rinare.com/wordpress-source-code-syntax-highlight-gist/

使用例:

<img src = “image1.jpg”> と <img src = “image2.jpg”>

の部分はこの画像です。差し替えて利用してみてください。

今回は別ブログでインスタグラムのフィルターを比較してみた!という感じで横並びにしました。おそらく画像を縦にふたつ直置きするよりは視覚的にも分かりやすいかと思われます。

うさまるは個人の趣味です。

画像に隙間を開ける場合は margin=”**px” で調整できます。こちらは5pxで処理しております。

 

コードはこちらを参考にさせていただいています。

https://lifool.com/wordpress-image-parallel/

 

まとめ

画像が大きいと結局縦に持っていかれるので、当ブログは横500pxの画像を2枚並べて、間を5px空けている形になっています。

ブログの記事、少しでも見やすいように心掛けていきたいですね~

 

ピックアップ記事

  1. 長良川温泉「十八楼」 150年の歴史を誇る老舗旅館の日帰り入浴に行ってきた。
  2. ポケモンGO 聖地と呼ばれた愛知県常滑市の名鉄常滑駅でプレイしてみた。
  3. ネッテラー、日本人のNet+カードを一時中断する
  4. 【ぬこ寺】福井県越前市 御誕生寺が猫好きの聖地。冬は猫から寄ってくるよ!
  5. 東海地区、極め付けのモーニングサービスがここにあった!岐阜県岐南町「朱里」

関連記事

  1. BLOG

    画像の背景を透明、透過色にしたい!と思った時に簡単に出来た方法

    画像の任意の色を透過色にしたいブログのタイトル画像をアップロードし…

  2. BLOG

    WordPressのサイト「このページを表示できません」ワイ「( ゚д゚ )」

    WordPress 突然サイトが表示されなくなったWordPres…

  3. BLOG

    人気のブログはプロフィールもスゴイ!書き方次第で印象もかなり変わる。

    ブログはまず、どんな人が書いているの?と気になります。月間数十万P…

  4. BLOG

    記事ごとにPV数を表示して、人気記事ランキングを作るプラグイン「WP-PostViews」を使ってみ…

    ブログの人気記事をPV付きで知りたいんだけど・・・WordPres…

  5. BLOG

    ブログを始めたら、まずは100記事書くことを目標とするっていう話。

    ブログを始めたら、まずは100記事を書けって話ブログを始めたら、ま…

  6. BLOG

    ページ内リンクのテストをしてみた。

    ページ内リンクのテストリンクのページ内でリンクするとか長年謎でした…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

ピックアップ

  1. 雑記

    い・ろ・は・すスパークリングぶどう、れもんの先行体験キットが当選!発売前に飲んで…
  2. LIFESTYLE

    クリングリーバランス カカオニブチョコレートを買ってみた!砂糖不使用ですね!
  3. LIFESTYLE

    猫写真集、おススメはコレ!カワイイ子猫やタレント猫たちの写真
  4. BLOG

    人気のブログはプロフィールもスゴイ!書き方次第で印象もかなり変わる。
  5. LIFESTYLE

    うさまるのトートバッグが付録のムック本「あいちてる!うさまるBOOK」発売!さっ…
PAGE TOP