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