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

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

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

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

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

「ブログカード」とは、ブログに掲載する記事のタイトルや概要、アイキャッチ画像などを読みやすくまとめて表示する埋め込み形式です。

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

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

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

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

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

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

わたしの独自ドメインだからかもしれませんが、ブログカードの欄外(?)にURLが表記されます。これが邪魔なのですよね。冗長な感じがしてマヌケです。はじめはこの表記がある状態だったのですが、思い切ってHTMLをいじってみたところ、表記されなくなりました。

citeではじまるタグとその閉じるタグを削除すればいいのです。実際はiframeのタグでブログカードは完結しているようなのです。HTML5のマニュアルによるとciteタグは、そのまま作品のタイトルを表しているようです。

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

あとがき

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

シェアする

  • このエントリーをはてなブックマークに追加

フォローする