コピペするだけ!CSSを活用して箇条書き(リスト)や囲み枠(ボックス)をカスタマイズする方法(はてなブログ)

f:id:smatech:20190119134227j:plain

こんにちは、ヨシタカです!
みなさん、ブログ楽しんでますか?

今回は、箇条書き(リスト)や囲み枠(ボックス)についてCSSを活用したカスタマイズにトライしてみましたのでご紹介したいと思います。

【Webアイコン】【箇条書き(リスト)】【囲み枠(ボックス)】のトリプル活用で、こんな感じになります。

  • 文章ばかりのブログ記事をどうにかしたい人
  • 箇条書き(リスト)や囲み枠(ボックス)をカスタマイズしてみたい人
  • CSSを少しさわってみたい人
  • はじめの作業が少し大変ですが、一度CSSに設定してしまえばあとはラクラクです♪
    さっそくやってみましょう!

    そもそもCSSってなに?

    CSSとは、Cascading Style Sheets(カスケーディング・スタイル・シート)の略語で、ウェブページのスタイルを指定するための言語なんです。

    CSSをいじることで、サイズレイアウトなど ウェブページをどのようなスタイルで表示するか指定することができるんです。

    HTML(ブログ記事)をいじって文字や色を直接指定することも出来ますが、あまりスマートではないのでおすすめされないようです。。。

    WebデザインをいじるならCSSをいじる、これが基本となります。

    CSSを活用してリストやボックスをカスタマイズする方法

    それでは、さっそくCSSの設定をしていきます。こちらは一度設定してしまえば、編集は不要です。

    この設定をすることで、毎回ボックスのために複雑なコードをコピペする必要がなくなります^^

    はてなブログの場合、

    デザイン⇒カスタマイズ⇒{}デザインCSS

    でCSSの中身を編集できます。

    変更前には必ずバックアップをとっておいてくださいね。
    メモ帳にコピペで大丈夫です。

    箇条書き(リスト)をカスタマイズ

    ふつうの番号付きリストだと、こんな感じになります。

    1. 番号付きリスト1

    2. 番号付きリスト2

    3. 番号付きリスト3

    うーん、これだと何だか味気ないなぁ・・・。

    そこで、ちょっとCSSをいじってみると、こんな風になります。

  • 番号付きリスト1
  • 番号付きリスト2
  • 番号付きリスト3
  • なんかおしゃれですよね。

    丸数字つきリスト

    それではさっそくやってみましょう!

  • CSSにコピペ
  • 記事編集画面にコピペ
  • あとは中身を書き換えるだけ
  • ためしに下記CSSをコピペして{}デザインCSSに貼ってみてください。

    CSSのコードはここをクリック

    .list01 {
      counter-reset:number; /*数字をリセット*/
      list-style-type: none!important; /*数字を一旦消す*/
      padding:0.5em;
      background: #f9fff5;
    }
    .list01 li {
      position: relative;
      padding-left: 30px;
      line-height: 1.5em;
      padding: 0.5em 0.5em 0.5em 30px;
    }
    
    .list01 li:before{
      /* 以下数字をつける */
      position: absolute;
      counter-increment: number;
      content: counter(number);
      /*以下数字のデザイン変える*/
      display:inline-block;
      background: #4abdac;
      color: white;
      font-family: 'Avenir','Arial Black','Arial',sans-serif;
      font-weight:bold;
      font-size: 15px;
      border-radius: 50%;
      left: 0;
      width: 25px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      /*以下 上下中央寄せのため*/
      top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
    }
    

    実際にCSSにコピペして保存したら記事編集画面を開きます。

    見たままモードの場合はHTMLタブに、Markdownモードの場合はそのまま下のコードをコピペします。

    <div class="list01">
    <li>こんな風に</li>
    <li>出れば</li>
    <li>成功です!</li>
    </div>
    

    すると、

  • こんな風に
  • 出れば
  • 成功です!
  • とてもかんたんですよね。

    色はCSSに記述されている#xxxxxxを変更することで変えることができます。

    カラーコードはこちらのサイトさんが参考になりますよ。
    WEB色見本 原色大辞典 - HTMLカラーコード

    ぜひ、ブログテーマにあった色に変更してみてくださいね^^

    付箋風番号付きリスト

    付箋風の番号付きリストです。

  • CSSにコピペ
  • 記事編集画面にコピペ
  • あとは中身を書き換えるだけ
  • CSSのコードはここをクリック

    .list02 {
      counter-reset:number; /*数字をリセット*/
      list-style-type: none!important; /*数字を一旦消す*/
      padding:0;
    }
    .list02 li {
      position: relative;
      padding: 0.5em;
      line-height: 1.5em;
      background: #f9fff5;
      border-left : solid 35px #4abdac;
      margin-bottom: 5px;
    }
    .list02 li:before{
      /* 以下数字をつける */
      position: absolute;
      counter-increment: number;
      content: counter(number);
      /*数字のデザイン変える*/
      display:inline-block;
      color: white;
      font-family: 'Avenir','Arial Black','Arial',sans-serif;
      font-weight:bold;
      font-size: 15px;
      top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      left: -35px;
      width: 35px;
      height: 1em;
      line-height: 1;
      text-align: center;
    }
    

    実際にCSSにコピペして保存したら、記事編集画面を開きます。

    見たままモードの場合はHTMLタブに、Markdownモードの場合はそのまま下のコードをコピペします。

    <div class="list02">
    <li>こんな風に</li>
    <li>出れば</li>
    <li>成功です!</li>
    </div>
    
  • こんな風に
  • 出れば
  • 成功です!
  • POINT付き箇条書きリスト

    POINT付き箇条書きリストです。

  • CSSにコピペ
  • 記事編集画面にコピペ
  • あとは中身を書き換えるだけ
  • アイコンを使っていますのでFont Awesomeを導入していない方はまずアイコンを使えるよう設定してくださいね。

    www.smatechblog.com

    CSSのコードはここをクリック

    .list03 {
      border: solid 2px #4abdac;
      padding: 0.5em;
      position: relative;
      margin-top: 2em;
    }
    .list03 li {
      line-height: 1.5;
      padding: 0.5em 0 0.5em 1.4em;
      border-bottom: dashed 1px silver;
      list-style-type: none!important;
    }
    .list03 li:last-of-type {
      border-bottom: none;
    }
    .list03 li:before {
      /*リスト内のアイコン*/
      font-family: "FontAwesome";
      content: "\f138";/*アイコン種類*/
      position: absolute;
      left : 0.5em; /*左端からのアイコンまで*/
      color: #4abdac; /*アイコン色*/
    }
    .list03 li:after {
      /*タイトルタブ*/
      background: #4abdac;
      color: #fff;
      font-weight: bold;
      position: absolute;
      left: -2px;
      bottom: 100%;
      padding: 1px 7px;
      content: "POINT";/*タブの文字*/
      letter-spacing: 0.05em;/*字間*/
    }
    

    実際にCSSにコピペして保存したら、記事編集画面を開きます。

    見たままモードの場合はHTMLタブに、Markdownモードの場合はそのまま下のコードをコピペします。

    <div class="list03">
    <li>こんな風に</li>
    <li>出れば</li>
    <li>成功です!</li>
    </div>
    
  • こんな風に
  • 出れば
  • 成功です!
  • POINTなし箇条書きリスト

    POINTなしの箇条書きリストです。

  • CSSにコピペ
  • 記事編集画面にコピペ
  • あとは中身を書き換えるだけ
  • シンプルに使いたい方はオススメです^^

    CSSのコードはここをクリック

    .list04 {
      border: solid 2px #4abdac;
      border-radius: 5px;
      padding: 0.5em 1em 0.5em 2.3em;
      position: relative;
    }
    
    .list04 li {
      line-height: 1.5;
      padding: 0.5em 0;
      list-style-type: none!important;
    }
    
    .list04 li:before {
    
      font-family: "FontAwesome";
      content: "\f138";/*アイコンの種類*/
      position: absolute;
      left : 1em;/*左端からのアイコンまでの距離*/
      color: #4abdac;/*アイコン色*/
    }
    

    <div class="list04">
    <li>こんな風に</li>
    <li>出れば</li>
    <li>成功です!</li>
    </div>
    
  • こんな風に
  • 出れば
  • 成功です!
  • 囲み枠(ボックス)にアイコン付きリストを使う

    次は、囲み枠(ボックス)にアイコン付き箇条書き(リスト)を使ってみましょう!

    よくブログに囲み枠の中にアイコンが使われているの見ますよね。なかなかおしゃれですよね。

    こちらもCSSを活用すればかんたんに出来ます。

    タイトル付きボックス(矢印アイコン)

    よくブログでみるタイトル付きボックスです。
    Webアイコンは矢印を使っています。

    CSSのコードはここをクリック

    .box01 {
        position: relative;
        margin: 2em 0;
        padding: 0.5em 1em;
        border: solid 3px #f78733;
    }
    .box01 .box-title {
        position: absolute;
        display: inline-block;
        top: -27px;
        left: -3px;
        padding: 0 9px;
        height: 25px;
        line-height: 25px;
        vertical-align: middle;
        font-size: 16px;
        background: #f78733;
        color: #ffffff;
        font-weight: bold;
        border-radius: 5px 5px 0 0;
    }
    .box01 p {
        margin: 0;
        padding: 0;
    }
    .box01 ul li {
      line-height: 1.5;
      padding: 0.5em 0;
      list-style-type: none!important;
    }
    .box01 ul li:before {/*疑似要素*/
      font-family: "FontAwesome";
      content: "\f138";/*アイコンの種類*/
      position: absolute;
      font-size: 16px;
      left : 1.0em;/*左端からのアイコンまでの距離*/
      color: #f78733;/*アイコン色*/
    }
    

    実際にCSSに保存したら記事編集画面で下のコードをコピペします。

    箇条書きなしバージョン。

    ボックスのタイトル

    ここに文章

    <div class="box01">
    <span class="box-title">ボックスのタイトル</span>
    <p>ここに文章</p>
    </div>
    

    箇条書きありバージョン。

    ボックスのタイトル
    • 箇条書きにしたい内容1
    • 箇条書きにしたい内容2
    • 箇条書きにしたい内容3
    <div class="box01">
    <span class="box-title">ボックスのタイトル</span>
    <ul>
    <li>箇条書きにしたい内容1</li>
    <li>箇条書きにしたい内容2</li>
    <li>箇条書きにしたい内容3</li>
    </ul>
    </div>
    

    タイトル付きボックス(チェックアイコン)

    タイトルを囲み枠上に入れて、アイコンをチェックに変えてみました。

    CSSのコードはここをクリック

    .box02 {
        position: relative;
        margin: 2em 0;
        padding: 0.5em 1em;
        border: solid 3px #f78733;
        border-radius: 8px;
    }
    .box02 .box-title {
        position: absolute;
        display: inline-block;
        top: -13px;
        left: 10px;
        padding: 0 9px;
        line-height: 1;
        font-size: 17px;
        background: #FFF;
        color: #f78733;
        font-weight: bold;
    }
    .box02 p {
        margin: 0;
        padding: 0;
    }
    .box02 ul li {
      line-height: 1.5;
      padding: 0.5em 0;
      list-style-type: none!important;
    }
    .box02 ul li:before {/*疑似要素*/
      font-family: "FontAwesome";
      content: "\f00c";/*アイコンの種類*/
      position: absolute;
      font-size: 16px;
      left : 1.0em;/*左端からのアイコンまでの距離*/
      color: #f78733;/*アイコン色*/
    }
    

    実際にCSSに保存したら記事編集画面で下のコードをコピペします。

    箇条書きなしバージョン。

    ボックスのタイトル

    ここに文章

    <div class="box02">
    <span class="box-title">ボックスのタイトル</span>
    <p>ここに文章</p>
    </div>
    

    箇条書きありバージョン。

    ボックスのタイトル
    • 箇条書きにしたい内容1
    • 箇条書きにしたい内容2
    • 箇条書きにしたい内容3
    <div class="box02">
    <span class="box-title">ボックスのタイトル</span>
    <ul>
    <li>箇条書きにしたい内容1</li>
    <li>箇条書きにしたい内容2</li>
    <li>箇条書きにしたい内容3</li>
    </ul>
    </div>
    

    CSSカスタマイズのコツ

    基本的にコピペでそのまま使えるようにしていますが、
    アイコンなど変えたくなりますよね。

    その場合は下記該当箇所を変えてみてください。

    クラス名の変更

    ご紹介したものは、クラス名を「list01」「list02」「box01」「box02」としていますが、好きな名前に変更することもできます。

    クラス名を変更した場合、ブログ記事に書く際にその変更したクラス名を指定してくださいね。

    <div class="ここの部分">
    

    です。

    色の変更

    カラーコードは#xxxxxxを変えれば好きな色に変更出来ます。

    カラーコードはこちらのサイトを参考にしてみてください。
    WEB色見本 原色大辞典 - HTMLカラーコード

    Webアイコンの変更

    Webアイコンはたとえば"\f138";/*アイコン種類*/のように指定して、chevron-circle-right というものを使っています。

    アイコンを変えたい場合は、この部分を変更してください。

    ここのサイトで使いたいアイコンに対応したコードを探すことが出来ます。
    Cheatsheet | Font Awesome

    ちょっと探すの大変なので、使う頻度が高そうなアイコンを表にまとめてみますね。

    アイコン 名前 コード
    chevron-circle-right \f138
    arrow-circle-right \f0a9
    angle-double-right \f101
    check \f00c
    check-circle \f058
    check-square-o \f046

    まとめ

    CSSをいじるのはけっこう難しいと思っていましたが、実際にやってみると意外とかんたんに出来ました。CSSに慣れていない方は、けっこうはじめはとっつきにくくて大変かと思います。

    ぜひ、みなさんもブログテーマにあったカスタマイズしてみてくださいね。

    番号付きリストのカスタマイズはけっこうかんたんにできるのでオススメです♪

    ブログの見栄えがよくなって楽しくなりますよ^^

    それでは、また

    参考サイト

    コピペで使えるリストデザイン34選:CSSで箇条書きをおしゃれに

    【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30

    サルワカさんのサイトがとても丁寧に説明していただいておりましたので、こちらを参考にリストとボックスを組み合わせてみました^^