ブログ開設から3ヶ月–––これまでに行なってきた はてなブログのカスタマイズ

このブログを開設してからもうすぐ3ヶ月。できるだけ見やすいサイトにしたかったので，いろいろカスタマイズしてみました。

かなーり昔に勉強したhtmlの知識を頭の片隅から引っ張り出しながら…とはいえ，知らないことがたくさんあるので，ネット上で公開されているものをたくさん使わせていただいています。まだ改善したいところもあるのですが，ここまでの忘備録として，カスタマイズをどのように行ってきたかを書いておこうと思います。

アイキャッチ画像はアゲハさん (@tomaruhana) によるものです

なお，この記事のアイキャッチ画像は，ツイッターで親しくしていただいている，アゲハさん（@tomaruhana）にお願いして，使わせていただきました。

はてなブログでブログを開設し，「Pro」版にしました

なんとなくブログを書こうと思い立ちました。いろいろググってみたところ，評判の良さそうなはてなブログでブログを開設しました。

最初は無料版で書いていたのですが，トップページで記事を一覧表示にしたかったのと，広告を消したかったので，費用はかかりますがPro版にしました。

独自ドメインを取得しました

せっかくPro版にしたので独自ドメインにしようと，お名前.com で独自ドメインを取得しました。「sunsunfine.com」ってなんだかカッチョいい。でも，お名前.com から大量にメールが届くようになって，少しじゃまくさい対応が大変です (^ ^;)

ブログテーマをUndershirtにしました

ブログテーマは，最初 innocent を使っていたのですが，カード型レイアウトにしたくて，ろくぜうどんさん作成のUndershirtを使わせていただくことにしました。

blog.hatena.ne.jp

見た目がスッキリしていて，アイキャッチ画像がきれいに表示されるので，とても気に入っています。

カスタマイズの結果を検証するための，テストブログを作りました

カスタマイズはいきなりこのブログで行うのではなく，テスト用の非公開ブログを作って，まずそちらで試してみるようにしました。

CSS等をいじってると，時々レイアウトがひっちゃかめっちゃかになるので，これは必須かと思います。はてなブログPro版だと10個のブログを持てるので便利ですね。

グローバルメニューを設置しました

グローバルメニューはゆきひーさんの「CSSでスマホ画面で横スクロールするレスポンシブ対応のメニューを作るカスタマイズ」を参考にさせていただきました。

www.yukihy.com

見出し，記事本文のフォントおよびそのサイズなどを指定する

body {
    font-size: 18px;
}

/* 全般*/
body {
    font-family: "Open Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}

/* 見出し*/
h1, h2, h3, h4, h5, h6 {
    font-family: "Open Sans","Hiragino kaku Gothic ProN",Meiryo,sans-serif;
}

/* ブログタイトル*/
#title {
    font-family: "Open Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}

サブタイトルのスタイル

↑こういうやつです。サルワカさんにあるデザインを使わせていただきました。

saruwakakun.com

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

ブログタイトルのバックに，画面の横幅いっぱいに画像を表示する

Undershirtの作者，ろくぜうどんさんのブログのコメント欄を参考にしました。

#blog-title-inner {
margin: 0 !important;
background: none !important;
}
#blog-title {
background-size: cover !important;
background-image: url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/sunsun_fine/20190601/20190601010133.jpg) !important;
max-width: 100%;
height: 183px;
}

ブログタイトルを左寄せにし，タイトルの左側にインデントをとる。またタイトルの上下の幅を調整する

#blog-title {
    margin: auto;
    max-width: 1200px;
    padding: 2em 122px 1em;
    text-align: left;
}

最初"margin"をいじったけどうまいかず，"padding"の値を変えることで上下の幅を調整できました。「122 px」はインデントの幅です。

トップページにスター⭐⭐⭐を表示しない

/* TOP画面にはてなスター等を表示しない*/
.archive-entry-body .social-buttons {
    display: none;
}

トップページはシンプルにしたかったので， はてなスターやソーシャルボタンを表示しない設定にしました。

レスポンシブデザインにする

はてなブログの設定から「デザイン」に入り，スマートフォンの「詳細設定」で「レスポンシブデザイン」にチェックを入れます。これでスマホで見たときにも，頑張って作った (笑) デザインが表示されるようになりました。

スマホで記事の概要を表示しない（アイキャッチ画像とタイトルだけにする）

@media (max-width: 768px){
 .page-archive .entry-description {
    display: none;
}
}

スマホの狭い画面で見た時に一覧性をよくするために，記事のタイトルとアイキャッチ画像だけを表示するように表示するようにしました。

スマホで表示した時だけ，ブログタイトルのインデントを小さくし，中央寄せにする

@media (max-width: 768px){#blog-title {
    margin: auto;
    max-width: 1200px;
    padding: 1.2em 5px 0.8em;
    text-align: center;
}
}

これをやらないと，スマホの画面にタイトルがうまく収まりませんでした。 レスポンシブデザインにしたのは，これができてからのことになりました。

スマホで表示した時だけ，タイトル＆タイトル画像の領域（上下方向）を狭くする

@media (max-width: 768px){#blog-title-inner {
margin: 0 !important;
background: none !important;
}
#blog-title {
background-size: cover !important;
background-image: url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/sunsun_fine/20190601/20190601010133.jpg) !important;
max-width: 100%;
height: 108px;
}
}

スマホの狭い画面を有効に使うために，ブログタイトルが表示される領域を狭くしました。

おわりに

今のところこんな 感じです。このカスタマイズにあたって，いろいろな方のサイトを参考にさせていただきました。

また気がついたら変えるところもあるかもしれませんが…。それにしてもレイアウトをいじってると，結構時間がかかっちゃいますね。

リンク