ガジェットとページを使いこなそう - Blogger（ブログの作り方03）

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


今回は記事の周りに配置する「ガジェット」と「ページ」を使いこなす方法を紹介しましょう。記事も大切ですが、周辺を整えていくことで読者が記事に集中しやすくなると思いますよ。


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

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

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


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

目　次

• １．ガジェットを使いこなそう
ⅰ．タイトルを装飾する
ⅱ．モバイル版にも追加する
ⅲ．プロフィールを見やすくする
<補>サイドバーを調整する
• ２．ページを使いこなそう
ⅰ．「サイトマップ」を作る（手動）
ⅱ．「ﾌﾟﾗｲﾊﾞｼｰﾎﾟﾘｼｰ」を作る
ⅲ．「お問い合わせ」を作る
<補>ページリストを調整する

１．ガジェットを使いこなそう

ⅰ．タイトルを装飾する

Blogger（ｼﾝﾌﾟﾙﾃﾝﾌﾟﾚｰﾄ）の「ガジェットタイトル」は、文字だけで非常に味気ないですね。そこで、見栄えを良くするために編集してしまいましょう。前記事の「２－ⅰ」で見出しの編集をした時に、ガジェットタイトルの「ｈタグ」をはずして「widget-title」という名前をつけておきましたね。


ガジェットタイトルの装飾を変えるときはこの「widget-title」を指定して行います。【カスタムＣＳＳ（テンプレート⇒カスタマイズ⇒上級者向け）】から編集しましょう。私の装飾は以下のようになっています。

/* ガジェットタイトルの装飾 */
.widget-title { 
padding-left:5px; 
margin:10px 0px 5px 0px; 
border-radius:5px; 
background-color: #88cb7f; 
font-size:15px; 
font-weight:bold; 
color: #494a41; 
}

章見出しに似ていますが、背景色を変えて見分けがつきやすくしています。数値や色はそれぞれの好みに変更してください。

ⅱ．モバイル版にも追加する

Bloggerでは一部のガジェット以外はモバイルに反映されません。なので追加したガジェットがモバイル版で反映されていない場合は、自分で設定を行わなければいけません。

※詳しくは以下の記事を参照してください。

⇒「モバイルテンプレートもカスタマイズ可能に｜クリボウのBlogger Tips」

逆に言えばモバイルで反映させたくないガジェットがあれば、この方法で消すことができます。ぜひ覚えておきたいテクニックですね（ﾓﾊﾞｲﾙﾃﾝﾌﾟﾚｰﾄ選択で「カスタム」にするのを忘れずに！）。

ⅲ．プロフィールを見やすくする

これは少し細かいテクニックですが、「プロフィール欄」の画像横にある名前や紹介文を下に移動する方法です。気にならない人はそのままでもいいのですが、私のブログの場合レイアウトの関係で画像横が非常に狭くなってしまいます。


紹介文も読みにくく感じていたのでこの方法を試したら、簡単に解決できました。プロフィール欄をスッキリさせたい人はぜひ試してみてください。やり方は以下のコードを【カスタムCSS】に追加するだけです。

/* プロフィール */
#Profile1 img {
float : none;
}

『画像の横に文章を回りこませないでね』というような意味のコードです。簡単ですね。

<補>サイドバーを調整する

最後にガジェットのあるサイドバー全体を調整しておきましょう。

/* サイドバー */
.sidebar {
font-size: 13px;
}

#sidebar-left-1 {
margin:0px -15px 0px -7px;
font-weight: bold;
}

#sidebar-right-1 {
margin:0px -5px 0px -15px;
font-size: 12px;
}

これは私のブログのレイアウトにあわせた調整コードなので、みなさんはそれぞれのレイアウトにあわせたコードに修正してください。

目次に戻る

２．ページを使いこなそう

次に紹介するのはページについてです。ページとは私のブログではタイトル（「だるま丸カジリ！」）下に並んでいるタブのことです。ここに常に表示させておきたいコンテンツを並べておくと、読者の利便性を高めてくれます。

ⅰ．「サイトマップ」を作る（手動）

では、まず「サイトマップ」から説明しましょう。「サイトマップ」というのは、自分のブログの記事リンクをまとめて貼っておくページのことです。こうしておくことでブログの読者が一目で全ての記事を把握することができるようになります（↑実際に私のブログの「サイトマップ」をご覧ください）。


「サイトマップ」の作り方を説明します。【ページ⇒新しいページ】で記事作りと同じような作業画面になります。ここにタイトルを記入して記事リンクを全て貼り付ければ完成です。リンクは作業画面にあるものを使えばいいと思います。ちなみにこの方法だと新しく記事を書くたびにリンクを追加しなければいけません。


私のブログは記事が少ないのでこの方法で何も問題ありません。記事が多くて一つ一つリンクを貼りたくない人は、自動でリンクを作ってくれる方法もあるので探してみてください。私は途中で面倒になって投げ出しました（笑）

ⅱ．「ﾌﾟﾗｲﾊﾞｼｰﾎﾟﾘｼｰ」を作る

次は「ﾌﾟﾗｲﾊﾞｼｰﾎﾟﾘｼｰ」です。「ﾌﾟﾗｲﾊﾞｼｰﾎﾟﾘｼｰ」とは、そのブログの著作権や免責事項などを記載しておくものです。また収集した個人情報の扱いなどもここに書いておきます（↑これも私のものを参考にしてみて下さい）。


少し大げさに思うかもしれませんが、ブログを運営するなら一応作っておいたほうがいいでしょう。それに何となくカッコがつきますよ！

ⅲ．「お問い合わせ」を作る

最後は「お問い合わせ」です。記事下にコメント欄もあるのですが、読者ともっと蜜に連絡をとりたい時も訪れるかもしれません。『だけどメールアドレスは公開したくないし～』という時に便利なのがこの「お問い合わせ」ページなのです（↑私のを見るとイメージしやすいですよ）。


作り方はいろいろありますが、私のオススメは「Googleフォーム」です。なにしろGoogleのソフトですから、Bloggerとも相性がいいと思います。作るのも簡単ですし、管理もしやすいですよ。

※以下の記事が詳しく説明されていて分かりやすかったですよ。

⇒「新Googleフォームで問い合わせフォームを作る方法＆自動返信メール設定｜EX-IT」

Googleフォームは「お問い合わせ」以外にも、「アンケート」なども作れてしまう優れものです。これだけ優秀なのに無料で！使えます。ブログ作りには必須ですね。



他にも「ページ」にはいろいろ表示できるので、記事以外で公開したいものがある場合はここを利用しましょう。

<補>ページリストを調整する

ページも最後に調整しておきましょう。数値はそれぞれの好みにあわせて変更してくださいね（※モバイルでコードがはみ出している場合はスワイプしてご覧ください）。

/*ページリスト*/
#PageList1 a{
padding: 3px 12.6px 3px 12.6px;
width: 155px;
background-color: #5b6356;
font-family:"meiryo","メイリオ","ＭＳ Ｐゴシック",sans-serif;
font-size: 14px;
font-weight: bold;
color: #fff;
text-align: center;
}

#PageList1 :hover { 
background : gray!important ; 
}

最後のコードは『マウスポインタがページタブ上に乗った場合はタブの色を変えてね』という意味のコードです。読者の操作性を向上させるためのコードですね。

目次に戻る

あとがき

これで記事周りもだいぶスッキリしてきましたね。何となくブログらしくなってきたのではないでしょうか。ブログの編集はここで終えて、記事作りに集中するのもいいと思います。


ただ、もう一息がんばれば読者の利便性をもっと向上させることができます。興味がある人は次の記事に進んでみてください。


※次はブログ全体のデザインを改良して見やすく・使いやすくする方法を紹介しますよ。

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