はてなブログでGoogleフォトの画像を横並びに「すきま」をあけて表示させる方法。

こんにちは。

はてなブログでは画像を入れる時に「はてなフォトライフへアップロードして表示させる方法」の他に「Google フォトに保存してある画像を指定して表示させる方法」があります。

その際、写真を横並びに表示する方法があるのですが、写真と写真の間にすきまを入れることが簡単にできると気づいたのでメモしておきます。

最初は通常の方法であるフォトライフを使っていましたが、現在はGoogle フォトを使っています。

フォトライフの場合は、編集画面の右端に写真をアップロードできる画面があるのでそこから画像を選択して記事に貼り付けるのですが、複数の画像を横並びにして張り付けることが簡単にできます。

しかし、Googleフォトに移行してからしばらく横並びに表示する方法がわかりませんでした。これについては、一旦画像を貼り付けてからHTMLの中にコードを加えることで横並び表示させることができるようになりました。

↓　このブログを参考にさせていただきました。

リンク先の記事では

"見たまま" モードでは使えないかも。

とかかれていました。

私は、見たままモードを使用していますが、この画像を横並び表示させたいときだけ、「編集　みたまま」となっているところから「HTML編集」のタブに移動してコードを貼り付けるようにしています。

2018/8/15現在、リンク先の写真が見えなくなっていますので、簡単にやり方を書いておきます。

</div>
</figure>

このコードをHTML編集の中に「画像リンク」をはさむように貼り付けます。

といってもHTMLを見たことがない人はとまどうと思います。その場合はまず画像がどこにあるかを探します。HTMLタブの中には緑色になっているコードがあるはず。

↑このように<p>から始まって</p>で終わるひとかたまりが画像を示しています。

これを見たままモードでみると

こんな感じで表示されます。画像「あ」です。

１つだとこのような感じですが、2つ貼り付けると

↑ のような感じになります。HTMLの中から探すと、「<p>から始まって</p>で終わるひとかたまり」が２連続で入力されているだけです。このひとかたまりを「画像リンク」と呼ぶことにします。

HTMLの中で

「画像リンク」

</div>
</figure>

というように上記のコードを加えると、

このように横並びに表示させることができます。「画像リンク」３つ入力すると、、

となるので複数表示もできるようになります。

こういった作業に慣れている人や、HTMLを使いこなしている人にとってはあたりまえにできてしまいそうですが、この横並びの「あ」の間にすきまを入れたいと思ってもしばらくの間できずにいました。

できない間に考えたのが、「空白の横幅の細い画像」や「→」のような画像を作っておいて並べる方法でした。

↑ 画像「あ」の次に画像「→」そして画像「あ」を横並び表示させたものです。すきまがあいているように見せることができます。しかし面倒ですね。

そこで、「画像リンク」と「画像リンク」の間に「<p> </p>」

これを入れてみました。すると

このように簡単にすきまを入れることができました。この「<p> </p>」

を複数いれることで、

すきまの長さを調節することができます。この「<p> </p>」

なんですが、HTML編集の中にきっとあると思いますが、<p>のつぎに半角の空白がきて</p>がくるという構成です。この半角の空白がHTMLの中では赤色の点で表示されているはずです。

気づいてみるととても簡単ですが、私のような駆け出しの初心者には結構難しい作業でした。

もしよければ参考にしてみてください。

それでは。

Sailing in the Blue Ocean