くうかんしんぷるライフ

賃貸2LDKのおうちでも快適に、シンプルに暮らしたい

『UnderShirt』記事内カスタマイズまとめ【はてなブログ】

こんにちは、くうかです!
はてなブログのテーマ『Undershirt』で行ったカスタマイズの第2弾、【記事内のカスタマイズ】をまとめました。
参照サイトや自分で直した部分も合わせてご紹介していきたいと思います。

 

 

『Undershirt』記事内カスタマイズまとめ

f:id:ku-kahan:20190808225018p:plain

先日当ブログはテーマを『Minimalism』から『Undershirt』へ変更しました。

blog.hatena.ne.jp

 

カスタマイズの記録はどなたかの参考になればと思い、トップページ関連のまとめは先日記事にしました。

www.kurasitotonoe.com

 

今回は記事内のカスタマイズについてご紹介していきます。

※カスタマイズは自己責任でお願いします。事前にバックアップを取ることをおすすめします。(私はメモ帳にコピペしています)

 

ブログのテーマを変更する前に色のパターンを決めておくとスムーズ

テーマ変更に入る前に、自分のイメージするブログのカラーを何色か決めておくと進めやすいのではないかと思います。

 

旧テーマ:白・黒・グレー・オレンジ

 ↓ ↓ ↓ ↓ ↓

新テーマ:白・グレー・サーモンピンク・ベージュっぽい色

 

ベースは白で変わっていませんが、アクセントカラーをオレンジからサーモンピンクに変えたので、イメージはけっこう変わったのではないでしょうか。

 

実はこどもの頃から好きな色は【ピンク】だったので、次にブログを変えるならピンクを入れたいとずっと思っていたのです(*^^)v
そして、サーモンが好きだからサーモンピンクに(笑)

 

目次のカスタマイズ

目次はこのような感じになっています。

f:id:ku-kahan:20190808155756p:plain

デフォルトの目次から大きくは変えず、色合いと数字の部分だけカスタマイズしました。

 

リストの先頭マークのカスタマイズ

デフォルトでは全ての見出しに数字が付いてしまいます。
それもわかりやすくて良いのですが、当ブログは記事によっては見出しに数字を入れている場合もあるので、数字が被っちゃうなと思い、マークにしました。

f:id:ku-kahan:20190808155801p:plain

CSSに追加。

/* リストの先頭マーク */
.entry-content .table-of-contents li{
list-style-type:disc; /* 大見出し:黒丸 */
}
.entry-content .table-of-contents li ul li{
list-style-type:circle; /* 中見出し:白丸 */
}
.entry-content .table-of-contents li ul li ul li{
list-style-type:square; /* 小見出し:黒四角 */
}

こちらのページを参照すると、他に数字やアルファベットの記述の仕方が載っています。

 

目次の背景色・枠色・太さのカスタマイズ

CSSに追加。

.entry-content .table-of-contents {
background:#f0ebc0; /* 目次ボックス内背景色 */
border-top:4px solid #f3a68c; /* 目次枠線太さと色 */
border-left:4px solid #f3a68c;
border-right:4px solid #f3a68c;
border-bottom:4px solid #f3a68c;
}

.entry-content .table-of-contents::before {
border-bottom: 2px solid #f3a68c; /* 目次内境界線の太さと色 */
}

目次CSSの書き方や、その他の見た目のカスタマイズは、またまたぱぴこさんの記事を参考にさせていただきました。

 

見出しのカスタマイズ

f:id:ku-kahan:20190808155813p:plain

h2、h3、h4の見出しをカスタマイズしました。

 

記事フォントサイズ変更

『Undershirt』も、デフォルトではフォントが小さめです。
少々見づらさを感じたので、CSSで17pxに変更しました。

/* 記事のフォントサイズ変更 */
.entry-content {
font-size:17px;
}

あまりに大きすぎるとスマホで1行に文字数があまり入らなくなりそうなので、この位でいいかなと思います。

 

フォントの種類はそのままです。
デフォルトでもおしゃれなフォントですよね^^
英語の部分とか特に。
でも顔文字にすると崩れますね(笑)

 

囲み枠カスタマイズ

今のところ2種類の囲み枠を作りました。

f:id:ku-kahan:20190808155809p:plain

f:id:ku-kahan:20190808155806p:plain

タブ付きのボックスと、ただのボックス。

 

サルワカさんのボックスデザインが可愛いです。

 

次へ・前へボタンカスタマイズ

デフォルトでは白なので、色を付けただけです。

f:id:ku-kahan:20190808155817p:plain

CSSに追加。

/* 前へ次へボタン背景色 */
.pager-next a,.pager-prev a{
background: #f0ebc0;
}

 

フォローボタン・シェアボタン

シェアボタンは記事上・記事下に配置。 
フォローボタンは記事下とプロフィールに配置。

f:id:ku-kahan:20190808222048p:plain

大きめのボタンの方がクリックされるかもしれない…と思い、大きめのボタンに。
参考にさせていただきました。

こちらの記事では記事上下用、サイドバー用が用意されており、見た目のバリエーションも選べます。

 

しかしカスタマイズはフォローボタンのみなので、自分でアレンジしてシェアボタンも同じデザインで表示できるようにしました。 

 

他の方から見たら少々混乱してしまいそうなコードになっているので、CSSは載せない方がいいかなと思います(;^_^Aすみません。

 

そして少しでもページの読み込みを軽くしたいので、よく使われているウェブフォントの『Font Awesome』を使用せず、はてなブログのアイコンフォントを使っています。
大体のアイコンは揃っているので、ページを軽量化したい方にはおススメです^^

 

最後に

これで『Undershirt』でカスタマイズした部分はほぼご紹介できました。
私の都合で急いでカスタマイズをまとめたので、漏れもあるかもしれません。

 

ここ2日間ほどブログに集中してしまったので、しばらくお暇をいただいちゃおうと思います( *´艸`)

 

日記のような独り言をサブブログで呟くかもしれないので、もしお時間があったら覗いてみてください(*'ω'*)プロフィールのとこから行けます…

 

本日も最後までご覧いただき、ありがとうございました。

 

こんな記事もあります

www.kurasitotonoe.com

www.kurasitotonoe.com