スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

fc2ブログのPCテンプレート [ grey_2column ] の背景と文字の色を変更するカスタマイズ

カスタマイズ超初心者の個人的覚書です。

grey_2column1 のスタイルシート編集
 ↓オリジナルのテンプレートに含まれていた全てのcolor(色)
 #333333 #CCCCCC #FFFFCC #FFFFFF #666666 #999999 #FF6600 #0066FF

fc2ブログのPCテンプレート [ grey_2column ] のオリジナルは背景に画像を使ってなさそうに見えたので気に入りました。
オリジナルは背景が黒または濃い灰色で薄い灰色の文字が浮かび上がるという幻想的なテンプレートですが
普通の文字部分の背景が白で文字が黒、リンクがかかれば青になるテンプレートにカスタマイズしたい。
以下、その個人的記録です。(スタイルシート編集はしましたがHTML編集は一切していません・・・わざわざそうしたのではなく結果的にそうでした。

1.背景(body background-color)を#FFFFFF(白色)にしたいのですが既に使われている#FFFFFFがあるかどうか検索で調べました。a:link activeとトラックバックとカレンダーに使われているようです。私はトラックバックとカレンダーは使わないつもりなのでここがどう変わろうが構わない(-_-;)。a:link activeは#ff0000に変更したいと思っていましたので、幸い#ff0000は使われていないので、#FFFFFFを全て#ff0000に書き替えました。

2.いよいよ背景(background-color)を#FFFFFF(白色)に変更する作業です。「color:#333333」を検索で探して「color:333333」とあるのを全て「color:#FFFFFF」に打ち替えました。幸い「color:#333333」の所には全てbackground-colorと書いてありました。

ここでプレビューしてみました。背景が白色になっていて上手くいったようです。が、もう一つ背景があります。 これもいくいくは白色にしようと思っているのですが、幅の変更をする時に全部白色では判り辛そうという訳で、#FFFFFFを使われていない#ffff99薄黄色に書き替えました。
もう一度プレビューして更新しました。
今まで作業していたgrey_2column1の複製を作って、できたgrey_2column11に適用マークを付け替えて適用ボタンをクリックして編集再開です。

backgroundを検索して、#ffff99薄黄色でない背景の色を探します。background:#666666が沢山でとtrackback_url background-color: #FF6600が1個?
取りあえず#666666だけを検索で探してbackgroundの所であれば色を#FFFFFF(白色)に書き替えます。

ここでプレビューしてみました。背景のほとんどが白色と薄黄色になってるようなのでここで一段落終了です。

文字の色の変更に取り掛かります。

説明本文などの色の#CCCCCC(薄い灰色)を検索で探します。これを私は#000000(黒色)に書き替えます。
5か所書き替えるのですが勉強のため一か所ずつプレビューしながら書き替えます。
これで多分リンクのかかってない文字の色は全部計画通りに書き換わった・・・筈。

リンクのかかっている文字のリンク色の変更。
a:visited「color:#FFFFCC」 → 「color:#551a8b」
a:focus,
a:hover,

「color:#FFFFCC」 → 「color:000000」

もう一度プレビューして更新しました。

 ↓この段階でのテンプレートに含まれている全てのcolor(色)
 #ffff99 #000000 #551a8b #ff0000 #FF6600 #FFFFFF #0066FF

オリジナルのgrey_2column
RGB値 セル 用途    
#333333 背景 body background-color 濃い灰色
#666666 背景 sub_header background やや濃い灰色
#999999 背景 sub_header background 灰色
#CCCCCC 説明本文など body color 薄い灰色
#ffff99 未読 a:link
#FFFFCC 既読 a:link visited
設定なし 選択時 a:link focus
設定なし マウスオーバー a:link hover
#FFFFFF 選択決定時 a:link active
カスタム後のgrey_2column
#ffff99 背景 body background-color 薄黄色
#FFFFFF 背景 sub_header background
#999999 背景 sub_header background 灰色
#000000 説明本文など body color 薄い灰色
設定なし 未読 a:link
#551a8b 既読 a:link visited
設定なし 選択時 a:link focus
設定なし 選択決定時 a:link active
#ff0000 マウスオーバー a:link hover
Web Safe Color一覧表-カラーチャート by 初心者のためのホームページ作り


--------------------------------------------------------


FC2ブログのタイトルと記事の間を狭くしたい - ブログ _ 【OKWave】

2014.09.08 更新 2014-09-05 初稿



にほんブログ村 地域生活(街) 中部ブログ 富山県情報へ

池田税理士事務所Ι富山の会計事務所Ι富山市


















































テーマ : 富山県
ジャンル : 地域情報

アクセス解析
人気頁 応援 Twitter
ブログパーツ
にほんブログ村 地域生活(街) 中部ブログ 富山県情報へ


富山市天気予報 by Minute™




最新記事
カテゴリ
楽天市場モーションウィジェット
楽天市場モーションウィンジェット



200*600

楽天モーションウィジェット縦型148*600
縦型148*600


縦型148*600


楽天トラベルモーションウィジェット
148*600

楽天市場旅行用品検索+楽天トラベルサービスリンク
【楽天市場】旅行用品 便利 の検索
【楽天ランキング市場】旅行用品 便利 の検索
【楽天アフィリエイト】旅行用品 便利 の検索







Amazon



楽天市場
プロフィール

池田税理士事務所

Author:池田税理士事務所
TEL 076-421-1753
FAX 076-425-8845
〒939-8082
富山県
富山市小泉町145-3

検索フォーム
QRコード
QR
RSSリンクの表示
リンク
ページランキング


  • SEOブログパーツ
トップページリンク
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。