コピペするだけ!CSSを活用して箇条書き(リスト)や囲み枠(ボックス)をカスタマイズする方法(はてなブログ)
こんにちは、ヨシタカです!
みなさん、ブログ楽しんでますか?
今回は、箇条書き(リスト)や囲み枠(ボックス)についてCSSを活用したカスタマイズにトライしてみましたのでご紹介したいと思います。
【Webアイコン】、【箇条書き(リスト)】、【囲み枠(ボックス)】のトリプル活用で、こんな感じになります。
はじめの作業が少し大変ですが、一度CSSに設定してしまえばあとはラクラクです♪
さっそくやってみましょう!
- そもそもCSSってなに?
- CSSを活用してリストやボックスをカスタマイズする方法
- 箇条書き(リスト)をカスタマイズ
- 囲み枠(ボックス)にアイコン付きリストを使う
- CSSカスタマイズのコツ
- まとめ
- 参考サイト
- はてなブログのカスタマイズ集
そもそもCSSってなに?
CSSとは、Cascading Style Sheets(カスケーディング・スタイル・シート)の略語で、ウェブページのスタイルを指定するための言語なんです。
CSSをいじることで、色、サイズ、レイアウトなど ウェブページをどのようなスタイルで表示するか指定することができるんです。
HTML(ブログ記事)をいじって文字や色を直接指定することも出来ますが、あまりスマートではないのでおすすめされないようです。。。
WebデザインをいじるならCSSをいじる、これが基本となります。
CSSを活用してリストやボックスをカスタマイズする方法
それでは、さっそくCSSの設定をしていきます。こちらは一度設定してしまえば、編集は不要です。
この設定をすることで、毎回ボックスのために複雑なコードをコピペする必要がなくなります^^
はてなブログの場合、
デザイン⇒カスタマイズ⇒{}デザインCSS
でCSSの中身を編集できます。
変更前には必ずバックアップをとっておいてくださいね。
メモ帳にコピペで大丈夫です。
箇条書き(リスト)をカスタマイズ
ふつうの番号付きリストだと、こんな感じになります。
番号付きリスト1
番号付きリスト2
番号付きリスト3
うーん、これだと何だか味気ないなぁ・・・。
そこで、ちょっと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のコードはここをクリック
.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付き箇条書きリストです。
アイコンを使っていますのでFont Awesomeを導入していない方はまずアイコンを使えるよう設定してくださいね。
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のコードはここをクリック
.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
サルワカさんのサイトがとても丁寧に説明していただいておりましたので、こちらを参考にリストとボックスを組み合わせてみました^^
はてなブログのカスタマイズ集
はてなブログのカスタマイズ記事、まとめてみました。
最後まで読んでいただきありがとうございます!
ぜひ読者になっていただけると更新の励みになります^^