ヒト感!!

人生をハッピーにするヒト・モノ・コトバ、広めたい

スマホ表示に「最新記事」一覧を追加する方法【はてなブログ】

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

久々にブログのスマホデザインを変更したので記録。
意外と新着記事リストを表示している人が少なかったので、同じようなことをやりたい方の参考になれば…。

※以下の設定変更には、はてなブログPro の契約が必要となります。また、別目的で Milliardを使っている場合は干渉する可能性もあるので、変更する場合は元の設定を保存しておくことをオススメします。

最新記事をフッタに表示

はてなブログは記事の下にアクセスの多いものが「注目記事」として表示される。

それ自体はよいのだけれど、せっかくなら最近の投稿も目にしてもらえるといいな、と思った次第。(特に、本ブログの場合は「注目記事」の顔ぶれが、コンスタントに検索される記事に偏りがちなので。笑)

というわけで、追加したのが図の赤枠で囲った「最新記事」の部分。

シスウ株式会社が提供している Milliard を使ってリストを作成し、それを「注目記事」の後に表示するようにした。

具体的な手順は次のとおり。

1.最新記事リストのコード作成

Milliard の 関連記事ツール設定画面 にアクセスして、以下のように値を設定して「コードを取得」を押下する。

(当然ですが、URLはご自身のブログのものに変更してください)

2.デザイン(スマートフォン)メニューで設定

フッタ > ページャー下 の設定

手順1で取得したコードを、「ページャー下」に保存する。

フッタ > フッタ の設定

以下のコードを「フッタ」内で最新記事リストを表示したい場所に追記する。

<ins id="ssRelatedPageBase"></ins>


以上で、設定は完了。

ただ、すぐには表示されないので、サーバ側で処理が完了するのを待ちましょう。

上記の手順でブログ側での設定は完了ですが、すぐには表示されません。
お手数ですが、サーバ側で記事の関連付けを行うまでお待ち頂きます。

通常、この処理は10分から20分ほどかかりますが、記事数が多い場合には多くの時間がかかることもあります。
すると、サムネイルが表示されていない関連ページが出現するようになります。

サムネイルが表示されるまでには、さらに3時間-4時間ほどお待ち頂きます。
(時間帯によっては、半日ほどかかる場合もあります。)


※ブログへの挿入手順詳細は、Milliardの解説記事を参考に。

その他デザイン関連変更点

最新記事リストにあわせて、以下についても変更を実施した。

ほぼそのまま実施したので、参考にさせてもらったブログ記事をリンクしておきます。(ありがとうございました!)

標準フッタを外す

http://blog.kitoko552.com/entry/20160127/1453898580

はてなブログにはお世話になっているし、手軽に書けて好きなのだけど、読みにきた人に「はてなブログをはじめよう」と毎回主張するのもどうか、と思っていたので…。

標準の固定ヘッダを消す

本ブログでは、固定ヘッダだけを非表示にして、最下部のフッタは残しました。
(ときどき、スマホでPCビューを確認したいときがあるので)

固定フッタをつける

冒頭の図の青枠箇所に、4カラムで実装しました。