みんな大好き「サルワカ」。
webデザイナーやブロガーであれば、おそらく知らない人はいないんじゃないかってくらい有名なブログですね！
どんだけSEO強いねんってくらい、検索上位にバンバン出てきますw
今回は、そんなサルワカでよく使われている手法の1つ、”画像の横に吹き出しを付ける”ってゆー技をご紹介します！
webデザイン系の図解説明だけに限らず、たとえばDIYやレシピなどでも、時系列で画像で説明する時に便利かもしれません^^
CSSコピペだけで簡単にできるので、ぜひ参考にしてみてくださいませ〜
なぜ”サルワカ”は分かりやすいのか？
サルワカの記事はどれもこれも、本当にサルでもわかるレベルでわかりやすい。このわかり易さは、ただ単純に説明が丁寧なだけなのか？
いや、違います。
見せ方です。
サルワカの真髄は見せ方にあります。そもそも「サルワカ」のサブタイトルはご存知でしょうか？
「サルでも分かるように図解説明します」
となっております。
つまり…
図解説明します
ここです。
これこそがサルワカ最大のコンセプトであり、我々ユーザーが分かりやすいな〜と感じる最大の理由です。
画像の横に吹き出しを作る方法
ちなみに、この手はサルではなくゴリラです😂
では、そんなサルワカで一番よく目にする図解説明テクニックとは？
それは間違いなくこの吹き出しです。
もう、バンバン出てきます。何なら全ての画像に吹き出し入れてるんじゃないか？ってくらいよく見ます。
であれば、そんなサルワカが多様しまくっているこの吹き出し、きっと効果的に違いない！
しかもなんと、作り方は非常に簡単！
ノリは吹き出しのコメントと似たようなもので、事前にCSSを実装しておき、吹き出したいタイミングでHTMLでコードを突っ込む感じです。
ではさっそく、事前のCSSからいきましょう！
スポンサーリンク
CSS
はてなブログの場合の貼り付け場所
管理画面より、「デザイン」→「カスタマイズ」→「デザインCSS」
コードはこちら
| /*********** | |
| 画像に吹き出し | |
| ************/ | |
| /*吹き出しエリア全体*/ | |
| .fuki { | |
| display: table; | |
| margin-bottom: 0em; | |
| width: 100%; | |
| } | |
| /*吹き出し用画像*/ | |
| .fuki-img { | |
| display: table-cell; | |
| vertical-align: middle; | |
| width: 50%; | |
| padding-right: 5px; | |
| } | |
| /*吹き出し*/ | |
| .fukidashi { | |
| display: table-cell; | |
| vertical-align: middle; | |
| width: 49%; | |
| position: relative; | |
| } | |
| /*吹き出し内テキスト*/ | |
| .fukidashi-p { | |
| border: #F99695 solid 4px; | |
| position: relative; | |
| background: #fff; | |
| padding: 16px 10px; | |
| border-radius: 13px; | |
| } | |
| /*吹き出し三角形*/ | |
| .fukidashi-p:before { | |
| border-right: 23px solid #F99695; | |
| border-bottom: 20px solid transparent; | |
| border-top: 20px solid transparent; | |
| top: 30%; | |
| content: ''; | |
| position: absolute; | |
| left: -23px; | |
| } | |
| /*吹き出し三角形*/ | |
| .fukidashi-p:after { | |
| content: ''; | |
| position: absolute; | |
| border-right: 24px solid #fff; | |
| border-bottom: 20px solid transparent; | |
| border-top: 20px solid transparent; | |
| top: 30%; | |
| left: -17px; | |
| } | |
| /***スマホ用***/ | |
| @media screen and (max-width: 600px){ | |
| .fuki, .fuki-img, .fuki-img img, .fukidashi, .fukidashi-p { | |
| display: block; | |
| width: 100%; | |
| } | |
| .fuki-img { | |
| padding-right: 0; | |
| max-width: 400px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .fukidashi-p { | |
| border-radius: 6px; | |
| background: #fff; | |
| margin-top: 7px; | |
| border: solid 2px #F99695; | |
| } | |
| .fukidashi-p:before { | |
| border-bottom: 20px solid #F99695; | |
| border-left: 30px solid transparent; | |
| border-right: 30px solid transparent; | |
| top: -40px; | |
| content: ''; | |
| position: absolute; | |
| left: 40%; | |
| } | |
| .fukidashi-p:after { | |
| border-bottom: 20px solid #fff; | |
| border-left: 30px solid transparent; | |
| border-right: 30px solid transparent; | |
| top: -37px; | |
| content: ''; | |
| position: absolute; | |
| left: 40%; | |
| } | |
| } |
微調整は…特にないです！
枠の色とか…余白の大きさとか…くらいですかね？！わりと綺麗に表示されるかと思います！
HTML
続いてHTMLですが、これは普通に記事執筆中に「HTML編集」からコピペで以下を貼り付ければいいです。
| <!--画像に吹き出し--> | |
| <div class="fuki"> | |
| <div class="fuki-img"> | |
| <img class="" src="画像URL" alt="" /> | |
| </div> | |
| <div class="fukidashi"> | |
| <div class="fukidashi-p">ここに吹き出し内テキスト。<br>での改行もOK</div> | |
| </div> | |
| </div> | |
| <!--画像に吹き出し--> |
やることは、画像とテキストの差し替えです。
画像に関しては、アップロードした画像からURLをコピペですが、別にimgタグをそのまま丸ごとコピペして置き換えても問題ありません！
テキストに関して1点注意。
文字が少なすぎて1行で終わってしまうと、三角形のレイアウトが崩れてしまい見栄えが悪くなっちゃいます。（PCで）
なので…文字を大きくするとか、無理やり字数かせいで2行にするとか…工夫してください！ｗ
以上で完成です！簡単！😍
ちなみにこれ、スマホで見たらどうなってるかというと…縦になります。
全然OKですね！
まとめ
ぶっちゃけ図解説明は手間がかかって面倒くさいですｗ
ただ、サルワカが証明しているように、本当にユーザーにとって丁寧な、わかりやすい記事を作成しつづけていると必ずgoogleは評価してくれます。
ユーザーに分かりやすく伝える術として「図解説明」はかなり有効な手段ですので、ぜひ皆さんも取り入れてみてはいかがでしょ〜(ﾟ∀ﾟ)