はてなブログで Google フォト貼り付けを使ってるひとが複数写真を横一列に表示する方法 (追記 2017-10-02T00:57)

このブログでは，ヘッダーの写真を含めてほとんど全て Google フォトにおいてある写真を使っているよ。

で，はてなブログ開発ブログで先日公開された，複数写真を横一列に表示する機能ってのがあるんだけど——。

staff.hatenablog.com

開発ブログでは，はてなブログの "写真を投稿" 機能で並べ方を設定する方法が紹介されてるね。

この機能を "Google フォト貼り付け" で使えないかと調べてみた。
ちなみに，わたしは "はてな記法" モードを使ってるから，"見たまま" モードでは使えないかも。
たぶん "HTML" モードは使えるし，"Markdown" モードで使えるか調べたら追記するね。

追記 2017-10-02T00:57

"Markdown" モード，"HTML" モードでも同じように使えるよ。
"見たまま" モードではたぶん無理。

追記ここまで

実例
やり方（はてな記法・Markdown・HTML）
使うときには
- クリップボード管理ツールのおすすめ (Windows)
- クリップボード管理ツールのおすすめ (macOS)

実例

www.kagura-c.info

写真の枚数が多かったので詰め込むのに使ったよ。

9 月中旬以降の他の記事でも使ってみた。

やり方（はてな記法・Markdown・HTML）

1 行だけ

Google フォト貼り付けで写真を複数選択すると，以下のような文字列がブログ編集画面に埋め込まれると思う。

<span itemtype="http://schema.org/Photograph" itemscope="itemscope"><img class="magnifiable" src="https://lh3.googleusercontent.com/-knPgAuwH6iM/WZZ1OQY7HsI/AAAAAAAB68E/-9OxmRWCKHk0cT7QYaoLxjNW9YKtnjlGgCE0YBhgL/s1024/20170817-IMG_6992.JPG" itemprop="image"></span>
<span itemtype="http://schema.org/Photograph" itemscope="itemscope"><img class="magnifiable" src="https://lh3.googleusercontent.com/-4ssdEIbmL64/WZZrT1XV-NI/AAAAAAAB68E/7vE7FCkcYS0Dcj8qBet25M_GHRMcAoMfgCE0YBhgL/s1024/20170817-IMG_6994.JPG" itemprop="image"></span>
<span itemtype="http://schema.org/Photograph" itemscope="itemscope"><img class="magnifiable" src="https://lh3.googleusercontent.com/-kt4KuP3fVcE/WZZrrNBVNoI/AAAAAAAB68E/g4zG_6rvCh0ZIufiMn9lA8dY-G_X3Fi-gCE0YBhgL/s1024/20170817-IMG_6996.JPG" itemprop="image"></span>

写真 3 枚で 3 行ね。
これを横一列で表示してみよう。

3 行の前後に以下の文字列を入れてみる。

<figure class="figure-image figure-image-fotolife">
<div class="images-row mceNonEditable">
<!--【<span で始まる行】-->
</div>
</figure>

するとこうなるね。

<figure class="figure-image figure-image-fotolife">
<div class="images-row mceNonEditable">
<span itemtype="http://schema.org/Photograph" itemscope="itemscope"><img class="magnifiable" src="https://lh3.googleusercontent.com/-knPgAuwH6iM/WZZ1OQY7HsI/AAAAAAAB68E/-9OxmRWCKHk0cT7QYaoLxjNW9YKtnjlGgCE0YBhgL/s1024/20170817-IMG_6992.JPG" itemprop="image"></span>
<span itemtype="http://schema.org/Photograph" itemscope="itemscope"><img class="magnifiable" src="https://lh3.googleusercontent.com/-4ssdEIbmL64/WZZrT1XV-NI/AAAAAAAB68E/7vE7FCkcYS0Dcj8qBet25M_GHRMcAoMfgCE0YBhgL/s1024/20170817-IMG_6994.JPG" itemprop="image"></span>
<span itemtype="http://schema.org/Photograph" itemscope="itemscope"><img class="magnifiable" src="https://lh3.googleusercontent.com/-kt4KuP3fVcE/WZZrrNBVNoI/AAAAAAAB68E/g4zG_6rvCh0ZIufiMn9lA8dY-G_X3Fi-gCE0YBhgL/s1024/20170817-IMG_6996.JPG" itemprop="image"></span>
</div>
</figure>

これを表示すると——。

できた。

2 行以上

2 行で表示したいときはこう書くよ。

<figure class="figure-image figure-image-fotolife">
<div class="images-row mceNonEditable">
<!--【<span で始まる行】-->
</div>
<div class="images-row mceNonEditable">
<!--【<span で始まる行】-->
</div>
</figure>

で，こうなる。

<div class="images-row mceNonEditable"> と </div> のかたまりを，行数分繰り返す感じね。

キャプション

キャプションを入れたいときはこう。

<figure class="figure-image figure-image-fotolife">
<div class="images-row mceNonEditable">
<!--【<span で始まる行】-->
</div>
<div class="images-row mceNonEditable">
<!--【<span で始まる行】-->
</div>
<figcaption>【ここにキャプションを書くよ】</figcaption>
</figure>