いらっしゃい、あるく(@arc_imaiki)です
ちょっと前に「あるくのいまいきっ!」のトップページを変えました。
わたしはHTMLとかCSSとかはさっぱり分かりませんので、いつもネットで情報を公開して下さっている方がいるおかげで、ブログをカスタマイズすることが出来ています。
この場をかりてお礼申し上げます、本当にありがとうございます。
普段、ブログのカスタム関連の記事など、書いたことないのですが、こういったページを作りたい、そう思っている方もいるかもしれませんので、今日は『はてなブログのTOPページを固定ページっぽくした方法』について、わたしがした方法を書いてみます。
※トップページを作るさいに、参考にさせていただいた「Minimal Green」様より、「実はこのカスタマイズはdisplay:noneを多用しているため、SEOの観点からはあまりおすすめはできません。そんなに支障があるとは思えませんが一応ご申告まで。」というコメントをいただきました。
参考にされる方は、この点もご理解の上、お願いします
固定したTOPページが欲しいと思った理由
わたしのブログ「あるくのいまいきっ!」ではほとんど画像を使っていません。
アイキャッチもいつも同じで、最近ようやく文字を入れたアイキャッチを作って入れ始めてはいるのですが、はてなブログのTOPページで記事一覧表示していると、同じアイコンがずらーーーっと並んでいて、とても味気がありません。
毎回、ちがう画像を探して、人の目を奪うようなアイキャッチを作ろう、、、そんな風に考えたこともありましたが、わたしはそんなスキルを持ちあわせていませんでした。
昔、何かで読んだ漫画家さんの言葉で、「自分は、絵を上手く書けないから、絵じゃないところ、構成や内容にこだわってそこで勝負する」という感じのことを思い出しました。
画像を上手く作れないなら、画像がなくても「いい感じ」になるようなTOPページを作ればいいんじゃ?そんな風に思いました。
そんなことを考えながら、ネットをみていると企業ページとか、wordpressでブログ運営されている方のTOPページがいつも固定されているものをみかけます。
それをみていて、「これっ!いつも決まったページが表示されるようなTOPページに、わたしのブログもしたいっ!!」って思いました。
はてなブログのTOPページを固定ページっぽくした方法
1.未来の日付でTOPページ用の記事を書く
2.はてなブログの新着ページの表示数を『1』にする
2.日付など余計なものが表示されないようにする
3.新着記事が表示されるようにする
まず、最初に未来の日付でTOPページを作って公開します(9999年とかに設定します)。
次にはてなブログの新着ページの表示を「ダッシュボード→設定→詳細設定→表示形式『全文形式』に変更」して、「トップページの記事数を『1』に変更」にします。
TOPページっぽい感じに表示させるだけなら、これでOKです。
でも何となく表示される日付の「9999年XX月XX日」や各ボタンなどが気になります。
消す方法がないか調べていたら、『IMUZA.com』様のページの中に「はてなブログのトップページを固定して企業サイト風にする方法 - IMUZA.com」 という記事がありました。
こちらで、未来の日付で記事を書くところから日付やヘッダー、フッターの表示を消す方法、アーカイブや新着記事でトップページを表示させない方法などが、とても詳しく書かれていたので、参考にさせていただきました。
(おかげで、日付など不要なものも消せて、気に入ったTOPページにできました、IMUZA.com様、素敵な記事をありがとうございます)
これで、TOPページを固定ページっぽくできて完成っ!(ぱちぱちぱちぱちっ!)
、、と思っていたんですが、TOPページをみてうっとりしていたところで、何か足りないことに気がつきます・・・」
「あ、、新着記事が表示されてない、、、」
いつもみにきてくれる読者さまや、読者登録して下さってる方もいますので、何とか新着記事をページ内に表示させる方法がないか探しました。
すると、「Minimal Green」様のページの中で、「はてなブログのトップページをWordPressの固定フロントページっぽくし、ホームページとして活用する方法 - Minimal Green」という記事がありました。
その中で、新着記事を表示させる方法についても書かれていたので、参考にさせていただきました。
(おかげで、TOPページ(風)の記事内に「新着記事」を表示させることができて、満足なTOPページを作ることができました、Minimal Green様、素敵な記事をありがとうございます。)
ということで、お二方の素敵な記事に出会えたことで、「あるくのいまいきっ!」は今のトップページを作ることができました。
はてなブログで、トップページを、固定ページっぽくしたいと思った方は、参考にしてみてください。
※あるくは、カスタム関連は全くの素人なので、おこなう際は、色んな方のブログなどを参考になさって、自己責任でおこなってください。
※このブログ「あるくのいまいきっ!」はレスポンシブ表示をしています。
レスポンシブ表示でない場合のスマホ画面は確認していません、ご了承ください。
まとめ
今回は『はてなブログのTOPページを固定ページっぽくした方法』についてお送りしました。
わたしは、HTMLもCSSも全然わからないので、こういった記事を書こうか迷ったんですが、でも、こんな方法もありましたって書くだけの記事でも、探している誰かの目にとまれば役に立てるんじゃないか、そう思ってこの記事を書きました。
知識のある方たちの記事があったおかげで作れたトップページですが、素敵な記事を参考にして、こんな感じのトップページができた1つの例として、参考にしてもらえたら嬉しいです。
このブログ「あるくのいまいきっ!」ではグローバルメニューからジャンルの一覧ページへ飛べるようになっています。
よかったら、遊んでいってみてください。
下記にグローバルメニューと同じリンクを貼っています、よろしかったらご覧ください。
●こちらはいかがですか?(各ジャンルの記事一覧ページへ飛びます)