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

こんにちは。マリ(@damarino_oheya)です!

このブログははてなブログproで書いています。(追記*現在はワードプレスに移転しました)

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

マリ

少しずつCSSやHTMLが分かるようになってきました!

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

 

この記事では、今回のブログデザインのリニューアルで新しくカスタマイズしてみたことを中心にまとめています。

 

▼ブログproに移行した感想

はてなブログで独自ドメインにして4ヶ月のPV数を公開!PVアップのためにしてきたこと。

▼追記の追記*2019年2月にワードプレスに移転しました

SANGOのスマホ版デザインでカスタマイズしたこと

Under Shirtを使用しました

f:id:damarin:20180518163626p:plain

UnderShirt – テーマ ストア

 

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

Under Shirtは、トップページの記事が2列タイプのカード型で、とてもシンプルでカスタマイズしやすいデザインです。

 

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

はてなブログで独自ドメインにして4ヶ月のPV数を公開!PVアップのためにしてきたこと。

 

カスタマイズしたところ 

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

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

まあ、ほとんど全部、ですね。

 

かかった時間は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

なんか色々やっているのでCSSを載せておきます。

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

 

記事とスターを非表示

記事とはてなスターに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」で作っています。

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

 

  • 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列にするときに公開されているコードで、このコードが出てきました。

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

 

▼スマホ版の詳しいカスタマイズについてはこちらにまとめています。

【カスタマイズ】はてなブログのスマホ版ブログデザインでカスタマイズしたこと

 

おわりに

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

マリ

時間はかかりましたが、そのおかげでブログにもっと愛着を持てるようになりました!

何か質問などあれば、コメントやツイッターなどでお気軽にお問い合わせください♩

このような記事もあります

はてなブログ3年目の当ブログで行ってきたカスタマイズまとめ【無印良品|入れたまま使えるパソコンケース】MacBook Airを入れるのに購入しましたはてなブログで独自ドメインにして4ヶ月のPV数を公開!PVアップのためにしてきたこと。SANGOのスマホ版デザインでカスタマイズしたこと

コメントを残す

メールアドレスが公開されることはありません。

eight − 7 =