これは、無料版はてなブログを、ブログ超初心者がカスタマイズしていく記録です。今回は、ブログトップページを記事一覧で提示できるようにしました。
※ブログ大改造実施中のため、現在は記事一覧の表示を取り止めています。ご了承ください。
【私が行いたいカスタマイズ】
- ブログトップページを記事一覧で提示したい！←今回！
- 更新日を提示したい！
- ブログ内の文章を、四角で囲みたい！
- 文字の大きさを、もう少し大きくしたい！
- ブログのトップページの背景を変えたい！
- Googleアドセンスを設置したい！
- ブログ内に図を入れたい！
- 今までのブログ内容を推敲したい！
なにせ初心者、重要度も難易度もわかりません。
なので、直感的にできそうなものからどんどん手を付けていきます。
選んだ理由
無料版はてなブログは、トップページをひらくと、記事がそのまま表示されてしまいますよね。
少しずつ記事の数が増えてきた今、過去の記事を探すのがだんだん大変になってきました。
標準で装備されている「続きを読む」を使って、できるだけコンパクトにしているのですが、記事によってどうしても文章の量が異なり、見た目も今一つです。
どうにかできたらなぁと思っていた時に、トップページを記事一覧で表示する方法があることを知りました。
トップページをアーカイブ表示に設定すればよいそうです。
方法は、とてもたくさんの先輩はてなブロガーさんが教えて下さっています。
私は、こちらのブログを参考にさせて頂きました。ありがとうございます。ブログタイトルが「〇〇したい」でお揃いで、勝手に嬉しくなっています。
はてなブログのトップページを記事一覧にする方法 いつの間にかhttpsになっているぞ - 社会人はリラックスしたい
デメリットは２つ。「表示が遅くなる」「検索順位が下がる」？！
設定する前に、びびりな初心者は、デメリットを調べてみました。
トップページを記事一覧にするデメリットは、だいたい２つあるようです。あくまで私が調べたかぎりですが…；
デメリット１：読み込み時間がおそくなる
デメリット２：Googleで提示される順位がさがりがち
とのことでした。
2つめの、「検索サイトでの順位が下がりがち」の方は、どちらにせよ上位には入らないのであまり気にしないようにします。書いていて少し悲しくなりますが；；
なので、私に直接関係するデメリットは、「読み込み時間がおそくなる」方だけかな、と思い、どのくらい遅くなるかも含めて試していきます！
設定はとても簡単でした！
設定→詳細設定→headに要素を追加に以下のコードを貼って、変更するボタンを押すだけで、できました！
<script type="text/javascript">
if( location.href == 'https://komagomepipette.hatenablog.jp/ '){
location.href='https://komagomepipette.hatenablog.jp/archive';
}
</script>
<noscript>
<p><a href="https://komagomepipette.hatenablog.jp/archive">日常を科学したい</a></p>
</noscript>
緑文と赤色の部分を自分のものに変更するだけでOKでした。
行ってみた感想
読み込み時間の遅さは、私は気になりませんでした。まだ20記事程しかないからかもしれません。引き続き気にしていこうと思います。
さて、この記事一覧ですが、50記事まで表示されるそうです。50記事も並ぶとさすがにまた使い勝手のわるいブログになってしまいそうなので、こちらも記事数が増えてきたら何か対策を考えていきたいと思います。
コードの意味は？
問題なく記事一覧で提示はできたものの、自分が張り付けたコードが、一体全体なにを指示しているのか、ちんぷんかんぷんでした。
そこで、今回もいろいろなブログから学ばせていただいたことを書いていきます。間違っていたら、気が付き次第直していきます。
学んだこと１：大枠は<script>～</script><noscript>～</noscript>
スプリクト(簡単に動かせるプログラム)を書くためのもの。
スプリクトタグとよばれる。
<script>～</script>間に、動かしたい事を書くことで、プログラムが発動できる。
スプリクトが発動できなかった時、<noscript>～</noscript>間に書かれたことが実行される。
※スプリクトについては、詳しくは、こちらの「スプリクト（sprict）とは」に私でも納得できそうな感じでわかりやすく書いてくださっています。
学んだこと２<script type="text/jabascript>は、「今回はjabascriptを使うよ」といっている
jabascriptは、動作に関わるプログラムの時に活躍するプログラム。
2014年以降のものだったら、typeはデフォルトでjabascriptに設定されているので、省略してもよいらしい。本当かしら。今度省略したもので試してみます。
学んだこと３ if文の意味は「if（条件）{条件が合っていたら実行してほしいこと}」
今回のifから始まるコードはこちら。
if(location.href ==ブログURL）{location.href =ブログ記事一覧URL}
意味をあてはめて考えると
「ブログURLがlocation.hrefならば、 ブログ記事一覧URLにlocation.hrefしてね」といっていることになります。
location.hrefとは何かが分かれば、なんとなくこのコードの意味が分かりそうです。
調べてみると、「location.hrefを使えば、URLを取得したり、ページ遷移をしたりできる」とありました。
この時点でもう、私には難易度が上がりすぎて理解が追い付いていないのですが、つまりはURLに関連したプログラムの時に活躍するヤツってことですかね？？ざっくりさせすぎでしょうか。。
おそらく「＝」が２つあるのとかも意味があるのでしょうが、わからず。無力なり。。
学んだこと４ a heafはリンク先を指定している。
<a href=ブログ記事一覧のURL＞ブログ名</a>
このコードの意味は、「ブログ名をクリックしたら、ブログ記事一覧のURLにとんでね。」 となります。
学んだこと５（まとめ） つまり設定コードが言っていることは…
jabascriptというプログラムをつかって、
ブログURLを開いたら，ブログ記事一覧URLに移動するよ。
ブログタイトルをクリックされても、ブログ記事一覧URLに移動するよ。
私が行いたいカスタマイズ一覧
超・初心者がブログをカスタマイズしていく記録！【行いたいこと一覧】
※行いたいことを思いつきしだい追記し、カスタマイズを実施の記録とリンクしています。
