こんにちはー。
縄跳びパフォーマーの粕尾将一(@macchan8130)です。
デスクトップのトップページデザインを変更しました。よく見る「最新記事」の一覧方式です。
これははてなブログに来てからずーっと悩んできました。いつも「続きを読む」を入れるのも良いんですが、記事数が増えてくると管理が大変。変えよう！と思った時に一括変換できないので躊躇していました。
んでもって今回思いついたのが「記事にぶち込みCSS」「未来投稿」「忍者レコメンド」の三つを使った方法です。
忍者レコメンドで最新記事表示
最新記事一覧は、忍者レコメンドを使って表示しています。
まずは忍者ツールズのページにアクセスして、「忍者レコメンド」を追加します。
次にブログのURLを入力して、データを取得。
データが習得されたら、一番上の「トップページ」を非表示にします。
あとは自由にデザインを変えて完成！！
ほかにWordPressでよくみる「横羅列」や、「はてブ数」「いいね数」「RT数」でのソートもできます。
「新着一覧」だけじゃなくオススメ記事も一緒にトップページ載せる、なんてカスタマイズも出来そうです。
CSSでトップを整形
次に、記事内に強引にスタイルシートを入れて不要な部分を削除しました。これで「記事タイトル周辺」を「ページャ」を消しています。また念のため個別記事に到達したユーザー向けに、「記事フッター」も同時に非表示にしています。
あとページャを非表示にしたので、もっと過去記事を読むリンクとしてアーカイブページに飛ぶように設定しました。
＜＜記事の一番上にコピペ＞＞
<style type=text/css>
.entry-header{display:none;}
.pager{display:none;}
.entry-footer-section{display:none;}
.customized-footer{display:none;}
.social-buttons{display:none;}
</style>
＜＜ページャを表示したい場所にコピペ＞＞ <a herf="/archive" style="position:absolute;right:2em;">>>過去記事</a>
またデフォルトのスマホ用表示を使っていると、はじめから最新記事が出てますよね。そこでブログトップの記事が表示されないように、「ヘッダー」→「タイトル下」にCSSを挿入します。
<<以下挿入>>
<style type="text/css">
.entry-list-anchor-block:first-child{display:none;}
</style>
未来記事投稿に設定
最後はトップにする記事を「未来投稿」で公開します。こうすると新しい記事を更新しても、常にブログのトップに出てくれます。
「編集オプション」→「投稿日時」を選び、未来時間を設定します。
おわりに
いま購読しているブログは一日に複数の記事を上げるところが多いんですよ。
トップページをブックマークして、適当に読みたい記事を開いていく。でも一日に複数の記事を公開しても、トップページで見えないとスルーしてしまうんです。RSSリーダーを使わず流入した人にとっては、同じ状況だと思うのです。
本音を言えば、はてな側の公式設定でできたらベストなんですけどね。回り道でありますが、こんな方法を試してみました。
みなさまの参考になれば幸いです。
(※)1.SEO的にどうなんだ？というのは分からないので、自己判断でお願いします。
(※)2.他のテンプレートでも利用できますが、表示が崩れる可能性があります。
