杜の里から

日々のつれづれあれやこれ

ブログをカスタマイズする(1)~記事タイトル色の変更~

はてなブログはブログユーザーが自分で色々カスタマイズ出来るというので、引越しが終えたら早速あちこちを見て回りました。

もちろんそんな専門知識がある訳じゃありませんが、「はてなブログ カスタマイズ」等で検索すると自力でカスタマイズした人のブログが次々と見つかります。

カスタマイズのやり方も、記事中で紹介されているコードを所定の場所にコピペするだけで簡単に変更出来てしまい、やり始めたらこれが中々に面白く、ついあれもこれもとなってしまいました。

ここからははてなブログユーザー向けの記事となりますが、〔CSS〕やら〔HTML〕などという単語も知らぬど素人でも、見よう見まねでこれだけのカスタマイズが出来るという事で、一はてなブログ初心者のカスタマイズの歩みを書き留めて行こうと思います。

 

まずは基本となるブログデザインのテーマ選びですが、以前のgooブログに合わせた2カラムで左サイドバーのテーマを探し、結局はてな公式テーマ〔Reach〕を選びました(それにしても、はてなでは右サイドバーが圧倒的に多いですね。)。

 

また、そちらではずっとグリーンをイメージカラーにしていたので、こちらでも基本色はグリーンにしようと考えましたが、既存のベース色には僕が思い描く「淡いグリーン」の色はありませんでした。

f:id:OSATO:20190714131515j:plain

このベース色の変更も合わせてカスタマイズ記事を探してみた所、以下のブログが見つかりました。

カスタマイズ方法も、記事中で紹介されている変更用コードをただコピペして貼り付けるだけという手軽さで、優しい解説もあって本当に助かります。

shizenkarasuzon.hatenablog.comカラーコードはこちらを参照しました。

www.colordic.org

記事に沿って、まずは試しにブログ背景色を変更してみます。

色見本から淡いグリーン色は[#eaffd6]を選び、後は記事通りに下記のコードをデザイン設定のCSSの欄にコピペしてみました。

body{

background:#eaffd6;

}

f:id:OSATO:20190714134723j:plain

そして確認してみると、ベースの色は見事に淡いグリーンとなりました。

f:id:OSATO:20190714144840j:plain

なるほど! 【background】とは「背景」、こういう事ね、ふむふむ。

 

次は日付と記事タイトルの色変更、次のCSSコードをコピペして貼り付けます(色コードは[#008000]の緑色をチョイス)。

div.date a{
color: #008000;
}

 

h1.entry-title a{
color: #008000;
}

ふむ、【div.】が何やら知らんけど、どうやら【div.date】が日付、【h1.entry-title】というのが記事タイトルという訳ね。

そしてその【color】がこうなると。

f:id:OSATO:20190714144846j:plain

なるほど~、{ }で囲んだ部分に変えたいものを書き込んでいくという訳か!(改行の意味は分からんけど)

でも[#008000]だとちょっと明るいなぁ、サイズもちょっとでかいし。

それにサイドバーのあの青ベースの文字はバリバリ違和感でないがい?

 

やっぱりこれも何とかせねばとまたあちこち探し回る事となり、気が付けばいつの間にか「カスタマイズ沼」に片足を突っ込んでいたのでした(笑)。

 

(~以下しばらく続きます。)