記事内で画像を並べる方法

湖

記事内で画像を並べる方法

さて、拙テンプレートをお使いのある方が、記事内で画像を並べる方法について、悩んでおられるご様子なので、一定条件下で、レスポンシブテンプレート使用時に、さまざまなブラウザの幅に合わせて、画像の大きさを自動的に変化させるようにしつつ、わりと簡単な操作でできる方法について、説明します。

条件

  • レスポンシブテンプレートであること。
  • 画像のサイズを自由に変更する技術のある方であること。

さらなる条件

ここでは、一定条件下でのやりかたで、上の条件のほかに、
  1. 横に並べたい画像は、通常2枚とする。
  2. 並べたい画像を、同じサイズにして準備をすることができるという前提。
  3. 画像用のimgタグを、aタグで囲んだ状態で使っている人(デフォルトの状態のままで使っている人は、そうなっているはず)
ですので、「2が面倒くさい」という方には、向いていません。
また、拙テンプレート以外のテンプレートでも、基本的には、使えるはずですが、もともとのテンプレートに設定してあるCSSの内容によっては、うまく行かないかもしれません。

手順

  1. あらかじめ、テンプレートのスタイル編集(CSS)に、以下のコードを追加しておく←この作業は、最初に1回だけやればよい。
    「一番下」に追加すること(ほかの「記事内の画像に関係するコード」が書いてあるよりも下に置きたいから)。
    @media screen and (min-width:481px){
    .narabi{display:flex;flex-wrap:wrap;justify-content:space-between;}
    .narabi>a{display:block;width:calc(50% - 1px);flex-shrink:0;}
    .narabi>a>img{display:block;width:100%;height:auto;}
    }
    
    @media screen and (max-width:480px){
    .narabi{display:block;}
    .narabi>a{display:block;max-width:100%;margin:0 auto;}
    .narabi>a>img{display:block;max-width:100%;height:auto;}
    }
    ここでは、クラス名に「narabi」とつけたが、classの名前は、自分が覚えやすいものなら、なんでもよい。
    【理屈はどうなっているのか】
    並びには、floatを使わず、display:flexを使用する。
    ここでは、親要素がaで、その子要素がimgなので、親要素の幅を決めたうえで、その子要素の幅を「100%」にした場合には、子要素の幅は、親要素の幅と同じになる。
    aをボックス要素化し、その幅を、「記事幅の半分-1px」にしているので、imgの幅が100%ということは、「記事幅の半分-1px」という意味になる。
  2. 並べたい画像2枚を、同じサイズにしておく。とにかく、同じサイズならよく、2つ足した場合に最大記事幅をはみ出ていても、別に構わない。
  3. その画像を、アップロードする。
  4. 「新エディタ」を使用中の方の場合には、記事作成の際に、並べたい画像のところまできたら、HTMLに切り替える。ただし、新エディタでも、もともとHTMLのほうを使っている人は、そのままでよい。
    旧エディタの場合は、もともとタグが見えているので、切り替えの必要はない。
  5. 画像フォルダを開き、並べたい2枚の画像をいったんエディタに貼りつける。
  6. 以下のようになるように、画像用のタグを「narabiのdivタグ」で囲むようにする。
    • 緑…画像用のタグを囲むdiv
    • オレンジ…1枚目の画像用のタグ
    • 紫…2枚目の画像用のタグ
    baseつまり、同じ大きさの2枚を並べるときには、いつも、以下のコードで、画像用のタグをサンドイッチして、はさんであげるようにすること。
    <div class="narabi">ここに画像用のタグを入れる</div>
  7. 貼り付けたら、「新エディタ」を使用中の方の場合には、HTMLから、通常表示に戻し、記事の作成を続ける。ただし、新エディタでも、もともとHTMLのほうを使っている人は、そのままでよい。
    旧エディタの場合は、そのまま記事作成を続ける。
  8. 記事を書き終わったら、通常どおりに記事を投稿する。

注意点

  • hspaceは、使用しない。
  • 画像と画像がぴたっとくっついていると、見づらいので、間に1px×2の空間を取っているが、お好みで撤去のこと。
    その場合には、width:calc(50% - 1px);を、width:50%;にする。
  • もともとの画像の大きさには関係なく、常に、2枚の画像が、幅いっぱいに並ぶようになる。
    レスポンシブなので、ここでは、幅480px以下のデバイスでは、縦に並ぶようにした。それよりも大きなブラウザの場合には、横に並ぶ。
  • 画像2枚分の幅が、最大記事幅よりも小さい場合には、記事幅の50%に拡大される。
    なので、画像がぼやけるのを防ぐためには、なるべく、最大記事幅÷2よりも横幅の大きな画像にしたほうがいい。

サンプル

以下は、500px × 500px の画像2枚で試した結果。
【PCでの見え方】
Pcからの見え方 【iPadでの見え方】
タブレットでの見え方 【スマホでの見え方】
スマホでの見え方

まとめ

最初に1回だけ、class用のコードを、CSSに追加しておけば、次からは、それが効いていますので、2回目からは、ただ、特定のclass名のdivタグで囲んであげればいいということになるので、「手間」としては、それほどではなく、長く続けても、手間でうんざりするということはたぶんなく、わりと、リーズナブルな方法だと思います。
もちろん、テンプレートを変えた場合には、このためのコードも、次のテンプレートに載せ替えてあげる必要があります。
関連記事

コメント

コメント(8)
テンプレートの件
おはようございます。
このコードをCSSに追加しておけば、二つのファイルを続けて挿入すれば横並びになるという事なんですね、やってみます。
今日はちょっと山に行ってきますので帰ったら試してみます。

ハックル70

2019/09/24 05:50 URL 編集返信
Janedoe1471
To ハックル70さん
はい、画像用のタグを、.narabiというdivで囲んでやるようにすれば、並びますので、よろしければ、お試しください。

Janedoe1471

2019/09/24 15:29 URL 編集返信
サムネイルについて
こんにちは。
お忙しいところ申し訳ございませんがご質問よろしいでしょうか。
今回のテンプレートで、念願の大きな画像が使えるようになり喜んでおりますが、ただ、写真技術が伴わない為か若干画像にボヤケが出てしまいます。

色々調べてみましたが対策として
① 画像縮小の際にあらかじめ表示したいサイズに縮小しておき、アップロードの際は「この画像で記事を書く」で行う方法。
② 画像の縮小は一定のPXで行って置いて、希望の大きさにアップロードして「サムネイルで記事を書く」方法(現在私のやっている方法です)を取りURLの画像の部分にについている「s」を削除する方法がある様ですが、実際にやってみた感じでは幾分ボヤケが解消したように思います。
③ ②の方法を取った場合、投稿済みの画像など修正するとすれば、アイキャッチ画像や何かに障害が出るでしょうか、そもそもこの方法は好ましくないとお考えでしょうかよろしくお願いいたします。

ハックル70

2019/09/25 14:42 URL 編集返信
Janedoe1471
To ハックル70さん
そうですか、レスポンシブテンプレートなので、基本的にもう、「サムネイルで記事を書く」というタブは、使う必要はありません。
ですが、大きな画像をそのまま貼ると、重くなるので、横幅1200px程度に縮小してから、アップロードしていただくことを、おすすめします。

過去記事の修正には、基本的には、sを取れば、いいはずですが、sを取るということは、もともとアップロードしたときの画像の大きさになるということです。
その画像の横幅が、記事幅よりも大きい場合には、自動的に記事幅100%に縮小して表示されます。

ですので、今後は、「この画像で記事を書く」だけを、使っていただくほうが、よろしいです。

また、ハックルさんのブログが、FC2のおすすめブログに選出されていました。
おめでとうございます^^
https://blog.fc2.com/contents/recommend/
何か、運営側から、メールで連絡などは、来ていないんですか?
おすすめブログ認定用のバナーを貼っている人とかが、いますが、そういうのは、今は、なくなったんでしょうか。

また、拙ブログのコメント欄では、以前にも申し上げたように、お手数ですが、ご自身のブログのURLを、記載していただくように、ご協力をお願いします。

Janedoe1471

2019/09/25 15:10 URL 編集返信
おすすめブログ認定の件
ありがとうございました。
おすすめブログ認定の件、多分Janedoe1471さんのお力添えだと思っています、バナーの貼り方が分からず、認定書だけコピーして保存してあります、ありがとうございました。

ハックル70

2019/09/25 15:55 URL 編集返信
画像アップについて
度々申し訳ございません。
画像縮小1200pxして、800pxでアップして「この画像で記事を書く」にしますと、画像の一部が表示されてしまいます、投稿設定では「元画像にリンクする」を選択してありますが、「その他のアルバムページ・・」と「画像タグのみ」とありますがこちらの変更もしないといけませんでしょうか。

ハックル70

2019/09/25 16:35 URL 編集返信
Janedoe1471
To ハックル70さん
そうですか、やはり、運営から、連絡が来ていたのですね^^
おめでとうございます。
私は、それほどの助力はできておりません^^
ハックルさんの読者さんたちも、きっと、喜ばれるでしょうから、ぜひ、みなさんにも、お知らせしてあげてください。
また、認定バナーは、貼ったほうがよろしいです。
例えば、ほかのおすすめブロガーさんで、Akiraさんがバナーを貼った状態などを、ご覧ください。↓一番下の、プロフィール画像の下のところに、ありますね。
https://vanillaice000.blog.fc2.com/page-0.html
貼り方がわからないというのは、どういうことでしょうか。
取りあえず、画像フォルダにアップロードをしてください。
そして、「どこに貼りたいか」ということも、決めておいてください。
さらに、運営側から、「どこに貼ってくれ」とか、何か、注意書きがありますか?
とにかく、バナーを貼る方法を、ご一緒に、考えましょう。

Janedoe1471

2019/09/25 17:57 URL 編集返信
Janedoe1471
To ハックル70さん
画像のほうですが、横幅1200pxでアップロードしたら、それでいいです。
800pxに直す必要は、ありません。
そのままの状態で、「この画像で記事を書く」をクリックして、貼り付けてください。
レスポンシブのテンプレートなので、記事幅よりも大きい画像は、自動的に記事幅100%に縮小されて、表示されますので(縦横比を保った状態で)、もう、「はみ出し」を気にする必要は、ありません。

また、「環境設定」のほうの「投稿設定」のほうは、「元画像にリンクさせて」にしておくほうが、よろしいと思います。
ハックルさんの場合は、現在、そうなっているはずなので、このままでいいと思います。

Janedoe1471

2019/09/25 18:04 URL 編集返信
コメント投稿
【お願い】FC2ブログの方は、必ず、ご自分のブログURLを入力してください。
非公開コメント

プロフィール

Janedoe1471

Author:Janedoe1471 この写真とはまったく違うおばさんです。
が、気持ちだけは、いつまでも、こういう感じでいたいと思っています。

更新通知登録ボタン

更新通知で新しい記事をいち早くお届けします

検索フォーム