いちcafe日記

一日、いちcafe。大好きな毎日のカフェタイムに思うこと、学び得たこと、実践したことを綴っています。

はてなブログの「Minimalism」のサイドバーをスタマイズしてみました

はてなブログ「Minimalism」のサイドバーカスタマイズ

 

f:id:kayoko_cafe:20200416183520j:plain

 

こちらの記事で、はてなブログのデザインを、はてな人気No.1デザインの「Minimalism」に変更して、カスタマイズしたことを書いたのですが。↓

www.kayoko-cafe.com

 

 「Minimalism」というデザインに変更すると、2カラムになるんですね。

なので、PCで見ると、記事本文が表示されるメインカラムの右横に、色んな情報を載せれるサイドバーというカラムがある、というデザインになるんですけど。

(スマホやタブレットでは、このサイドバーはメインカラムの下に表示されます。)

 

「今度はそのサイドバーをカスタマイズしよう!」ということで、やってみました。

 

今回行ったサイドバーカスタマイズの概要

今回は、私が今ブログのバイブルにしているこちらの本に書かれている:

アフィリエイトで夢を叶えた元OLブロガーが教える 本気で稼げるアフィリエイトブログ 収益・集客が1.5倍UPするプロの技79【電子書籍】[ 亀山ルカ ] 

 

本気技50の「サイドバーにコンテンツを追加する」という内容を実践してみました。

 

ここで書かれてあった、サイドバーに必ず追加しておきたいコンテンツは:

✳︎ プロフィールの設置と内容の変更

✳︎ サイト内検索の設置

✳︎ 人気記事の設置 

✳︎ フォローボタンの設置

 

の4つです。

 

順に一つずつ、具体的に紹介していきます。 

 

プロフィールの設置と内容の変更

はてなブログではすでにプロフィール欄が設置されていると思います。

 

プロフィール内容を変更したりするには:

編集画面→デザイン→工具マーク→サイドバー と進みます。

 

すると、プロフィール名が表示されている項目があるので、その「編集」をクリック。

f:id:kayoko_cafe:20200416174654j:plain

 

すると、編集画面が表示されます。

f:id:kayoko_cafe:20200416174724j:plain

 

タイトル:プロフィール名など

プロフィール画像:表示するにチェックを入れる

はてなID:表示しない方がベターかと思います

自己紹介:入力します

 

で、適用をクリック。

 

その後、手前の画面が表示されるので、ここで必ず「変更を保存する」をクリック!

(これ、意外と忘れるやつ(^^; 。これやらないと、変更されません。)

f:id:kayoko_cafe:20200416175048j:plain

 

で、実際にプロフィールがどのように表示されているのかを確認します。

こんな感じ。↓

f:id:kayoko_cafe:20200416175137j:plain

 

これで、プロフィールの設置と内容の変更ができました。(´ー`)

 

サイト内検索の設置

次に、サイト内検索バーの設置です。

これは、はてなブログだと元々表示されていると思います。

なので、ここではその確認と、サイト内検索バーをサイドバーのどの位置に表示させたいか?という位置の変更をやってみます。

 

サイト内検索の設置や位置の変更をするには:

編集画面→デザイン→工具マーク→サイドバー と進みます。

 その中に「検索」という項目があるのが、サイト内検索のことです。

 

「編集」をクリックすると、検索バーの横に表示されるタイトルを編集できます。

デフォルトは「検索」ですが、特に変更する必要もないかと思います。

 

このサイト内検索の欄をサイドバーの中でどの位置にするのか、位置を変更することができます。

PCからの操作:「編集」「削除」の右横にある横3本線マークを長押ししながら、上か下に動かして、移動。

スマホからの操作:「検索」の項目を長押ししながら、上か下に動かして、移動。

 

編集が終わったら「変更を保存する」を必ずクリック!

 

そして、どこにどんな風に表示されているか、確認。

f:id:kayoko_cafe:20200416180402j:plain

 

これで、サイト内検索の表示は完了です。(´ー`)

 

人気記事の設置 

次に、人気記事の設置です。

これは、はてなブログで表示されていない場合が多いと思います。

なので、ここではサイドバーに人気記事という項目を追加する方法をご紹介します。

 

人気記事の設置には:

編集画面→デザイン→工具マーク→サイドバー と進みます。

サイドバーに表示されている項目の下にある「モジュールを追加」をクリック。

f:id:kayoko_cafe:20200416180924j:plain

 

表示された追加したいモジュール一覧の中から、「注目記事」をクリックして、編集していきます。

f:id:kayoko_cafe:20200416181759j:plain

 

タイトル:「注目記事」でもいいですが、私は「人気記事」にしました。

集計方法:好みのものを選びます。私は「最近のアクセス」にしています。

表示件数:5件がベターかと思います。

サムネイル画像を表示する:チェックを入れます。その下の画像サイズを縦横とも、75pxと入力します。

 

f:id:kayoko_cafe:20200416182235j:plain



その下にある表示関係のものは、特にチェックを入れず、「適用」をクリック。

手前の画面に戻るので、もしこの人気記事の表示の位置を変更したければ、先に説明したやり方で、上か下に移動させます。

 

最後に「変更を保存する」を必ずクリック!!

 

そして、どこにどんな風に表示されているか、確認。

f:id:kayoko_cafe:20200416182629j:plain

 

これで、人気記事の表示は完了です。(´ー`)

 

フォローボタンの設置

最後に、フォローボタンの設置についてです。

私が参考にした本では、Twitterのフォローや、はてなブログの「読者になる」のボタンを設置する、と書かれてありました。

 

はてなブログの「読者になる」はすでにプロフィール欄に付いていると思うので。

そこにTwitterのフォローボタンも設置できるので、その方法を紹介したいと思います。

 

Twitterのフォローボタンも設置には:

編集画面→デザイン→工具マーク→サイドバー と進みます。

プロフィールの「編集」をクリックして、編集画面を開きます。

 

下の方に、Twitterのフォローボタンを設置する項目があるので、「表示する」にチェックを入れます。

f:id:kayoko_cafe:20200420170305j:plain

 

そして、「適用」をクリックし、最後に「変更を保存する」を必ずクリック!!

 

すると、こんな風に表示されます。↓

f:id:kayoko_cafe:20200420170419j:plain

 

これでフォローボタンの設置も完了です!(´ー`)

 

 

このサイドバーの4つのカスタマイズは、ブログの回遊率を上げるためのコツらしいので、ぜひともやっておきたいものです。(^ ^)


 

kayoko@おうちcafe