生きるために今日からできること

がんと付き合いながら、無理せずゆたかに生きる方法

はてなブログの目次をカスタマイズ、アンダーラインをマーカー風に

f:id:fuku-mimi:20190627104225p:plain

 

こんにちは❤ふくみみです

ブログ覗いていただいてありがとうございます

今回は前から気になっていた

はてなブログのカスタマイズについてご紹介します

このアンダーラインとかタイトルや目次などです

 

目次をカスタマイズする

はてなブログでは「見たまま編集」で簡単に設定できるカスタマイズがいくつかあります

 

f:id:fuku-mimi:20190627101452p:plain

太文字、斜体、打消、アンダーライン、文字の大きさ、文字の色

 

その他、見出しをつけたり、箇条書き、リンク、参照などブログ編集に必要なものが並んでいますが、その中に「目次」というのがあります

f:id:fuku-mimi:20190627102345p:plain

クリックすると「見たまま編集」では[:contents]と表示されますが、公開される記事では見出しを自動的に集めて目次を表示してくれる便利な機能です

 

目次は、ブログ内容をわかりやすくするための大切なものですので、ぜひ活用したいいですね

 

そのままでもいいのですが、なれてくると自分の気に入った目次を表示したいと思ったりします

 

そんなときには、ブログのCSS機能を使ってカスタマイズしちゃいましょう

●まず、はてなブログの管理画面の左側にあるメニュー欄の【デザイン】をクリック

f:id:fuku-mimi:20190627102303p:plain

画面が切り替わったら左上のスパナマークの【カスタマイズ】をクリック

f:id:fuku-mimi:20190627102455p:plain

メニューがあらわれたら一番下の【デザインcss】をクリックします

f:id:fuku-mimi:20190627102653p:plain

テキスト入力領域があらわれますのでそこにコードをコピペします

 

f:id:fuku-mimi:20190627103107p:plain

今回は、わたしが使わせてもらっているコードを参照させてもらったのでコピペしてみてください

 

/*目次のデザイン変更*/
.entry-content .table-of-contents {
    position:relative;
    margin-left: 0;
    padding: 15px 10px 15px 35px; /* 枠内の余白(上右下左) */
    font-size: 100%; /* 文字の大きさ */
    font-weight:bold;
    list-style-type:decimal; /*数字以外が良ければ変更 */
    background:#fff;
    border-top:40px solid #90caf3; /* 「この記事の目次」周りの色 */
    border-left:2px solid #90caf3; /* 線の太さ */
    border-right:2px solid #90caf3;
    border-bottom:2px solid #90caf3;
    line-height: 200%; /* 行間 */
    border-radius: 3px; /* 角丸にしない場合は不要 */
    color:#444; /* 数字(マーク色変更) */
}
/*「この記事の目次」の周囲変更*/
.entry-content .table-of-contents::before {
    font-family: 'blogicon';
    content: "\f039  この記事の目次";
    display: block;
    font-size: 130%;
    font-weight: bold;
    position: absolute;
    top: -40px;/*上からの位置調整*/
    left: 0px; /*左からの位置調整*/
    color: #fff !important;
}
/*リンクの色変更と下線を消す*/
.entry-content .table-of-contents li a{
    color:#444; /* 目次リスト部分のテキスト色 */
    text-decoration:none; /* リンクの下線をつけたくない場合 */
}

 

コピペしたら【変更を保存する】をクリック

 以上で準備は終わりです

 

あとは、いつも通り目次「見たまま編集」で「目次」をを貼ってプレビューしてみてくださいあら不思議!

目次がかわいくなりましたか?

タイトル、見出しをカスタマイズする

同じ要領でタイトルや見出しも好きなようにカスタマイズできますよ

 

見出し用

.entry-content h3 {
position: relative;
padding: 6px 10px;
color: #fff;
background-color: #293b6a;
border-radius: 4px;
}
.entry-content h3::before,
.entry-content h3::after {
position: absolute;
width: 100%;
height: 4px;
z-index: 2;
content: '';
}
.entry-content h3::before {
top: 0;
left: 0;
border-bottom: 1px dashed #fff;
}
.entry-content h3::after {
top: 100%;
left: 0;
margin-top: -4px;
border-top: 1px dashed #fff;
}

 

 

 タイトル用

h1 {
  color: #364e96;/*文字色*/
  border: solid 3px #364e96;/*線色*/
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
}

 

 

アンダーラインをマーカー風にする

最後にアンダーラインです

同じ要領でCSSをコピペします

article u{

  text-decoration: none;

 background: linear-gradient(transparent 50%, #ffff00 50%);

編集画面の【HTML編集】で<u>〜</u>タグでアンダーラインを引きたい部分をはさみます

できましたか?

まとめ

CSSやHTMLを使うと自分のイメージにより近いページを表現できます

結局なれていくしかないので、教えてくれてるいろんな方のブログを見て実践するのが一番だと思います

 

コピペ用のCSSはいろいろ紹介されているので検索してみてください

お好みのものが、見つかると思います

試してみてくださいね