タグ: はてなブログ

はてなブログのブログタイトル（自分のブログ名）はオリジナルだと、ちょっと味っ気ないですよね。

自分のブログに合うようにブログタイトルをカスタマイズして、他のサイトと差別化を図りましょう。

ブログタイトルのカスタマイズ

私がやっているはてなブログのブログタイトルは、customize-testと言ってカスタマイズの練習をしているブログなのですが、ブログタイトルはこんな感じです。

背景の色も白だし、タイトルも左に寄っているし、文字も小さいのでちょっと変更してみました。

背景をナビゲーションバーと同じ色にし、文字も大きく、白に変えてみました。ナビゲーションバーの設置方法は「Innocentにグローバルメニューをコピペで設置する方法」を参考にどうぞ。

ブログタイトルに画像を使う人も多いですが、高速化をしたいのならお勧めしませんので。

一昔前はみんな画像を貼っていたと思うのですが、写真ブログ以外は特にこだわりがなければ、画像を使わない方がユーザビリティも上がります。

ブログタイトルのフォントサイズ、色、背景を変える方法

カスタマイズのコードを張る場所は、「ダッシュボード」→「デザイン」→「カスタマイズ（レンチマーク）」→「デザインCSS」です。

まずは、タイトルの背景とタイトルの色、フォントサイズを変えるコードです。

1行目のbackgroundの#00bfffを、任意のカラーコードに変えると、タイトルの背景色が変わります。

• 黒・・・#000000
• 赤・・・#ff0000
• 青・・・#0000ff

カラーは原色大辞典よりどうぞ。

4行目のcolorの＃以降を変えると、文字色が変わります。

5行目のfont-sizeは文字の大きさで、2emはブログで使っているフォントの2倍の大きさと言う意味なので、任意の大きさに変えましょう。

• 1.2em・・・1.2倍の大きさ
• 1.5em・・・1.5倍の大きさ
• 3em・・・3倍の大きさ

今の段階では、こんな感じに表示されます。ブログタイトルの枠が大きいですね。しかも左に寄っているのでアンバランスだし・・・。

ブログタイトルを真ん中に位置し、ヘッダー狭める方法

次に、文字を真ん中に位置し、ヘッダーを狭くします。下記コードを同じデザインCSSに貼り付けます。

2行目のpadding-topはタイトル上の余白を、padding-bottomはタイトル下の余白をどのくらいにするかと言うものです。

私は狭くてよかったので0pxにしていますが、お好みでサイズを変えて下さい。

もしヘッダーの幅はそのままでタイトルを真ん中に持ってくるだけなら、上のコードは使わずに、以下のコードだけで大丈夫です。若干太いですが、ブログタイトルの大きさを変えたら問題なさそうですね。

#blog-title {
text-align: center;
}

ブログタイトルのフォントを変える方法

ブログタイトルのフォントを変えたい場合は、Google fontを使って変えるのが簡単です。

以下に9つの文字例があるので、気に入ったもので設定してみて下さい。Google fontで確認できます。

気に入った文字の番号のCSSを下記からコピペして、タイトル下に貼り付けて下さい。場所・「ダッシュボード」→「デザイン」→「レンチマーク」→「ヘッダ」→「タイトル下」

1. <link href=”https://fonts.googleapis.com/earlyaccess/mplus1p.css” rel=”stylesheet” />
2. <link href=”https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css” rel=”stylesheet” />
3. <link href=”https://fonts.googleapis.com/earlyaccess/hannari.css” rel=”stylesheet” />
4. <link href=”https://fonts.googleapis.com/earlyaccess/kokoro.css” rel=”stylesheet” />
5. <link href=”https://fonts.googleapis.com/earlyaccess/sawarabimincho.css” rel=”stylesheet” />
6. <link href=”https://fonts.googleapis.com/earlyaccess/sawarabigothic.css” rel=”stylesheet” />
7. <link href=”https://fonts.googleapis.com/earlyaccess/nikukyu.css” rel=”stylesheet” />
8. <link href=”https://fonts.googleapis.com/earlyaccess/nicomoji.css” rel=”stylesheet” />
9. <link href=”https://fonts.googleapis.com/earlyaccess/notosansjapanese.css” rel=”stylesheet” />

次に以下のコードの「ここに貼る」部分を任意のものにし、デザインCSSに貼れば完成です。

1. Mplus 1p
2. Rounded Mplus 1c
3. Hannari
4. Kokoro
5. Sawarabi Mincho
6. Sawarabi Gothic
7. Nikukyu
8. Nico Moji
9. Noto Sans Japanese

例えば8番を選ぶと、こんな感じになります。（日本語用のフォントなのでcustomize-testをカスタマイズテストに変更しました）

#title{
font-family: “Nico Moji”;
font-size: 30px;
letter-spacing: 15px;
}

ちなみにfont-sizeで文字の大きさを変え、letter-spacingで文字と文字の間隔を変えます。

＜参照記事・ミニマムコラム＞

最後に

ブログタイトルはブログの顔なので、他のサイトと差別化を図ってインパクトがあるもの、もしくは覚えやすいものにしたいですね。

その他のカスタマイズは、「はてなブログのカスタマイズ集（すべてコピペでOK）と収益化方法などのまとめ」からどうぞ。Lazy Loadで高速化や、サイドバーに画像リンクの貼り方など色々なカスタマイズを紹介しています。

みなさん、アイキャッチ画像は毎回アップしていますか？

えっ！？してない？

そんな人は必ず設定しましょうね。

しかもただ単に画像をアップするだけじゃなく、文字を入れて読者が一目でどんな記事なのか分かるようにすれば、アクセスアップ間違いなしです。

Windows標準機能のペイントや、macも画像を開いてツールから文字を入れれますが、私がいつも使っているものは、Canvaという無料ソフトです。

アイキャッチ画像のメリット

上の画像の左側はアイキャッチ画像無しのトップページで、右がアイキャッチ画像付きにになります。

記事にアイキャッチ画像があれば、サイドバーの最新記事や人気記事に画像が付くので人目を惹きやすくなります。（サイドバーに画像を使うのには設定が必要です）

また、ツイートしたときにも画像が付くので、クリックされやすくなりますよね。

下のスクショは私の別のブログなんですが、海外旅行好きの人は良かったら読んでみて下さい。（笑）

アイキャッチ画像の設定方法

まずはてなブログのアイキャッチ画像の設定方法ですが、簡単です。

記事を書くときに（もしくはすでにある記事の）一番上に写真を投稿すると、それがアイキャッチ画像として表示されます。

「写真を投稿」→「任意の画像をクリック」→「選択した写真を貼り付け」を順にクリックしていくと、上の画像の赤枠の様に写真が表示されます。

記事内で使わない画像をアイキャッチ画像として使う方法

記事で使わない写真をアイキャッチ画像として使う場合、例えば過去に使った写真を使う場合は、まず任意の写真をクリックして記事に表示します。

次にHTML編集をクリックすると、以下の様に写真のURLが見れます。

今回で言えばこの赤線のURL

https://cdn-ak.f.st-hatena.com/images/fotolife/n/user name/20200121/20200121061706.jpg

を「編集オプション」のアイキャッチ画像の下にある個所に貼り付けます。

この方法だと、記事の下の方で使っている画像をアイキャッチ画像として使う場合にも有効です。

Canvaの使い方

やっと本題ですCanvaの使い方です。

私はほとんどシンプルにしか使わないのですが、それでも有ると無いのでは全然違うので皆さんもやってみて下さい。

まずはCanvaに行き、デザイン作成→カスタムサイズ→幅・高さを設定。通常の幅・高さは600ｘ400にしていますが、グーグル砲を狙うなら1200ｘ800で設定します。

次にアップロードを選び、「画像または動画をアップロード」をクリックして任意の画像をアップします。画像と選んだサイズが合わない場合は、画像の大きさを変えて下さい。（使う画像は、著作権フリーの画像の探し方で紹介していますが私はPixabay、もしくはCanvaの「写真」をよく使います）

次に、「素材」→「図形」をクリックして正方形の図形を選びます。

正方形を選ぶと下の写真の様になっているので、形を調整します。私はいつも長方形にしています。

形を変えたら、右上にある「透明度」をクリックして、四角の透明度を変えて後ろの画像が見えるようにしましょう。

テキストをクリックし、「見出しを追加」を選びます。

最後に見出しに記事のタイトルを書き、右上にある「矢印」をクリックしダウンロードします。標準ではPNGになっているので、JPEGに変えてダウンロードしましょうね。

これをhttps://compresspng.com/で軽量化して60KBくらいにして使いましょう。100KBとかあると表示速度がかなり遅くなるので注意です。

また、記事に写真を載せる時は画像遅延読み込みのLazy Loadを使うと表示速度が上がります。こちら「はてなブログでLazy Loadを使う方法」を参考にどうぞ。

最後に

慣れないうちはこのひと手間が面倒かもしれませんが、慣れれば１分もかからないので、毎記事アイキャッチ画像を作りましょうね。

これがあるだけで、私のブログは回遊率が結構上がりましたよ。

また、画像を記事にアップロードする前は必ず圧縮してから上げないと、表示速度が遅くなるので気を付けて下さいね。

こちら「画像を圧縮して表示速度を上げる方法」を参考にどうぞ。

今回ようやく記事数が６０を超えたので、ご褒美としてブログのカスタマイズにちょっと時間を割こうといろいろやっていると、サイドバーに画像付きのリンクを貼る方法がかなり簡単だったので、ご紹介します。

はてなブログのカスタマイズを検索すると、いろいろなものが出てきますよね？

かなり昔の記事で、仕様が変わっていて分かりにくかったり、なんか面倒臭い感じだったりと。HTMLの知識があれば別ですけど、私は全然わからないので苦労しています。

今回ご紹介する方法は、簡単、早い、知識いらずで、出来ますので皆さんもやってみて下さい。

サイドバーにリンク付き画像挿入方法

上記写真のようになり、画像をクリックすると指定したリンクに飛びます。

画像付きだと、ちょっとオシャレになりますね。

やり方は2通りあって、１つははてなフォトライフを使うものと、投稿ページを使ってやる方法です。

私はいつもはてなフォトライフで圧縮するのでフォトライフを使いますが、使わない人は投稿ページからが簡単です。

それではまずは、一番簡単な投稿画面を使ったやり方から紹介します。

投稿画面を使う方法

まずは通常通りダッシュボードの「記事を書く」から編集画面に行き、サイドバーに使う写真をアップします。

写真のサイズは幅300～400くらいでOKです。あまり大きいとページが重くなるので。

写真を投稿したら、

1. 表示された画像をクリック
2. 左上のLinkマークをクリック
3. ポップアップが出てくるので、URLにリンク先のURLを入れプレビューをクリック（アフィリンクも入れれます）
4. 表示されたものを選ばずに「選択した形式でリンクを挿入」をクリック

次にHTML編集をクリックし、コードを表示します。

このコードの<p></p>以外の部分をコピーします。下の赤文字部分のみコピーですね。

このやり方の人は、次のはてなフォトライフのやり方を飛ばしてはてなブログの設定にどうぞ。（ページ下部に移動します）