ratoblo

色々書いていきます

MENU

【3秒で簡単!】はてなブログで画像を横並びにする方法!

最近、はてなブログ関係の記事が多いノータです。

本職は医療系なのにブログにはまりすぎていて、ブログの勉強ばかりしているのは職場には内緒...。

今回は、私が利用している「はてなブログ」で画像を横並びにする方法を書いていきます。

えげつなく簡単!!
レベルで表わすと神レベルです!!

画像を横並びにする

 

普通、画像を連続で投稿すると

f:id:ratoblo:20170818231407j:plain

f:id:ratoblo:20170818231612j:plain

こんな感じで縦に並びますよね?

サイズを小さくしても

f:id:ratoblo:20170818231407j:plain

f:id:ratoblo:20170818231612j:plain

この通り。

 

我が家庭教師である「Google大先生」に聞いてみても、HTMLをいじる方法しか出てきません!

f:id:ratoblo:20170917145803j:plain

HTMLややこしいっっ!

f:id:ratoblo:20170917145842j:plain

こちとらカスタマイズでも何でもコピペで済ませてしまうレベルの素人だぜ?タイピングも下手で練習中なんだぜ?HTMLの打ち込みなんてできるかぁ~!!!
(トライしたけどややこしくて断念した劣等生です)

 

と思っていたんですが、ついに見つけてしまった...。

見つけたぞー!!!

神の御業かと見まがう程に簡単!!

神の手にかかれば、

 

ほれっ!

f:id:ratoblo:20170818231407j:plain
f:id:ratoblo:20170818231612j:plain

ほれっ!

f:id:ratoblo:20170818230343j:plain
f:id:ratoblo:20170818230326j:plain
f:id:ratoblo:20170818224800j:plain

ほれ~~~っ!

f:id:ratoblo:20170818224800j:plain
f:id:ratoblo:20170818224746j:plain
f:id:ratoblo:20170818225329j:plain
f:id:ratoblo:20170818225007j:plain
f:id:ratoblo:20170818231249j:plain
f:id:ratoblo:20170818231407j:plain
f:id:ratoblo:20170818231612j:plain

 

いくつでも簡単に横並びが出来てしまいます!

 

やり方

簡単です。

むしろ、ここまであおったのが恥ずかしくなるくらい...

f:id:ratoblo:20170911223744j:plain

はい、ここ!!
 

f:id:ratoblo:20170917151648j:plain

画像を並べたい順番に複数選択して、【記事での並べ方】の所を【横並び】にするだけ。

  • 画像を複数並べる:2秒
  • 【横並び】にする:1秒

合計3秒で出来ちゃう!!!

 

そうです!

はてなブログの標準機能なんですね!

 

最近まで無かったのに、最近になって追加されたみたい。

この記事を書き終わってから色々探してみたら、公式から発表がされていたみたいですね。

見逃していました...。

素晴らしい追加機能をありがとう!!

神は【はてなブログ様】だったんですね。

SPONSORED LINK

 

 

この機能を応用

大変素晴らしいこの機能。応用しない手はありません!

応用する用途は様々ですが、やっぱり比較に使うのが一番便利ですよね!

私が今後使いたい応用方法は、

GIF動画を使った比較

ですね。

前回の記事

www.ratoblo.com

 で、バックスペースの押し方を改善しました~って項目があります。

『小指で押していたのを薬指で押すようにしたら、無駄な腕の動きがどれだけ減るか』を表すために画像をGIF動画で作り貼り付けたのですが、縦になっていて比較はし辛かったと思います。

(小指で押す場合)

f:id:ratoblo:20170917014435g:plain

(薬指で押す場合)

f:id:ratoblo:20170917014450g:plain

分からない事もないけど、ちょっと分かりにくいですね。

それを横並びにすると

(左:小指)/(右:薬指)

f:id:ratoblo:20170917014435g:plain
f:id:ratoblo:20170917014450g:plain

 分かりやすい!

 ※その記事は修正済みです。

小指は手全体が右に移動し、薬指は指だけが移動しているのが一目瞭然ですね。

 

このような使い方をすれば記事の分かりやすさも上がり、読者の満足度向上にもつながると思います!

今後、比較する時はマストな機能になると思います!

最後に

安心してください!

スマホでもちゃんと横並びになりますよ!(レスポンシブ対応)

f:id:ratoblo:20170917154913j:plain

 

公式からの発表があったので知っている人も多いでしょうが、私みたいに知らなかった人もいると思いますので、参考になれば幸いです。

 

≪この記事で使った画像の記事≫

たこ焼き、また食べたくなった...

最近作ってないなー。鶏肉買いに行こっと♪

 

≪この記事で使ったGIF動画の作り方≫

簡単です♪