アイコン吹き出し付きボックスをHTMLとCSSで作る！レスポンシブ対応！

2020.03.18

ボックスにアイコンと吹き出しを付け足したものをHTMLとCSSで作ります。

アイコン、吹き出しの内容を自由に変えられるようになっています。

もちろんスマホでも見れるようにレスポンシブ対応です。

HTMLとCSSがわからなくても使えるようにいくつかサンプルを用意しました。

また、カスタマイズをしやすくするためにCSSにコメントを付け足しました。

修正情報

2019/7/6：JIN対応しました
2019/7/7：AMP対応しました

クリックでジャンプ

HTMLとCSSで作るアイコン吹き出し付きボックスデザイン
ボックスの背景色を変える方法
1. 全体の薄い背景部分
2. タイトルの濃い背景部分
吹き出しの形や色を変えたい場合

HTMLとCSSで作るアイコン吹き出し付きボックスデザイン

共通のCSSをコピペ

それぞれHTMLとCSSに大きな差はありません。

ですので、デザインサンプル1のコードを元に他はアレンジされています。

まずは共通のコードになるCSSをコピペしてください。

メモ

WordPressの場合は「外観→テーマエディター→style.css(子テーマ)」。もしくは、「外観→カスタマイズ→追加CSS」に貼り付けてください。

共通のCSS

コード表示

/************************************
** アイコンつきリスト
************************************/
/* ボックス全体 */
.iconbox{
  margin: 0 auto 2em; /* 余白 */
  background: #fef9ed; /* 背景色 */
  border-radius:4px; /* 角丸 */
  max-width:600px; /* 横幅 */
  padding: 0; /* 余白 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2); /* 影 */
}
/* ボックスタイトル */
.iconbox .box-title {
  font-size: 18px; /* 文字サイズ */
  background: #fdc44f; /* 背景色 */
  text-align: center; /* 文字配置 */
  color: #fff; /* 文字色 */
  font-weight: bold; /* 文字太さ */
  letter-spacing: 0.05em; /* 文字間隔 */
  border-radius:4px 4px 0 0; /* 角丸 */
  line-height:1.5; /* 行間 */
  padding:1em 2em; /* 余白 */
}
/* 段落の余白リセット */
.iconbox p {
  margin: 0;/* 文字の余白リセット */
  padding: 0; /* 文字の内側余白リセット*/
}
/* ボックス 中 */
.iconbox .iconbox-wrap{
  display:-webkit-box; /* 配置 */
  	display:-ms-flexbox; /* 配置 */
  display:flex; /* 配置 */
  padding:1.3em 2em; /* 余白 */
}
/* コンテンツ */
.iconbox .iconbox-wrap .box-content{
   width: 97%;/*横幅 */
   margin: 0 3% 0 0 !important;/* 余白 */
   line-height:1.8;/* 行間 */
  -ms-flex-item-align: center;/* 中央寄せ */
   align-self: center;/* 中央寄せ */
}
/* コンテンツ段落 */
.iconbox .iconbox-wrap .box-content p{
  margin-bottom:1em;/*余白 */
}
/* アイコン&吹き出し */
.iconballoon{
  -ms-flex-item-align: end; /* 下部に配置 */
  align-self: flex-end; /* 下部に配置 */
}
/* アイコン */
.iconballoon .icon{
  text-align:center;/* 位置を中央へ */
}
/* アイコン画像 */
.iconballoon .icon img{
  width: 120px; /* 横幅 */
  margin:0; /* 余白 */
}
/* アイコン画像 (amp)*/
.iconballoon amp-img{
  max-width: 120px !important; /* 横幅 */
  margin:0; /* 余白 */
}
/* 吹き出し文字 */
.iconballoon .balloon p{
  line-height:1.4; /* 行間 */
}
/* 吹き出し */
.iconballoon .balloon{
  position:relative; /* 配置 */
  width:140px; /* 横幅 */
  background:#fff; /* 背景色 */
  padding:10px; /* 余白 */
  text-align:center; /* 中央寄せ */
  border:2px solid #999;/* 線(太さ 種類　色) */
  color:#555555;/* 文字色 */
  font-size:14px;/* 文字サイズ */
  font-weight:bold;/* 文字太さ */
  border-radius:10px;/* 角丸 */
  margin-bottom:10px;/* 余白 */
  line-height:1.5; /* 行間 */
}
/* 吹き出し(三角) */
.iconballoon .balloon:after,.balloon:before{
  border: solid transparent;
  content:'';
  height:0;
  width:0;
  position:absolute;
  top:100%;
  left:50%;
}
.iconballoon .balloon:after{
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    margin-left: -10px;
    border-top-color:#FFFFFF;
}
.iconballoon .balloon:before{
   border-color:"rgba(153, 153, 153, 0)";
    border-top-width:12px;
    border-bottom-width:12px;
    border-left-width:12px;
    border-right-width:12px;
    margin-left: -12px;
    margin-top: 1px;
    border-top-color:#999999;
}
/*スマホ*/
@media screen and (max-width: 480px){
/* ボックスタイトル */
.iconbox .box-title {
  font-size: 14px; /* 文字サイズ */
}
/* ボックス 中 */
.iconbox .iconbox-wrap {
    padding: 1em 1em 1em 1.5em;/* 余白 */
}
/* コンテンツ */
.iconbox .iconbox-wrap .box-content{
  font-size:12px;/*文字サイズ */
}
/* アイコン画像 */
.iconballoon .icon img{
  width:80px;/* 横幅 */
  margin-top:5px;/* 余白 */
}
/* アイコン画像(amp) */
.iconballoon amp-img{
  max-width:80px !important;/* 横幅 */
  margin-top:5px;/* 余白 */
}
/* 吹き出し */
.iconballoon .balloon{
  width:80px;/* 横幅 */
  font-size:10px;/* 文字サイズ */
  padding: 1em 0;/* 余白 */
  border: 1px solid #999;/* 線(太さ 種類 色) */
}
/* 吹き出し(三角) */
.iconballoon .balloon:after {
    border-top-width: 12px;
    border-bottom-width: 10px;
    border-left-width: 11px;
    border-right-width: 11px;
    margin-left: -11px;
    border-top-color: #FFFFFF;
}
}
/************************************
** 箇条書き(点)
************************************/
/* 箇条書き */
.iconbox .list {
  list-style: none;/* 行頭記号削除  */
  padding: 0 !important;/* 余白リセット */
  margin: 0 !important;/* 余白リセット */
  border:none;/* 線リセット */
}
/* 箇条書き 行 */
.iconbox .list li { 
  position: relative;/* 行頭記号の配置  */
  margin: 0 0 0.5em 0 !important;/* 余白  */
  padding: 0 0 0.5em 1.4em !important;/* 余白 */
  line-height:1.8;/* 行間 */
}
/* 箇条書き 行頭記号 */
.iconbox .list li:before {
  background-color: #ffa952; /* 記号色 */
  position: absolute; /* 行頭記号の配置 */
  content: ''; /* 空文字 */
  top:13px; /* 上からの距離 */
  left: 0; /* 左からの距離 */
  width: 7px; /* 横幅 */
  height: 7px; /* 縦幅 */
  border-radius: 4px; /*角丸 */
}
/* 箇条書き 行頭記号リセット */
.iconbox .list-number li:after{
	content:'';
}
/*スマホ*/
@media screen and (max-width: 480px){
  /* 箇条書き 行頭記号*/
   .iconbox .list li:before{
     top:8px;/* 上からの距離 */
   }
}
/************************************
** 箇条書き(番号)
************************************/
/* 箇条書き(番号) */
.iconbox .list-number{
   counter-reset:number; /* 番号リセット */
   list-style: none !important;/* 行頭番号削除) */
   padding:0 !important;/* 余白リセット */
   margin:0 !important;/* 余白リセット */
   border:none !important;/* 線リセット */
}
/* 箇条書き(番号) 行 */
.iconbox .list-number li {
   position: relative;/* 配置 */
   margin:0.5em 0 !important;/* 余白 */
   max-width:500px; /* 横幅 */
   padding: 0 0 0.5em 1.8em !important;/* 余白 */
   line-height:1.8;/* 行間 */
}
/* 箇条書き(番号) 行頭番号 */
.iconbox .list-number li:before {
   counter-increment: number;/* 番号 */
   content: counter(number);/* 番号 */
   background-color: #fdc44f; /* 背景色 */
   color: #fff; /* 番号色 */
   position: absolute;/* 配置 */
   font-weight:bold;/* 文字太さ */
   font-size: 14px;/* 文字大きさ */
   border-radius: 50%;/* 角丸 */
   left: 0;/* 左からの距離 */
   top:4px;/* 上からの距離 */
   width: 22px;/* 横幅 */
   height: 22px;/* 縦幅 */
   line-height: 22px;/* 行間 */
   text-align:center;/* 中央寄せ */
}
/*スマホ*/
@media screen and (max-width: 480px){
  /* 箇条書き(番号) 行 */
  .iconbox .list-number li{
     padding: 0 0 0.5em 2em !important;/* 余白 */
  }
  /* 箇条書き(番号) 行頭番号 */
  .iconbox .list-number li:before {
    font-size:10px;/* 文字大きさ */
    width: 18px;/* 横幅 */
    height: 18px;/* 縦幅 */
    line-height: 18px;/* 行間 */
    top:2px;/* 上からの距離 */
  }
}

デザインサンプル1(イエロー×箇条書き記号)

美味しい白菜の見極め方

重量感がある
外側の葉が濃い緑色で厚みがある
葉と葉が詰まっているもの
株の切り口が新鮮なもの

ここに注目！！

基本となるHTML

<div class="iconbox">
<div class="box-title">ここにタイトル</div>
<div class="iconbox-wrap">
<div class="box-content">
<ul class="list">
 	<li>リスト1</li>
 	<li>リスト2</li>
 	<li>リスト3</li>
</ul>
</div>
<div class="iconballoon">
<div class="balloon">
吹き出し内容
</div>
<div class="icon">アイコン画像をここに挿入</div>
</div>
</div>
</div>

文字装飾のHTML、CSSは含まれていません。

アイコン画像は<img>タグでそのまま入れてください。WordPressの場合はメディアを追加からでOK！

アイコン画像のサイズは決まりはありませんが画像の形によっては崩れる可能性があります。サンプルは円(正方形)の形になっています。

CSSの追記は必要ありません。

デザインサンプル2(ピンク×箇条書き番号)

効率の良い掃除の手順

邪魔なものを片付ける
上から下へホコリ取り
全体を掃除機がけ
フローリングを床拭き
絨毯やソファーをコロコロ掛け

ここを解説！

コード表示

HTML

<div class="iconbox iconbox-pink">
<div class="box-title box-head-pink">ここにタイトル</div>
<div class="iconbox-wrap">
<div class="box-content">
<ol class="list-number">
   <li>リスト1</li>
   <li>リスト2</li>
   <li>リスト3</li>
</ol>
</div>
<div class="iconballoon">
<div class="balloon">
吹き出し内容
</div>
<div class="icon">アイコン画像をここに挿入</div>
</div>
</div>
</div>

1行目と2行目にclassを追加。

5行目がolタグになり、クラス名が変更されています。

CSS

/************************************
** アイコンフキダシボックス(ピンク)
************************************/
/* ボックス全体 */
.iconbox-pink{
  background: #fdf1f1 !important; /* 背景色 */
}
/* ボックスタイトル */
.iconbox-pink .box-head-pink{
  background: #f7bcbc !important; /* 背景色 */
}
/* 箇条書き(番号) 行頭番号 */
.iconbox .list-number li:before {
  background: #f7bcbc !important; /* 背景色 */
}

デザインサンプル3(ブルー)

「了解」は目上に使ってもいい？

ビジネスマナーで「了解」という言葉は目上の人に使ってはいけない。

これ、実は間違っています。「了解致しました」は敬語として目上の人に使っていい言葉です。

間違ったビジネスマナーだね！

コード表示

HTML

<div class="iconbox iconbox-blue">
<div class="box-title box-head-blue">ここにタイトル</div>
<div class="iconbox-wrap">
<div class="box-content">
<p>ここにコンテンツ</p>
</div>
<div class="iconballoon">
<div class="balloon">吹き出し内容</div>
<div class="icon">アイコン画像挿入</div>
</div>
</div>
</div>

1行目と2行目にclassを追加してます(iconbox-blue、box-head-blue)。

CSS

/************************************
** アイコンフキダシボックス(ブルー)
************************************/
/* ボックス全体 */
.iconbox-blue{
  background: #f2fbff !important; /* 背景色 */
}
/* ボックスタイトル */
.iconbox-blue .box-head-blue{
  background: #00bfff !important; /* 背景色 */
}

デザインサンプル4(グリーン)

猫の豆知識

猫には鎖骨がありません。鎖骨がないため狭いところに入れたり体が柔軟です。

運動能力が高いのも鎖骨がないことが一つの理由です。

ふーん！

コード表示

HTML

<div class="iconbox iconbox-green">
<div class="box-title box-head-green">ここにタイトル</div>
<div class="iconbox-wrap">
<div class="box-content">
<p>ここにコンテンツ</p>
</div>
<div class="iconballoon">
<div class="balloon">吹き出し内容</div>
<div class="icon">アイコン画像挿入</div>
</div>
</div>
</div>

1行目と2行目にclassを追加してます(iconbox-green、box-head-green)。

CSS

/************************************
** アイコンフキダシボックス(グリーン)
************************************/
/* ボックス全体 */
.iconbox-green{
  background: #eafaf7 !important; /* 背景色 */
}
/* ボックスタイトル */
.iconbox-green .box-head-green{
  background: #2fcdb4 !important; /* 背景色 */
}

デザインサンプル5(背景&吹き出しなし)

美味しいトウモロコシの見極め方

葉の緑色が濃いもの、そして粒が均等で指で押してみて少し凹むくらいがGood！穂先が濃い茶色、かつ縮れてるのもがオススメです。

コード表示

HTML

<div class="iconbox iconbox-bg-none">
<div class="box-title">ここにタイトル</div>
<div class="iconbox-wrap">
<div class="box-content">
ここにコンテンツ
</div>
<div class="iconballoon">
<div class="icon">アイコン画像を挿入</div>
</div>
</div>
</div>

1行目目にclassを追加してます(iconbox-bg-none)。

このように<div class=”balloon”>吹き出し内容</div>を削除すれば吹き出しを消すこともできます。

CSS

/************************************
** アイコンフキダシボックス(背景なし)
************************************/
/* ボックス全体 */
.iconbox-bg-none{
  background: none !important; /* 背景色 */
}

デザインサンプル6(イエロー×タイトルなし)

うまい！やすい！はやい！
みんなの食卓でありたい。
おいしくって、あんしん。

つゆだくで！

コード表示

HTML

<div class="iconbox">
<div class="iconbox-wrap">
<div class="box-content">
<ul class="list">
 	<li>リスト1</li>
 	<li>リスト2</li>
 	<li>リスト3</li>
</ul>
</div>
<div class="iconballoon">
<div class="balloon">吹き出し内容</div>
<div class="icon">アイコン画像挿入</div>
</div>
</div>
</div>

このように<div class=”box-title”>ここにタイトル</div>を消せばタイトルを非表示にできます。

ボックスの背景色を変える方法

背景色など色を変えたい場合はCSSの一部を変更します。

例えばデザインサンプル1の色を変えたい場合

全体の薄い背景部分

.iconbox{
  margin: 2em auto; /* 余白 */
  background: #fef9ed; /* 背景色 */
  border-radius:4px; /* 角丸 */
  max-width:600px; /* 横幅 */
  padding: 0; /* 余白 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2); /* 影 */
}

CSSの「.iconbox」のbackgroundのカラーコードを変更します。

例えば白の場合は「background: #ffffff;」になります。

タイトルの濃い背景部分

/* ボックスタイトル */
.iconbox .box-title {
  font-size: 18px; /* 文字サイズ */
  background: #fdc44f; /* 背景色 */
  text-align: center; /* 文字配置 */
  color: #fff; /* 文字色 */
  font-weight: bold; /* 文字太さ */
  letter-spacing: 0.05em; /* 文字間隔 */
  border-radius:4px 4px 0 0; /* 角丸 */
  line-height:1.5; /* 行間 */
  padding:1em 2em; /* 余白 */
}

タイトルの背景色は「.iconbox .box-title」のbackgroundのカラーコードを変更すればOK！

文字の色を変えたい場合は文字色と書いてあるcolorのカラーコードを変更してください。

吹き出しの形や色を変えたい場合

吹き出しは「吹き出しデザインジェネレーター」を使っています。

参考吹き出しデザインジェネレーター

クラス名を「iconballoon」で作り、CSSを置き換えてください。

CSS該当箇所

/* 吹き出し */
.iconballoon .balloon{
  position:relative; /* 配置 */
  width:140px; /* 横幅 */
  background:#fff; /* 背景色 */
  padding:10px; /* 余白 */
  text-align:center; /* 中央寄せ */
  border:2px solid #999;/* 線(太さ 種類　色) */
  color:#555555;/* 文字色 */
  font-size:14px;/* 文字サイズ */
  font-weight:bold;/* 文字太さ */
  border-radius:10px;/* 角丸 */
  margin-bottom:10px;/* 余白 */
  line-height:1.5; /* 行間 */
}
/* 吹き出し(三角) */
.iconballoon .balloon:after,.balloon:before{
  border: solid transparent;
  content:'';
  height:0;
  width:0;
  position:absolute;
  top:100%;
  left:50%;
}
.iconballoon .balloon:after{
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    margin-left: -10px;
    border-top-color:#FFFFFF;
}
.iconballoon .balloon:before{
   border-color:"rgba(153, 153, 153, 0)";
    border-top-width:12px;
    border-bottom-width:12px;
    border-left-width:12px;
    border-right-width:12px;
    margin-left: -12px;
    margin-top: 1px;
    border-top-color:#999999;
}

名前:はてなブログ用もほしい :投稿日：2019/07/08(月) 06:28:35 ID：Y3NTU0NDY
記事冒頭にぴったりのデザインで早速使わせて頂きました。もし可能であればはてなブログ用があると助かります。現状でも機能しますが、アイコンのサイズがおかしくなってしまうようです。
返信

名前:ぽんひろ :投稿日：2019/07/08(月) 12:12:49 ID：I0NTk4Nzg
ありがとうございます。
もしよろしければ該当するURLを教えていただいでもよろしいでしょうか？
返信

名前:ちまめ :投稿日：2019/07/22(月) 15:10:26 ID：g1MTY3Njk
はじめまして！
サイコーです！
CSSのコピペって、たいていエラーが出てイライラしちゃうけど
ぽんひろさんのはすんなりで、気持ちいいくらいでした！
ありがとうございます！！
返信

名前:ぽんひろ :投稿日：2019/07/23(火) 11:29:43 ID：QwMDU2ODc
>ちまめさん
コメントありがとうございます！
エラーでるとイライラしますよね！笑
上手くいって良かったです！
返信

名前:どらかめ :投稿日：2019/09/26(木) 02:44:01 ID：czMTUzNzM
ぽんひろさんのカスタマイズ本当に可愛くていつも活用させて頂いてます。
一つ疑問がありまして、質問よろしいでしょうか？
現在、cssの入れ子で全ての記事画像に枠線と影がつくように指定しています。
すると、こちらのカスタマイズのアイコン画像まで枠線でくくられて、立体的になってしまうんです。
初歩的な質問で申し訳ないんですが、これってどうにかなりませんでしょうか？
よろしくお願いします。
返信

名前:ぽんひろ :投稿日：2019/09/26(木) 12:11:39 ID：k0NDQ5MTE
＞どらかめさん
コメントありがとうございます。
/* アイコン画像 */
.iconballoon .icon img{
box-shadow:none;
}
で消えますかね？
返信

名前:どらかめ :投稿日：2019/09/29(日) 02:29:57 ID：AzNDUzNTI
ご丁寧にありがとうございます。
おかげさまで影は消えたのですが、枠線は消えずに残ってしまっています。
なんどもお手間をかけてすみません、、、
申し訳なさすぎるので、本当に気が向いたら返信いただけると嬉しいです。
返信
名前:どらかめ :投稿日：2019/09/29(日) 02:36:07 ID：AzNDUzNTI
度々すみません。
以下のようにcss に書き込んだら消えました！
/* アイコン画像 */
.iconballoon .icon img{
box-shadow:none;
border:none;
ありがとうございました！！
これからもカスタマイズ楽しみにしています♪
返信

名前:あ-む :投稿日：2019/11/04(月) 18:09:13 ID：U2MTIxNzM
初めまして！とても可愛いデザインで素敵です！
初歩的なことで申し訳ないのですが、デザインサンプル2(ピンク×箇条書き番号)のHTML➡AddQuicktagへ追加したのですが、背景色や番号の色付けがなく
ここにタイトル
リスト1
リスト2
リスト3
吹き出し内容
アイコン画像をここに挿入
という表記になってしまいます。お忙しいところ大変恐縮ですが反映できる解決策を教えてくださると嬉しいです。
返信

名前:ぽんひろ :投稿日：2019/11/05(火) 11:41:08 ID：E3NTkwOTg
＞あーむさん
初めまして！ありがとうございます！
共通のCSSはコピペしましたでしょうか。
もしコピペしてるにも関わらず変化がなければ何らかの理由でCSSが読み込まれてない可能性があります。(キャッシュが残ってるなど)
返信

名前:あ-む :投稿日：2019/11/05(火) 14:28:22 ID：A2NDQyMzg
ぽんひろ様　さっそく返信ありがとうございます！
CSS、追加していませんでした＞＜　書いてくださっているのに情けない…泣
ありがとうございます。可愛いCSS、これからも楽しみにしています(*’▽’)
返信
名前:ぶーぶ :投稿日：2020/01/14(火) 16:30:13 ID：I0MDI3MDc
ぽんひろ様
いつもかわいいカスタマイズありがとうございます！
大変活用させて頂いております。
素人の質問で申し訳ございませんが、今回のアイコン吹き出し付きボックスの色をグレーに変えたいのですが、どうすればよろしいでしょうか？
また同じ記事に色をかえたアイコン吹き出し付きボックスを使うかんじです。
ご返信お待ちしております。
返信

名前:ぽんひろ :投稿日：2020/01/16(木) 13:13:24 ID：g4MjE5Mjc
＞ぶーぶさん
ありがとうございます！
グレーに変えるにはCSSの#から始まる6つの英数字を変更します。
Googleでカラーコードで検索すると出てくると思います。
グレーのカラーコードをタイトルの方とボックスの方に入れ変えればOKです。
同じ記事に別の色のボックスを使う場合は別々のHTMLを用意する必要があります。
といっても変える箇所は1行目と2行目だけです。
サンプルを見るとiconbox-greenやbox-head-greenなど色が入ってるところがあると思います。
そこをiconbox-grey、box-head-greyと変更し、CSSを追加してください。
.iconbox-grey{
background: #○○○○○○ !important; /* 背景色 */
}
/* ボックスタイトル */
.iconbox-green .box-head-green{
background: #○○○○○○ !important; /* 背景色 */
}
返信

名前:ぶーぶ :投稿日：2020/01/30(木) 08:57:29 ID：ExODY2Nzc
ぽんひろさん
ご返信が遅れまして誠に申し訳ございません！
のちほど実践してみます！
再度ご報告させていただきます！
返信

名前:ポル :投稿日：2020/02/12(水) 01:04:06 ID：MxNDU4MDY
こんにちは。
いつも素敵なカスタマイズやseasonを活用させて頂いております。ありがとうございます。
ひとつ質問なのですが、デザインサンプル１と２で、項目を５つにすると右の吹き出しの三角部分に細い線が出てしまいます。
スマホでは大丈夫ですが、自分のパソコンからだと出るみたいです。（このページのデザイン２も線が入って見えます）
ほとんど気にはならないのですが、もし簡単に治せそうでしたら方法を教えていただきたいです。
よろしくお願いしますm(_ _)m
返信

名前:ぽんひろ :投稿日：2020/02/28(金) 18:23:17 ID：I5NTg5MDI
＞ポルさん
返信遅くなりまして申し訳ございません。
そうなんですね、ご報告ありがとうございます。
使ってるインターネットブラウザを教えていただけますか？
バージョンも教えていただけると助かります。
よろしくお願いします。
返信

名前:ポル :投稿日：2020/03/01(日) 04:02:15 ID：Q2NjM1NjQ
ぽんひろさん
ご返信ありがとうございます。
なるほど、ブラウザによって微妙に変わってしまったりするんですね。
使っているのはGoogle Chrome
バージョン: 80.0.3987.122　です。
よろしくお願いします。
返信

名前:ようすけ :投稿日：2020/04/16(木) 15:44:41 ID：I3OTM5MDk
お世話になります！
いつもカスタマイズを参考にしています！(*’▽’)
お忙しいところ申し訳ないのですが、質問があります。
「デザインサンプル1(イエロー×箇条書き記号)」を見出しごとに、【全体の薄い背景部分・タイトルの濃い背景部分】の色を変更する場合どうしたらいいのでしょうか？
例えばですが、最初の見出しは(ブルー×箇条書き記号)、最後の見出しは(グリーン×箇条書き記号）というように、部分ごとで色を指定する方法です。
可能であれば、是非教えていただきたいです！（面倒でなければお願いします）
よろしくお願い致します。
返信

名前:ぽんひろ :投稿日：2020/04/23(木) 17:51:03 ID：M5NDQ1NzA
＞ようすけさん
ありがとうございます！
ど、どういうことでしょうか？
一つの色でなく、他の色を使う場合はHTMLのclassを変更すれば大丈夫です！
返信

名前:かお :投稿日：2021/03/17(水) 10:49:33 ID：g4MzE1ODY
お世話になります。
いつも参考にさせていただいています。
お忙しいところすみませんが質問があります。
私はJINを使っているのですが、全てのボックスの色がイエローになってしまいます。
本当はグリーンを使いたいのですが・・・。
お時間ある時にでも教えていただければ幸いです。
返信
名前:れど :投稿日：2021/08/12(木) 09:50:08 ID：k2ODkyNDM
お世話になっております。redoブログの管理人のれどと申します。
こちらの記事のブログカスタマイズの記事、とても素敵だと思い以下の私のはてなブログの記事でも紹介させて頂きたいのですが、よろしいでしょうか。
https://redo5151.hatenablog.com/
お返事お待ちしております。
返信
名前:ゆうみ :投稿日：2021/11/06(土) 22:05:20 ID：IxOTI5MTM
いつもカスタマイズ時にとても助かっています。
今回はアイコン吹き出しのボックスデザインを使用させていただいたのですが、
アイコン画像の入れ方がイマイチわからず、
画像を指定の箇所に切り取り・貼り付けで挿入しています。
この挿入したブロックを再利用ブロックとして使用しているのですが、
後日、再利用ブロックを表随すると毎回アイコン画像が消えてしまいます。
こちらのボックスは再利用ブロックで使用した場合、
毎度アイコン画像は挿入しなければいけない、ということになりますか？
返信
名前:カスタマイズ大好き :投稿日：2021/11/07(日) 15:52:41 ID：QwODU2MTI
初めてご連絡させていただきます。
デザインサンプル3(ブルー)のところにある青い男の人のアイコンですが、どちらのサイトからダウンロードされたものでしょうか？フリーの素材であれば同じものをと思っておりまして。
カスタマイズのデザインどれも素敵ですね。いくつか真似させていただきました！
返信