HTML＋CSSちょこっとカスタマイズ

きょうはすこしだけ専門的な話です。

わたしはひとつの記事の文字数がちょっと多めなので、見た目をコンパクトにまとめようとして、いつも記事を書くときに文字の大きさを見たままモードで小(８０％)に指定しているのですが、有難くもコメントをいただく機会がありまして。パッと見、記事の文字の大きさ＜コメントの文字の大きさ、というバランスがずっと気になっていたんですよね。

もともと三日坊主な人間なので、ブログを始めた当初は「すぐにやめちゃうかもしれないしお借りしたテンプレートのままあんまりいじらないようにしよう」と思っていて、仕事じゃないんだからとamazonのアソシエイトもやっていないしGoogle Analyticsも導入していませんでした。(amazonの商品詳細を埋め込んでるのは単にこの商品だよっていう説明のためなので広告収入は無いです。)

いったんデザインにこだわり始めたら職業病で止まらなくなってしまうことは明白だったから気に留めないようにしていたんですけど(わたしの前職はコーダーもどきでした)、ついにブログ記事も３０を超えて「こりゃあ思ったより続けていけるかもしれないな」と。
もしカスタマイズに手を着けるならばこれ以上記事が増えてからではどんどん面倒くさくなっていくばかり。でもやり過ぎるとタグ書き換えの問題で気軽にテンプレートを変更できなくなってしまう。
どうやら、いちおうデザイン設定からHTMLとCSSをすこしいじれるみたいだし、気になる部分だけ軽く手を入れることにしました。

コメントの文字の大きさ以外に書き足したCSSは以下。

f:id:baabaabambi:20170712191509p:plain

①…記事タイトルのフォントスタイル

②…記事の文字の大きさ

③…コメント欄の上部余白と文字の大きさ

④…記事一覧ページの文字の大きさ

⑤…見出し設定　※１

⑥…サイドバーの見出し

⑦…サイドバーコンテンツのフォントサイズ

⑧…「次のページへ」リンクの装飾

⑨…「前のページへ」リンクの装飾　※２

⑩…⑨に関連して横スクロールバーを消すためのタグ

※１　HTML的にはh1～h6までしか定義されていないので、ほんとうはあんまりよろしくないです。
　　　けど、h6まではテンプレートで指定されちゃってるからあんまりいじりたくないし、SEOがんばりたいわけでもないし、記事を書くときにいちいちクラス指定するのも面倒なので、CSSでブロック要素を定義して簡易的に使えるようにしました。
　　　いままではインラインにCSSを直接記述していたので、これで多少はマシになる、はず。

※２　はてブって記事一覧に「次のページへ」のリンクはあるのに「前のページへ」戻るリンクはないんですね。ページの挙動チェックしててはじめて気付きました。
　　　一度目に留まると気になってしまうもので。でも自力でJavaScriptをどうにかする気力はないし、そもそもそこまで手間をかけるつもりもなかったので、偉大なる先人の知恵に頼ることにしました。

psn.hatenablog.jp

こちらを参考にページ送り機能を設置。助かります。

あとはこれまでに書いた記事のフォントサイズの書き換えですが、これがもう面倒くさいのなんのって。

f:id:baabaabambi:20170624052802p:plain