サイドバーの役割はサイトの内容をわかりやすく表示して、訪れた読者を興味のある記事へ案内することです。
あなたのブログのサイドバーは読者にわかりやすく機能していますか？
え？？サイドバー？？
デフォルトのまま…いじっていないよ！
あら…それはもったいない！
はてなブログのサイドバーは初心者でも簡単に設定や編集ができます。
この記事では、読者に優しいサイドバーの設定方法を解説します。
カスタマイズの手順
サイドバーにカテゴリーを表示させる方法
表示する項目の位置を変える方法
サイドバーの役割
サイドバーは、多くのブログでは本文の横に表示されています。
スマホの場合は本文の下に表示されていますね。
私のブログの場合はこんな感じに表示されています↓↓
②グローバルメニュー：カテゴリーなどを表示。
③パンくずリスト：閲覧している記事のサイトでの位置を表示
④本文記事
⑤サイドバー：サイト情報、記事一覧などを表示
サイドバーの役割は「ブログの案内版」です。
あなたの記事を読みに来た方に「運営者はこんな人物です」「こんな記事もありますよ」「こちらのリンクも面白いですよ」と伝えてあげることです。
サイドバーを適切に設置することによって、読者はゆっくりとサイト内を回遊してたくさんの記事を読んでくれます。
訪問者の滞在時間が長くなることはSEO的にも評価されます。
魅力的なサイドバーを設置することはとても大切なことなんです。
【はてなブログ/サイドバー】設定と編集
サイドバーの大切さを理解したところで、さっそくサイドバーを設定していきましょう。
作業はパソコン画面で行います。スマホを使っている方はこちらをご参考にパソコン版を開いてくださいね↓↓
スマートフォンやタブレットからPC版のはてなブログを利用するには - はてなブログ ヘルプ
サイドバーのカスタマイズは「デザイン」から行います。
デフォルトのサイドバーはこのように表示されています↓↓
表示されている項目は・・・
- プロフィール
- 検索
- リンク
- 最新記事
- 月別アーカイブ
シンプルなのはいいのですが…このままでは味気ないですね。
1つずつ 見直していきましょう。
プロフィール
プロフィール「編集」をクリックします。
プロフィールの編集画面はこのようになっています。
①タイトル
好きなタイトルに変更できます。デフォルトでは「プロフィール」になっています。
②プロフィール画像
チェックを入れると「アカウント設定」の「プロフィール」で設定した画像が表示されます。
別の画像を表示させたい場合はチェックをはずしてください。
私はサイドバーのプロフィール画像を別に設定して、大きくはっきり見えるようにカスタマイズしています。
③はてなID
デフォルトは「表示」になっています。こだわりがなければそのままでOK。
④自己紹介
ニックネーム(はてなID)の下に表示されます。わかりやすくブログの発信内容をまとめてみましょう。
⑤最終更新
チェックを入れると記事の最新更新日が表示されます。
⑥読者になるボタン
デフォルトは「表示」になっています。そのままでいいでしょう。
⑦Twitterフォローボタン
Twitterアカウントのある方は「表示」にチェックを入れると「読者になるボタン」の下に表示されます。
設定したら忘れずに「適用」ボタンを押してね。
検索
「検索」の編集画面
記事内検索のタイトルを設定できます。
こだわりがなければそのままでOK！
リンク
デフォルトでは、はてなブログ各種サービスへのリンクが貼られています↓↓
はてなブログのサービスはあなたの記事を読みに来てくれた読者さんには興味のない内容ですよね。
運営者の詳しいプロフィールやプライバシーポリシー、別の運営サイトへのリンクなどに張り替えましょう。
【リンクの編集方法】
＊リンクを削除する場合は「×」をクリックします。
＊リンクの数を増やす場合は「新しいリンクを追加」をクリック。記入欄が増えます。
最新記事
最新記事はデフォルトではこのように表示されます↓↓
デフォルトでは記事タイトルが並ぶシンプルな仕様ですが編集画面で細かく設定ができます。
①タイトル
「最新記事」を好きなタイトルに変更できます。
②表示件数
表示する記事数を設定できます。（1~20記事）
③カテゴリー
特定のカテゴリーの記事だけを表示させることができます。
④もっと見る
「もっと見る」リンクを表示させることができます。
ここからは記事の表示設定です。
⑤サムネイル画像を表示
サムネイル画像（アイキャッチ画像）の表示の有無と画像サイズを選択できます。
画像サイズのデフォルトは100×100の正方形です。
⑥投稿日時の表示
投稿日時の表示を選択できます。
⑦ブックマーク数
記事についたブックマーク数の表示を選択できます。
⑧カテゴリーを表示する
カテゴリーの表示の有無を選択できます。
⑨タイトルを表示
記事タイトルの表示を以下から選択できます。
・タイトル全体を表示（デフォルト）
・表示する文字数を設定
⑩記事の概要か本文を表示する
「記事の概要」の表示の有無や表示する文字数を選択できます。
設定が終わったら「適用」ボタンをクリックします。
最新記事の設定するとこのような表示になります↓↓
＊テストブログなので「ブクマ」や「記事の概要」はありません。
＊サムネイル画像は160×90に設定しました。
サムネイル画像を表示すると華やかになりますね。
月別アーカイブ
①タイトルを編集できます。
②月別アーカイブの表示形式を選択できます。
【リスト形式】（テーマ「cappuccino」を使用）
【カレンダー形式】（テーマは「cappuccino」を使用）
モジュールを追加
モジュールとはサイドバーに表示させる項目のことです。
サイドバーに新しい項目を表示させる場合は「モジュールを追加」を使います。
【モジュールの追加方法】
モジュールの追加をクリックすると編集画面が開きます。
①左側のリストから追加するモジュールを選びクリック。
②右側に表示される編集画面でお好みの設定をする。
③「適用」をクリック。
こんなモジュールを追加できます。
関連記事
記事にカテゴリーを設定すると、サイドバーに同じカテゴリーの記事一覧が表示されます。
＊トップページやカテゴリー一覧ページには表示されません。
注目記事
たくさんの人に読まれている「注目記事」をサイドバーに表示させたいですよね。
注目記事の集計方法を
- 最近のアクセス
- はてなブックマークの人気順
- はてなブックマークの新着順
から選べます。
カテゴリー
サイドバーにカテゴリー一覧を表示したら読者さんは興味のある記事を見つけやすいですね。
最近のコメント
最近ついたコメントをサイドバーに表示できます↓↓（テーマ「cappuccino」を使用）
- タイトルを編集できます。
- コメントの表示数を5~20まで選択できます。
HTML
HTMLを貼ってサイドバーにランキングサイト（ブログ村など）のクリックボタンや、アフィリエイト広告などを表示できます。
「HTML」を選択して
①タイトルを設定する。
②編集モードを選択。
③HTMLを貼る。
「適用」をクリックすればOKです。
サイト情報
有料プランはてなPROのユーザーは固定ページで作ったサイト情報をサイドバーに表示させましょう。
- プロフィール
- プライバシーポリシー
- お問い合わせフォーム
「モジュールを追加」から「リンク」を選択すれば簡単に設定できます。
＊タイトルを「リンク」→「サイト情報」にする。
【プライバシーポリシーの作り方】
超簡単！はてなブログお問い合わせフォームの設置方法【無料版もOK】 - キラッとはてログ
【お問い合わせフォームの作り方」無料版ユーザーはaboutページのリンクを貼ってもいいですね。
タイトルは「○○(←ブログタイトル)について」などにするとわかりやすいです。
aboutページ編集についてはこちらをご参考に↓↓
ほかにも「参加グループ」や「執筆者リスト」など、さまざまなモジュールを表示できます。
表示位置を変える
サイドバーに表示させる各項目の位置は「ドラックアンドドロップ」で編集できます。
例えば…
カテゴリーをサイドバーの1番上に持ってきたい場合は
マウスをカテゴリーに合わせて左クリックしたまま→表示させたい場所まで動かして離す！
ね？簡単でしょう？
すべての設定を終えたら画面左上の「変更を保存する」を忘れずにクリックしてね↓↓
他にもアイディア次第で楽しいサイドバーが作れます。色々試してみてくださいね。
サイドバーを編集して見やすいブログに！
はてなブログのサイドバーは初心者でも簡単に設定できます。
- デフォルトのはてなブログのリンクをはずす
- 「最新記事」はサムネイル画像の表示やサイズなど細かく設定できる
- 「モジュールを追加」で人気記事やカテゴリーを表示させることができる
アイディア次第で魅力的なサイドバーが作れますね。
読者があなたのブログの隅々まで楽しんでくれるように知恵をしぼって編集してみましょう。
初心者でもめちゃくちゃ簡単にサイドバーをカッコよくするカスタマイズをまとめました↓↓
