本ブログでは、はてなブログの無料版のトップページをそのまま少しの手間で記事一覧風にしています。
その方法を紹介します。
無料版のトップページはデフォルトだと記事の全文が表示された状態で７記事表示されます。
アーカイブ一覧に移動する対応が良く紹介されています。
ここでは、あくまでトップページのまま、どこまでできるかやってみました。
目次
■本ブログのトップページ画像
本ブログのトップページはこんな感じになります。
1920x1080サイズの画面で１画面に記事が２つ出る感じです。
左にアイキャッチ画像と導入文、
右に広告という感じです。
無料版なので はてなさんが出す広告が付いてきます。
左半分を見ていただく感じになります。
記事は９記事まで出しています。特に理由はありません。
イメージ、つかんでいただけたでしょうか。
■はてなブログ無料版のトップページのカスタマイズ
はてなブログの無料版のトップページは、何も設定変更しないと次のようになります。
はてなブログ無料版トップページのデフォルトでの特徴
- ７つの記事が表示される
- １つの記事は記事の全文が表示される
このままだとトップページが長くなり読者に読んでもらいたい記事を見つけてもらいにくくなります。
１記事が３スクロール(ページ)分として２１ページ、途中で閉じちゃいそうです。
そのためいろいろな工夫が提案されています。
それらの提案と本ブログで取り入れた方法を紹介します。
紹介されているトップページの対応方法
アーカイブ一覧に移動する対応が良く紹介されています。
簡単で記事一覧によく似た感じだからです。
『じゃ、アーカイブ一覧に移動でいいじゃん』
となるところですが、ページが切り替わっているというのが個人的に好きじゃなくて、もう少し踏ん張ってみました。
なので、あくまでトップページのまま、どこまでできるかにこだわっています。
先に提案されている方法について簡単に触れてみます。
□記事数を１記事にする
トップページを記事一覧にするのではなく、記事の全文が出る仕様なので１記事だけにして、後は読者の操作に任せる方法です。
◎メリット
- ダラダラと長いトップページにはならない
- 一度設定すれば、記事作成時の作業はない
◎デメリット
- 複数の記事を紹介できない
□「続きを読む」を記事に入れる
「続きを読む」を記事の本文に入れることでトップページに表示される文が全文ではなくその位置までに短くなる方法です。
この方法がオーソドックスな方法だと感じています。
◎メリット
- 記事数が１から１５に設定できる
- 表示する文の長さを調節できる
◎デメリット
- 記事ごとに「続きを読む」を入力する必要がある
- 記事ごとに はてなブログが出す広告が出る
□アーカイブ一覧に移動するように設定する
参考：【悲報】はてなブログ：無料版で記事を一覧形式にするのは利用規約違反です。。 - けいたろうの田舎暮らし
キーワード「はてなブログ トップページ 無料版」等でネット検索するとたくさんヒットします。
そのほとんどがアーカイブ一覧へ表示を切り替える方法です。
「archive」というアドレスが説明の中にあれば、ほぼこの方法だと思います。
サイドバーに設定されていれば、「月別アーカイブ」をクリックして表示されるページと同じものです。
本ブログのアーカイブ一覧の画像です。
◎メリット
◎デメリット
- 利用規則違反になる
- 表示する文の長さを調整できない
- トップページから遷移するので本当のトップページではない
- java scriptが必要(コピペで済みます)
- 記事数が５０
記事数を設定できるようにカスタマイズした例もあるようです
□「続きを読む」✚段組みする方法
「続きを読む」でトップページに出る記事の文を短くし、
段組みで１記事の高さを抑える方法です。
本ブログで実践している方法です。
ポイント
- 「続きを読む」を記事に入れる
- 記事の先頭にアイキャッチ画像を入れる
- ２段組みにして記事の高さを抑える
◎メリット
- 記事数が１から１５に設定できる
- 表示する文の長さを調節できる
- 記事の高さが抑えられる
◎デメリット
- 記事ごとに「続きを読む」を入力する必要がある
- 記事ごとに はてなブログが出す広告が出る
■トップページのためのカスタマイズ
『「続きを読む」✚段組みする方法』を実現する方法を説明します。
実現方法
□先頭にアイキャッチ画像を入れる
自動では画像が入らないので記事の先頭に画像を入れます。
その時に、画像の右側に文が回り込むような設定も併せて行います。
次の内容を記事の先頭に入れます。
[f:id:はてなID:画像ID:plain:left:w120]
要約
<br style="clear: both;">
- 「[f:id:はてなID:画像ID:plain:left:w120]」は、はてなのfoto記法で、はてなフォトライフの画像を表示する時に使います。
※見たままモードでもこのまま使えますが、プレビューにしないと画像は見えません。 - 「:left」で文が画像の右側に回り込みます。
※ひょっとすると現在推奨されていないかもしれません。はてなブログのヘルプに記述がありません。はてなダイアリーの遺産かもしれません - 「:w120」で画像のサイズを幅120pxにします。
- 「要約」というところにトップページに表示させたい文を入れます。
- 「
<br clear="all"/><br style="clear: both;">」で文の回り込みを解除します。
※編集モードが見たままモードの時は使えません。
次に見出しなどが来ればなくても問題ないと思います。
※clear=はHTML5で廃止になっていました。
これらの内容は、トップページに表示されますが、記事本文にも表示されます。
□「続きを読む」を記事に入れる
「続きを読む」を記事に入れるというのは、そのための決まった文字を記事に入れることになります。
入れた位置までがトップページに表示されます。
次の内容を記事の望む位置に入れます。
<!-- more -->
アイキャッチ画像と「続きを読む」を入れた時のトップページ画像です。
これでほぼ一画面(1920x1080のモニタで)分です。
□段組みを設定
先ほどの画像を見て分かるように、広告があるため１画面に１記事しか出ません。
１記事の高さを抑えるために段組みを設定して、広告が横へ表示されるようにします。
段組みを設定するには、CSSを作成する必要があります。
次のCSSをブログのデザイン設定のデザインCSSに追加することで対応します。
/*トップページで1記事を短くするために記事単位でカラム表示にする*/ .page-index .entry-inner { columns: 4 24em; column-rule: 1px dashed #f7f7f7; font-size: 80%; }
- columnsで段の最小の幅と最大段数を指定
24文字分の幅が確保できたら段を4つまで増やします。
4の必要はありません。2で十分です。 - column-ruleで段の間に境界線を入れます
線の種類や色を指定できます。
線がなくても良ければ、削除して大丈夫です。 - font-sizeで記事よりフォントサイズを小さくしています
１記事の高さを抑えるためにしています。なくても大丈夫です。
□サンプル定型文
必ず記事に入れる内容は、定型文のような形で用意しておくと便利です。
サンプル定型文を紹介します。
そのままコピーして使えます。(<!-- more -->の前のタブ(空白)は削除してください)
[カテゴリ][カテゴリ]タイトル
{#タグ}(カスタムURL)
[f:id:はてなID:画像ID:plain:left:w120]
要約
<br style="clear: both;">
<!-- more -->
[:contents]
本文
- タイトルはそのままタイトル欄へコピペすると、タイトルの前の[カテゴリ]という部分がカテゴリの指定になります。[カテゴリ]は自動的に消えます。
- {#タグ}(カスタムURL)は、タグとカスタムURLのメモ。
タグの設定、カスタムURLの設定の時にコピペします。 [f:id:はてなID:画像ID:plain:left:w120]は、アイキャッチ画像の指定。幅120px、次の文章を右側に出力
※見たままモードでもこのまま使えますが、プレビューにしないと画像は見えません。- 「要約」のところにトップページに出る文を書きます。
- 「
<br clear="all"/><br style="clear: both;">」で文章の回り込みを止めます。
※編集モードが見たままモードの場合は使えません
※clear=はHTML5で廃止になっていました。 - 「
<!-- more -->」で「続きを読む」の指定 - 「
[:contents]」で目次の指定。必要なら。 - 「本文」のところから本文を書きます
□アーカイブ一覧との比較
画像で比較してみます。広告を除けば、あまり違わなくできているかなと思います。
広告のない方がアーカイブ一覧で、もう一方がカスタマイズしたトップページです。
■さいごに
はてなブログ無料版でトップページをトップページのまま記事一覧風にする方法を紹介しました。
記事を書くときに一手間が苦じゃない方ならやっていけると思います。
「続きを読む」を本文の先頭にして、タイトルだけにできないか試してみました。できませんでした。全文が出てきてしまいます。
仮にできたとしても広告があるのでその分の高さは必要になります。
foto記法の「:left」など、推奨されないかもしれない機能を使用しているので、今後、アイキャッチ画像周りもCSSで対応する必要があるかもしれません。
がんばろう。
私が使用しているテーマは、１カラムタイプのテーマです。
利用者が多い２カラムタイプのテーマでも記事の部分が同じようになるんじゃないかなと思っています。
２カラムタイプのテーマで試せていないので想像ですみません。
いずれテーマも作ってみたいなぁなんて思っています。
