冒険するために生まれてきた

成長を信じて挑戦する冒険者の記録

はてなブログのテーマを変更する

ブログのテーマを変更しました。

 

 

 

全体のテーマをMinimalism に変更

今まで、公式テーマ「Smooth」を使っていました。

 

f:id:lilychaco:20190322162136p:plain

 

目次の箱は作れたけれど、「目次」という表題が出ないシンプルな箱です。

かっこよく、目次という表題が出るようにならないかな〜と思いました。

 

 

そうだ、テーマを変えよう!!!

 

 

新しい挑戦です(笑)

 

 

他にすべきことがたくさんあるのに、模様替え、好きなんですよね〜

 

 

テーマストアで、「ヘッダーを好みの色に設定することができます」と書いてあったので、一番人気のテーマ「Minimalism」を引っ張ってきました。

 

f:id:lilychaco:20190322162626p:plain


簡単にボタンで変更できるのかと思っていたら、違いました。

コードを変更する必要がありました。

それはちょっと難しいので、後回しにしました。

 

 

 

テーマを導入したらやること

「テーマを導入したらやること」を、指示通りにしました。

 

レスポンシブデザインに設定する

デザイン>>>スマートフォン>>>詳細設定の「レスポンシブデザイン」にチェックを入れる。

f:id:lilychaco:20190322164441p:plain

 

 

トップページを一覧形式にする

はてなのPROに契約しているとできるようです。

①設定>>>②詳細設定>>>③トップページの表示形式(PC番)で一覧形式にチェックを入れる。

 

f:id:lilychaco:20190322165404p:plain

 

f:id:lilychaco:20190322165729p:plain

 

チェックを入れてから、ページを下へ行って、「変更する」をクリックするのを忘れないようにしましょう。

自分は忘れていました〜😰

 

テーマをカスタマイズする

ヘッダーを好みの色に設定

設定するには、デザイン>PC>デザインCSS に以下のコードを追加する。

ヘッダーの色を変えると、ブログタイトルの色が埋もれてしまうかもしれないので、配色を考えて、同時にブログタイトルの色も設定する。

/* ### ヘッダーの背景色 ### */
#blog-title{
background: #カラーコード !important;
}
/* ### ブログタイトルの文字色 ### */
#title a{
color: #カラーコード !important;
}
/* ### ブログ説明の文字色 ### */
#blog-description{
color:# カラーコード !important;

}

コードの中の「#カラーコード 」の部分を、色見本から、「#記号+6桁の英数字」で表される色を選んで書き込む。

原色大辞典

パステルカラー

 

f:id:lilychaco:20190322173338p:plain

 

 

ヘッダーの背景色、ブログタイトルの文字色、ブログ説明の文字色を変更しました。

👇👇👇

f:id:lilychaco:20190322173508p:plain

 

 

ちょっと、ブログタイトルの色が暗いですが、とりあえず、これで行きます。

 

 

 

今日参考にさせていただいたのは、ひつじの雑記帳さんの 「シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。」です。

hitsuzi.hatenablog.com

おせわになりました😆