MENU
Webデザイナーを目指して勉強中 那木みおの個人ブログ
  1. ホーム
  2. Web
  3. SEO Tuning Eiger カスタマイズ キーカラーの置き換え

SEO Tuning Eiger カスタマイズ キーカラーの置き換え

Web
目次

図解

15.03.30追記: 今後やる気が出るかわからないのでまだ作成途中ですが画像アップしました。余計わかりにくいような気がしないでもない…。トップページ上半分のみで力尽きました。考えてみればブラウザにWeb DeveloperやFirebugのようなアドオンを入れればいい話で、図を描くのはこれにて終わりにしたいと思います。(といういいわけ)

seo_tuning_eiger_before1.jpg

色指定は64箇所

styles2.css(Eigerスタイルの改変)の色の指定箇所を全部洗い出してみたら64箇所ありました。流石に全部変えるのは大変なので、同じ色をまとめて変えることにしました。色番号ごとにまとめましたので是非置き換えてご利用下さい。画像が作れれば良かったのですがリストアップだけで疲れ果てました…。

行番号順に色指定部分を抜き出したエクセルのファイルもあります。適当ですがよろしければご利用下さい。

配色についてはここらへんをご参考に。

表記がバラバラだったり間違えていたりすると思いますがお許しあれ。間違いを見つけたらコメントいただければ助かります。

他にcolorbox.css,styles.css,styles_ie.css,もありますが後日変更箇所だけ書くことにします。

#330000(#300) 計3カ所

★全体のベースの印象を作ります。

  • body{color: #330000;} ボディ全体の文字色
  • .footer a{color: #330000;} フッターのリンク色
  • [role=”contentinfo”]{color: #330000;} フッターの文字色

#c03(#cc0033) 計3カ所

★アクセントになる部分ですね。

  • .content a:hover{color: #c03;} コンテンツのリンク色 マウスオーバー時
  • [role=”banner”] [role=”navigation”] a:hover{color: #c03;} ナビゲーションバーのリンク色 マウスオーバー時
  • .footer a:hover{color: #c03;} フッターのリンク色 マウスオーバー時

#f7f3e8 計8カ所

★小見出しにあたるので3番目に目立つ配色にしてみてはどうでしょうか。背景色なので目に優しい色がいいかも。

  • #comments-form{background-color: #f7f3e8;} コメントフォームの背景色
  • .content [role=”main”] .blockquote{background-color: #f7f3e8;} 引用部分の背景色
  • header [role=”navigation”] background: -moz-linear-gradient(top, #f7f3e8, #f7efda); ナビゲーションの背景グラデ(始点) Firefox等
  • header [role=”navigation”] background: -webkit-gradient(linear, center top, center bottom, from(#f7f3e8), to(#f7efda)); ナビゲーションの背景グラデ(始点) Chrome等
  • header [role=”navigation”]filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#f7f3e8′, endColorstr=’#f7efda’) ナビゲーションの背景グラデ(始点) Gradient Filter
  • .widget h3{background: -moz-linear-gradient(top, #f7f3e8, #f7efda);} ウィジェット(サイドバーなど)の見出しの背景グラデ(始点) Firefox等
  • .widget h3{background: -webkit-gradient(linear, center top, center bottom, from(#f7f3e8), to(#f7efda));} ウィジェット(サイドバーなど)の見出しの背景グラデ(始点) Chrome等
  • .widget h3 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#f7f3e8′, endColorstr=’#f7efda’); ウィジェットのナビゲーションの背景グラデ(始点) Gradient Filter

#f7efda 計10カ所

★小見出しよりちょっと薄い色にしてみては。

  • #comments-form{border:3px solid #f7efda;} コメントフォームの外枠
  • .content [role=”main”] .blockquote{border-left: 5px solid #f7efda;} 引用部分の左側の縦線
  • header [role=”navigation”] background: -moz-linear-gradient(top, #f7f3e8, #f7efda); ナビゲーションの背景グラデ(終点) Firefox等
  • header [role=”navigation”] background: -webkit-gradient(linear, center top, center bottom, from(#f7f3e8), to(#f7efda)); ナビゲーションの背景グラデ(終点) Firefox等
  • header [role=”navigation”] ul li filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#f7f3e8′, endColorstr=’#f7efda’); ナビゲーションの背景グラデ(終点) Gradient Filter
  • .widget h3{border-top: #f7efda;} ウィジェット(サイドバーなど)の見出しの上の細い線
  • .widget h3{border-bottom: #f7efda;} ウィジェット(サイドバーなど)の見出しの下の点線
  • .widget h3{background: -moz-linear-gradient(top, #f7f3e8, #f7efda); ウィジェット(サイドバーなど)の見出しの背景グラデ(終点) Firefox等
  • .widget h3{background: -webkit-gradient(linear, center top, center bottom, from(#f7f3e8), to(#f7efda)); ウィジェット(サイドバーなど)の見出しの背景グラデ(終点) Chrome等
  • .widget h3 filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#f7f3e8′, endColorstr=’#f7efda’); ウィジェット(サイドバーなど)の見出しの背景グラデ(終点) Gradient Filter

#999999(#999) 計3カ所 シルバーグレー

  • html input[type=”button”]:active,input[type=”reset”]:active,input[type=”submit”]:active,.pagination a:active {
    • background: -moz-linear-gradient(top, #999999, #cccccc);} コメントフォームのボタンとページネーションのバー グラデ(始点) Firefox等
    • background: -webkit-gradient(linear, center top, center bottom, from(#999999), to(#cccccc)); コメントフォームのボタンとページネーションのバー グラデ(始点) Chrome等
    • filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#999999′, endColorstr=’#cccccc’); コメントフォームのボタンとページネーションのバー グラデ(始点) Gradient Filter

#cccccc(#ccc) 計8カ所 ライトグレー

  • .content [role=”main”] a[href$=JPG] img[src*=”thumb”]{border: 1px solid #ccc;} 拡張子JPGのサムネイルの外枠
  • .content [role=”main”] a[href$=PNG] img[src*=”thumb”]{border: 1px solid #ccc;} 拡張子PNGのサムネイルの外枠
  • .content [role=”main”] a[href$=jpg] img[src*=”thumb”]{border: 1px solid #ccc;} 拡張子jpgのサムネイルの外枠
  • .content [role=”main”] a[href$=png] img[src*=”thumb”]{border: 1px solid #ccc;} 拡張子pngのサムネイルの外枠
  • .pagination a, .pagination a:visited{border: 1px solid #cccccc;}ページネーション(次の記事/前の記事ボタン)の外枠
  • html input[type=”button”]:active,input[type=”reset”]:active,input[type=”submit”]:active,.pagination a:active {
  • background: -moz-linear-gradient(top, #999999, #cccccc); コメントフォームのボタンとページネーションのバー グラデ(終点) Firefox等
  • background: -webkit-gradient(linear, center top, center bottom, from(#999999), to(#cccccc)); コメントフォームのボタンとページネーションのバー グラデ(終点) Chrome等
  • filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#999999′, endColorstr=’#cccccc’); コメントフォームのボタンとページネーションのバー グラデ(終点) Gradient Filter

#333(#333333) 計1カ所 #cccや#999より暗いグレー

  • .pagination a, .pagination a:visited{color :#333;} ページネーション(記事前後移動バー)の訪問済文字色

#ffffff(#fff) RGB 255,255,255 計8カ所 いわゆる白

  • .pagination a, .pagination a:visited{background: #ffffff;} ページネーション(記事前後移動バー)の訪問済背景色
  • .pagination a, .pagination a:visited background: -moz-linear-gradient(top, #e5e5e5, #ffffff); ページネーションの訪問済背景色グラデ(終点) Firefox等
  • .pagination a, .pagination a:visited background: -webkit-gradient(linear, center top, center bottom, from(#e5e5e5), to(#ffffff)); ページネーションの訪問済背景色グラデ(終点) Chrome等
  • .pagination a, .pagination a:visited filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#e5e5e5′, endColorstr=’#ffffff’); ページネーションの訪問済背景色グラデ(終点) Gradient Filter
  • .pagination a, .pagination a:visited{box-shadow: 1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.5) inset, 0px -1px 0px rgba(255,255,255,0.2) inset; ページネーションの訪問済ボックスの内側のシャドウ色

#000(#000000,黒) RGB 0,0,0 計3カ所 いわゆる黒

  • .pagination a, .pagination a:visited{box-shadow: 1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.5) inset, 0px -1px 0px rgba(255,255,255,0.2) inset; ページネーションの訪問済ボックスの外側のシャドウ色
  • #search_top input[type=”text”]{box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.2); 検索窓の内側のシャドウ
  • #thisblog_is_a_txt{color: 000;} ブログのサブタイトル(概要,キャッチフレーズ,キャッチコピー,タグラインとも)

#e5e5e5 計3カ所

  • .pagination a, .pagination a:visited background: -moz-linear-gradient(top, #e5e5e5, #ffffff); ページネーションの訪問済背景色グラデ(始点) Firefox等
  • .pagination a, .pagination a:visited background: -webkit-gradient(linear, center top, center bottom, from(#e5e5e5), to(#ffffff)); ページネーションの訪問済背景色グラデ(始点) Chrome等
  • .pagination a, .pagination a:visited filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#e5e5e5′, endColorstr=’#ffffff’); ページネーションの訪問済背景色グラデ(始点) Gradient Filter

#555(#555555) 計2カ所 #cccや#999より暗いグレー

  • html input[type=”button”]:hover,input[type=”reset”]:hover,input[type=”submit”]:hover,.pagination a:hover{color :#555;} ボタンとページネーションのマウスオーバー時の文字色
  • html input[type=”button”]:active,input[type=”reset”]:active,input[type=”submit”]:active,.pagination a:active{color :#555;} ボタンとページネーションのアクティブ時の文字色

#ffff80 計1カ所 明るい黄色

  • html input[type=”button”]:hover,input[type=”reset”]:hover,input[type=”submit”]:hover,.pagination a:hover{border: 1px solid #ffff80;} ボタンとページネーションのマウスオーバー時の外枠の色

#808080 計1カ所

  • html input[type=”button”]:hover,input[type=”reset”]:hover,input[type=”submit”]:hover,.pagination a:hover{border: 1px solid #808080;} ボタンとページネーションのアクティブ時の外枠の色

#ffff99 計3カ所

  • html input[type=”button”]:hover,input[type=”reset”]:hover,input[type=”submit”]:hover,.pagination a:hover background: -moz-linear-gradient(top, #ffff99, #ffffb2); ボタンとページネーションのグラデ背景色(始点) Firefox等 マウスオーバー時
  • html input[type=”button”]:hover,input[type=”reset”]:hover,input[type=”submit”]:hover,.pagination a:hover background: -webkit-gradient(linear, center top, center bottom, from(#ffff99), to(#ffffb2)); ボタンとページネーションのグラデ背景色(始点) Chrome等 マウスオーバー時
  • html input[type=”button”]:hover,input[type=”reset”]:hover,input[type=”submit”]:hover,.pagination a:hover filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#ffff99′, endColorstr=’#ffffb2′); ボタンとページネーションのグラデ背景色(始点) Gradient Filter マウスオーバー時

#ffffb2 計3カ所

  • html input[type=”button”]:hover,input[type=”reset”]:hover,input[type=”submit”]:hover,.pagination a:hover background: -moz-linear-gradient(top, #ffff99, #ffffb2); ボタンとページネーションのグラデ背景色(終点) Firefox等 マウスオーバー時
  • html input[type=”button”]:hover,input[type=”reset”]:hover,input[type=”submit”]:hover,.pagination a:hover background: -webkit-gradient(linear, center top, center bottom, from(#ffff99), to(#ffffb2)); ボタンとページネーションのグラデ背景色(終点) Chrome等 マウスオーバー時
  • html input[type=”button”]:hover,input[type=”reset”]:hover,input[type=”submit”]:hover,.pagination a:hover filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#ffff99′, endColorstr=’#ffffb2′); ボタンとページネーションのグラデ背景色(終点) Gradient Filter マウスオーバー時

#ebe6da 計2カ所

★ここも面積が広いので大きな印象を与えると思います。

  • [role=”contentinfo”]{backgroud-color: #ebe6da;} フッター全体の背景色(画面横いっぱい)
  • [role=”contentinfo”] .footer{backgroud-color: #ebe6da;} フッターの背景色(中央のボックス)

#d1c6ae 計3カ所

★フッターの背景色に埋もれない色に

  • [role=”contentinfo”] {border-top: 1px solid #d1c6ae;} フッター上の細い線
  • [role=”contentinfo”] .footer h3{border-bottom: 3px dotted #d1c6ae;} フッターの見出しの下の点線
  • [role=”contentinfo”] .copyright{border-top: 3px dotted #d1c6ae;} フッターのコピーライトの上の点線

#c0c6c9 計1カ所

  • #search_top input[type=”text”] {border-top: 1px solid #c0c6c9;} 検索窓の外枠

#e0cd9d 計8カ所

★中見出しにあたるので2番目に目立つ色にしてみてはどうでしょうか。

  • .widget .entry-summary{border-bottom: 2px dotted #e0cd9d;} 記事概要の下の点線
  • #posts h2{border-bottom: 3px dotted #e0cd9d;} 記事のh2の下の点線
  • .entry .title, .page .title, section .title{border-bottom: 3px dotted #e0cd9d;} 記事,ページ,セクションのタイトル下の点線
  • .entry h2, .page h2, section h2{border-bottom: 3px dotted #e0cd9d;} 記事,ページ,セクションのh2下の点線
  • .content [role=”main”] h3{border-bottom: 3px dotted #e0cd9d;} h3の下の点線
  • #posts h2{border-bottom: 3px dotted #e0cd9d;} h記事のh2の下の点線
  • .entry .title, .page .title, section .title{border-bottom: 3px dotted #e0cd9d;} 記事,ページ,セクションのタイトル下の点線
  • .entry h2, .page h2, section h2{border-bottom: 2px dotted #e0cd9d;} 記事,ページ,セクションのh2下の点線

#ffcc80 計1カ所

★ここはピリッときかせたいですね(私は線をとりましたが…)

  • body{border-top: 5px solid #ffcc80;} ページ最上部の太いライン

#f7eac6 計1カ所

  • .header [role=”navigation”]{border-bottom: 1px solid #f7eac6;} ヘッダーのナビゲーション下の細い線

#dfdfdf 計1カ所

  • #output img{border: 1px solid #dfdfdf;} 何かの画像の外枠？

#111 計1カ所

  • [role=”contentinfo”] [role=”navigation”] a{ color: #111;} ナビゲーションのリンク色

#ebdfd1 計1カ所

  • .content{border-top: 1px solid #ebdfd1;} コンテンツの上の細い線(ナビゲーションの下)

#f0ece1 計1カ所

  • .widget h3{border-top:1px solid #f0ece1;} サイドバーなどの見出しの上の細い線

#f0e8d3 計1カ所

  • .widget h3{border-bottom: 3px dotted #f0e8d3;} サイドバーなどの見出しの下の点線

お疲れ様でした

見出しや面積の大きい部分だけでも変えてみればずいぶん印象が変わるのではないでしょうか。画像は余裕があれば後日アップしたいと思います。

Web
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

コメント

コメントする

CAPTCHA


目次