はてなブログ”minimalism”の初期設定と、カスタマイズ【ほぼコピペで完結】

はてなブログのテーマ”minimalism”使い始めてみたけれど、初期設定やカスタマイズをどうすれば良いか、お困りではないでしょうか？

一つづつGoogle検索してはブログを修正し…とやってしまうと、あっという間に一日が終わってしまいます。
これらの初期設定やカスタマイズは、ある程度型のようなものがあるので、まずは基本的な設定を真っ先に終わらせてしまうのがキモ。

メインはカスタマイズではなく、記事の執筆です。

今回は、そんな初期設定と、僕が実際にやっているカスタマイズをご紹介します。
もちろん、”minimalism”以外のテーマにも使える内容になっていますので、はてなブログユーザー初心者の方は参考にしてみてくださいね。

“Minimalism”を入れたらまずしておくべき初期設定

テーマを入れたらすぐにやっておくべき設定からご紹介します。
初期設定はメンドウなだけに、ブログを始めた直後のやる気が高まっている時に一気に済ませるが大原則。
では、一つづつみていきましょう。

ブログ名・ブログアイコン・ブログの説明

場所は、「設定 ＞ 基本設定」です。
ブログ名と、ブログのアイコンを設定しましょう。

ブログ名　　　：「かろちょあ」
ブログアイコン：スターをつけた時に出る画像

プロフィールアイコンを変更

アカウント設定＞プロフィールアイコン

プロフィール設定

アカウント設定＞基本設定＞ニックネーム欄＞変更する

ニックネーム：全角10文字以内
一行紹介：ブログの内容を1行で紹介
プロフィール写真

タイトル画像

デザイン＞カスタマイズ＞ヘッダ＞タイトル画像＞ファイルの選択

グループの設定

グループ＞はてなグループを見る＞カテゴリを選ぶ＞グループに参加

ブログの概要・キーワード設定

設定＞検索エンジン最適化

ブログの概要　　　：空欄にします。
ブログのキーワード：, で区切って2〜5個

“{ }デザインCSS”のカスタマイズ

「{ }デザインCSS」と聞くと難しく感じてしまうかもしれません。
ここでは簡単に、ブログのデザインを変えるところと覚えておいてください。

まずは、「ここに自分の好きなデザインを命令していくと、一瞬でデザインが変わるんだね」という単純な理解で十分です。

例えば、記事の中には「見出し」というものが使われます。
例えば、「大見出し（h2とか言われます）はこの見出しにする！」とCSSであらかじめ打ち込んでおけば、ブログのすべての大見出しが、設定したものに一瞬で変更されます。

どんなデザインにするか？を指示するフォームが、デザインCSSなのです。

ブログ全体の文字サイズを変更してみる

ブログは文字で情報や感情を伝えるメディアです。
そうすると、読みやすさは最重要ポイント。

実は、はてなブログのテンプレートはほとんどが文字サイズが小さい。
中でも”Minimalism”は特に文字サイズが小さく、文字がめちゃくちゃ読みづらいです。

早速、「{ }デザインCSS」を使ってブログ全体の文字サイズを大きくしましょう。
試しに、コードを入力してみてください。
これだけで読者の方の読みやすさは格段に向上するはず。

赤字マーカーにした部分の数字を変えることにより、文字サイズが変更できます。
テストしながらベストなフォントサイズを決めましょう。

ちなみに当ブログは17pxに設定してます。

/*フォントサイズ*/
.entry-content p {font-size: 17px;}

行の高さを変更する

文章の行を変えるだけで読みやすくなることも。

フォントサイズなどを変えたのに読みづらいな〜…と思ったときには試してみてください。だいぶ雰囲気が変わります。

フォントの設定をする

文字サイズと並んで読みやすさを左右するのがフォントです。

Apple系端末（macやiPhone）とWindows系端末で表示するフォントが最適化されるコードです。どこかのサイトで紹介されていたのですが、どこか分からなくなってしまいました…とにかく使い勝手がよく、当サイトでもこれを設定しています。

/*フォント*/
body{
font-family:-apple-system, BlinkMacSystemFont,'Avenir','Helvetica Neue','Helvetica','Hiragino Sans','ヒラギノ角ゴシック','游ゴシック Medium',YuGothicM,YuGothic,'メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
}

見出しを変更

↑こんな感じのやつです。

Minimalismはもともと見出しの設定がありませんので、自分で設定する必要があります。

とは言っても難しいことはありません。

先人たちが残してくれたCSSコードをコピペするだけでOKです。

下のサイト紹介されているコードをデザインCSSにコピペしてみてください。

見出しの色を変更

見出しの形は変わりましたか？続いて、見出しの色を変更します。

デザインCSSでは色番号と呼ばれる#（シャープ）から始まる記号があります。この色番号を検索できるのが、次のサイト。

まずは上のサイトからご自分の設定したい色を探します。検索方法はいろいろと用意されているので、いじりながら探してみてください。

お次は、出てきた色番号（#から始まる記号）をメモしておきましょう。これを見出しのコードの色を指定している場所に貼り付けます。

見つけ方は簡単で、下のようなコードが書かれた部分を探します。

”color: #444;”

この例でいえば赤字にした部分が色番号にあたるので、ここに先ほどメモした色番号を貼り付ければオッケー。
これで見出しの色が変わります。

“color: “が2つ以上ある場合には、見出しの中の色が細かく設定できるようになっています。その場合には一つづつコードを変えて、今変更したのがどこの部分の色を指しているかを確認しながら作業を進めましょう。

シェアボタンの配置

せっかく書いた記事ですから、いろいろな人に読んでほしい。そんな時に添えておきたいのがシェアボタンです。

こちらのサイトが参考になります。

このサイトを参考にする時には、必ずコピペコード①を貼り付けることをお忘れなく。
忘れると正常に配置されません。

ページの先頭に戻るボタン

iPhoneなどでは上の方をタップするとページの先頭に戻るので不要かな…と思いますが、念のためにつけたい方は下のサイトが参考になります。

強調（B）にマーカーを付ける

初期設定では、強調（Bold）にするとただ単に太字になります。こんな感じです。

ネットを見ているとよく蛍光ペンで塗ったようなギミックがありますが、これもデザインCSSで設定が可能。

現在僕はマーカー設定は使っていませんが、以前設定していたときには下のサイトが参考になりました。

色の変更はすでに紹介したサイトで色番号を検索して、コードに貼り付ければ大丈夫です。

コピーライトを設置

よくサイトの下の方に”Copyright ©かろちょあ  All rights reserved.”と書かれているのを見たことがありませんか？

著作権法上は、設置しなくても著作権によって保護されるようなのであまり関係ないらしい…が、当サイトは「あるとかっこいいかも」という理由でだけで設置しています。

まずはデザインCSSにこのコードを貼り付けます。

/*コピーライト*/
#copyright {
padding: 20px;
text-align: center;
background: gray;/*背景色*/
font-size: 14px;
color:#fff;/*文字の色*/
}

続いて「フッタ」にこれを貼り付けましょう。フッタの場所は”デザインCSS”の一つ上にあります。

<div id=”copyright”>Copyright ©＊＊あなたのブログ名＊＊ All rights reserved.</div>

アフィリエイトの設定

アフィリエイトを始めたくてブログを始めたという方も多いかもしれません。

ここではアフィリエイトまわりのカスタマイズを解説していきます。

アドセンス 貼り付け

アドセンス のダブルレクタングル見慣れすぎて、いかにも広告感が出てしまいます。

このサイトを参考にコードを貼り付けました。

スポンサードリンク の文字サイズを小さくするのにはこちらのサイトを参考にしました。

ヨメレバ・カエレバCSSのカスタマイズ

ヨメレバ・カエレバのデザインをカスタマイズするときに参考にさせていただきました。デザインはこれで完璧！…かと思いきや、僕の場合にはボタンのずれが発生。ダメ人間ブログさんの記事を参考に修正させていただきました。

Amazonと楽天のアイコンをつける

そのままでも見栄えが良いですが、ロゴを追加するとさらにそれっぽくなります。

あとがき

今現在のカスタマイズをご紹介しましたがいかがだったでしょうか？

カスタマイズ作業はついつい時間を取られてしまうところなので、ある程度のところで止める勇気も必要だったりします。

今回ご紹介したものは全て基本的なものばかりなので、とりあえずざっと設定してみることをお勧めします。（もちろん、合わないものは修正してくださいね。）