雪ん子’s report

スマホ1つでブログは書けるか⁉ スマホの使い方(初級編)と日々のことをお伝えします。

雪ん子’s report

スマホだけでブログに挑戦!

スマホでチャレンジ! はてなブログで画像を横並びにする




こんにちは。雪ん子です。

今回の記事ははてな記法、Markdown記法を使用している方向けの記事です。
見たままモードで記事を書いている方はごめんなさい(>_<)
 
先日、はてなブログのお知らせで、画像を横並びにできるようになったとお知らせがありましたね。
複数の写真を横一列に並べて貼り付けられるようにしました - はてなブログ開発ブログ
 
CSSをいじったり、自分でサイズを設定しなくても、均等に画像を並べてくれるので楽チンですね。
 
でも、スマホのweb版でもアプリでもこの機能は使えません。
使えるようにして欲しいのですが、難しいんですかねー(´・ω・`)?
 
とはいえ、待ってるだけもイヤなので、面倒ですがスマホからPC用を試してみます。
  

横並びの画像を挿入してみる

 

PC版で挿入してみる

 
PC用の記事を書く画面で、画像挿入をタップ

f:id:snow0303:20171003232014j:plain
 
画像を選択
f:id:snow0303:20171003232030j:plain
 
「横並び」をタップ
f:id:snow0303:20171003232037j:plain
 
「選択した画像を貼り付け」をタップ
f:id:snow0303:20171003232046j:plain
 
キャプション(題名?)をつける画面が出てくるので入力して、「記事編集画面に貼り付ける」をタップ
f:id:snow0303:20171003232053j:plain
 
画像が挿入されました。
f:id:snow0303:20171004075414j:plain
 
ひとまず下書きを保存。
 

アプリで確認

 
小さくて見辛いので、アプリに移動してみます。
※私ははてな記法を使用中です。
 
下書きを開いた状態

f:id:snow0303:20171004075434j:plain
 
記事編集画面
f:id:snow0303:20171004075447j:plain
 
プレビュー画面
画像下の真ん中に、キャプションで着けた文字が挿入されています。
f:id:snow0303:20171004075525j:plain
 

キャプション無しを試してみる

 
同じ要領で、キャプションを入れないで画像挿入してみます。

f:id:snow0303:20171004082305j:plain
 
キャプションの画面が出てきましたが何も入力せずに「記事編集画面に貼り付ける」をタップ
※画像選択時に「貼り付け時に詳細を設定する」のチェックを外しておけば、この画面はスキップできます。
f:id:snow0303:20171004082509j:plain
 
挿入されました。
さっきよりもスッキリしている感じ。
f:id:snow0303:20171004084917j:plain
 

アプリで確認

 
比較のため、先ほど挿入したキャプション付きと並べています。
上がキャプション付き。
下が画像のみ。
 
下書きを開いた状態

f:id:snow0303:20171004085649j:plain
 
記事編集画面
f:id:snow0303:20171004085702j:plain
 
プレビュー画面
もちろんキャプションは無し。
f:id:snow0303:20171004085728j:plain
 

結果

 
ピンクの下線の部分を書き込めば、スマホ用のWeb版からもアプリからも使用できます。
 

画像のみを並べて挿入したい場合

 
<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>
 
この方法だと画像③は大きいまま。


f:id:snow0303:20170529182842j:plain
f:id:snow0303:20170529182842j:plain
f:id:snow0303:20170529182842j:plain
 
と、言うことで試行錯誤。
 

結果

 
画像の代わりに、<span></span>を挿入します。
 
<span></span>が画像1枚分の役割をしてくれます。
 
・半分の大きさにする。
 
<div class="images-row mceNonEditable">画像③<span></span></div>
 

f:id:snow0303:20170529182842j:plain
 
・3分の1にする
 
<div class="images-row mceNonEditable">画像③<span></span><span></span></div>
 
f:id:snow0303:20170529182842j:plain
 

画像の枠

 
私はスクリーンショットを挿入することが多いので背景と同化しないように枠をつけています。
 
PC版なら、「ダッシュボード→デザイン→スパナマーク→デザインCSS」に貼り付け
 

.entry-content img {
border : 2px solid #BDBDBD ; /* 枠線の太さと色 */
border-radius: 3px; /* 角を丸く */
margin: 3px 6px 15px 0; /* 画像周りの余白 */
}
 
スマホ版はPC版に切り替えて、「ダッシュボード→デザイン→スマホマーク→記事下」に貼り付け
 
<style type="text/css">

.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をいじるのも一苦労だと思います。
 
今回紹介したモノを定型文に登録してしまえば、かなり楽になると思いますよ。