Lightningのフッターの色を変更

11

記事の方法でカスタムを100%保障するものではございません。

悪しからずご了承下さいませ。

古いバージョンでのカスタム内容となります

※カスタマイズは必ずバックアップの上、自己責任にて行って下さい。

WordPress・テーマLightningの改造

改造2

前回は Lightningのヘッダーの色を変更して

ドムに少し近づきましたので

今回は、フッターの色を変更してガンダム臭を消しさりたいと思います。

「ジーク・ジオン!」

 

 

 

 

フッターの色を変更

2908行 footer { border-top: 3px solid #337ab7; background-color: #f5f5f5; }

background-color: #f5f5f5;  を background-color: #000;

に変更して黒色に変更する

[スポンサーリンク]

 


/*-------------------------------------------*/
/* footer
/*-------------------------------------------*/
footer { border-top: 3px solid #337ab7; background-color: #000; }
footer .footerMenu { border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
footer .copySection { border-top: 1px solid #e5e5e5; }
footer .copySection p { font-size: 12px; margin-bottom: 5px; }

@media (max-width: 767px) { footer .footerMenu .container { padding-left: 0; padding-right: 0; }
  footer .footerMenu li { float: none; border-bottom: 1px solid #e5e5e5; display: block; overflow: hidden; }
  footer .footerMenu li:last-child { border-bottom: none; } }
@media (min-width: 768px) { footer .footerMenu ul { margin: 10px 0; }
  footer .footerMenu li a { border-left: 1px solid #ccc; padding-top: 4px; padding-bottom: 4px; }
  footer .footerMenu li:last-child a { border-right: 1px solid #ccc; } }

 
 

変更後

フッターの色を変更

 
 

フッターの文字色を変更

フッターを黒色にしたので文字が見えにくくなったので、フッターの文字色を紫(#b395ce)に変更します

「フッター文字」
2908行 footer { border-top: 3px solid #337ab7; background-color: #000; color: #b395ce;}

「フッターメニュー」
2917行目  footer .footerMenu li a { border-left: 1px solid #ccc; padding-top: 4px; padding-bottom: 4px; color: #b395ce;}

にcolor: #b395ce; を追加する

「スマホ時のメニュー」の色を変更する為に

2916行名に  footer .footerMenu li a { color: #b395ce;}を追加する


/*-------------------------------------------*/
/* footer
/*-------------------------------------------*/
footer { border-top: 3px solid #337ab7; background-color: #000; color: #b395ce;}
footer .footerMenu { border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
footer .copySection { border-top: 1px solid #e5e5e5; }
footer .copySection p { font-size: 12px; margin-bottom: 5px; }

@media (max-width: 767px) { footer .footerMenu .container { padding-left: 0; padding-right: 0; }
  footer .footerMenu li { float: none; border-bottom: 1px solid #e5e5e5; display: block; overflow: hidden; }
  footer .footerMenu li:last-child { border-bottom: none; } }
  footer .footerMenu li a  { color: #b395ce;}
@media (min-width: 768px) { footer .footerMenu ul { margin: 10px 0; }
  footer .footerMenu li a { border-left: 1px solid #ccc; padding-top: 4px; padding-bottom: 4px;color: #b395ce; }
  footer .footerMenu li:last-child a { border-right: 1px solid #ccc; } }

変更後PC

フッターの色を変更
 
 

変更後スマホ

フッターの色を変更
 
 

変更後全体

変更後

 
 

ページの背景色を変更する

最後の仕上げにページ全体の背景色を変更する

2765行目  .siteContent { padding: 3em 0 4em; }

に background-color: #8f48ce; を追加


/*-------------------------------------------*/
/* .siteContent
/*-------------------------------------------*/
.siteContent { padding: 3em 0 4em; }

 
 

変更後

ドム・ワードプレス

その他、細かい文字色の変更がありますがガンダムがドムにかわりました。
 
 

改造3

ワードプレス・ドム仕様

全体図はこちら

ジェットストリームアタック!

でガンダムを撃破しました。

「ジーク・ジオン!」

 

 

 

 

 

 
 

Lightningの改造

 

この投稿へのコメント

コメントはありません。

コメントを残す