lulu Mama*kiroku*

2歳の女の子を育てるワーママのブログ。子育て・仕事・健康・おしゃれのことなどママの気になる情報を発信します。

【はてなブログ】基本のカスタマイズまとめ*テーマをUnderShirtにしました!

【はてなブログ】基本のカスタマイズまとめ UnderShirt

ルル
ブログのカスタマイズって初心者にはなかなか簡単には手が出せないですよね。

ブログを始めて2ヶ月。(随時追記しています)

いろいろ調べてカスタマイズも少しやってみましたが、思い描くようなイメージにはならず、思い切ってテーマを変えることにしました。

カスタマイズも0からやり直しです。

初心者の私ができる範囲で頑張ったカスタマイズ、参考にしたサイトなどをまとめていきます。

この記事は、こんな人におすすめの記事です。

こんな人におすすめ
  • テーマ選びの仕方がわからない
  • 初心者にもできるカスタマイズをしたい
  • Undershirtのカスタマイズがしたい

テーマストアでテーマを選ぼう!

私はもともと【Haruni】を使っていました。ピンクのグラデーションカラーがきれいなシンプルデザインです。

デフォルトのデザインが可愛いくて、あまりカスタマイズせずに使えて初心者に優しかったです。グローバルメニューの設置も楽でした。

ただ、色が全体的にピンクで可愛らしくなりすぎることと、いろいろカスタマイズしていきたかったので、もっとシンプルなテーマを選ぶことにしました!

ルル
会話カスタマイズしてオリジナルなブログを作りたい!と言う場合はシンプルで、カスタマイズの方法もたくさん開示されている人気のテーマを選ぶと良いよ!

【UnderShirt】を選びました

そこで選んだのが【UnderShirt】です。

blog.hatena.ne.jp

UnderShirtの特徴
  • カード型アイキャッチ(2列)
  • シンプルでカスタマイズしやすい
  • アイキャッチが大きく表示される

Haruniもアイキャッチが大きい、タイトルのみの表示なので気に入っていましたが、悩みに悩んで、えいや!と変更することにしました。

テーマを変更すると、いろんなデザインをやり直さないといけなくなるので一大決心ですね。

ルル
本当に悩んだけど、いろんなカスタマイズがしやすくて、ブログに愛着が出てきたから変えて良かった!

早い段階でテーマ変更できて良かったです。

参考にしたブログ

さてテーマを変更したら、次はどうカスタマイズするかです。

UnderShirtを使っていて、カスタマイズされている方のブログを参考にしました!

▼ぷらてんさん www.plus10net.com

▼くうかさん www.kurasitotonoe.com

▼スミカさん www.8-sumica-8.com

皆さん本当にわかりやすい説明でとても参考になりました。

そしてデザインもおしゃれで可愛い!

ぷらてんさんもくうかさんもスミカさんのブログを見て衝撃を受けてUnder Shirtにされたそうです。

イラストがとにかくおしゃれで洗練されています。

目標とするブログがあるとモチベーションも上がります。

ルル
「この人のブログおしゃれ!」と思ったらどのテーマを使ってるのか調べてみよう。

カスタマイズしてみよう!

テーマが決まったらいよいよカスタマイズです。

ヘッダーをオリジナルにするだけでもトップページの印象ががらりと変わります。

ルル
カスタマイズをやり始めると私は沼にはまってしまって、なかなか記事が書けなくなっちゃった!みんな気を付けてね。

ヘッダーのカスタマイズ

あれこれ写真を入れてみたりしたのですが、大きさが微妙だったり、ブログ名が見えにくくなってしまったり、なかなかしっくりこなかったので、Canvaで作ることにしました。

はてなブログのヘッダーサイズ 1000×200

▼管理画面 ▼デザイン設定▼カスタマイズ▼ヘッダで画像アップロードし、「画像だけ表示」を選択しました。

f:id:momolulu:20200313153828p:plain

はてなブログ ヘッダー

こんな感じになりました!

  • スマートフォンで見ると、画像が小さく切れてしまう
  • 余白が大きい

この問題は以下のサイトで解決しました。

www.imaichido.com

ヘッダーの画像の設定だけで、いろいろ試行錯誤して遠回りしながら作ったのでかなり時間がかかってしまいました。

でもとっても気に入ったヘッダーができたので満足です。

Canvaってすごい!と開眼しました。

今回のアイキャッチもCanvaで作りました。

アイキャッチの作り方は以下の記事でまとめました。

合わせて読みたい

www.lulumamakiroku.work

グローバルメニュー設定

グローバルメニューはこちらのサイトを参照しました。

gakublog.com

スマホ表示でもきれいに表示されるのでとても良いです。

テーマによってなのかわかりませんが、どうしてもうまくいかないグローバルメニューもあったので、もしできなかった場合は別のグローバルメニューを探してみると良いですよ。

見出しのカスタマイズ

見出しはこちらのサイトを参考にしました。

www.notitle-weblog.com

 

▼管理画面 ▼デザイン設定▼カスタマイズ▼デザインCSSにコードを入力します。

f:id:momolulu:20200313160257p:plain

 

www.colordic.org

カラーコードを変えれば、好きな配色にできます。

私はエメラルドっぽい感じにしました。

はてなブログの大見出しの設定はh2がとばされてる?!

見出しをカスタマイズすると気付くのですが、文中の見出しはh3から始まります。

これがSEO的にもあまりよくない。

ルル
下の記事を参考に書き換えるようにしたよ。

www.ikemenmusuko.net

簡単だから最初のうちにやっておきたいね! 
ルルコ

ボックスのカスタマイズ

これ使いたい!とずっと思っていたボックス。

このボックスは、次の2ステップで使えます。

▼管理画面 ▼デザイン設定▼カスタマイズ▼デザインCSSにコードを入力

②ブログ作成中にHTML編集でコードを入力

難しそうだなーと思っていましたが、意外と簡単でした。

ただいろんなボックスを使うと、どれがどれかわからなくなるので要注意。

え?!今はもっと簡単に見たまま編集でボックス使える…?!

ルル
デザインCSSにコード入れずに、いきなりボックス編集できるやり方を見つけたよ!

▼参考URL

www.fuji-blo.com

ルル
定型文機能を使ってさらに楽になったよ!これ最初から欲しかったー! 

蛍光ペン風アンダーライン

▼管理画面 ▼設定▼詳細設定▼検索設定最適化▼HEADに要素を追加に次のコードを入力しています。

「斜体」ボタンを押すだけでマーカーが引けるようになります。

こちらのサイトを参考にしました。

▼参考URL

www.chocoberry-life.com

記事説明文を表示しない

カード型アイキャッチの下をタイトルだけが表示されるようにしました。

▼管理画面 ▼デザイン設定▼カスタマイズ▼デザインCSSにコードを入力

/* ブログ説明文を表示しない */
.archive-entry-body .entry-description {
display: none;
}

これでブログトップページの見た目がだいぶすっきりしたよ! 
ルルコ

吹き出し

吹き出しもHTML編集のみで使えるようになりました!

ルル
定型文&見たまま編集でかなり楽ー!感謝!
吹き出しがあると一気にブログらしくなるよね。 
ルルコ

▼参考URL

www.fuji-blo.com

フォローボタンのカスタマイズ

www.ituore.comこれもいろいろ自分で編集しないといけないので難易度が高かったのですが、これでだいぶブログがおしゃれになります。

スマホ固定フッターメニューをつける

スマホの画面ボトムに設置される案内バーは以下のサイトを参考にしました。

ユーザーが好きなページへアクセスしやすくなるのでページビューが上がります。

スマホ固定フッターメニュー

www.bambi.pro

ルル
コードをけっこう編集しないといけないのでなかなかうまくいかず大変だったけど、回遊率が上がるので絶対やったほうが良い! 

スマホでも2列表示する

通常だとスマホでは記事が1列で表示されます。

以下のサイトを参照すると2列表示に出来ます。

スマホでの2列表示

blog.rokuzeudon.com

サイドバーのプロフィール画像を大きく表示

ルル
サイドバーに表示されるプロフィールの画像…なんかぼやけてるし小さくないですか? 

HTML編集で大きく表示されるようにしました。

サイドバーのプロフィール画像

だいぶ見やすくなりました。参考にしたサイトは下の通りです。

▼参考URL

panmeeee.hatenablog.com

記事一覧をクリックするとふわっとするホバーアクション

アイキャッチにマウスをのせたときにふわっと浮かび上がる動き。

ルルコ
ホバーアクションっていうらしいよ。つけたいよね! 

▼参考URL

www.fuji-blo.comこちらの記事を参考にホバーアクションをつけました。

この動きがあるとテンション上がるよ。 
ルル

バックアップをとっておこう!

どれがなんのコードかわからなくなってしまうので、自分でわかるようにバックアップをとっておくことが重要です。

せっかく調べて一生懸命作ったコードも、何かのはずみで崩れてしまうこともあります。そしてこのコードなんだっけ?となってしまいます…。

おわりに

一つ一つ時間がかかりますが、ブログをカスタマイズしていくってお家を作っていくような感じに似ていて、どんどん愛着がわいてきますね。

ルル
良いブログになりますように。 

最後までお読みいただきありがとうございました。

▼関連記事

www.lulumamakiroku.work

www.lulumamakiroku.work

www.lulumamakiroku.work

www.lulumamakiroku.work

www.lulumamakiroku.work

www.lulumamakiroku.work

www.lulumamakiroku.work

www.lulumamakiroku.work

www.lulumamakiroku.work