この記事には広告を含む場合があります。記事内で紹介する商品を購入することで、当サイトに売上の一部が還元されることがあります。
こんにちは。マリ（＠damarino_oheya）です！
このブログははてなブログpro
で書いています。（追記＊現在はワードプレスに移転しました）
ブログデザインのカスタマイズをはじめたのは8ヶ月ほど前からです。
マリ
今回は4回目のリニューアルです。
この記事では、今回のブログデザインのリニューアルで新しくカスタマイズしてみたことを中心にまとめています。
▼ブログproに移行した感想
はてなブログで独自ドメインにして4ヶ月のPV数を公開！PVアップのためにしてきたこと。
▼追記の追記＊2019年2月にワードプレスに移転しました
SANGOのスマホ版デザインでカスタマイズしたこと
Under Shirtを使用しました
ブログテーマを、Under Shirtに変更しました。
Under Shirtは、トップページの記事が2列タイプのカード型で、とてもシンプルでカスタマイズしやすいデザインです。
はてなブログpro（有料会員）になり、広告が無くなったので使うことにしました！（無料版でも広告を気にしなければ使えます！）
はてなブログで独自ドメインにして4ヶ月のPV数を公開！PVアップのためにしてきたこと。
カスタマイズしたところ
今回、カスタマイズしたところはこちら。
- 記事ページ
- トップページ
- フッター
- サイドバー
まあ、ほとんど全部、ですね。
かかった時間は2週間ほどで、育児の合間や深夜にちまちまと作業していたのでめちゃめちゃ疲れました。
マリ
記事ページのカスタマイズ
記事ページの中でカスタマイズしたのはこちらです。
- 記事タイトル
- カテゴリー
- 日付の位置
- シェアボタン
- もくじ
- 見出し
- リスト
- 囲み枠の整理
- カエレバリンク
- 行間など
- 前ページ、次ページボタン
これまでのカスタマイズでも変えてきたところですが、今回新しくカスタマイズしたところは、囲み枠（ボックスデザイン）の整理と、前ページ次ページボタンの2つです。
囲み枠（ボックスデザイン）を整理
これまで無計画に作っていた囲み枠をリセットし、新たに5つを作り直しました。
囲み枠を使うのはリストを使う時が多いのでリストに対応できるようにしています。
これで記事が書きやすくなってほしいです。
囲み枠のデザインはサルワカさんを参考にしています。
前ページ、次ページのボタン
こちらは真っ白な背景でしたが、ほんのりグレーの色をつけています。
トップページのカスタマイズ
トップページでカスタマイズしたのはこちらです。
- ブログタイトル付近
- グローバルナビ設置
- 背景色
- 記事一覧のカード
グローバルナビ設置
パソコンでは1列に6つのメニュー、スマホでは2列に2つのメニューが3列になるグローバルナビです。
こういうのを探していて、もちろん自力ではできないのでググりました〜。
注意点として、メニュー数を偶数にしないと成り立たないナビゲーションメニューです。
マリ
背景色
ブログ全体の背景色を淡いグリーンに、メニューに触れたら色が変わるようにしました。
色はメインになる色をColor Huntで探し、細かいところはウェブ配色ツールで確認しながら選んでいます。
カード型の見た目
なんか色々やっているのでCSSを載せておきます。
- 記事とはてなスターを非表示
- 枠を少し丸く
- 記事タイトルのフォント
- カテゴリー
- 日付の位置
- アイキャッチの下に線を引く
記事とスターを非表示
記事とはてなスターにdisplay:none;で非表示にします。
枠を丸く
- カードの枠を丸く
- アイキャッチの枠を上だけ丸く
カテゴリー
- 見た目
- 位置（左上）
- 親カテゴリのみ表示
位置は、position: absolute;にtopとrightで位置を決めています。
日付も同じ方法で右下へ。
アイキャッチの下に線を引く
結構どうでもいいことかもしれませんが。。。
アイキャッチの背景が白い時にカード内でタイトルとの境界線が無くなり違和感があるので、アイキャッチの下のみ線が引かれるようにしました。
背景が白いと境界線が分からないので・・・。
線が入る。
角を丸くする時に使った.entry-thumb（アイキャッチ）に下線のコードを付け加えただけです。
フッター
- 背景色
- フォローボタン
- プライバシーポリシー
- コピーライト
はてなブログのフッターはとても殺風景な作りなので、少し手を加えるとだいぶ変わりますね。
フッターは前回カスタマイズと同じ方法で作っています。
今回は、前回のカスタマイズではできなかったフォローボタンを設置しました。
フォローボタン
参考にさせていただいた記事はこちらです。
アイコンを白、アイコンの背景をヘッダーと同じにし、アイコンの白い部分のみが表示されています。
サイドバーのカスタマイズ
サイドバーでカスタマイズしたのはこちらです
- タイトル
- 枠を丸く
- プロフィールのフォローボタン
- カテゴリー整理
枠を丸くする
記事のカード型と同じ見た目にするために、サイドバーの枠も丸くしています。
- サイドバーを丸く
- タイトルの上を丸く
- プロフィールのピンク範囲の下を丸く
マリ
プロフィール
サイドバーは、「プロフィール」ではなく「html」で作っています。
フォローボタンはフッターと同じくアイコンを白にしました。
- profile-box・白いところ
- profile-img・丸い画像
- profile-inbox・ピンク部分
この3つをCSSに作ってHTMLを表示させています。
ようやくプロフィールや画像ができたと思ったらフォローボタンも作らないといけないし、頭がくらくらしました。終わりはどこにあるのかと。
カテゴリーの整理
デザイン→サイドバー→カテゴリー編集画面で、カテゴリの並びを整理しました。
この赤丸で囲んだ部分で編集できます。
この機能、初めて知りました！自分好みにカテゴリーの並び順を変更できていいですね。
スマホ版のカスタマイズ
パソコンよりもスマホからのアクセスの方が多いので、スマホ版の見た目も気になるところです。
スマホ版も記事を2列に
これがやりたかった・・・！
UnderShirtはスマホ版の2列表示の方法が公式に公開されているので、コピペで簡単に変更できます！
1列でも良いですし、私のようにアイキャッチに自信がないので2列の記事にしたい！という人にもおすすめのテーマです。
そのほかのカスタマイズ
スマホ版を2列にするときに公開されているコードで、このコードが出てきました。
この中に入れたコードはスマホ版のみで表示されるようになるみたいですね。
▼スマホ版の詳しいカスタマイズについてはこちらにまとめています。
【カスタマイズ】はてなブログのスマホ版ブログデザインでカスタマイズしたこと
おわりに
めんどくさい！終わりがない！頭がくらくら！と言いながらも、やっぱりカスタマイズは楽しいです。
マリ
何か質問などあれば、コメントやツイッターなどでお気軽にお問い合わせください♩
このような記事もあります
はてなブログ3年目の当ブログで行ってきたカスタマイズまとめ
MacBook Airを持ち歩きたい！無印良品のパソコンケースは13インチ対応で良かった
はてなブログで独自ドメインにして4ヶ月のPV数を公開！PVアップのためにしてきたこと。
SANGOのスマホ版デザインでカスタマイズしたこと
[…] ブログデザインをリニューアルしました！カスタマイズまとめ。 | Migaru-Days […]
[…] Migaru-Daysブログデザインをリニューアルしました！カスタマイズまとめ。こんにちは。マリ（＠damarino_oheya）です！ このブログははてなブログproで書いています。（追記＊現在はワード […]