先日、はてなブログのお知らせで、画像を横並びにできるようになったとお知らせがありましたね。
複数の写真を横一列に並べて貼り付けられるようにしました - はてなブログ開発ブログ
CSSをいじったり、自分でサイズを設定しなくても、均等に画像を並べてくれるので楽チンですね。
でも、スマホではweb版でもアプリでもこの機能は使えません。
使えるようにして欲しいのですが、難しいんですかねー(´・ω・`)?
とはいえ、待ってるだけもイヤなので、面倒ですがスマホからPC用を試してみます。
目次
横並びの画像を挿入してみる
PC版で挿入してみる
PC用の記事を書く画面で、画像挿入をタップ
画像を選択
「横並び」をタップ
「選択した画像を貼り付け」をタップ
キャプション（題名？）をつける画面が出てくるので入力して、「記事編集画面に貼り付ける」をタップ
画像が挿入されました。
ひとまず下書きを保存。
アプリで確認
小さくて見辛いので、アプリに移動してみます。
※私ははてな記法を使用中です。
下書きを開いた状態
記事編集画面
プレビュー画面
画像下の真ん中に、キャプションで着けた文字が挿入されています。
キャプション無しを試してみる
同じ要領で、キャプションを入れないで画像挿入してみます。
キャプションの画面が出てきましたが何も入力せずに「記事編集画面に貼り付ける」をタップ
※画像選択時に「貼り付け時に詳細を設定する」のチェックを外しておけば、この画面はスキップできます。
挿入されました。
さっきよりもスッキリしている感じ。
アプリで確認
比較のため、先ほど挿入したキャプション付きと並べています。
上がキャプション付き。
下が画像のみ。
下書きを開いた状態
記事編集画面
プレビュー画面
もちろんキャプションは無し。
結果
画像のみを並べて挿入したい場合
<div class="images-row mceNonEditable">画像①画像②画像③</div>
こんな感じで改行しても大丈夫でした。
<div class="images-row mceNonEditable">
画像①
画像②
画像③
</div>
キャプションも付けたい場合
<figure class="figure-image figure-image-fotolife"><div class="images-row mceNonEditable">画像①画像②画像③</div><figcaption>題名</figcaption></figure>
画像はフォトライフでなくてもできるのか？
画像①画像②画像③の部分を<img src="画像のURL">にしてみました。
が、うまくいきませんでした(。>д<)
画像一枚で小さなサイズにできないか？
画像①画像②
画像③
としたい場合、画像①と画像②は横並びで挿入。
改行して画像③を入れる。
<div class="images-row mceNonEditable">画像①画像②</div>
<div class="images-row mceNonEditable">画像③</div>
この方法だと画像③は大きいまま。
と、言うことで試行錯誤。
結果
画像の代わりに、<span></span>を挿入します。
<span></span>が画像１枚分の役割をしてくれます。
・半分の大きさにする。
<div class="images-row mceNonEditable">画像③<span></span></div>
・３分の１にする
<div class="images-row mceNonEditable">画像③<span></span><span></span></div>
画像の枠
私はスクリーンショットを挿入することが多いので背景と同化しないように枠をつけています。
PC版なら、「ダッシュボード→デザイン→スパナマーク→デザインCSS」に貼り付け
border : 2px solid #BDBDBD ;/* 枠線の太さと色 */
border-radius : 3px ;/* 角を丸く */
margin : 3px 6px 15px 0 ;/* 画像周りの余白 */
}
スマホ版はPC版に切り替えて、「ダッシュボード→デザイン→スマホマーク→記事下」に貼り付け
.entry-content img{
border : 2px solid #BDBDBD ;/* 枠線の太さと色 */
border-radius : 3px ;/* 角を丸く */
margin : 3px 6px 15px 0 ;/* 画像周りの余白 */
}
</style>
横並びにした場合、上のように余白を設定していなくても、画像同士の間は勝手に少し離れるので大丈夫ですよ。
CSSの入力についての詳しい記事はこちら
→文字サイズと行の高さを変更
無理やり使う必要はないけどね。
フォトライフの画像を挿入した場合
[f:id:○○○○○○○○:plain:w250]
のようにplainの後ろに「:w○○」と数字を入れる方法も変わらず使用できます。
また、すでにCSSで画像幅を設定している方は必要ないかもしれませんね。
ただ、スマホオンリーで書いている方は、CSSいじるのも一苦労だと思います。
今回紹介したモノを定型文に登録してしまえば、かなり楽になると思いますよ。