Migaru-Days

身軽に暮らす、考える。

ブログデザインをリニューアルしました!カスタマイズまとめ。

f:id:damarin:20180607082803p:plain

このブログははてなブログで書いています。

今回、思い切ってブログデザインを変更したのでまとめおきます。

 

 

これまでのブログカスタマイズ

ブログのカスタマイズをはじめたのは8ヶ月ほど前からです。

今回は4回目のリニューアルです。

 

この記事では、新しくカスタマイズしてみたことを中心にまとめています。

 

 

Under Shirtを使用しました

f:id:damarin:20180518163626p:plain

UnderShirt - テーマ ストア

 

ブログテーマを、Under Shirtに変更しました。

Under Shirtは、トップページの記事が2列のカードタイプでシンプルなデザインです。

 

はてなpro(有料会員)になり、広告が無くなったので使うことにしました!(無料版でも広告を気にしなければ使えます!)

 

 

 

カスタマイズしたところ 

今回、カスタマイズしたところは

  • 記事ページ
  • トップページ
  • フッター
  • サイドバー

育児の合間や夜な夜なちまちまと作業していたのでかかった時間は2週間ほど。

疲れました。(2週間の間に夫の2泊3日出張があり、子どもたちが寝た後にガッツリ作業してました。)

 

 

記事ページ

記事ページの中でカスタマイズしたのはこちらです。

  • 記事タイトル
  • カテゴリー
  • 日付の位置
  • シェアボタン
  • もくじ
  • 見出し
  • リスト
  • 囲み枠の整理
  • カエレバリンク
  • 行間など
  • 前ページ、次ページボタン

この中で新しいカスタマイズは、囲み枠の整理と、前ページ次ページボタンの2つです。

 

囲み枠を整理

これまで無計画に作っていた囲み枠をリセットし、新たに5つを作り直しました。

f:id:damarin:20180519110200p:plain 

囲み枠を使うのはリストを使う時が多いのでリストに対応できるようにしています。これで記事が書きやすくなってほしいです。

  

囲み枠のデザインはサルワカさんを参考にしています。 

 

  

前ページ、次ページのボタン

真っ白な背景でしたが、ほんのりグレーの色をつけています。

f:id:damarin:20180519110339p:plain

 

 

トップページ

トップページでカスタマイズしたのはこちらです。

  • ブログタイトル付近
  • グローバルナビ設置
  • 背景色
  • 記事一覧のカード

 

グローバルナビ設置

パソコンでは1列に6つのメニュー、スマホでは2列に2つのメニューが3列になるグローバルナビです。

f:id:damarin:20180519094849g:plain

もちろん自力ではできないのでググりました〜。

 

こういうのを探してました!

ただし、メニュー数を偶数にしないと成り立たないですし、メニュー数が多すぎるとスマホ版の時に画面いっぱいになってしまうという制限がありますね。

 

 

背景色

f:id:damarin:20180519112417p:plain

ブログ全体の背景色を淡いグリーンに、メニューに触れたら色が変わるようにしました。

 

色はメインになる色をColor Huntで探し、細かいところはウェブ配色ツールで確認しながら選んでいます。

 

 

 

カード型の見た目

f:id:damarin:20180519112904p:plain

  • 記事とはてなスターを非表示
  • 枠を少し丸く
  • 記事タイトルのフォント
  • カテゴリー
  • 日付の位置
  • アイキャッチの下に線を引く

なんか色々やってますー。

 

記事とスターを非表示

記事とはてなスターにdisplay:none;で非表示にします。

 

 

枠を丸く
  • カードの枠を丸く
  • アイキャッチの枠を上だけ丸く

 

 

カテゴリー
  • 見た目
  • 位置(左上)
  • 親カテゴリのみ表示 

位置は、position: absolute;にtopとrightで位置を決めています。

日付も同じ方法で右下へ。

 

 

アイキャッチの下に線を引く

結構どうでもいいことかもしれませんが。。。

アイキャッチの背景が白い時にカード内でタイトルとの境界線が無くなり違和感があるので、アイキャッチの下のみ線が引かれるようにしました。

f:id:damarin:20180519160644p:plain

背景が白いと境界線が分からないので・・・。

 

f:id:damarin:20180519160500p:plain

線が入る。

 

角を丸くする時に使った.entry-thumb(アイキャッチ)に下線のコードを付け加えただけです。

 

 

 

フッター

f:id:damarin:20180519163031p:plain

  • 背景色
  • フォローボタン
  • プライバシーポリシー
  • コピーライト

 

はてなブログのフッターはとても殺風景な作りなので、少し手を加えるとだいぶ変わりますね。

フッターは前回カスタマイズと同じ方法で作っています。

今回は、前回のカスタマイズではできなかったフォローボタンを設置しました。

 

 

フォローボタン

参考にさせていただいた記事はこちらです。

www.ituore.com

アイコンを白、アイコンの背景をヘッダーと同じにし、アイコンの白い部分のみが表示されています。

 

 

 

サイドバー

サイドバーでカスタマイズしたのはこちらです

  • タイトル
  • 枠を丸く
  • プロフィールのフォローボタン
  • カテゴリー整理

 

枠を丸くする

記事のカード型と同じ見た目にするために、サイドバーの枠も丸くしています。

  • サイドバーを丸く
  • タイトルの上を丸く
  • プロフィールのピンク範囲の下を丸く

めんどくさいけど、ここまで来たらやるしかなかったですね…。

 

 

プロフィール

f:id:damarin:20180519165731p:plain

サイドバーの「プロフィール」ではなく「html」で作っています。

フォローボタンはフッターと同じくアイコンを白にしました。

 

HTML

  • profile-box・白いところ
  • profile-img・丸い画像
  • profile-inbox・ピンク部分

この3つをCSSに作ってHTMLを表示させています。

フォローボタンも作らないといけないし、頭がくらくらしました。終わりはどこにあるのかと。

 

 

カテゴリーの整理

デザイン→サイドバー→カテゴリー編集画面で、カテゴリの並びを整理しました。

f:id:damarin:20180520185953p:plain

この赤丸で囲んだ部分で編集できます。

 

この機能、初めて知りました!自分好みにカテゴリーの並び順を変更できていいですね。

f:id:damarin:20180519162742p:plain

 

 

 

 

スマホ版のカスタマイズ

パソコンよりもスマホからのアクセスの方が多いので、スマホ版の見た目も気になるところです。

 

スマホ版も記事を2列に

f:id:damarin:20180520185127p:plain

これがやりたかった・・・!

 

UnderShirtはスマホ版の2列表示の方法が公式に公開されているので、コピペで簡単に変更できます!

blog.rokuzeudon.com

1列でも良いですし、私のようにアイキャッチに自信がないので2列の記事にしたい!という人にもおすすめのテーマです。

 

 

 

そのほかのカスタマイズ

スマホ版を2列にするときに公開されているコードで、このコードが出てきました。

この中に入れたコードは、スマホ版のみで表示されるようになるんですね。

 

すごい!

 

というわけで、スマホ用にパソコンとは違うカスタマイズをしたのはこちらです。

  • 背景色→白へ
  • カード型→角の丸みを無くす
  • 記事ページの幅→広げる
  • グラグラする→見出しの設定でミスして画面がグラグラしていたので調整
  • サイドバー→角の丸みを無くす、プロフィールのみ背景あり

こちらを参考にさせていただきました。

yossense.com

 

 

おわりに

めんどくさい!終わりがない!頭がくらくら!と言いながらも、ついついカスタマイズをやってしまうのは、やっぱり楽しいからです。

 

かなり時間を浪費しましたが、カスタマイズしたことで記事を書くのも楽しくなってるといいな。。。と、期待しています!

  

 

キーワードで探す