ブログを始めて２ヶ月。（随時追記しています）
いろいろ調べてカスタマイズも少しやってみましたが、思い描くようなイメージにはならず、思い切ってテーマを変えることにしました。
カスタマイズも0からやり直しです。
初心者の私ができる範囲で頑張ったカスタマイズ、参考にしたサイトなどをまとめていきます。
この記事は、こんな人におすすめの記事です。
- テーマ選びの仕方がわからない
- 初心者にもできるカスタマイズをしたい
- Undershirtのカスタマイズがしたい
テーマストアでテーマを選ぼう！
私はもともと【Haruni】を使っていました。ピンクのグラデーションカラーがきれいなシンプルデザインです。
デフォルトのデザインが可愛いくて、あまりカスタマイズせずに使えて初心者に優しかったです。グローバルメニューの設置も楽でした。
ただ、色が全体的にピンクで可愛らしくなりすぎることと、いろいろカスタマイズしていきたかったので、もっとシンプルなテーマを選ぶことにしました！
【UnderShirt】を選びました
そこで選んだのが【UnderShirt】です。
- カード型アイキャッチ（2列）
- シンプルでカスタマイズしやすい
- アイキャッチが大きく表示される
Haruniもアイキャッチが大きい、タイトルのみの表示なので気に入っていましたが、悩みに悩んで、えいや！と変更することにしました。
テーマを変更すると、いろんなデザインをやり直さないといけなくなるので一大決心ですね。
早い段階でテーマ変更できて良かったです。
参考にしたブログ
さてテーマを変更したら、次はどうカスタマイズするかです。
UnderShirtを使っていて、カスタマイズされている方のブログを参考にしました！
皆さん本当にわかりやすい説明でとても参考になりました。
そしてデザインもおしゃれで可愛い！
ぷらてんさんもくうかさんもスミカさんのブログを見て衝撃を受けてUnder Shirtにされたそうです。
イラストがとにかくおしゃれで洗練されています。
目標とするブログがあるとモチベーションも上がります。
カスタマイズしてみよう！
テーマが決まったらいよいよカスタマイズです。
ヘッダーをオリジナルにするだけでもトップページの印象ががらりと変わります。
ヘッダーのカスタマイズ
あれこれ写真を入れてみたりしたのですが、大きさが微妙だったり、ブログ名が見えにくくなってしまったり、なかなかしっくりこなかったので、Canvaで作ることにしました。
▼管理画面 ▼デザイン設定▼カスタマイズ▼ヘッダで画像アップロードし、「画像だけ表示」を選択しました。
こんな感じになりました！
- スマートフォンで見ると、画像が小さく切れてしまう
- 余白が大きい
この問題は以下のサイトで解決しました。
ヘッダーの画像の設定だけで、いろいろ試行錯誤して遠回りしながら作ったのでかなり時間がかかってしまいました。
でもとっても気に入ったヘッダーができたので満足です。
Canvaってすごい！と開眼しました。
今回のアイキャッチもCanvaで作りました。
アイキャッチの作り方は以下の記事でまとめました。
グローバルメニュー設定
グローバルメニューはこちらのサイトを参照しました。
スマホ表示でもきれいに表示されるのでとても良いです。
テーマによってなのかわかりませんが、どうしてもうまくいかないグローバルメニューもあったので、もしできなかった場合は別のグローバルメニューを探してみると良いですよ。
見出しのカスタマイズ
見出しはこちらのサイトを参考にしました。
▼管理画面 ▼デザイン設定▼カスタマイズ▼デザインCSSにコードを入力します。
カラーコードを変えれば、好きな配色にできます。
私はエメラルドっぽい感じにしました。
はてなブログの大見出しの設定はｈ2がとばされてる？！
見出しをカスタマイズすると気付くのですが、文中の見出しはh3から始まります。
これがSEO的にもあまりよくない。
ボックスのカスタマイズ
これ使いたい！とずっと思っていたボックス。
このボックスは、次の2ステップで使えます。
①▼管理画面 ▼デザイン設定▼カスタマイズ▼デザインCSSにコードを入力
②ブログ作成中にHTML編集でコードを入力
難しそうだなーと思っていましたが、意外と簡単でした。
ただいろんなボックスを使うと、どれがどれかわからなくなるので要注意。
え？！今はもっと簡単に見たまま編集でボックス使える…？！
▼参考URL
蛍光ペン風アンダーライン
▼管理画面 ▼設定▼詳細設定▼検索設定最適化▼HEADに要素を追加に次のコードを入力しています。
「斜体」ボタンを押すだけでマーカーが引けるようになります。
こちらのサイトを参考にしました。
▼参考URL
記事説明文を表示しない
カード型アイキャッチの下をタイトルだけが表示されるようにしました。
▼管理画面 ▼デザイン設定▼カスタマイズ▼デザインCSSにコードを入力
/* ブログ説明文を表示しない */
.archive-entry-body .entry-description {
display: none;
}
吹き出し
吹き出しもHTML編集のみで使えるようになりました！
▼参考URL
フォローボタンのカスタマイズ
www.ituore.comこれもいろいろ自分で編集しないといけないので難易度が高かったのですが、これでだいぶブログがおしゃれになります。
スマホ固定フッターメニューをつける
スマホの画面ボトムに設置される案内バーは以下のサイトを参考にしました。
ユーザーが好きなページへアクセスしやすくなるのでページビューが上がります。
スマホでも2列表示する
通常だとスマホでは記事が1列で表示されます。
以下のサイトを参照すると2列表示に出来ます。
サイドバーのプロフィール画像を大きく表示
HTML編集で大きく表示されるようにしました。
だいぶ見やすくなりました。参考にしたサイトは下の通りです。
▼参考URL
記事一覧をクリックするとふわっとするホバーアクション
アイキャッチにマウスをのせたときにふわっと浮かび上がる動き。
▼参考URL
www.fuji-blo.comこちらの記事を参考にホバーアクションをつけました。
バックアップをとっておこう！
どれがなんのコードかわからなくなってしまうので、自分でわかるようにバックアップをとっておくことが重要です。
せっかく調べて一生懸命作ったコードも、何かのはずみで崩れてしまうこともあります。そしてこのコードなんだっけ？となってしまいます…。
おわりに
一つ一つ時間がかかりますが、ブログをカスタマイズしていくってお家を作っていくような感じに似ていて、どんどん愛着がわいてきますね。
最後までお読みいただきありがとうございました。
▼関連記事