悠々自適な日々を目指す

波音に抱かれながら眠りにつくような生活を夢見るブログ

【PC版】ブログテーマをDUDEへ変更&ほんの少しカスタマイズ -- その1(追記あり)

もうちょっと見た目がスタイリッシュ&更新頻度が高い、あるいは個人的に読んでもらいたいカテゴリーリンクをヘッダー辺りに簡単に設定できるテーマを探しておりました。

そして、発見。素敵なテーマをありがとうございますm(_ _)m

tsukuruiroiro.hatenablog.com

レスポンシブデザインには未対応とのことですが、はてなでスマホ版デザインが用意されているし、ものは試しじゃーと導入。気になったらとりあえず試してみたくなるのが僕の悪い癖。

導入して、↑のリンク先に記載されているカスタマイズは一通りしてみたのですが、もう少しいじることに。
ちなみに完成形は現在のブログです。

カスタマイズした部分は記事本文とサイドバーです。備忘録として、簡単にですがまとめていきたいと思います。まずは記事本文から。

記事本文は、

<div class="entry-content">〜</div>

以上のタグで囲まれていますので、「entry-content」クラスにCSSを設定していきます。

いきなり完成形から

.entry-content{
   font-family:"ヒラギノ丸ゴ Pro W4" , "Hiragino Maru Gothic Pro" , "メイリオ" , Meiryo , "MS Pゴシック" , "MS PGothic" , sans-serif;
   /*フォントの種類設定 - (1)*/
   font-size: 100%;
   /*フォントサイズ変更 - (2)*/
   color: #333;
   /*フォントカラー変更 - (3)*/
}

上から順に、さらっと説明してみます。

1)フォントの種類を変える

Windows、Mac共に「游ゴシック」で優先的に表示されるようでしたが、特にWindowsでは文章が読みづらかったので、

Font−familyのベストな書き方 2015年版 | それからデザイン スタッフブログ

以上の記事を参考に設定しました。Windowsならメイリオ、Macならヒラギノ丸ゴが優先されます。
角ゴシックではなく丸ゴシックにしたのは単なる好みですw

2)サイズを変更する

デモサイトを参照いただくと、サイズがわりと小さく感じます。これも読みづらさの原因と考え、少し大きくしました。
%にしているのは、相対指定なのでブラウザの文字サイズ変更に対応できる……の他に、今までの癖みたいなものです←(趣味でサイト作ったりしたことがある)

3)カラーを変更する

デフォルトは明るめのグレーっぽく見えるのですが、背景が白なのもあって少し目に痛かったので黒に近いグレーにしました。

ちょっと長くなってしまったので、サイドバーは次回にまとめます。
あ、ヘッダーのカスタマイズはもう少し記事が増えてからにしたいと思います!

-----ここから追記-----

パンくずリスト&「合わせて読みたい」リンクを設置

サイトといえば「パンくずリスト」。
ブログではあまり意識したことがありませんでしたが、ネットの海をさまよってみるとSEO的にあった方がいいとのこと。
追記前の記事を書いたあとにGoogle AdSenseの二次審査に落ちたこともあり、対策も兼ねて設置してみることにしました。

「合わせて読みたい」は自分がブログを読む時、下に関連記事へのリンクがあるとクリックすることが多いなーということを思い出したためです。 

どちらも、以下の記事を参考にさせていただきましたm(_ _)m

bulldra.hatenablog.com