暮らしをデザインしよう!

デザイン

WordPressテーマのcodeの背景色を白に変更したい!

WordPressでおしゃれにホームページを作成したい!tcdテーマのcodeを使い始めて6ヶ月。

背景の薄いグレーが、使いにくいな…と感じるようになりました。

というのもフリー素材のイラストを挿入するとき、背景透視をしなけれダサく面倒。

ということで背景を白に変更したいと思い、いざやってみると簡単!

 

背景色、白は楽で安定がありました。

 

動画撮影におすすめのカメラ

osmo-poket

 

tcdのテーマ「code」の背景色は薄いグレー

 

もとは、tcdのcodeの背景は薄いグレー。

これだど、こうなってしまいます。画像の周りが白なのに、背景がグレー。

背景透視、忘れた…。

 

背景色を白に変更すると、楽

 

背景を白にすると、普段見慣れているパソコン画面の色で安定があります。

記事作成も、楽です。

 

 

普段見慣れたパソコン画面の安定感

 

白に黒の文字は、普段パソコンをするときの見慣れた画面。1番よく見る組み合わせで、安定があります。

  • 文字が、読みやすい
  • 洗練されている

ごちゃごちゃしていない、安定感。

何も飾らなくても、イイ感じと思える組み合わせ!

 

 

イラスト挿入の処理が楽

続いて、イラストを使用する場合。

イラストには、背景があります。

フリー素材のサイトでは、既に背景透視をしたものもあります。だけど、背景透視がされていない場合は背景の白がダサい感じの画像挿入になってしまいます。こんな感じ…。

 

これだと、違和感があり記事に安定感がなくなってしまいます。

それが、白だと…。

 

何もしなくても、背景と一体化。綺麗な見た目。

 

 

背景色を白に変更する方法

 

誰でも簡単に、背景色を変更できます。

コードも以下に、記載。

 

 

パソコン画面で背景を白にする設定

 

早速、設定をしていきましょう。

1.トップ画面>カスタマイズを開く。

 

2.追加CCSを開いて、以下のコードを埋め込むだけ。

【コード】

add_action( ‘after_setup_theme’, function(){
add_theme_support( ‘custom-background’ );
} );

 

公開ボタンを忘れずに!

これだけで、楽に背景を白に変更できました。

 

携帯の背景色も白にしたい場合は?

 

パソコンの背景を白にしたい場合は、先ほど紹介をしたコードで変更できます。

合わせて携帯の画面も白に設定したい場合

以下のコードを、同じ場所に使用しましょう。

【コード】

 

#main_contents:before, .featured_content, #main_contents {
background: #fff;
}

これだけで、携帯の背景も白に変更できます。

 

codeのデザインされた、サイトの色づかいも良いですがやはり私は安定感のある白の背景が使いやすさがあり変更しました。

codeの背景色を変更したい人はぜひ、やってみてください。

 



 

ホームページの記事は、こちらもチェック

コメント

この記事へのコメントはありません。

サイト掲載内MAP(Google連動)

RANKING

DAILY
WEEKLY
MONTHLY
  1. 1
  2. 2
  3. 3
  1. 1
  2. 2
  3. 3
  1. 1
  2. 2
  3. 3

カテゴリー

関連記事一覧

PAGE TOP
Verified by MonsterInsights