ネット副業道場

副業・副職・兼業についての総合情報サイト

【はてなブログで】固定ページを使わずに記事を複数固定できるトップページを作った【ブログカード】

html

はてなブログでは、「固定ページ」という機能を使う事でWebサイトのトップページを表現することが想定されています。ですからトップページを作りたいなら、固定ページを使うのが通常の方法です。

しかし私はある事情により固定ページではなく別の方法でトップページを作りました。もしかしたら同じ事で悩んでいる方がいるかもしれませんので、私が選んだ方法について今回は紹介したいと思います。

固定ページを使わなかった理由

man

記事を複数固定したかった

当Webサイトのトップページは、最新記事が常に最上部に表示されるタイプではなく、指定した記事が常に表示されるようになっています。しかしはてなブログのデフォルトの状態ではそうではありません。

はてなブログは通常、トップページに最新記事が表示されるようになっています。記事固定は最上部の記事1つにしか適用できませんので、この時点でページをカスタマイズする必要があることはわかっていました。

ここまでの理由であれば、固定ページにブログカードを貼り付けて記事一覧のようにすることで対応できそうに思えます。しかし、2つめの理由でそれは断念しました。

はてなブログのブログカードをトップに使いたくなかった

もう一つの理由ですが、私がなぜ固定ページを使わなかったかと言いますと、はてなブログの機能であるブログカードを使いたくなかったからです。理由は見た目が好きではないからです。

固定ページに記事一覧を表示するとなると、最も簡単な方法ではブログカードを使う方法があります。しかし、はてなブログのブログカードで記事一覧を作るのはちょっとおしゃれではないですよね。

私が使っているテーマはDebriefingといいますが、このテーマを選んだ理由の一つにブログカードがとてもキレイで気に入ったということもあり、なるべく既存の機能を利用してトップページを作ることを考えました。

どうやってトップページを作ったか

girl

カテゴリー別一覧ページを使った

結論から言うと、当Webサイトがトップページに使っているのは「カテゴリー別記事一覧ページ」です。URLを見ればわかると思います。メインコンテンツというカテゴリを使っています。

この方法にたどり着いたのは、はてなブログのシステムを理解していなかった頃に偶然気づいたからです。今からトップページを作るとなったら、恐らくこの方法を使わないと思います。

はてなブログはゼロからの立ち上げが楽な分、カスタマイズ性はやはりWordPressに劣るなぁと思っていた中でこの方法を見つけました。

具体的な方法

まず、トップページに表示させたい記事メインコンテンツカテゴリに登録し、任意の順番で表示されるように投稿日を調整します(新しい日付の記事ほど上に表示されます)。

そしてパンくずリストやタイトルといった不要な部分CSSで削除し、html記述で追加したいコンテンツを準備します。htmlを書く場所は、「カテゴリー」の説明文のところです。

ここにhtmlを書くことで、メインコンテンツカテゴリの記事一覧ページにだけ任意のコンテンツを表示させることができます。当Webサイトでいうといらすとやの女性教師の画像とフキダシですね。

まとめ

現在当Webサイトはこの方法で書かれています。ですのではてなブログでネット副業道場みたいなトップページを作りたい場合は参考にしてください。

最後に改良点を紹介します。最近気づいたのですが、固定ページに普通にブログカードのhtmlを書けばよい気がしてきました。ちょっと記述が多くなってしまいますが、そうすれば記事下にあたる部分も自由に編集できますし。

ということで今回の記事は以上です。メインコンテンツの「基礎から学ぶネット副業」もよろしくお願いします。(といいながらはてなブログのブログカードを貼る)