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

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

ルルコ
難しいことはわからないけど、カスタマイズして自分らしいブログにしたい!
初心者でも簡単にできるカスタマイズをまとめるよ!

ルル

ブログを始めてすぐぶつかったのがカスタマイズの壁。

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

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

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

記事の内容
  • テーマの選び方
  • トップページのカスタマイズ(ヘッダー、フッター、トップ他)
  • 記事内のカスタマイズ(吹き出し、装飾、ボックス他)
  • 定型文の使い方

ルルコ
ほとんどUnderShirt以外のテーマでも使えるカスタマイズばかりだよ!

こんな人におすすめ

  • テーマ選びの仕方がわからない
  • オリジナル性のあるブログにしたい
  • 初心者にもできるカスタマイズをしたい
  • Undershirtのカスタマイズがしたい

Contents

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

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

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

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

カスタマイズして、オリジナルなブログを作りたい!という場合は

  • シンプル
  • カスタマイズの方法もたくさん開示されている人気のテーマ

がおすすめです。

【UnderShirt】を選びました

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

blog.hatena.ne.jp

UnderShirtの特徴

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

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

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

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

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

参考にしたブログ

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

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

参考にしたブログ

▼くうかさん (ワードプレスへ引っ越しされました)www.kurasitotonoe.com

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

くうかさんはワードプレスへ引っ越されてしまいましたが、本当にわかりやすい説明でとても参考になりました。

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

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

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

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

はてなブログ トップページのカスタマイズ

はてなブログ トップページのカスタマイズ

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

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

ルル
まずはトップページのカスタマイズを紹介するよ!
カスタマイズ内容
  • ヘッダー
  • グローバルメニュー
  • カード型アイキャッチ
  • フォローボタン
  • スマホ固定フッター・2列表示
  • プロフィール画像
  • ホバーアクション
  • ヘッダーにおすすめ記事

一つ一つ紹介していきます。

ヘッダーのカスタマイズ

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

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

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

f:id:momolulu:20200313153828p:plain

はてなブログ ヘッダー

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

ただ、ちょっと気になったことが2点。

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

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

▼参考URL▼

www.imaichido.com

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

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

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

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

アイキャッチの作り方は以下の記事でまとめてあるので良かったら読んでみてくださいね。

合わせて読みたい

www.lulumamakiroku.work

グローバルメニュー設定

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

▼参考URL▼

gakublog.com

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

テーマによってなのかわかりませんが、どうしてもうまくいかないグローバルメニューもありました。

もしできなかった場合は別のグローバルメニューを探してみましょう。

記事説明文を表示しない

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

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

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

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

ルルコ

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

サイドバー、記事下のフォローボタンのカスタマイズです。

ルル
これはちょっと難しかった…。

▼参考URL▼

www.ituore.com

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

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

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

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

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

▼参考URL▼

www.bambi.pro

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

スマホでも2列表示する

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

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

スマホでの2列表示

▼参考URL▼

blog.rokuzeudon.com

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

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

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

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

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

▼参考URL▼

panmeeee.hatenablog.com

記事一覧にホバーアクション

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

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

▼参考URL▼

www.fuji-blo.com

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

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

ルル

ヘッダーにおすすめ記事をのせる

トップページのヘッダー下におすすめ記事をのせる方法です。

古い記事はどんどん埋まってしまうので自分のおすすめしたい記事をのせておけばクリックしてもらいやすいですね。

ルルコ
はてなブログっぽくなくなる!おしゃれ!

▼参考URL▼

www.bambi.pro

はてなブログ 記事内のカスタマイズ

はてなブログ 記事内のカスタマイズ

トップページだけではなく、記事内もいろいろとカスタマイズできます。

ルルコ
ボックスや吹き出しを入れるとだいぶブログらしくなるよね!
カスタマイズ内容
  • 見出し
  • ボックス
  • 箇条書き
  • ステップバー
  • ボタン
  • 蛍光ペン風アンダーライン
  • 吹き出し

はてなブログはワードプレスに比べてカスタマイズの自由度が低いとよく言われますが、ここまでカスタマイズできちゃうので優秀です。

カスタマイズ考えてくれた人、とにかくすごい! 

ルル

カスタマイズは最初は大変ですが、一度設定すればあとは簡単に使えるものばかりなので、できる範囲で試してみてくださいね。

見出しのカスタマイズ

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

▼参考URL▼

www.notitle-weblog.com

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

f:id:momolulu:20200313160257p:plain

www.colordic.org

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

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

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

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

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

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

▼参考URL▼

www.ikemenmusuko.net

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

ルルコ

ボックス・箇条書きのカスタマイズ

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

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

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

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

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

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

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

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

▼参考URL▼

www.fuji-blo.com

www.fuji-blo.com

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

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

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

/* 斜体表示を蛍光ペン(ピンク)風に */
<style type=”text/css”>
article em{
font-weight:bold;
font-style: normal;
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, rgba(255,153,255,1) 60%) !important;
}
/* iタグは斜体*/
article i{
font-style:oblique !important;
}

</style>

▼引用元URL▼

www.chocoberry-life.com

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

吹き出し

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

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

ルルコ

▼参考URL▼

www.fuji-blo.com

ボタン

アフィリエイトリンクを埋め込みたいときに便利なのがボタン。

SEO対策のプロも愛用。検索順位チェックツールGRC

ルル
これもあるとないでだいぶ印象が違うよね!
でもリンクの貼り方が難しくてうまくできない…。 

ルルコ

こちらの記事でやり方が詳しく説明されています。

▼参考URL▼

www.fuji-blo.com

少し難しいので、自分のメモ用に一部引用とメモしておきます。

自分で書き込む必要があるので慣れるまで大変ですね。

ボタンを中央寄せにしたい場合は取得してきた広告リンクを<div class="center"></div>で囲うと中央に寄せることが出来ます。

<a href=”~のaとhrefの間にclass=”link-btn 使いたいボタン色のclass名”を入れます。(ボタンサンプルclass名のグレーの部分です)

ボタンカラー

シンプルカラー:ao midori pink kuro

グラデ:g-ao g-midori g-pink g-kuro

ステップバー

ステップバーは手順説明の際に役に立ちます。

こんな感じの手順説明。見たことあるよね? 

ルルコ
STEP
参考URLを見る
フジグチさんの記事を参考にしてください。
STEP
CSS・定型文を設定
デザインCSSの編集と定型文登録をします。

まさかこのステップバーがはてなブログでできるとは思っていませんでした。

こちらもCSSコード+定型文機能を駆使すれば簡単に使うことができます。

▼参考URL▼

www.fuji-blo.com

カスタマイズするときの注意

カスタマイズは一歩間違えるとデザインが崩れたり、大変なことになります。

ルル
時間をしっかりとれるときにやったほうがいいよ!
カスタマイズの沼にはまっちゃって記事書けなくなっちゃうのも注意! 

ルルコ

2点だけ注意しておいてほしいことをまとめておきます。

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

はてなブログ カスタマイズ

ルル
とにかくバックアップはとっておこうね。

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

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

いや、正直なっています…。

定型文機能を使おう!

記事内のカスタマイズで必ず使ってほしいのが「定型文機能」です。

ルルコ
HTMLにいちいちコピーするのは本当に大変! 

定型文機能ができるまではHTMLにコピーしていましたが本当に時間がかかりました。

定型文機能もワードプレスに比べればかなりアナログですが、はてなブログにとってこの機能はかなりの革新です。

絶対に使ったほうがいいよ!早いうちに! 

ルル

▼参考URL▼

staff.hatenablog.com

おわりに

はてなブログ カスタマイズ

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

CSSもHTMLもよくわからなくても、先人の知恵でなんとかここまでカスタマイズできました。感謝です。

ルル
みんなのブログも納得のいくブログになりますように。

カスタマイズは「はてなブログPro」でない場合は出来ない可能性があります。

▼はてなブログProの申込はこちらから

▼独自ドメイン取得の設定

www.lulumamakiroku.work

▼おすすめASP

まだ登録していなかったら見てみてね。

もしもアフィリエイトの簡単リンクがおすすめ。

▼検索順位チェックツールGRCもおすすめ

無料版もあるので検索流入UPしたい人はぜひ試してみてね。

www.lulumamakiroku.work

当ブログは2020年9月にワードプレスへ移行いたしました。

▼関連記事

www.lulumamakiroku.work www.lulumamakiroku.work

www.lulumamakiroku.work

www.lulumamakiroku.work

www.lulumamakiroku.work

この記事を書いた人

Contents
閉じる