こしあん日記 ~写真と猫とサッカーと~

子供たちの記録用にはじめたが、思春期になり写真を撮らせてもらえなくなる。写真と愛猫とサッカーが中心のブログです。

ちょこっとづつブログカスタマイズ

こまんたれぶ。

はてなブログでできること、できないことが少しづつ分かってきたので、できる範囲でカスタマイズ実行中。

気に入った方は自由に同じカスタマイズをしてください。

利用テーマの確認

はてなブログは管理画面の「デザイン」を選択しても今使用中のテーマが表示されない。ちょっと不便。

まあ、自分がどのテーマを使っているか確認することはあまりないのでいいといえばいいのだが。

今回のようにカスタマイズ方法を書く上で、テーマは絶対に知っておかないと意味がない。

 

テーマの確認方法は、自分のブログを表示させ、適当な場所で右クリック。

「ページのソースを表示」等でソースコードを表示させる。

ソースの中でCSSファイルへのリンクを探す。だいたいのテーマはCSSファイルに記述されているとのこと。

このブログの場合はこういう記述。

<link rel="stylesheet" type="text/css" href="//blog.hatena.ne.jp/-/blog_style/17391345971648109267/a6540f22cf2654ecab21f4f76c36f867da071461"/>

href=
のあとがcdnではじまるものは違う。

href=以降の青文字をクリックするとCSSファイルが表示される。

このブログはカスタマイズのためのテーマ『Innocent』

 

フォントサイズの変更

このカスタマイズはさほど重要ではないので読み飛ばしてもらっても大丈夫。

興味のある方だけ。

 

フォントサイズは様々な場面で、様々なサイズで表示するので管理が非常に大変。

私は仕事上知っておく必要があるが、普通の人はあまり知らなくてもいいことだが、知っていると色々カスタマイズがしやすくなると思う。

大前提としてPCでの表示の話。

通常何も指定しない場合、ほとんどのブラウザが16pxを初期値にしている。

ちょっと大きいので、CSSで縮小しているケースが多い。

Innocentの場合は85%に縮小している。つまり13.6pxになっている。

細かい話をしだすときりがないので、13.6pxって微妙なサイズで小数点とかうざい!くらいで考え、そもそもの起点のサイズを変更する。

全体を一番分かりやすい10pxに変更。初期が16pxなので62.5%すればよい。

ブログ管理画面の「デザイン」をクリックしスパナなようなアイコンで設定画面を表示し、一番したの「デザインCSS」に以下を追記。

html {font-size: 62.5%;}

 

フォント種類の変更

フォントの種類は、特に日本語の場合は非常に限られている。

このテーマでは「メイリオ」が利用されている。統制の取れたゴシック書体。そしてWindowsでもMacでもほぼ確実に再現できるのもよい。ただ、個人的にはちょっとゴツゴツしているのと、少し下に下がり気味なのであまり好きではないので変更。

 

今回はWebフォントを利用。

日本語Webフォントは無料のものはいくつかあるが、一番確実なGoogleが配布しているフォントからチョイス。

googlefonts.github.ioこの中の

Noto Sans Japanese

をチョイス。企業サイトでも多く利用されている安定感のあるフォント。

まず、Webフォント用CSSファイルのリンクを上記サイトより取得。

 少しわかりにくいが赤枠部分を横にスクロールしながらコピーする。

コピーしたものを、ブログ管理画面の「設定」「詳細設定」の下の方にある「headに要素を追加」にペーストする。

ここまでで、Webフォントの利用準備は完了。

次に、実際に使うためのコードを書く。

管理画面から「デザイン」のスパナマークの「カスタマイズ」を押す。

一番したの「デザインCSS」を押し、以下を記述する。

body{
font-family: "Noto Sans Japanese";
}

bodyというのはブログ全体と思ってもらっていい。

これで、フォントの種類が変更される。

 

日付表記の変更

個人的に日付は半分どうでもいい、サブ的な要素と思っている。

私の使っているテーマInnocentの場合、タイトルの真上に日付がありちょっと邪魔な感じがするので、右側に押しやった。

下の赤枠のような感じ。

 

Innocentの日付表示はCSSでdateというクラスでレイアウトを指定しているので、以下を追記。追記場所は管理画面から「デザイン」のスパナマークの「カスタマイズ」を押す。

一番したの「デザインCSS」を押し、以下を記述する。

 

.date {
display: inline-box;
color: #3f5e8d;
text-align: right;
padding: 5px 0;
border-bottom: 1px dotted #3f5e8d;
margin-bottom: 10px;
}

簡単に説明すると、文字色を濃い青にして、文字を右に寄せる。上下に5pxの余白を取り、下に1pxの点線を書き、その下を10px開ける。

よくわからない場合、このままコピペし色だけ好きなものに変えてもらっていい。

 

続きを読むは重要

前にはてなブログの注意点で紹介したように、ブログトップは記事数を3にし、あまり写真を出さず、ブログ全文は「続きを見る」で見てもらうようにしている。

 

cosian.hatenablog.com

このため「続きを見る」というボタンは非常に重要なため、できるだけ大きく目立つようにした。

これまでと同じようにCSSの変更になる。

管理画面から「デザイン」のスパナマークの「カスタマイズ」を押す。

一番したの「デザインCSS」を押し、以下を記述する。

 

まずは通常時

.entry-content .entry-see-more {
display: block;
background-color: #3f5e8d;
}

表示をブロックに変更。これで横いっぱいに広がる。色を青に変更。

 

こちらはマウスカーソルが上に来た時
.entry-content .entry-see-more:hover {
background-color: #0d1e38;
}

背景色を濃い青に変更。

 

最後に

カスタマイズはある程度知識がどうしても必要になる。

こんなことがしたいということがあれば、コメントをいただければわかる範囲でやり方を伝えます。自分自身の参考にもなるので。