【はてなブログ】おしゃれなブログテーマ「UnderShirt」のカスタマイズまとめ

はてなブログのカスタマイズをまとめてみた

はてなブログ[キキコム]のデザインを変更しました、KiKi(@kiki_ro_ck)です。

ブログを続けるモチベーションに「ブログのデザイン」って絶対必要だと思ってます!

この記事では備忘録もかねて、デザインを変更した箇所をまとめました。

たぶん細かい部分はちょくちょくいじっていくと思うのでご了承ください☆

※CSSを変更する時は先にバックアップを取っておきましょう☆

PCデザインのカスタマイズ

デザインテーマは、ろくぜうどん(@rokuzeudon)さんの【UnderShirt

記事一覧は[はてなブログPro]のみですが、せっかくなので導入してみたくて。

変更の方法は[ダッシュボード]⇒[設定]⇒[詳細設定]にある[トップページの表示形式(PC版)]から[一覧形式]を選択して[更新する]です☆

はてなブログキキコムの、カスタマイズ変更後のデザイン

ろくぜうどんさんはWebデザイナーをされている方なんですが、隅々まで洗練されいるデザインが素晴らしいです。プロは違いますな☆

正直、最近は1カラムのブログも増えているのでちょっと悩みましたが、わたし自身がサイドバーをよく使うので、とりあえずは2カラムでやっていこうと思います。

記事一覧ページの本文冒頭部分を消す

いらないかな?と思ったので消してみました。

[ダッシュボード]⇒[デザイン]⇒[カスタマイズ]の[デザインCSS]に下記をコピペします。

/* 記事一覧の書き出し部分を削除 */
.archive-entry-body .entry-description{
display:none;
}

 

ブログのカラーをピンク系から青系へ

ずっとポイントカラーとしてピンク系の色を使ってきましたが、なんだか落ち着かなくなってきたので青系に変更。

初めて青系を使ってみましたが、ブログに清潔感が出て、落ち着いた印象になる感じ。気に入っています☆

配色パターンの選び方

配色パターンがしっくりくるブログってまとまって見えると思いますが、素人だとカラーを選ぶのが難しいんですよね。

そこで!ある程度決められたカラーパターンの中から直感で選ぶ方法がおすすめです。ハードルがぐっと下がるし、なにより簡単☆

参考にしたブログ・サイト

サルワカ(@saruwakakun)さんのブログにはいつも助けられています。

saruwakakun.com

カラーハントというサイトもめちゃくちゃ便利。

colorhunt.co

カラーハントは気になった色にカーソルを当てるだけで、その色のカラーコードが表示されます。配色パターンの勉強になるので、見ているだけでも楽しいです☆

 

フォント設定

フォント設定は迷いに迷って、こちらの記事を参考にしました。

sole-color-blog.com

[ダッシュボード]⇒[デザイン]⇒[カスタマイズ]の[デザインCSS]へ。

/* フォント指定 */
body{
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}

何てったって、デザインのプロが考えたフォント設定だもん。

 

ブログタイトルのフォント

ブログタイトルには、グーグルフォント「ニコモジ」を使ってみました。

Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access

デザインセンスが皆無な人間に、グーグルフォントは優しいのです。

グーグルフォントの導入方法

 [ダッシュボード]⇒[設定]⇒[詳細設定]の[headに要素を追加]に

<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet" />

を貼りつけて[変更]します。

続いて[ダッシュボード]⇒[デザイン]⇒[カスタマイズ]の[デザインCSS]に

/* ブログタイトルのフォント変更 */
#title a{
font-family:"Nico Moji" ;
}

を貼りつけて[変更を保存する]で導入完了です☆

 

ドロップダウンメニューを設置

カテゴリーが増えてきたので、ドロップダウンメニューを設置しました。

f:id:kikixxxx:20180418172548p:plain

参考にさせていただいたのは、ゆきひー(id:ftmaccho)さんのブログです。

www.yukihy.com

これはほぼ、自分のためだったりします^^;

 

カテゴリーの階層化

パンくずリストの設定や、ドロップダウンメニューを設置したい場合には、カテゴリーを階層化させる必要があります。

参考にさせていただいたのは空のきまぐれ(id:sora1530)さんの記事です。

www.sora-no-kimagure.com

「パンくずリストって何それ必要なの?」と思う方は、この記事を読んでみるといいと思います☆

 

サイドバーのフォローボタン

みんな大好き「ふわっと上がるボタンリンク」は、もちろん☆サルワカ(@saruwakakun)さんの記事を参考にさせていただきました。

saruwakakun.com

 

シェアボタン

はてなブログのシェアボタンのデザインをカスタマイズしたみた

アイコンに使用されている色をそのまま使うと目がチカチカするので、すこしトーンを落として暗めのカラーにしてみました。ブログと馴染んだ気がします☆

マウスを乗せた時ふわんっと色が変わるリンクはid:vintonさんの記事を参考にさせていただきました。

webgaku.hateblo.jp

ちなみに…自分が使わないってだけで[Google+]を外して[LINE]のシェアボタンを入れています。

あ、スマホから見るシェアボタンは、LINEにしたら崩れちゃって!← また時間がある時、調整しようと思います。 直しました☆

(でも、Google+のシェアボタンを入れておくとGoogleへの印象がいいという噂…!)

 

見出し・リスト・ボックスのデザイン

こちらもガッツリ、サルワカ(@saruwakakun)さんと、シロマ(id:shiromatakumi)さんに頼りきりです。

saruwakakun.com

www.notitle-weblog.com

 

カエレバ・ヨメレバのデザイン

ヨメレバだとこんな感じ。これは画像なので動かないですが。

カエレバ・ヨメレバのデザインをCSSで変更してみた

ゆきひー(id:ftmaccho)さんのデザインを参考にさせていただいています☆

www.yukihy.com

そしてサルワカ(@saruwakakun)さんの記事を参考に、ちょっとふわっと浮き出て見えるように影をつけてみました。

saruwakakun.com

 

目次の表示/非表示ボタン

長い記事になると、ずらーっと目次が出てしまうので隠しました。

参考にさせていただいたのは、よね(id:yone1688)さんの記事です。

www.yone-himajin.com

スマホ版にも使っています。コピペで設置できるので感動しました!

目次のデザインは、テーマのものをそのまま使っています。

 

サイドバーの目次を追尾させる

またここ(id:ztrabbit02)さんの記事を参考にしました。すごく便利ですよね!

www.kurou-sagi.com

ただ、レスポンシブで設定していると、画面が小さくなった時にデザインが崩れる可能もあるのでご注意を☆

 

はてなブログ編集用Chrome拡張機能の導入

ブログのカスタマイズではないんですが、なんでもっと早く導入しなかったんだろう!!!と思ったのがこちら。

www.notitle-weblog.com

シロマ(id:shiromatakumi)さんが作っています。

拡張機能でできること

  1. h2での見出し
  2. 目次を入れる(変な改行が入らない)
  3. 日付もボタン1つで挿入(ポチッ⇒2018年4月18日)
  4. 背景をグレーにする
  5. テキスト&画像の左・中央・右揃え
  6. ↑の書式を初期化する

ちなみに、

背景をグレーにする、を使うとこんな感じ。

はてなブログの記事を書くとき[見たまま編集]で書いている方は、記事編集がめちゃめちゃ捗るのでおすすめです☆

 

こんなもんかな?以上がパソコン版のカスタマイズのまとめです。

スマホ版デザインのカスタマイズ

ブログテーマ【UnderShirt】はレスポンシブ対応なんですが、はてなブログの仕様的にレスポンシブモードだとPC・スマホのAdsenseコードが分けられないんですよね。

なのでレスポンシブは利用しないで、はてなブログのスマホ版をそのまま使用してカスタマイズしています。

全体的なデザインのカスタマイズに、こどみす(id:codomisu)さんの記事を参考にさせていただいています。メニューに至っては、背景色までそのままです笑。

hitsuzi.hatenablog.com

タイトル通り、最強の決定版デザインだと思います…!

 

ブログ初心者におすすめの本

はてなブログを始める時にはこちらの本。

載っているのはネットで調べれば出てくることかもしれませんが、いちいち調べるよりも、基礎を頭に入れておきたい。という方におすすめです。

「CSSって何?HTML???」という感じの初心者さんは、この本から始めてみることをおすすめします☆

とても丁寧に、基礎の基礎まで説明があるので(すこし知識があるとちょっと物足りない感じになっちゃいますが)1番最初に読む入門書にはぴったりの本です。

ちょっとかじった感じでHTMLやCSSをわかり始めた頃に読むといい本です。わたしはパラパラと感覚で読んでしまったので、本当はもっとしっかり読み込むといいんですが…^^;

ちょっと難しいことは「本を読みながら&実際に手を動かしながら」ってする方が頭に入りやすいタイプの方におすすめの本です☆

 

おわりに

以上、キキコムのカスタマイズまとめでした。参考にさせていただいたブログ・サイトさんには本当に感謝です。

HTML・CSSの本をいくつか紹介しましたが、わたしもまだまだ勉強中です。でもほんと、カスタマイズって楽しいですよね☆

ハマりすぎて更新が怠らないように自重します/(^o^)\

今までこんな風にまとめたことがなかったので、おもしろかったです。またデザインを一新したら記事にしようと思います☆