自作タイトル・TOPへ・目次を追加しよう - Blogger（ブログの作り方04）

どうも～♪ 本のソムリエ（見習い補佐）のだるまです。


今回は「ブログ全体の使いやすさ」を向上させる方法をご紹介します。これらの編集をすれば長文の記事でもスムーズに読めるようになるので、読者の定着に結びつくと思います。


※前回までの記事を読んでいない方は、ぜひ順番にお読みください。特に初回は読んでおかないと後悔することになるかもしれませんよ。

⇒「要注意事項と役立つコツを知っておこう - Blogger（ブログの作り方01）」

それでは、さっそくいってみましょう～♪


《注意！》この記事はBloggerの「ｼﾝﾌﾟﾙ･ﾃﾝﾌﾟﾚｰﾄ」に関してのものです。その他のブログやテンプレートでは記事の通りに反映されない可能性があります。

目　次

• １．ブログタイトルを自作しよう
ⅰ．タイトルサイズを小さくする
ⅱ．「デザインソフト」を使おう
ⅲ．モバイル版の調整
• ２．「ＴＯＰへ」ボタンを追加しよう
ⅰ．「ＴＯＰへ」ボタンの役割
ⅱ．「ＴＯＰへ」ボタンを作ろう
ⅲ．ガジェットに追加するだけ
• ３．「目次」を作ろう（手動）
ⅰ．「目次」で移動もラクラク
ⅱ．「目次」のひな形を作る
ⅲ．「目次」設置は３段階

１．ブログタイトルを自作しよう

Blogger（ｼﾝﾌﾟﾙﾃﾝﾌﾟﾚｰﾄ）のブログタイトルはあまりにもお粗末で見るに耐えませんね。ブログを作っていく過程で大半の人は我慢ならなくなるのではないでしょうか。そこで、ここではブログタイトルのデザインを自分好みにする方法を紹介します。

ⅰ．タイトルサイズを小さくする

まず、デザインを考える前に「タイトルサイズ」を決めなければいけません。私は（縦方向に）小さくすることをオススメします。なぜかというとBloggerのブログタイトルは大きすぎて、記事を読むためにかなり下までスクロールしなければいけません。これでは読者のストレスになってしまいます。


タイトルサイズを（縦方向に）小さくすることで読者がすぐに記事を目にすることができるようになり、再訪してくれる人も増えるかもしれません。それではタイトルサイズを小さくしてみましょう。

/* タイトル（大きさ）*/
#Header1 {
height: 100px;
}

上記のコードを【カスタムＣＳＳ】に貼り付けてください。数値はそれぞれの好みで変更してくださいね。

ⅱ．「デザインソフト」を使おう

それではサイズが決まったところで、そのサイズ（私の場合はヨコ910px - タテ100px、解像度はmax）に合ったデザインを考えていきましょう。これには「デザインソフト」を使う必要があります。ただ「デザインソフト」はけっこう高額なので、ブログのためだけに買うのは躊躇してしまいます。


かといって、フリーソフトはウイルス等が心配で手を出しにくいですね。そこで、そういった人にピッタリなソフトをここで紹介したいと思います。何とこのソフトは無料（※2016年末現在）かつウイルスの心配もほぼ無いという理想的なものです。


そのソフトとは・・・「Microsoft Expression Design 4」というものです。そうです、あのマイクロソフトが無料で配っている「デザインソフト」です。なのでウイルスの心配はほぼしなくてもいいでしょう。ブログタイトルやプロフィール画像程度であれば、このソフト一本で十分対応できます。


 ※ソフトのダウンロードは以下からどうぞ（説明をよく読んで「日本語版」を選んでください）。

⇒「Microsoft Expression Design｜freesoft100」


※このソフトの使い方については、以下の記事がわかりやすかったですよ。

⇒「猫でもわかるExpression Design｜kekyoの丼」


あとは『習うより慣れろ』ですかね。あ！それから無料なだけあってもちろんサポート対象外ですよ。

ⅲ．モバイル版の調整

自作の画像ができあがったら、さっそくブログタイトルと交換してみましょう。これは驚くほど簡単なので『あっ』という間にできてしまいますよ。

※交換の仕方は以下の記事に載っています。

⇒「1分？いや30秒で出来る！タイトルを画像に変更する方法｜Blogger-customize.com」


どうでしょうか。これまで以上に自分のブログに愛着がわいてきますよね（笑）。それでは最後に「モバイル版」の調整をしておきましょう。ＰＣのほうは以上のやり方で問題ないのですが、モバイルのほうでは元のタイトル背景が重なって表示されます（汗）


まずは【テンプレート⇒カスタマイズ⇒上級者向け⇒背景】で「ヘッダーの背景」を「透明」にしましょう。これで元のタイトル背景が邪魔しなくなります。しかし、スペースはできたままなので「margin」で調整しましょう。

.mobile Header {
margin-bottom: -45px;
}

上記のコードを【カスタムＣＳＳ】に追加してください。数値は変更してもいいですよ。なぜモバイルでは元の背景が消えないのかわかりませんが、とりあえずはこれで難を凌いでおきます。もっといい方法が見つかったときは更新しますね。

目次に戻る

２．「ＴＯＰへ」ボタンを追加しよう

ⅰ．「ＴＯＰへ」ボタンの役割

さまざまなブログを見ていると、よく片隅に「↑（上矢印）ボタン」を見かけますよね。これは「ＴＯＰへ（戻る）ボタン」といって、クリックすることによって記事の一番上までジャンプしてくれる優れものです。特に長文の記事の多いブログで活躍してくれます。


もし、あなたのブログが長文の記事を多く扱う予定なら、ぜひこの機能を追加しておきましょう。これによって読者の負担が大幅に軽減すること間違いなしです。特にモバイルで記事を見ているときに上まで戻るのは苦労します。


その負担のために読者があなたのブログから離れてしまってはもったいないですよね。この「↑ボタン」はシンプルで比較的短時間で作れるので安心してください。

ⅱ．「ＴＯＰへ」ボタンを作ろう

それでは「↑ボタン」のデザインから始めましょう。これも上記（1-ⅱ）で使った「Microsoft Expression Design 4」で簡単に作れます。デザインなどはそれぞれの好みでいいのですが、記事の邪魔にならないようにできるだけシンプルなものにしたほうがいいと思います（大きさは50px - 50px程、解像度はmax）。


デザインができたら「↑ボタン」を半透明化させましょう。半透明化させておけば記事の文字上に「↑ボタン」が重なっても、下の文字が透けて見えるので邪魔になりません。「↑ボタン」を半透明化するには「Microsoft Expression Design 4」から【プロパティ⇒「↑ボタン」全体を選択⇒不透明度】で60%程度にしてください。


半透明化がすんだら画像を保存します【「↑ボタン」全体を選択⇒エクスポート⇒PNG形式・透明度をチェック⇒すべてをエクスポート】。それからBloggerの「下書き記事」に「↑ボタン」画像を貼り付けます。貼り付けたら下書き画面の【ＨＴＭＬ】から画像のアドレスを入手（コピー）しておきます。

ⅲ．ガジェットに追加するだけ

【ＨＴＭＬの編集】を使ったやり方など複雑なものもありますが、ここではガジェットに追加するだけのシンプルな方法を紹介したいと思います。【レイアウト⇒ガジェットを追加】から「ＨＴＭＬ/JavaScript」を追加してください（ガジェットの場所は後で調整します）。


このガジェットに「↑ボタン」のコードをコピペするだけでＯＫです（「img src="○○○"」の○○○の中は先ほど入手しておいた画像アドレスに変更してください）。

※「↑ボタン」コードの入手は以下の記事からお願いします。

⇒「BloggerにjQuery 不要のスクロールアップボタンを超簡単に設置できるピュアCSSコード｜ふりむけばコウホウ」


最後に「↑ボタン」の位置を決めましょう。まずは右下隅か左下隅に「↑ボタン・ガジェット」を移動させてください。さらにガジェット内のコードで位置の調整をして完成です。私は左下隅が使いやすいと思っていますが、みなさんもいろいろ試して好みの位置を探してくださいね。

目次に戻る

３．「目次」を作ろう（手動）

ⅰ．「目次」で移動もラクラク

さて、「↑ボタン」によって簡単に記事ＴＯＰへ移動できるようになりました。ただ上にはジャンプできても下（任意の記事）にはジャンプできませんよね。そこで、今度は下にジャンプできるように「目次」を作ることにしましょう。「目次」があれば長文の記事を読む負担がさらに軽くなります。


では「目次」を作っていきましょう。ただし、ここで紹介するのは手動で作る「目次」です。自動で作る「目次」より融通が利くので私は満足していますが、記事をたくさん書きたい人には向いていないかもしれません。


その場合は自動で作れる「目次」を自力で探してくださいね（笑）。私は面倒だったので手動でコツコツ作ることにしました。私のブログは記事数も少ないので、さほど苦にはなりません。

ⅱ．「目次」のひな形を作る

さて、「目次」を毎回手動で一から作るのは非常に面倒なので、どこか（例えばGoogleドキュメント内）に「目次」のひな形を作って保存しておきましょう。それなら「目次」が必要になったときに、そのひな形をコピペするだけで作業の手間がだいぶ省けます。


※まずは以下の記事を参考にして、基本となるひな形を作りましょう。

⇒「コピペでOK! bloggerで記事内に目次を作る｜ちょいラク。」

⇒「<ul> …… 順序のないリストを表示する｜ＨＴＭＬクイックリファレンス」


「章」の数などリンク先のスタイルと同じでいいならそのまま使いましょう。私の記事では「章」だけでなく「節」もあるので、以下のように少し複雑なひな形にしています（※モバイルでコードがはみ出している場合はスワイプしてご覧ください）。

<div class="mokuji">
<div id="mokuji">
<span style="font-size: large; font-weight: bold;">目　次</span></div>
<ul style="list-style-type: none;">
<a href="https://komenikuyasai.blogspot.jp/.html#title1">
<li><span style="margin-left: -20px; text-decoration: underline;">１．</span></li>
</a> <div>
ⅰ．</div>
<div>
ⅱ．</div>
<div>
ⅲ．</div>
<a href="https://komenikuyasai.blogspot.jp/.html#title2">
<li><span style="margin-left: -20px; text-decoration: underline;">２．</span></li>
</a><div>
ⅰ．</div>
<div>
ⅱ．</div>
<div>
ⅲ．</div>
<a href="https://komenikuyasai.blogspot.jp/.html#title3">
<li><span style="margin-left: -20px; text-decoration: underline;">３．</span></li>
</a> <div>
ⅰ．</div>
<div>
ⅱ．</div>
<div>
ⅲ．</div>
</ul>
</div>

ちなみに章のタイトル名や、記事のURLなどは毎回入力（コピペ）しなければいけません。ここが「手動目次」の面倒なところですね。


あと、私のコードでは「目次スタイル」をクラス指定して、【カスタムＣＳＳ】から枠の大きさや色などを変更できるようにしてあります。私のコードを載せておくので参考にどうぞ。

/* 目次（装飾） */
div.mokuji {
border-style: solid;
border-width: 1px;
border-color: #d6e9ca;
background-color: #E3EFDB;
display: inline-block;
padding: 25px 15px 17px 15px;
}

ⅲ．「目次」設置は３段階

記事中に「目次」を設置するためには大きくわけて３段階あります。①まずは上記のひな形を「目次」設置箇所へ貼り付けます（当然ながら記事作成【ＨＴＭＬ】にです）。そして、章のタイトル名や記事のURLをそれぞれ入力（コピペ）します。


②次にジャンプしたい章（もしくは節）に「id」を追加します（例えばid="title1"など）。これは目次から章（もしくは節）にジャンプするときの目印になります。これも記事作成の【ＨＴＭＬ】から追加します。


③さらに章の終わりに「目次に戻る」コードを追加します。これを追加しておくことで「目次」の機能性がUPします（各コードに記事URLの入力も忘れずに）。


ちなみに「目次に戻る」以外にも、「各章（１章や２章など）に移動」というコードにも変更可能です（②で追加した「id」を活用してください）。要は「リンク」を記事内に多数設置しているわけですね。

目次に戻る

あとがき

ここまで変更すれば、みなさんのブログもかなり読みやすくなっているはずです。またそれぞれの個性が表現された、独自のスタイルも確立されてきているのではないでしょうか。


「ブログの作り方シリーズ」もここで終わってもいいのですが、私自身が気になった細かい問題点について次の記事で少し触れてみたいと思います。


※気が向いたらこちらもどうか見てくださいね♪

リンク予定