はてなブログのテーマを変えました！
カスタマイズも0からやり直しです。
初心者の私ができる範囲で頑張ったカスタマイズ、参考にしたサイトなどをまとめていきます。
- テーマストアでテーマを選ぼう！
- ヘッダーのカスタマイズ
- グローバルメニュー設定
- 見出しのカスタマイズ
- 大見出し（h3)
- ボックスのカスタマイズ
- 蛍光ペン風アンダーライン
- 記事説明文を表示しない
- バックアップをとっておこう！
- おわりに
テーマストアでテーマを選ぼう！
私はもともと【Haruni】を使っていました。ピンクのグラデーションカラーがきれいなシンプルデザインです。
デフォルトのデザインが可愛いくて、あまりカスタマイズせずに使えて初心者に優しかったです。グローバルメニューの設置も楽でした。
ただ、色が全体的にピンクで可愛らしくなりすぎることと、いろいろカスタマイズしていきたかったので、もっとシンプルなテーマを選ぶことにしました！
そこで選んだのが【UnderShirt】です。
- カード型アイキャッチ（2列）
- シンプルでカスタマイズしやすい
- アイキャッチが大きく表示される
Haruniもアイキャッチが大きい、タイトルのみの表示なので気に入っていましたが、悩みに悩んで、えいや！と変更することにしました。
テーマを変更すると、いろんなデザインをやり直さないといけなくなるので一大決心ですね。本当に悩みましたが、いろんなカスタマイズがしやすく、ブログに愛着が出てきたので私は変えて良かったなと思っています。
参考にしたブログ
さてテーマを変更したら、次はどうカスタマイズするかです。
UnderShirtを使っていて、カスタマイズされている方のブログを参考にしました！
皆さん本当にわかりやすい説明でとても参考になりました。
そしてデザインもおしゃれで可愛い！
ぷらてんさんもくうかさんもスミカさんのブログを見て衝撃を受けてUnder Shirtにされたそうです。
イラストがとにかくおしゃれで洗練されています。
目標とするブログがあるとカスタマイズのモチベーションも上がりますね。
ヘッダーのカスタマイズ
あれこれ写真を入れてみたりしたのですが、大きさが微妙だったり、ブログ名が見えにくくなってしまったり、なかなかしっくりこなかったので、Canvaで作ることにしました。
▼管理画面 ▼デザイン設定▼カスタマイズ▼ヘッダで画像アップロードし、「画像だけ表示」を選択しました。
こんな感じになりました！
スマートフォンで見ると、画像が小さく切れてしまうのですが、違和感がないように作れたので同じ画像を使っています。
↑スマートフォンでの画面。
ヘッダーの画像の設定だけで、いろいろ試行錯誤して遠回りしながら作ったのでかなり時間がかかってしまいました。
でもとっても気に入ったヘッダーができたので満足です。
Canvaってすごい！と開眼しました。
今回のアイキャッチもCanvaで作りました。
グローバルメニュー設定
グローバルメニューはこちらのサイトを参照しました。
スマホ表示でもきれいに表示されるのでとても良いです。
見出しのカスタマイズ
見出しはこちらのサイトを参考にしました。
大見出し（h3)
中見出し（h4)
小見出し（h5)
↑私が選んだ見出しです。
▼管理画面 ▼デザイン設定▼カスタマイズ▼デザインCSSにコードを入力します。
.entry-content h3 {
padding: 6px 0;
border-top: 2px solid #20b2aa;
border-bottom: 2px solid #20b2aa;
color: #696969;
line-height: 1.5;
}
.entry-content h4 {
padding: 4px 8px;
color: #333;
line-height: 1.5;
background-color: #d9f7f5;
}
.entry-content h5 {
padding: 6px 10px;
border-left: 8px solid #29b6b7;
color: #333;
line-height: 1.5;
background-color: #f5f5f5;
}
カラーコードを変えれば、好きな配色にできます。
私はエメラルドっぽい感じにしました。
ボックスのカスタマイズ
これ使いたい！とずっと思っていたボックス。
このボックスは、次の2ステップで使えます。
①▼管理画面 ▼デザイン設定▼カスタマイズ▼デザインCSSにコードを入力
②ブログ作成中にHTML編集でコードを入力
難しそうだなーと思っていましたが、意外と簡単でした。
ただいろんなボックスを使うと、どれがどれかわからなくなるので要注意。
蛍光ペン風アンダーライン
▼管理画面 ▼設定▼詳細設定▼検索設定最適化▼HEADに要素を追加に次のコードを入力しています。
「斜体」ボタンを押すだけでマーカーが引けるようになります。
こちらのサイトを参考にしました。
記事説明文を表示しない
カード型アイキャッチの下をタイトルだけが表示されるようにしました。
▼管理画面 ▼デザイン設定▼カスタマイズ▼デザインCSSにコードを入力
/* ブログ説明文を表示しない */
.archive-entry-body .entry-description {
display: none;
}
これでだいぶ見た目がすっきりしました！
バックアップをとっておこう！
どれがなんのコードかわからなくなってしまうので、自分でわかるようにバックアップをとっておくことが重要です。
せっかく調べて一生懸命作ったコードも、何かのはずみで崩れてしまうこともあります。そしてこのコードなんだっけ？となってしまいます…。
おわりに
いかがだったでしょうか。
まだまだカスタマイズしていきたいです。
一つ一つ時間がかかりますが、ブログをカスタマイズしていくってお家を作っていくような感じに似ていて、どんどん愛着がわいてきますね。
良いブログになりますように＼(^o^)／
最後までお読みいただきありがとうございました。