2017 051234567891011121314151617181920212223242526272829302017 07
 
HOME > スポンサー広告> [ネタ系]ブログ > ■テンプレート[seo-pop-custom]の色を変える

スポンサーサイト

 --------(--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)

■テンプレート[seo-pop-custom]の色を変える

 2005-09-30(金)
前回紹介したアリさんのテンプレートがバージョンアップしました
[seo-pop-custom]つう名前です。

アナウンス通り、色指定が簡単に出来るバージョンとなっています。
う~む、これで前回記事の手順は不要になったなぁ。
マ。gif画像変更の手順として生きるでしょう。

このバージョンアップしたテンプレート[seo-pop-custom]の色の変更については、アリさんのブログに丁寧に書いてあります

が、やっぱりHTMLやスタイルシートをよく知らない超初心者はいるので(自分も含めて)、前回同様に色を変えてみた。
その手順を性懲りもなく覚書として記す。のである。

アリさんの今回のテンプレート[seo-pop-custom]は、色の変更が「色指定」(16進数で表すもの。赤だと#ff0000になる)だけで出来ます。前回のように、gif画像を用意する必要はありません

アリさんのブログに変更方法書いてあるので、ここでワザワザ書く必要もないですが、「模様」を省きたい!色だけにしたい!という人の為に書いておきます。

テンプレート[seo-pop-custom]の色はスタイルシートの該当箇所を変更するだけですが、「模様」は変わりません。

「模様」って何?ですよね。

アリさんの今回のテンプレートは、色指定で色の変更ができますが、gif画像も使用されていて、これが背景等の「模様」になっています。
gif画像自体はとても小さく、かつ透過性があるので5倍に拡大して色を付けたやつを貼り付けてみます。

■背景に使われているgif画像

背景のgif画像



■タイトル等に使われているgif画像

タイトル等のgif画像


このブログの背景が白なんで判りにくいですが、黒色のとこが透明になっていて、色指定をすると、その色が透けて表示されます。
なので、色指定で色を変更しても、この「模様」自体はかわりません。

それで問題ない。色さえ変わればいい!って人は、アリさんのブログに書いてある手順だけでOKです。
色指定を変えてブログに変化をつけて下さい。

いやいやいや。
「模様」も変更したい!って人は、以下を読み続けてくださいね。

やりたいことは、この二つと思うので、それを書きます。

 ■模様を消したい!
 ■違う模様にしたい!


■模様を消したい!

これ、簡単です。
スタイルシートにある、模様のgif画像を指定しているURLを削除すればOKです。

<手順>
①スタイルシートを開きます(スタイルシートの開き方がわからない人はヘルプを見るか前回の記事を参考にしてください

②背景の模様を消す
スタイルシートのこの箇所を修正します。


@charset "euc-jp";

body{
background-color : #99cc99;
background-image : url(http://blog-imgs-29.fc2.com/t/a/r/tarikihongan/back.gif);
text-align: center;
margin: 0px;
font-size: 14px;
color: #808080;
font-family: "Lucida Grande","Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
}

赤字のとこが背景のgif画像を指定しているURLです。
この赤字の箇所全部削除します。
()だけ残りますが、それでいいです。

注意:背景の模様を消すと、色指定で指定された色が背景となります。当たり前ですけど。
いわゆるベタ塗り状態になるので、重い色を指定すると全体的に「どんより」とした感じになります。
なので、背景の模様を消して色を指定する場合は、軽めの色がオススメです。

③タイトルやフッターの模様を消す
手順は②と同じです。
修正するスタイルシートの箇所が違うだけです。
該当修正箇所のスタイルシートを貼り付けておきます。

同じように赤字の箇所だけ削除すればいいです。

/* ヘッダーの幅 ---------------------------------------------*/
#header {
text-align : right;
height : 100px;
margin : 0 0 10px 0;
padding : 0 15px 0 0;
background-color:#99cc99;
background-image : url(http://blog-imgs-29.fc2.com/t/a/r/tarikihongan/dot.gif);
border-bottom : 1px solid #808080;
}


/*フッター
-------------------------------------------------------------*/
#footer {
clear : both;
width : 800px;
font-size : 10px;
color : #808080;
margin : 30px 0 0 0;
text-align : center;
line-height: 20px;
background-color:#99cc99;
background-image : url(http://blog-imgs-29.fc2.com/t/a/r/tarikihongan/dot.gif);
border-top:1px solid #808080;
}


/* サイド
-------------------------------------------------------------*/
.side {
padding: 15px 5px 15px 5px;
}

.sidetitle{
color: #normal;
font-size:14px;
background-color:#99cc99;
background-image : url(http://blog-imgs-29.fc2.com/t/a/r/tarikihongan/dot.gif);
border-width: 1px;
border-style: solid;
border-color: #808080;
WIDTH:180;
HEIGHT:10;
text-align: center;
}

この4箇所を修正すれば、模様はなくなります。

■違う模様にしたい!

自分でgif画像を用意して違う模様にする必要があります。
手順は前回の記事の通りにすればOKです

色が変わる模様にしたい!
って人いるかなぁ・・・

これは、透過性のgif画像を拾ってくるか自分で作成するしかないです。
面倒ですよ。
素材画像とか作るの好きな人は、自分で作成してみてください。
作成したgif画像をアップロードしてスタイルシートでURL指定してやればいいだけです。

しかし、これを読んでいる人は、恐らく超初心者。
マ。模様なしの色だけでカスタマイズするか、色指定関係なしに違う模様にカスタマイズするかを選択した方がベターだと思われます。
(色指定しても透過性のないgif画像を指定すれば、色の上にgif画像が表示されることになり、色指定が無効みたいな感じになります)

■補足
色指定の際の参考サイトをリンクしておきます
検索すれば、web上で簡単に色の確認ができるサイトがヒットしますよ。


アリさんの次のバージョンアップが楽しみだ!

次の記事:愛のカマキリ
前の記事:■テンプレート[seo-pop-plugin]の色を変える
関連すると思われる記事
Loading


コメント












管理者にだけ表示を許可する
トラックバック
トラックバックURL:
http://gozonji.blog4.fc2.com/tb.php/205-5e731a0b
≪ トップページへこのページの先頭へ  ≫
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。