かろちょあ

趣味の料理・買い物と、新しく経験したことなど

はてなブログテーマ"Minimalism"の「初期設定」と「カスタマイズ」

f:id:karochoa1:20190421205256p:plain

ブログを始めると悩むのが、カスタマイズです。

一口にカスタマイズと言っても、簡単な設定から訪問者にダイレクトに影響を与えるブログデザインの変更アフィリエイトの設定などかなり奥深い世界。これを手探りでやろうとすると、いくら時間があっても足りません。

そこで、今回は初めに設定しておくべきいわゆる初期設定と、一歩進んだカスタマイズについて解説していくことにします。 

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

テーマを入れたらすぐにやっておくべき設定からご紹介します。

簡単なことほど後回しにしてしまうと面倒に感じてズルズル行ってしまいますので、モチベーションが上がっているブログ開設当初に済ましておくことをオススメします。

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

設定>基本設定

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

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

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

プロフィール設定

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

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

タイトル画像

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

グループの設定

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

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

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

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

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

「{ }デザインCSS」は、ブログのデザインを変えるところと覚えておいてください。

極めようとするとこれだけで本が一冊できてしまうほど奥が深い分野ですが、僕らはプログラマーを目指しているわけではないのでもっと簡単に考えてしまいましょう!

まずは、ここに自分の好きなデザインの暗号を打ち込んでいくと一瞬でデザインが変わるんだ!という単純な理解で十分です。

例えば、ブログで必ずと言っていいほど使われている見出し。色々な見出しがありますが、大見出し(h2とか言われます)はこの見出しにする!と打ち込んでおけば、自分のブログ全体を通してすべての大見出しが設定したものになります。

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

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

ブログは文字で情報や感情を伝えるメディアです。読みやすければ読みやすいほどいいに決まってます。

はてなブログのテンプレート全般に言えますが、"Minimalism"は特に文字サイズが小さく、文字が読みづらい

このコードで文字サイズを大きくすることができます。これだけで読者の読みやすさは格段に向上します。(試しにコードを入れてみてください)

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

ちなみに当ブログは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 Pゴシック','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と楽天のアイコンをつける

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

おわりに

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

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

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