かろちょあ

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

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

f:id:karochoa1:20181214095406p:plain

当サイトも採用しているテーマ"Minimalism"のカスタマイズを紹介します。

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

はじめに、テーマを入れた後にまずやっておくべきことをまとめます。

どれもいつかは変更するであろう項目ばかりなので、面倒でも設定を終わらせておくことを強くオススメします。

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

設定>基本設定

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

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

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

プロフィール設定

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

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

タイトル画像

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

グループの設定

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

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

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

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

デザインCSSのカスタマイズ

デザインCSSとは、ページのデザインを支配している場所です。

自分の好きなデザインのコードを入れると、一瞬でデザインが変わります。

一番わかりやすいところだと見出しのデザインです。
例えば「大見出しはこういうデザインで」というのをコードとして【デザインCSS】として入れておくと、ブログの全部の見出しのデザインが変わります。

デザインCSSは、ブログの見栄えを左右する重要なフォームなのです。

ブログ全体の文字サイズの変更

"Minimalism"は特に文字サイズが小さいので、文字が読みづらい

このコードで文字サイズを大きくすることができます。

赤字部分の数字を変えることにより、文字サイズが変更できます。

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

参考サイト:「うわっ…はてなブログ、読みにくすぎ…!」最大の原因はコレ

行の高さを変更する

文章の行を変えるだけで読みやすくなります

フォントの設定をする

Apple系端末と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にコピペしてみてください。

見出しの形は変わりましたか?

続いて、見出しの色を変更します。

まずは上のサイトからご自分の設定したい色を探します。

出てきた色番号(#から始まる記号)をメモしておきましょう。

そこで、先ほどコピペした見出しのコードをみるとどこかに

”color: #444;”

のように書かれた部分があります。

赤字にした部分が色番号ですから、そこに先ほどメモした番号を入力。

これで見出しの色が変わります。

枠線があるときは、それ文字と枠線それぞれ色を設定します。

シェアボタンの配置

記事下に表示されるシェアボタンの配置をします。

参考サイトでもコピペでOKですが、必ずコピペコード①を貼り付けること!

これをやらないと、正常に配置されません。

あとは、HTMLとCSSを貼り付けるだけ。

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

ボタン一つで一気に先頭まで戻るカスタマイズです。

強調(B)にマーカーを付ける

よくみるマーカーペンで引いたようにする方法です。

コピーライトを設置

著作権法上、設置しなくても著作権によって保護されるようです。

当サイトは「あるとかっこいいかも」という理由でだけで設置しています。

▼以下のコードを「デザインCSS」に貼り付けます。

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

▼以下のコードを「フッタ」に貼り付けます。

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

アフィリエイトの設定

はてなブログなら、簡単にアフィリエイトを始めることができます。

アドセンス 貼り付け

アドセンス のダブルレクタングル見慣れすぎて、いかにも広告感が出てしまいます。このサイトを参考にコードを貼り付けました。

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

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

そのままでも見栄えが良いですが、ロゴも追加できます。

おわりに

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

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

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