つれづれなる備忘録

日々の発見をあるがままに綴る

ブログデザイン備忘録 ~ ヘッダ・本文・見出し

0. モチベーション

HTML/CSSの勉強も兼ねて本ブログのデザインをいろいろいじっているので、ログも兼ねてここに記録してみようと思う。頻繁にデザインを変えるわけではないので不定期更新になると思う。

1. はてなブログのデザイン設定

基本のデザインは公式テーマSmooth(デフォルト)を使用している。慣れてくればHTML/CSSで1からデザインを作るかもしれないがが、当面はデフォルトのテーマに対してHTML/CSSでデザインを変更していくことでカスタマイズを行う。HTML/CSSの記述以外でできる設定としては、背景画像の選択、ヘッダ内の画像とテキストの表示を選択、記事内で記事ページにパンくずリストを表示するをチェックする。

2. ヘッダ

ヘッダのブログタイトルの書体は、ひらがなの書体に特徴があるGoogle Fonts+日本語のこころ明朝というものを使用している。下記のサイトに行けば、書体とhtml/cssのコードを確認することができる。 googlefonts.github.io なお日本語の書体数はいまのところ9種類で少ないが、英語であれば多数のGoogle fontがある。

Google Fonts

こころ明朝を使用するには、まずヘッダー/タイトル下(記事上/下でもよい気がするが)に次のHTMLコードを記述。

<link href="https://fonts.googleapis.com/earlyaccess/kokoro.css" rel="stylesheet">

なおタイトル名と直下のブログの説明はダッシュボード->設定->基本設定に書いておく。タイトルおよびブログ説明に適用するためには、デザインCSS内に以下を追加。

#title a{
  color: #ffff99;/* タイトル文字の色 */
  font-family: "Kokoro";/* フォントスタイル設定 */
}
#blog-description{
color: #00ffcc; /* ブログ説明の文字の色 */
font-family: "Kokoro";
font-weight:bold /*太字にする*/
}

次に自分で用意したヘッダ画像を埋め込むためには、デザインCSS

#blog-title{
  background-image:url(dummy.jpg);/*ヘッダー画像を挿入*/
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  text-align: left; /*タイトルを左寄せ*/
  font-size:130%;
  max-width:1160px;
  font-family: "Kokoro";
}

なお画像のurlの取得方法は

はてなブログにヘッダー画像を設定する方法で苦労した話(余白、はみ出し) - はるなぴログ

などが参考になる。 テキストは左寄せにしてフォントサイズや幅などは表示を見ながら数値を調整する。

3. 本文などの書体

本文や見出しの書体は、読みやすさから以下のようにCSS内で設定した。メイリオ,游ゴシック,Hiragino Kaku Gothic ProN,MS ゴシック,sans-serifの順位で適用される。 書体・フォントサイズ・太さなどは表示してみながら調整するとよい。

body {
font-family: "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "MS ゴシック", sans-serif;
}
.entry-content h1 a{
 font-weight:900;
 font-size:100%;
}

本文中の見出しデザインは

.entry-content h2 {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #7db4e6;/*左線*/
  font-size:130%;
}