スポンサーリンク

画像付き吹き出しを作ってみた! ~解説用吹き出し編~

2019年8月18日HTML・CSS

今回の記事は「画像付きの吹き出し~解説用~」をHTML、CSSで作ってみようと思います。

きらり

きらり

解説用の画像付きの吹き出し??

言葉を聞いてもなんのことかよく分からないと思います。

Webサイトで画像の横に吹き出しがついていて解説文やポイントなどが書かれているのをみたことないでしょうか。

例えばこんな感じ…

サンプル画像

Jetpackのインストール

WordPress管理画面から[プラグイン]➡︎[新規追加]
画面を開くと一覧に「Jetpack」をすぐにみつけることができると思うので[今すぐインストール]して[有効化]してください。

スマホの方

※左の画像をクリックするとPCなどの大きな画面での表示サンプルを見ることができます。

画像の横に吹き出しがついているので、画像の説明に使うとわかりやすくていいと思いませんか?

私も以前からこれを導入したかったのですが、検索してもなかなか方法がみつからなかったので…試行錯誤して自力で作ってみました!」

きらり

きらり

それで「解説用の画像付き吹き出し」なのね。

結耶

結耶

そうそう♪ようやく納得できるものができたからね(*^^*)

ということで今回は「画像付きの吹き出し ~解説用吹き出し編~」について書いてみたいと思います。

スポンサーリンク

画像付き吹き出し

まずは上のサンプルコードです。

HTML

<div class="description">
  <div class="description-image">
    <img src="画像のURL" alt="代替テキスト">
    <figcaption>画像の説明</figcaption>
  </div>
  <div class="text-box">
    <div class="description-text">
      <p>ここに解説文などを入れる</p>
    </div>
  </div>
</div>

※1行目は入れ物です。

※2行目~5行目は左側の画像部分です。<figcaption>~</figcaption>には画像の説明を入れてください。必要なければ削除してください。

※6行目~10行目が右側の吹き出しの部分になります。

CSS

/*------------------------------
  画像付き吹き出し(解説用)
------------------------------*/
/*全体*/
.description {
      margin:2em 0;
      padding:10px;
      position:relative;
      display:-webkit-flex;
      display:flex;
      background:lightpink;   /*背景色*/
}

.description:before , .description:after {
      clear: both;
      content: "";
      display: block;
}

/*画像部分*/
.description-image {
      float:left;
      max-width:50%;
      min-width:200px;
      margin:0 20px 0 0;    /*画像と吹き出しの間の余白*/
      padding:0;
}

/*画像の説明*/
.description-image figcaption {
      padding:2px;
      font-size:12px;   /*文字サイズ*/
      text-align:center;
}

/*吹き出し部分*/
.text-box {
      margin:0;
      padding:0;
      max-width:50%;
      min-width:200px;
}

.description-text {
       float:left;
      position:relative;
      margin:0;
      padding:10px;    /*吹き出し内側の余白*/
      border:2px solid #aaa;   /*枠線の太さ 線種 色*/
      border-radius:0.5em;   /*角丸*/
      background:#fff;   /*背景色*/
}

.description p {
      margin:0;
      padding:0;
}

/*吹き出しの三角*/
.description-text:before {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-right: 10px solid #aaa;
      top: 25px;
      left: -22px;
}

.description-text:after {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-right: 10px solid #fff;
      top: 25px;
      left: -19px;
}

カスタマイズ

カスタマイズといっても吹き出しの色を変えたりするだけになると思います。なのでここでは吹き出しのカスタマイズについて描きます。

吹き出しの色を変える

まずはそのまま吹き出しの色を変える場合です。

上記のCSSコードの51行目の「background」の色を変更してください。

(51行目)   background: #fff ;

これだけでは三角の部分の色は変わっていないので73行目の「border-right」の色を変えてください。

(73行目)   border-right: 10px solid #fff ;

枠線の色を変える

枠線の色を変えるには49行目の「border」と64行目の「border-right」の色(#aa)を変更してください。

(49行目)   border: 2px solid #aaa ;
(64行目)   border-right: 10px solid #aaa ;

枠線を消す

枠線を消したい場合は該当箇所を削除するか色を背景色と同じにしてください。
(枠線を表示させたいときもあるかもしれないので枠線の色を変更した方が後々楽です。)

枠線はいらないというときは、49行目の「border」を削除か枠線の色を背景色と同じにしてください。

(49行目を削除または色を変更)   border: 2px solid #aaa ;

三角の部分は69行目~76行目を削除するか73行目の色(#aaa)を変更してください。

69行目~76行目を削除  または  73行目の色(#aaa)を変更

64行目の三角の色を背景色と同じ色に変更してください。

(64行目)   border-right: 10px solid #aaa ;

枠線の太さを変える

まずは49行目の「border」nの太さを変更してください。

(49行目)   border: 2px solid #aaa ;

続いて三角部分です。

三角部分は2つの三角を重ねて、少し位置をずらして三角部分の枠線にしています。

なので三角部分の枠線の太さを変えるには66行目か75行目の数値を変更すると太さを変えることができます。

66行目、75行目の数値を大きくすれば三角は左にずれ、数値を小さくすれば三角は右にずらすことができるので太さを調整してください。

三角の位置を変える

三角の位置を変えたいときは、65行目と74行目の「top」の数値を変更してください。
「top」は三角を付ける位置を、「上からどのくらいにするか」を指定しています。65行目n74行目の数値を変更すれば三角の位置を変えることができます。

三角を大きくする

三角をずらしてボックスとじの間に隙間ができて閉まったり、三角を大きくしたいと思う人もいるかもしれません。

三角を大きくするときは63行目・64行目と72行目・73行目の太さを変更すれば大きさを変えることができます。

画像と吹き出しの間の調整

画像と吹き出しの間の調整をする場合は25行目の「margin」の20pxの数値を変更して調整してください。

(25行目)   margin:0 20px 0 0;

スマホの表示

スマホなどの画面が小さいもので見ると画面に収まりません。

CSSコード内の「min-width」がスマホ画面より大きいためこのままでははみ出してしまうのです。

min-widthの数値を小さくすればスマホ画面に収まるようになると思いますが、画像と吹き出しは横並びになるので、スマホのような小さな画面でみると画像も吹き出し部分も見づらくなってしまいます。

なのでスマホなどの小さい画面用にスタイルを記述してみました。

スマホでの表示サンプル

画像と吹き出しを縦並びにしました。

画像と吹き出しを縦並びにしたので三角の位置を左ではなく上に表示するようにしyてあります。

※スマホでこの記事を読んでいる方は上のサンプルとここは左の画像のように表示されていると思います。

スマホ表示用CSS

以下のCSSを追加してください。

/*----スマホ表示用----*/
@media screen and (max-width:560px) {
.description {
      -webkit-flex-direction:column;
      flex-direction:column;
}

.description-image {
      margin:0 0 20px;
      max-width:100%;
      min-width:120px;
      text-align:center
}

.text-box {
      max-width:100%;
      min-width:120px;
}

/*スマホ用三角部分*/
.description-text:before {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-bottom: 10px solid #aaa;
      top: -22px;
      left:47%;
}

.description-text:after {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-bottom: 10px solid #fff;
      top: -19px;
      left:47%;
}
}
 注意!

スマホ表示用CSSの中にも「三角ぶ部分」のスタイルが設定されていますので、背景色や線の色や太さなどを変更した場合、こちらも変更してください。

最後に

今回は『画像付き吹き出し~解説用吹き出し~』について書いてみました。

一応「解説用」としていますがいろいろなことに使えると思います。それに画像と解説が横並びになっていれば、画像や文章を見るために上へ下へと行ったり来たりする必要もなくなります。

よかったら使ってみてください。

きらり

きらり

ところで結耶。「解説用吹き出し編」ってことは他にもあるの?

結耶

結耶

はい!次は画像付き吹き出しの会話風編を書いてみようと思ってる。今までちゃんとした作り方を説明した事ないからねw

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM