MonoTsuduriテーマ

はてなブログ用テーマ「MonoTsuduri」のデモとカスタマイズ方法について

ヘッダーグラデーションの色の変更やグラデーションの削除

f:id:Kuichi:20190306005543j:plain

CSSカスタマイズ

管理画面→デザイン→レンチマーク→デザインCSSからCSSの追記ができます。

CSS追記例の記述をコピー&ペーストするか、参考にしてカスタマイズしてください。

グラデーションの色を変える

CSS追記例(黒→薄い黒)

f:id:Kuichi:20190309140703j:plain

/*タイトルにかかるグラデーションのカラー*/
/*グラデーションの色を変更したい場合はbackgroundの値を変更してください*/
#blog-title #blog-title-inner::after {
  background:  linear-gradient(to right, #000, rgba(0,0,0,.3));
}
CSS追記例(黒単色)

f:id:Kuichi:20190306005732j:plain

/*タイトルにかかるグラデーションのカラー*/
/*グラデーションの色を変更したい場合はbackgroundの値を変更してください*/
#blog-title #blog-title-inner::after {
  background: #000;
}
CSS追記例(ピンク→紫→青のグラデーション)

f:id:Kuichi:20190306005610j:plain

/*タイトルにかかるグラデーションのカラー*/
/*グラデーションの色を変更したい場合はbackgroundの値を変更してください*/
#blog-title #blog-title-inner::after {
background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9); 
}
CSS追記例(青紫→薄紫→緑のグラデーション)

f:id:Kuichi:20190306005651j:plain

/*タイトルにかかるグラデーションのカラー*/
/*グラデーションの色を変更したい場合はbackgroundの値を変更してください*/
#blog-title #blog-title-inner::after {
background: linear-gradient(to right, #5D26C1, #a17fe0, #59C173);
}
CSS追記例(黒→青のグラデーション)

f:id:Kuichi:20190306005809j:plain

/*タイトルにかかるグラデーションのカラー*/
/*グラデーションの色を変更したい場合はbackgroundの値を変更してください*/
#blog-title #blog-title-inner::after {
  background: linear-gradient(to right, #000428, #004e92);
}
CSS追記例(青→緑のグラデーション)

f:id:Kuichi:20190306005849j:plain

/*タイトルにかかるグラデーションのカラー*/
/*グラデーションの色を変更したい場合はbackgroundの値を変更してください*/
#blog-title #blog-title-inner::after {
  background: linear-gradient(to right, #2c3e50, #4ca1af);
}

グラデーションの参考サイト

こういったグラデーションCSSを配布しているサイトも多くあります。
写真との組み合わせで雰囲気がかなり変わるので、ぜひ色々と試してみてください。

webgradients.com

uigradients.com


グラデーションの削除

グラデーションが不要の場合は、下記の記述を追記してください。

CSS追記例(グラデーションを消す)

f:id:Kuichi:20190306010642j:plain

/*タイトルにかかるグラデーションのカラー*/
/*グラデーションの色を変更したい場合はbackgroundの値を変更してください*/
#blog-title #blog-title-inner::after {
  background: transparent;
}

グラデーションが消え、タイトルと説明文が画像の上に表示されます。