今回は、画像にフキダシを付ける方法についてご紹介したいと思います。
毎回お世話になっているこちらのサイト様のような感じで、画像に少し重なる形でフキダシを付ける事ができます。
フキダシの表示イメージ
実際の表示イメージは下記のような感じになります。
画像の隣にフキダシが来て、三角の部分が画像に少し重なるように表示されます。
画像は私が昔描いた「大神」のアマテラスです。
大神は神ゲーなので、みなさんも是非プレイしてみて下さい！
また、PCでは上のようなスタイルで表示されますが、スマートフォンで閲覧する場合は、フキダシが画像の下に来る形で表示されるので便利です。
設定方法
下記のサイト様の「サルワカ風吹き出し（CSS）」に書かれているCSSコードを「デザインCSS」にコピペするだけです。
使い方
上記のサイト様の「サルワカ風吹き出し（HTML）」に書かれているHTMLコードを記事を書くときに適宜コピペして使います。
「見たままモード」では「HTML編集」タブを開いて、挿入したい場所にこのコードをコピペして下さい。
「はてな記法」や「Markdown」の場合は、そのままコピペすればOKです。
ここで、画像のURL部分の貼付け方について少し解説します。
はてなブログの場合、画像を貼り付けるときは、下記のようにURLではなくタグのような感じで貼り付けられます。
[f:id:はてなID:画像の名前（通常は日付）:plain]
そのため、以下のようなHTMLタグで貼り付ける事が可能です。
<div class="fukidesc"> <div class="fukiimg">[f:id:はてなID:画像名:plain]</div> <div class="fukicell"> <div class="fukip"><p>ここに文章を書く</p></div> </div> </div>
はてなブログでの画像の貼り付けは、右のメニューバーの上にある「写真を投稿」から行います。
貼り付けたい画像を選択し、「選択した写真を貼り付け」を押すと、左の編集部分に画像のタグが自動生成されます。
設定が上手くいかないとき
思ったように画像が表示されない場合で、当ブログと同じく「Naked」テーマを使用している方は、下記のコードで置き換えて試してみて下さい。
CSSコード
下記のコードは先程のサイト様のコードを、自分用に少し改変したものです。
表示が上手く行かない方は、こちらのコードを試してみて下さい。
/*↓----サルワカ風画像吹き出し----↓*/ .fukidesc { display: table; margin: 1,0em; width: 95%; } .fukicell { display: table-cell; vertical-align: middle; width: 50%; position: relative; } .fukiimg { display: table-cell; vertical-align: middle; width: 50%; padding-right: 10px; } .fukip { border: #ccc solid 4px; position: relative; background: white; padding: 12px 10px; border-radius: 13px; } .fukip:before { border-right: 23px solid #ccc; border-bottom: 20px solid transparent; border-top: 20px solid transparent; top: 30%; content: ''; position: absolute; left: -23px; } .fukip p { margin: 0; } .fukip: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: 1024px){ .fukidesc, .fukicell, .fukiimg, .fkip { display: block; width: 95%; } .fukicell { padding-right: 0; } .fukiimg { padding-right: 0; text-align: center; } .fukip { border-radius: 6px; background: white; margin-top: -10px; border: solid 3px silver; } .fukip:before { border-bottom: 20px solid silver; border-left: 30px solid transparent; border-right: 30px solid transparent; top: -40px; content: ''; position: absolute; left: 40%; } .fukip:after { border-bottom: 20px solid white; border-left: 30px solid transparent; border-right: 30px solid transparent; top: -37px; content: ''; position: absolute; left: 40%; } } /*↑----サルワカ風画像吹き出し----↑*/
ここで、@media screen and (max-width: 1024px){~}の部分は、スマートフォン用の表示設定になります。
ここでは、横幅が1024px以下のときスマートフォン用の表示設定を使うように設定しています。
