はてなブログをカスタマイズ！かわいくできました❀（CSS編集！）

パソコンから私のブログを読んでくださっている方は

もうお気づきかもしれません．．．。

そう！ブログをカスタマイズして見た目を変えました🎀

スマホで読まれる方には見た目はなにも変わらないんですけどね💦

（あ！でも少しずつアイキャッチ画像つけていってます👍）

せっかくなので、カスタマイズ方法も載せますね♪

まずは私のブログのビフォーアフターをご覧ください！

画像の赤い矢印はマウスオーバー時も色変わるよアピールです✨

きっかけはリンクの文字色を変えたかっただけでしたが、

検索したら色々とカスタマイズされている方がいて、

私はまだ『はてなブログPro（有料会員）』ではないのですが、

試してみると十分にいじれて夢中になってしまいました🌏

はじめは難しそうだと思っていたのですが、

検索ワードを『はてなブログ カスタマイズ』のように

より具体的なワードも追加して検索すると

わかりやすくて簡単にカスタマイズできる方法を

伝授してくれるブログがたくさん出てきますよ💻

使っているブログのデザインテーマによっては

紹介したとおりにならないところもあると思いますが、

何を変更したのかを書いていくので、

良いものがあればぜひ試してみてください👩‍🎨

編集場所

カスタマイズする際、まず知りたいのは編集する場所ですよね！

はてなブログで自分のアカウントにログインしたら、

『管理画面』⇒『デザイン』⇒『カスタマイズ（🔧マーク）』

⇒『デザインCSS』の部分をクリックすると

文字が入力できるようになるので、

調べたコード、もしくはアレンジしたものを

最後の行から１行空けて、そのまま貼り付けます。

（１行空けた方が見やすいのと、後で編集したくなった時に探しやすいです💡）

カラーコード

HTMLやCSSで色を自分好みにカスタマイズしたいときに必要になります。

検索ワードに半角で『#ffffff』（←「f」を６回）と入力すると

マウスでクリックした位置の色のコードがわかるので、

私はここで確認しています👀

①好きな色の上にマウスカーソルを合わせてクリックします。

②『①』で選択した色の拡大画像です。

③最初にここで自分の見たい色の位置でクリックします。

④カスタマイズする内容によってはこちらの値を入力することもあります。

⑤『①』で選択した色のカラーコードが表示されます。

リンクの文字色の変更

この文字色の変更こそが私の最大の目的でした！

ビフォーアフター画像にあるように

フラミンゴのような薄いオレンジ色を水色に変えました。

別の色に変更したい場合は、

『#』の英数字（下のコードでいう80acf2の部分）を

先ほど紹介したカラーチャートで選んだ色の数字に

変更したら色が変わるので試してくださいね。

コードはこちらをコピーしてください⇩

（コード内の「/*～*/」で囲われている文字は、

実行に影響がないのでコードと一緒に張り付けても問題ないです🙆）

コードを表示・非表示

a {
　　color: #80acf2;
}
/*リンクの文字色*/

マウスオーバー時の色

記事冒頭の画像内の赤い矢印でアピールしていた

マウスオーバー時に色が変わらなかったのを、

ピンク色に変わるようにしました。

ここでのマウスオーバーは、リンクの上にマウスカーソルを

重ねているだけで、クリックしていない状態のことを指します。

コードを表示・非表示

a:hover {
　　color: #f1baff;
}
/*マウスオーバー*/

検索ボックスの色

検索ボックスの色だけは、なんとなくで

黄色系の色がその位置にあったら全体がきれいに見えるかなと

思っただけで変更しました🌟

コードを表示・非表示

.hatena-module-search-box .search-form {
　　background: #fffbd9;
}
/*検索ボックス入力欄*/

.hatena-module-search-box .search-module-button {
　　background: #ffbf6b;
}
/*検索ボタン*/

カテゴリーの色

カテゴリーは全体と色が馴染みすぎていたので、

存在感を出すために水色系の色から緑系の色に変更しました。

コードを表示・非表示

.categories a {
　　color: #7ac41f;
　　background: #eaffd1;
}
/*カテゴリー*/

サイドバーのタイトルのフォント

サイドバーのタイトルのフォントは

手書き感がかわいかった『ふい字』から

固すぎずきちんと感のあるものを友人に教えてもらいました📱

コードを表示・非表示

.hatena-module-title{
　　font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif;
}
/*サイドバーのタイトル*/

ブログ名の色、フォント、文字の太さ

ブログ名の色を茶色がかった黒色から濃い青色に、

フォントの種類はタイトル同様のきちんと感のあるものに、

ブログ名の文字の値を大きく（８００）して太くしました。

コードを表示・非表示

#title a {
　　color: #1e6fa8;
　　font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif;
　　font-weight: 800;
}
/*ブログ名*/

ブログ内の文字色、フォント

特別に文字色を指定しているところ以外のブログ内全体の文字色を、

もともと茶色がかった黒色だったのを

さらにもう少しだけ茶色に寄せて全体の雰囲気を

柔らかくなるように意識しました🌸

コードを表示・非表示

body {
　　color: #4f3001;
　　font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif;
}
/*ブログ全体*/

記事タイトルの色、フォントサイズ、フォント

記事タイトルの文字の色は水色から茶色がかった黒色に、

フォントサイズは前より大きく（２３ピクセル）、

フォントの種類は統一しました🌄

コードを表示・非表示

.entry-title a {
　　color: #4f3001;
　　font-size:23px;
　　font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif;
}
/*記事タイトル*/

記事本文のフォントサイズ、行間

私が実際に変えたのはフォントサイズだけですが、

行間も変えるか悩んだので、コードだけ書いておきます♪

コードを表示・非表示

.entry-content p {
　　font-size:16px;
　　margin:0
}
/*記事本文*/

まとめ

何度も試して失敗することもありましたが

なんとか自分好みのブログのデザインに一歩近づけて

すごく楽しかったです🌸

私の記事の内容を試したけど間違ってる等あれば

コメントで教えてもらえるととてもありがたいです🙇️

目次や大見出しのアンダーラインもかなり苦労していじりましたが

記事にするかは未定です💦

要望のコメントがあれば喜んで！飛びついて！書きます！！💪

⇩目次のカスタマイズもまとめました✨

ruriha.hatenablog.com