つなろっく

大学生つなの「イロトリドリでロックな毎日」ブログ

はてなブログのサイドバーで「おすすめの記事」をピックアップしよう

f:id:pea-nut:20180130111732p:plain

おすっ!つな(@tu_na_69)です(*‘ω‘ *)

はてなブログのサイドバーでおすすめ記事を紹介してみたいと思います。

 

 

 

読まれている記事と読んで欲しい記事 

「よく読まれている記事」をサイドバーに設定している人は多いと思います。

よく読まれている記事は、みんなが読みたい記事ですよね。

それとは別に、自分がみんなに読んで欲しい記事ってありませんか?

時間をかけて入念に調べた記事や、

関心の高いことを取り上げた記事など

そんなおすすめの記事をたくさんの人に読んでもらえるように、

↑上の画像のようにサイドバーに設定したいと思います。

 

おすすめ記事の画像を作る

サイドバーに載せる画像を準備します。

わたしは、画像加工にこちらのフリーサイトをよく使っています。

画像加工編集サイト・フリーソフト:無料写真加工ならバナー工房

シンプルでわかりやすくて初心者におすすめです。

 

①画像サイズを変更する

わたしの場合です。

記事の中で使っているアイキャッチ画像と同じものを、横幅が280pxになるようにサイズを縮小します。

横長バナー風にするのも可愛いですよね。

そちらの方がスペースもすっきりします。

わたしは大きめの画像でアピールしていきたいので、このサイズで。

なんといっても「おすすめしたい記事」ですから。

 

②画像にタイトル文字を入れる

画像に重ねるようにタイトル文字を入れます。

ここでは、タイトルをはっきり見せることがポイントです。なんといっても、「ぜひ読んで欲しい記事」ですから、タイトルは命です!!

 

画像をアップロードします

通常記事を書く時と同じように「写真を投稿」でも写真をアップロードすることができます。

あるいは、「はてなフォトライフ」からアップロードも可能です。

はてなフォトライフに画像をアップロードする方法はこちらです。

①はてなフォトライフを開く

はてなフォトライフのアドレスは以下↓のようになっています。

http://f.hatena.ne.jp/はてなID/

「はてなID」に自分のIDを入れてみてください。

②はてなフォトライフのページから右上の「アップロード」をクリックします。

③画像をアップロードする

f:id:pea-nut:20180130114302p:plain

「ファイルを選択する」をクリックして、画像を選びます。

「タイトル」は空欄でも構いません。

せっかくなので、タイトルなど入れておくとSEOに効果があるようです。←あくまでもうわさ

一番下にある「アップロード」をクリックしてください。

アップロードが完了します。

④アップロードした画像をクリックして、編集ページを開きます。

この編集ページでは、画像を回転させたり、画像の削除もできます。

⑤画像の上で右クリックをして、「画像アドレスをコピー」します。

サイドバーにモジュールを設定する

 サイドバーにモジュールを追加して「おすすめの記事」を紹介していきます。

 

①ダッシュボードより「デザイン」→「カスタマイズ」→「サイドバー」をクリックする。

わたしのサイドバーはこんな感じになっています。

f:id:pea-nut:20180130113054p:plain

だいぶ長いですよね(;^_^A

②一番下にある「モジュールを追加」をクリックします。

③モジュールの中から「</>HTML」を選択します。

f:id:pea-nut:20180130114903p:plain

 ④タイトルに好きな言葉を入力してください。

「おすすめの記事」とか「これ絶対読んで」とか。

⑤空欄に、上記のようなHTMLを書き込みます。

 

<a href="リンクURL"><img src="画像アドレス"></a>

 

って感じです。

 

画像アドレスに先ほどコピーした画像のアドレスを貼り付けすればOK。

⑥「適応」をクリックして完了となります

 

まとめ

 サイトを開いて、ページにリンクされているか必ず確認してみてください。

わたしはHTMLを手打ちしているので、時々間違えてリンクされていないことがあります(;^_^A

 

失敗は成功のもとです!

間違っても直せばいいから大丈夫(≧▽≦)

 

画像を作ったり、アップロードしたりするのはちょっと面倒ですが、愛情をこめた記事なのでみなさんに読んでもらえたら、なんの手間もありません。

↓バレンタインの記事、気に入ってるのでよかったら読んでください。

 f:id:pea-nut:20180130095129j:plain