こんにちは、コトサワです
無料版はてなブログのトップページは、１つ１つの記事が全文表示されます
この表示スタイルはお世辞にもおしゃれとは言えませんよね
しかも
せっかくブログを訪問してくださった方にとっても、記事を探しにくい事この上ない仕様だと思います
じゃあ、自分で有料ブログ風の見やすいトップページを作っちゃえばいいじゃないか！
ってことで、試行錯誤して無料版のまま当ブログのトップページを作りました
完成のデザインがどんな感じか見てみたい方は
コトサワに聞いとけ トップページ ←コチラからご確認ください
今回はこの「コトサワに聞いとけ」の”有料ブログ風”トップページの作り方をご紹介します
”無料版はてなブログ”でも有料ブログ風の「トップページ」が作れます
上のリンクを確認してくださった方はお分かりいただけると思いますが
元の全文表示からは見違えるように”トップページ”っぽく変身させることができます
私自身はCSS・HTMLのプロではないので、トップページ作成にあたりPocoPotaさんのコチラの記事を参考にさせていただきました
”無料版はてなブログ”有料ブログ風 トップページの作り方
実際にトップページの作り方をご紹介します
ブログのカスタマイズを行う際は、事前に必ずバックアップをとってください
当記事を参考にカスタマイズをした場合のデザイン崩れや反映不足は全て自己責任でお願い致します
大まかな流れはこんな感じです
- トップページ用の記事をつくる
- 題名等を非表示にするCSSを書き込む
- 記事を公開し記事一覧の先頭に表示させる
- 記事の表示方法を１記事に設定
- 記事一覧に表示しない設定
- 完成を確認
要は、トップページデザインの記事を作成し、その記事をブログのトップに表示させるという方法です
”有料ブログ風”トップページの作り方を画像付きで分かりやすく解説
STEP 01
トップページ用の記事をつくる
はじめに、トップページとして設定する画面を作ります
無料版はてなブログにトップページの編集機能はないので、新しく記事を１つ作り、それをトップページとして表示させる設定をします
そのためにまず、ダッシュボードの「記事を書く」を選択し、通常のブログ記事を書くときと同じように、記事編集の画面を出します
記事の中身がそのままトップページに表示されるものだと思って、自分好みにトップページの内容をレイアウトしてください
参考までに「コトサワに聞いとけ」のレイアウトを図にしておきます
リンクボタンやバナーを貼ることで
「最新記事」や「オススメ記事」「免責事項」等のページに飛ぶことができます
STEP 02
題名等を非表示にするCSSを書き込む
記事のレイアウト・編集が一通り終わったら、よりトップページっぽく見えるように記事のタイトルや投稿日時等を画面から消す設定をします
編集画面で「HTML編集」を開き、不要な要素を消すコードを入力します
<style>
/* 要素を非表示 */
.非表示にしたい要素{
display: none;
}
</style> 分かりやすくするために、一番下などにまとめて入力するのがいいと思います
コード内の非表示にしたい要素に、該当の要素名を入れてください
例としてタイトルを消したい場合は
<style>
/* タイトルヘッダーを非表示 */
.entry-header{
display: none;
}
</style> という感じになります
コード入力後に「プレビュー」を見てみると、指定した要素が消えていることが確認できます
消した要素は、表示は消えますが、ブログのデータとしては残っています
細かい設定やカテゴリは無記入で構いませんが
ダッシュボード内での編集時はタイトルが見えた方が分かりやすいので「トップページ」等の分かりやすいタイトルをつけておくことをお勧めします
これは私のブログだけの話かもしれないですが
正しいコードをいくら入力してもコメントボタン（デザイン上は「コメントを書く」）が消えません
原因を究明しようと思いましたが、何しろプロではないので…
<style>
/* コメントボタンを非表示 */
.leave-comment-title{
display: none;
}
</style> 上のコードをHTML内に入力してプレビューを開くと、コメントボタンはしっかり消えています
でも、いざ記事を公開し再度確認すると、コメントボタンが復活しているんです…
コメントボタン自体はとっても小さいので、そのままでもデザイン的にはあまり気にならないと思います
私はどうしても許せなかったので、ブログの大元の設定で、ブログ全体のコメント受付をオフにしました（→すると、全ページでボタンごと消えました）
そこから考えるに、はてなブログではコメント受付をオンにしていると、運営側の設定が固定され、どれだけコードを書き込んでもボタンが消えないのかもしれません
（私と同じ状況になった方は、自己判断で設定してください）
STEP 03
投稿日時を指定して記事を公開する
完成した「トップページ記事」の投稿日時を指定して、他の通常記事と同じように一般公開します
・記事のレイアウト・編集が完成
・不要要素を消すコードを入力
・タイトルの入力
が完了したら、編集画面の右側「編集オプション」から投稿日時を指定します
はてなブログのトップページは、記事が最新順で並ぶ形式です
投稿日時を「9999年」などの遠い未来の数字にしておくと、この「トップページ記事」が常に”最新”の記事として一番はじめに表示されます
投稿日時の設定ができたら「公開する」を選択してください
公開の設定は「指定日時で予約投稿する」ではなく「すぐに公開する」にしてください
STEP 04
記事の表示方法を１記事に設定
トップページに全文表示されている記事の表示数を１記事のみに設定します
この設定をすれば、ブログのトップページには常に１記事しか表示されません
１つ前の手順で最新記事の設定が済んでいるので、このステップ４の設定を完了すればトップページに表示されるのは「トップページ記事」だけになる、という訳です
ダッシュボードの「設定」から「詳細設定」を開きます
「ブログ表示」の中にある「トップページの記事数（PC版）」の数字を「１」にしてください
数字を選択後は必ず、一番下の「変更する」を選択して、編集内容をブログに反映させるようにしてください
詳細設定の「トップページの記事数」の文字の横には（PC版）という表記がついていますが、ブログのデザイン設定で「レスポンシブデザイン」を選択していれば
スマホでも同じデザインが反映され、今回のカスタマイズも利用可能です
STEP 05
記事一覧に表示しない設定
トップページに表示されている「トップページ記事」は、あくまでもそのブログの１つの記事です
今のままでは、ブログのアーカイブページ（記事一覧）を開くと「トップページ」という記事が常に先頭に出てくるという形になってしまいます
なのでこれからご紹介する”アーカイブページから特定の記事を非表示にする方法”を使って
「トップページ記事」がアーカイブページを開いても表示されないように設定しましょう
手順は簡単です
記事のuuidを取得し、ブログのデザインCSSに「このuuidの記事はアーカイブページから非表示にして！」というコードを入力するだけです
uuid ＝
その要素（ここでは”記事”）に割り当てられたオリジナルの番号
非表示にするコードは、ステップ２で使った不要な要素を消すコードと同じです
ただコードを貼り付ける場所は、記事内ではなく、ブログ全体のデザインCSSです
この設定は下のリンク記事を参考にさせていただいたので、詳しいCSS等はリンクからご覧いただければと思います
STEP 06
完成を確認
これまでの手順を全て終えたら、実際に完成したトップページを確認して終了です
確認の際には
・トップページ記事のデザインは崩れていないか
・貼り付けたリンク等は正常に動くか
・非表示設定をした要素名がちゃんと消えているか
・アーカイブページ（記事一覧）を出したときに、トップページ記事は非表示になっているか
等を確かめてください
無料版はてなブログでトップページを作るときの注意点
無料版はてなブログでトップページを作る際には注意するべき点が主に３つあります
順番に説明するので、作成前にぜひご確認ください
トップページにアーカイブを表示させる方法は規約違反です
無料版はてなブログのトップページカスタマイズとして、よくネット上で紹介されているのが
ブログにアクセスされたときに、自動的にトップページから記事一覧（アーカイブ）のページに飛ばす
という方法です
この方法を使えば、ブログを開いた瞬間に
記事が全文表示されているトップページではなく、アイキャッチと記事の紹介文のみが並ぶ一覧形式の画面を表示させることができます
しかしこの方法は
トップページに掲載必須の広告が表示されなくなってしまうので、はてなブログの規約違反です
なのでこの方法は利用しないでください
トップページに入れておいた方がいいページ
今回ご紹介したトップページは、自分の手でページ内を好きにレイアウトすることができます
レイアウトは自由ですが、あくまでも”トップページはブログの顔”なので、ブログを訪問してくださった方が、見やすく散策しやすいレイアウトにするのがいいと思います
例えば
⚪︎ 記事一覧（最新記事）
⚪︎ 筆者のおすすめ記事
⚪︎ メニューバー（カテゴリ）
などがあると、いろんな記事やページを見てもらいやすくなると思います
それからもしあなたが無料版はてなブログでグーグルアドセンスの申請をしようとしているのであれば
⚪︎ 免責事項・プライバシーポリシー
⚪︎ 運営者情報
⚪︎ 問い合わせページ
をトップページのわかりやすいところへ設置するべきです
満足いく形にならない場合は有料版を利用するべき
この”有料ブログ風”のトップページはあくまでも無料版でできる範囲内のカスタマイズです
有料版には到底かないません
レイアウトを考えたり都度修正をしたりと、ある程度時間がかかります
またCSS・HTMLがいじれないと、自力で作成するのはしんどいかもしれません
そういった場合は潔く諦めて、有料版を利用するのがオススメです
有料版ではトップページを１から作る必要はありませんし、そのほかにもいろいろな機能を利用できます
無料版でカスタマイズに時間をかけている分、新しい記事を作ることだってできます
自分では無理だーーーー！となった方は、有料版への移行をご検討ください
まとめ
私が運営する「コトサワに聞いとけ」（当ブログ）では、実際に今回ご紹介した方法でトップページを作っています
また、特定の記事をアーカイブページで非表示にする方法は、免責事項やプライバシーポリシーのページでも活用しています
この記事がみなさんのブログカスタマイズのお役に立てば嬉しいです
当記事の内容はブログのカスタマイズにご自由に利用していただけます
ただし当記事のカスタマイズ内容をご自身のブログで”紹介”される場合は
コピペではなく、当記事のリンクを貼っていただくようにお願い致します
