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. iPhoneの容量がすぐ埋まってしまう。誰でも簡単に容量を空ける3つの方法
  2. スタバのさくらシリーズ2017レポート 今年も吹きっさらしの吹雪の中、春を感じて…
  3. ドトール福袋2017 新春限定セット DOUTOR初荷2017はかなりお得感。手…
  4. 椎間板ヘルニアと坐骨神経痛で入院したのだが、ついに退院する時が来た!
  5. 【ポケモンGO】ジャズドリーム長島でポリゴン、ラッキーを多くゲットする!イベント…

関連記事

  1. BLOG

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

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

  2. BLOG

    Googleアドセンスの審査が厳しくなっていた!2018年度の審査の基準と対策を考えてみる!

    Googleアドセンスの話。審査の基準が厳しくなってるって?最近T…

  3. BLOG

    ブログ開設してそれなりに経つけど、未だに検索上位に表示されないってことある?

    ブログ2018年6月運営の話お久しぶりです、りんずです。こ…

  4. BLOG

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

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

  5. BLOG

    リンクシェアの審査は厳しい!という理由と再審査をする方法

    楽天リンクシェアの審査が厳しかった!なぜだ!俺氏もブロガーの端くれ…

  6. BLOG

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

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

コメント

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

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

ピックアップ

  1. 雑記

    JACK IN THE BOX 2016 12/27に日本武道館で開催 這ってで…
  2. 雑記

    8月6日はうさまるのお誕生日となっているようすです。おめでとう(*’…
  3. LIFESTYLE

    郡上八幡城の御朱印が全国でも4カ所しかないといわれる、お城の御朱印として激レアだ…
  4. LIFESTYLE

    まぼろし博覧会に行ってみた!静岡の最強珍スポット、カオスの坩堝と貴重な資料や展示…
  5. LIFESTYLE

    カルディコーヒーで色々買ってみた!チョコとかコーヒーとかプリンとか。
PAGE TOP