【ブログカスタマイズ】はてなブログで「アイコン吹き出し入りボックスリスト」をHTML,CSSで実装する方法

はてなブログ　リストボックス

今回はコピペで簡単にHTML,CSSを用いて「はてなブログ」に対応したボックスにアイコン吹き出しをつけるブログカスタマイズ方法を紹介したいと思います。

もちろん「無料版はてなブログ」でもコピペで簡単に実装できますよ。WordPressじゃないとサイトデザインが整えられないということは決してありません。

サイトデザインを整えることは「滞在率の増加」や「直帰率の低下」に繋がり、”SEO対策”にも重要ですので、ぜひ「吹き出し付ボックスリスト」も実装してみましょう。

なぜ「ブログカスタマイズ」が重要か
はてなブログ対応のアイコンの吹き出し入りボックス「共通CSSコード」
はてなブログ対応のデザインサンプル例(オレンジバージョン)
- アイコンの吹き出し入りボックス「HTMLコード」(オレンジ)
はてなブログ対応のデザインサンプル例(ピンクバージョン)
- アイコンの吹き出し入りボックス「CSSコード」(ピンク)
- アイコンの吹き出し入りボックス「HTMLコード」(ピンク)
はてなブログ対応のデザインサンプル例(グリーンバージョン)
- アイコンの吹き出し入りボックス「CSSコード」(グリーン)
- アイコンの吹き出し入りボックス「HTMLコード」(グリーン)
WEBデザインを学ぶのにおすすめなプログラミングスクール
- 超実践型プログラミングスクール【.pro】
まとめ

なぜ「ブログカスタマイズ」が重要か

ブログカスタマイズ

特に「無料版はてなブログ」で運用しているブログは「はてなブログ」からの余分な広告も入り、見栄えが良くないです。

サイトを訪問する側の立場からするとパッと見の印象は大切です。

特にサイトを訪れてくれた方が情報としては十分満足できたとしても、パッと見の悪さですぐに見るのを辞めてしまう状態を作るのは大変もったいないです。

そこで少しの努力で多少なりとも見栄えが増しになれば、見る側にとっても見せる側にとってもWin-Winですよね。

つまり、ブログデザインを見やすく修正するには「CSS」によるブログデザインが必須です。レイアウトの見やすさは「直帰率の低下＝滞在率の増加」にも繋がります。直帰率に関してはSEOにも関係しています。

一般的に、Google検索流入で上位表示されるには「ドメインの信用度(独自ドメイン)、アクセス数、滞在率など」が重要であると言われています。

我々が検索する立場からすると、最初の1ページ目から検索しますよね。そこで上位表示された情報から読み漁ります。

つまり、上位ページに表示されるとアクセス数がアップするという仕組みです。

「はてなブログ」と「WordPress」の収益面に関する比較はこちらで詳しく紹介しています。

redo5151.hatenablog.com

はてなブログ対応のアイコンの吹き出し入りボックス「共通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;/* 上からの距離 */
  }
}

上記共通CSSになりますので、このコードをCSSに貼り付けます。

デザインCSS

はてなブログの「管理画面」→「デザイン」→「カスタマイズ」→「｛｝デザインCSS」に上記コードをコピペしましょう。

はてなブログではデフォルトのデザイン設定と重複している場合はうまく適用されない場合があります。

その場合は、はてなブログの記事作成画面の「HTML編集」に「Style」で貼り付けましょう。

具体的には下記のように「Style構文」で囲います。

はてなブログ対応のデザインサンプル例(オレンジバージョン)

BUMPのおすすめ曲TOP3

ぜひ一度聴いてみてね

このような見やすい「吹き出し付きのリストボックスデザイン」があると、閲覧する人にとっても分かりやすいですよね。

redo5151.hatenablog.com

アイコンの吹き出し入りボックス「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編集モード」で上記コードを貼り付けます。コードを貼り付ける前に必ず事前バックアップをとっておきましょう。

・「タイトル」に好きなボックス名をつけて下さい。
・「リスト1,2,3」にお好きなリストを決めましょう。
・「吹き出し」にアイコンに示したいメッセージを自由に記入してください。
・「アイコン画像」に自由に画像を挿入します。

はてなブログ対応のデザインサンプル例(ピンクバージョン)

紫外線UV-C除菌ケースの選び方

UV-C波長帯である「253.7nm」が理想
電圧は高いほど殺菌力も高い(5V以上推奨)
ケースのサイズが適切か

選ぶポイントだよ

ピンクにすると少し柔らかいイメージに変わります。色あいを変えるだけで全然見え方が変わると思います。

「紫外線UV-C」除菌ケースについてはこちらで紹介

redo5151.hatenablog.com

アイコンの吹き出し入りボックス「CSSコード」(ピンク)

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

「共通のCSSコード」に追加で上記CSSコードもコピペしましょう。

はてなブログの「管理画面」→「デザイン」→「カスタマイズ」→「｛｝デザインCSS」に上記コードを記入してください。

上記CSSコードがうまく適用されないと、「オレンジ色のベース色」になってしまいますので、注意しましょう。

アイコンの吹き出し入りボックス「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>

こちらも同じように「HTML編集モード」で上記コードを貼り付けます。コードを貼り付ける前に必ず事前バックアップをとっておきましょう。

はてなブログ対応のデザインサンプル例(グリーンバージョン)

格安SIMにはOCNモバイルONEがおすすめ

格安SIMに乗り換えれば、携帯の月額を「2000円」に抑えることも可能です。私がおすすめするMVNOは”OCN モバイル ONE ”です。

OCNモバイルONEがおすすめだよ

”緑基調”のおしゃれなボックスデザインも簡単に作成できます。

redo5151.hatenablog.com

アイコンの吹き出し入りボックス「CSSコード」(グリーン)

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

「共通のCSSコード」に追加で上記CSSコードもコピペしましょう。方法は「オレンジバージョン」や「ピンクバージョン」と同じ要領でOKです。

アイコンの吹き出し入りボックス「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>