国産品 酔夢譚

国産品を応援するブログです

はてなブログのサイドバーにオススメ記事を紹介するカスタマイズ

このブログを書きはじめてから、かれこれ四ヶ月以上が過ぎました。少しはGoogleにも認められてきたのか、さまざまな検索ワードでこのブログを訪れる方も出てきました。そんななか、せっかくGoogleなどの検索サイトからこのブログにアクセスしてもらっているので、もう少し興味を持ってもらいたいなという思いが募ってきたのです。

こういう時に、はてなブログは独自の仕様ゆえになかなか不便なのですが、いくつかの先達の記事を読んでカスタマイズにチャレンジしてみました。そんな備忘録がこの後に続く人たちの参考になるように記録しておきます。

f:id:koku3:20180813154405j:plain

PCではサイドバー、モバイルでは末尾に「おすすめ記事」を設置した

今回は、はてなブログの標準機能のひとつであるブログカード機能を用いてやってみました。画像のとおり、タイトル、サムネイル、巻頭の文字(概要)が表示されることで、グッと紹介するパワーが増したと思います。

もうひとつ、リンクという機能を使う手法もありますが、そちらだと文字とURLリンクだけという、ちょっと淋しい感じになってしまうのです。初めてにしてはわれながらよくできたなと思います。

サイドバーに「おすすめ記事」を設置する方法

まずは、おすすめしたい記事をチョイスして、ふつうにブログカードを作成します。こちらでは「記事を書く」のフォームで、普通にURLを貼る手法をとっています。はてなブログでは、URLをコピペするとブログカードが自動的に作成されるので便利ですね。

f:id:koku3:20180813155112j:plain

できたブログカードをそのままでは使えませんので、編集モードを「見たまま」モードから「HTML編集」モードへ切替えます。そこで表示されているHTMLをコピペするのです。

f:id:koku3:20180813155200j:plain

これを「デザイン」ー「カスタマイズ」ー「サイドバー」にある「HTML」に貼り付けます。表題というかタイトルは何でもいいかと思いますが、自分が紹介したい記事にふさわしいタイトルが望ましいですね。わたしはシンプルに「おすすめ記事」としました。

f:id:koku3:20180813155337j:plain

ブログカードを作成した際に、余分なURLが表記される問題について

わたしのブログは独自ドメインだからかもしれませんが、ブログカードの欄外(?)にURLが表記されます。これがなんとなく邪魔に思えたのです。冗長な感じがしてマヌケに感じるのです。

はじめはこのURL表記がある状態だったのですが、思い切ってHTMLをいじってみたところ表示されなくなりました。citeではじまるタグとその閉じるタグを削除すればいいのです。実際はiframeのタグでブログカードは完結しているようで、HTML5のマニュアルによるとciteタグは、そのまま作品のタイトルを表しているようです。

citeタグは、作品のタイトルを表す際に使用します。 ここでいう作品とは、例えば、 本・書類・随筆・詩・楽譜・歌・脚本・映画・テレビ番組・ゲーム・彫刻・絵画・劇場作品・芝居・オペラ・ミュージカル・展覧会・訴訟事件の報告… などのことです。

 

あとがき

読んでいただいてどうもありがとうございます♪ 少しは見栄えがよくなったのではないでしょうか。ブログの記事を書くことも大切ですが、ブログの構成やデザインにも手を入れることでもっと愛着が湧くような気がします。これからも少しずつでもブログに手を入れていきたいと思います!