読者です 読者をやめる 読者になる 読者になる

dods’ blog - 今と昔のノートブック

今の記録は情報提供。昔の記憶は話題提供。気ままに記します。

ブログのデザインを微調整してみた ② Evergreenのスタイルシートにコードを追加、という本題に入ります

パソコン 雑記 ネットワーク

はてなブログにお世話になり始めて半年が過ぎます。最初のデザインは迷うこともなく、と言うか自動的にReach。その後、皆さまのブログを拝見させていただくと、2コラムはもはや時代遅れのようで、シンプルなEvergreenに途中で変え、今に至ります。

しばらくEvergreenで続けてきましたが、当初から気になっていたのがブログタイトルのフォントサイズ。控えめな性格のせいか、ちょっと大きすぎて気が引けてました。

フォントサイズの設定はスタイルシートで行うことは承知してましたが、このデザインのスタイルシートを入手する方法はあるのだろうか、そもそもスタイルシートは公開されているのだろうか、等々分からず。

でもいろいろ調べて、必要な情報は入手できました。参考にしたサイトは次の通り。

これらを参考に三点、①ブログタイトルのフォントを縮小、②各記事のタイトルのフォントを縮小、③ブログタイトルと記事の間の二重線を削除、を行いました。実際の作業は次の通りです。

まずスタイルシートのあるのは、

ダッシュボード>デザイン(この段階でタブの名称は「デザイン設定-はてなブログ」になる)>カスタマイズ(スパナのアイコン)>{}デザインCSS

ここで、四角囲みのエリアをクリックすると、スタイルシートの記述がテキスト形式で表示されます。

スタイルシートにコードを追加をするには、まずエディタなどで加えたいコードを記し、それをコピーします。それを、先ほどのスタイルシートが記述された画面を呼び出して、既存のコードの下にペーストし、変更を保存すれば完了です。

実際に加えたコードは次の通りです。

 /* ブログタイトルのフォントサイズ変更 */
#title {
font-size: 250%;
}

/* 記事タイトルのフォントサイズ変更 */
.entry-title {
font-size: 20pt;
}

/*ブログタイトル下の二重線を消す*/
.page-archive #main,.entry,#blog-title{background:none;}