【はてなブログ】テーマを「UnderShirt」に変更しました。変更後に行ったカスタマイズ

はてなブログのテーマを「Under Shirt」に変更しました。気分転換です。変更後に行ったカスタマイズをまとめてみました。

Under Shirtとは

f:id:yutori1oku:20180909115743p:plain

UnderShirt - テーマ ストア

特徴

・レスポンシブ対応

・カスタマイズしやすい、装飾の少ないデザイン

・トップページの記事がカード型っぽく並ぶ

ちょっと今っぽい感じがしたので、UnderShirtのデザインを選んでみました。なぜテーマ名がUndershirt=肌着という名前なのかはわかりませんが。笑

あくまで肌着だけ提供するから、好きに着飾って下さいってこと?笑

インストール方法

簡単にインストール方法もまとめます。

インストールすると、各種設定(ヘッダ、フッタ、デザインCSSなど)が消えてしまうのでバックアップを取ってください。自分はメモ帳にコピペしておきました。

<手順>

①自分のページからデザインを選択

②テーマストアでテーマを探すを選択

③テーマストアから「UnderShirt」のページに移動

⇒プレビューしてインストール

f:id:yutori1oku:20180909121121p:plain

カスタマイズ

今回カスタマイズした項目たちをご紹介します。

グローバルナビゲーションの追加

グローバルナビゲーションとはこれです。よく記事の上についてるやつ。個人的にはドロップダウン式の物が好きです。

f:id:yutori1oku:20180909122041p:plain

先駆者のブログを参考にして、コピペで作りました。

↓こちらの記事でわかりやすく紹介しされています。デザインCSSとタイトル下にコピペするだけでナビゲーションバー出せます。

グローバルナビゲーションバーにアイコン追加

こんなの付けました。家のマーク。

f:id:yutori1oku:20180909122914p:plain

はてなブログでは特にインストールの必要がなくそのまま使えるアイコンフォントがあるそうです。その数120種類。100%希望通りのアイコンがあるかは不明ですが、それっぽいアイコンを配置してみました。

やり方は、↓の方の記事を参考にしました。

フォントサイズの変更

デフォルトの設定では、フォントサイズが70%に指定されていました。

ちょっと画像じゃわかりにくいですが70%⇒90%にしています。大きいほうが視認性良いですしね。

 f:id:yutori1oku:20180909123606p:plain  f:id:yutori1oku:20180909123526p:plain

やり方はデザインCSSのfont-sizeの所の数字をいじるだけです。簡単。

f:id:yutori1oku:20180909123512p:plain

グローバルメニューの横幅を均等幅に

デフォルトの設定では片側に寄っているようです。自分は均等幅が好きなので調整しました。メニューの数によって数字を変更する必要があります。

↓下記記事の「その他」のところでやり方を記載してくれています。コピペ+数字ちょい変で出来るので簡単。

CSSで組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Life

見出しのカスタマイズ

見出しのカスタイマイズもしました。自分は普段、中見出し(h4)と小見出し(h5)を使っています。そこだけ、見出し用のCSSを追加しました。参考にさせていただいたのは下記ブログ記事。

気に入った見出しを、デザインCSSにコピペして見出しのサイズ(h4とかの所)を変更すればOK。これも作業自体は簡単です。好みのデザインを探すだけ。

まとめ

f:id:yutori1oku:20180909124834p:plain

テーマを「UnderShirt」に変更しました。

今のところ、主に手を加えたのはグローバルナビゲーションバーと見出しです。

・グローバルナビゲーションバー追加

・アイコン追加

・フォントサイズ変更

・横幅調整

・見出しのデザイン変更

個人的には好みです。これからも少しずつカスタマイズしていこうと思います。

カスタマイズにはコピペをフル活用させてもらっています。ブログでやり方を紹介されている方々には頭が上がりません。良い時代だ。