ブログ ブログにアクセスしたら記事を一覧表示されるようにした話
あいさつ
どうも、はかせです。
今回はブログの表示方法を変更し
記事一覧を表示した話です。
今までの表示
このブログのトップページにアクセスしたことがある人は
今までこんな感じの表示になっていたと思います。
最新記事が数記事全文乗っているやつですね。
これが悪いというわけではないのですが、
長い記事がいくつか並ぶとスクロールバーがとても長くなってしまったり
そんな長いバーの後に各種シェアボタンなどがあったりして
とても見にくく感じます。
記事を一覧で表示
記事がそのままバンとあると見にくいので
記事のタイトルだけあってそこから各記事へ飛べるような
表示にします。
具体的にはこんな感じです。
はてなブログではこの表示方法にするやり方が2つあります。
Pro版の機能を使う
はてなブログにはPro版という有料サービスがあります。
確か月額1000円とかだったと思います。
Pro版にすることで記事の表示方法をボタン一つで設定できるようになります。
お金に余裕のあるかたや既にPro版をご利用の方はこの方法でやるといいと思います。
javascriptを使う
私みたいにお金のない人間や無料版を使い続けたいという方は
javascriptを使うことでできます。
詳細設定画面から「headに要素を追加」という項目へ行きます。
あとは「headに要素を追加」のフィールドに以下のコードを打ち込みます。
<script type="text/javascript"> if( location.href == '自分のブログのURL'){ location.href='自分のブログのURL + /archive'; } </script> <noscript> <p><a href="自分のブログのURL + /archive">(自分のブログ名)</a></p> </noscript>
自分のブログのURLはブログの基本設定から確認できます。
簡単に解説を
普通のブログであればやり方を説明して終わりだと思います。
ただ私のブログは曲がりなりにも
プログラミングを取り扱ってきたブログなので
今回のコードでやってることについて解説していきます。
まず最初の
<script type="text/javascript"> if( location.href == '自分のブログのURL'){ location.href='自分のブログのURL + /archive'; } </script>
この部分についてです。
まずlocation.hrefで現在のページURLを取得します。
そして現在ページがブログのトップページであった場合
/archiveをつけてページジャンプを行います。
ちなみにはてなブログURLに/archiveをつけると
記事を一覧で表示するページへジャンプできます。
次に
<noscript>
<p><a href="自分のブログのURL + /archive">(自分のブログ名)</a></p>
</noscript>
この部分です。
noscriptタグというのはjavascriptが機能していない環境下で
表示する内容を記述します。
ここに遷移先のURLを置いておくことで自動ではないですが、
javascriptが機能していない環境下でも目的のページへ誘導できます。
あとがき
今回はブログのトップページを記事一覧にした話でした。
そこまで難しいことをしなくても
無料版でPro版同様の表示ができました。
これで少しは見やすいブログになった・・・はずｗ
それでは今回はこの辺でノシ
