黒木ノ水岩

黒木ノ水岩

自分の経験や実体験を元に、商品紹介や様々なHowTo等を紹介していきます。尚、当ブログの利用や掲載内容等により生じた損害等の責任は一切負いかねますので、ご了承下さい。

【はてなブログ】画像にフキダシを付ける方法!

今回は、画像にフキダシを付ける方法についてご紹介したいと思います。


毎回お世話になっているこちらのサイト様のような感じで、画像に少し重なる形でフキダシを付ける事ができます。

saruwakakun.com

フキダシの表示イメージ

実際の表示イメージは下記のような感じになります。
画像の隣にフキダシが来て、三角の部分が画像に少し重なるように表示されます。

f:id:ride_wa:20181124180316p:plain

画像は私が昔描いた「大神」のアマテラスです。
大神は神ゲーなので、みなさんも是非プレイしてみて下さい!


また、PCでは上のようなスタイルで表示されますが、スマートフォンで閲覧する場合は、フキダシが画像の下に来る形で表示されるので便利です。

設定方法

下記のサイト様の「サルワカ風吹き出しCSS)」に書かれているCSSコードを「デザインCSS」にコピペするだけです。

bitcoin-mashimashi.com


使い方

上記のサイト様の「サルワカ風吹き出し(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以下のときスマートフォン用の表示設定を使うように設定しています。


参考サイト様

今回参考にさせて頂いたサイト様は以下のとおりです。感謝!

bitcoin-mashimashi.com