■テンプレート[seo-pop-plugin]の色を変える幕僚日誌Ⅲ

2009 10 ≪ 123456789101112131415161718192021222324252627282930≫ 2009 12

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

Ads by Google

　--------(--)

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

カテゴリ：スポンサー広告トラックバック(-) コメント(-)

アリさん作成の素晴らしいテンプレートがあります。
[seo-pop-plugin]つう名前です。

幕僚日誌ⅢのFC2移行化に伴い、なんかおいしいテンプレートないかなぁと思っていたところ、ちょうど、公開された日に見つけ、早速使っています。
親切丁寧に作ってあって、いいっすよ。これ。

デ。アリさんのブログにも行ったりして色々勉強しました。アリさん元SEなんですね。餅は餅屋です。
コメントを読むとカスタマイズに関するものが多く、特に色の変更のコメントが多かったような気がします。気がするだけかも。

自分も色を変更したかったので、してみました。

と、ここまで書いていてアリさんのブログを見ると、今日の記事でコメントを反映させた第2弾、第3弾テンプレートを作成予定とか。
色の変更についても軽く書いてあった。

次は色も簡単に変更できるテンプレートを作ってくれるみたいです。
すばらしい！

とりあえず、HTMLやらスタイルシートやらよくわからない超初心者でも、背景やタイトルの色を変更する手順を覚書として書いておきます。
（テンプレート[seo-pop-plugin]がバージョンアップしたら不要になるけど）

■準備

①gif画像を準備する
②準備したgif画像をアップロードする

<説明>
[seo-pop-plugin]の背景やタイトル等の色はスタイルシートの中で「gif画像」で設定してあります。

なので、そのgif画像を変更してやれば背景等の色の変更ができます。
修正箇所は4箇所です。

でもその前に、変更したい色のgif画像を準備してください。
デフォルトの背景は「方眼紙模様」でタイトルやカレンダー等は「淡いブルー系」ですね。
それをどのような色に変更したいか考えて選ぶ必要があります。
背景とタイトル等のバランスを考えて。

「壁紙　素材」で検索すればたくさんヒットしますよ。

面倒ならペイントで作ってもいいっすね。

gif画像が準備できたら、管理者ページの「ファイルのアップロード」でアップロードしておく。
ブログで画像をアップロードしているのと同じ手順です。

これだけです。準備は。

■スタイルシートを編集する

①スタイルシートを4箇所修正する
②更新してブログを確認する

<説明>
スタイルシートを編集するために、編集画面を開く。
(1)管理者ページを開く
(2)左にあるメニュー「環境設定」から「テンプレートの設定」を開く
(3)[seo-pop-plugin]の[修正]を開く

すると、HTMLとスタイルシートのソース画面が表示される。
ここで「スタイルシート」を編集する。

スタイルシートをコピーしてエディタで編集してもいいけど、面倒なので、そのまま管理者ページ上で修正しちゃおう。

修正箇所は4箇所ですよ。
内訳は、こうです。

背景が1箇所。
ヘッダー、サイド、フッターの3箇所。

●まずは背景を変更する。
スタイルシートの最初に背景を設定しているとこあります。
↓

@charset "euc-jp";

body{
background-image : url(http://blog15.fc2.com/t/tarikihongan/file/d15.gif)

この（）で囲まれたURLを背景用のgif画像のURLに変更します。（赤字の箇所）
背景用のgif画像のURLは「ファイルのアップロード」画面にあるgif画像を表示させるとブラウザのアドレスバーに表示されますよ。

●次にタイトルやプラグインの色を変更します。
タイトルの色に該当するヘッダーはここを変更する。
↓

/* ヘッダーの幅 ---------------------------------------------*/
#header {
text-align : right;
height : 100px;
margin : 0 0 10px 0;
padding : 0 15px 0 0;
background-color:#ffffff;
background-image : url(http://blog15.fc2.com/t/tarikihongan/file/i36.gif);

背景と同じように、（）で囲まれたURLを変更したいgif画像のURLに変更します。（赤字の箇所）

ページ下のフッターの色はここを変更する。
↓

/*フッター
-------------------------------------------------------------*/
#footer {
clear : both;
width : 800px;
font-size : 10px;
color : #808080;
margin : 30px 0 0 0;
text-align : center;
line-height: 20px;
background-image : url(http://blog15.fc2.com/t/tarikihongan/file/i36.gif);

同じように、（）で囲まれたURLを変更したいgif画像のURLに変更します。（赤字の箇所）

各プラグインの色はここを変更する。
↓

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

.sidetitle{
color: #808080;
font-size:14px;
background-image : url(http://blog15.fc2.com/t/tarikihongan/file/i36.gif);

同じように、（）で囲まれたURLを変更したいgif画像のURLに変更します。（赤字の箇所）

以上4箇所を変更します。
変更するのは（）で囲まれたURLだけですよ。

●最後に「更新」ボタンを押せば完了です。

ブログを読み込んで色が変更されたか確認してください。
基本的に、背景とタイトル等用の2つgif画像あればいいと思います。
全部ばらばらだと格好悪いと思います。

画像で色を設定してあるんで、ある程度変更は限定されるかもしれませんが、全然問題ないと思います。
いずれバージョンアップされれば、色指定で変更できると思います。

とりあえず、HTMLもスタイルシートもわかんない人は、上記手順で色を変更してみてくださいね。

簡単明瞭親切丁寧なHTMLスタイルシートソースを作成してくれたアリさんに感謝感激。

カテゴリ：[ネタ系]ブログトラックバック(0) コメント(6)

次の記事：■テンプレート[seo-pop-custom]の色を変える
前の記事：愛の Do As Infinity

関連すると思われる記事

はじめまして！
テンプレ使ってくれて、さらに活用法まで記事にしてくれて、本当に嬉しいです♪
すごーく素敵にカスタマイズされてますね！
こちらこそ、感謝感激です(^^)

今日の記事でちらっと書いた第２弾ですけど、さっき出来たのでアップしたんです。
今度は色コードで色の変更できるようになってますよ。
そちらの方もよかったらよろしくお願いします(o*｡_｡)oﾍﾟｺｯ

最後に・・・使ってくれて本当にありがとうございます♪
これからもよろしくお願いします。

【2005/09/30 18:26】 | アリ #- | [edit]

アリさんコメントありがとうございました！

早速バージョンアップされたんですね。凄いです。
便乗して私も記事を書いてしまいました。

またバージョンアップしてくださいね。

【2005/09/30 21:49】 | ごぞんじ #6J9OhUjw | [edit]

はじめまして。
最近テンプレを変更して四苦八苦していたブログ初心者です。
らびさんの紹介でとんできました！
タイトル画像を変える方法がわからなくて四苦八苦していたんです！
詳しく説明があって感動しました。
さっそくタイトル背景変えてみました。
ただ、あまり変更するとサイトが重たくなったりしちゃうんですか？

ぜひこれからも勉強させていただきたいのでリンクさせていただけたら嬉しいです。

【2005/10/10 17:57】 | makimakiママ #1Vmcynj6 | [edit]

>makimakiママさま

どうもコメントありがとうございます。
テンプレ変更すると重くなるか？
ですが、アリさんのテンプレは軽いので、そういうことはないと思います。
背景をgif画像で指定してあるので、FC2自体が混んで重い時は表示に時間かかるかもです。
でも、ADSL以上の回線でしょうから、そんなずっと待っている！みたいな感じじゃないですよ。
それにFC2自体が混んで重いなら、ブログを表示すること自体が重くなりますから。

それとブログを拝見したところ、アフェリエイト関連でリンク画像をたくさん貼っていらっしゃいますよね。その画像で重くなるかもしれませんが、一旦パソコンで読み込んでしまえば、「キャッシュ」されてパソコンの中に画像を取り込みますので、次に表示させる時は軽いです。

結論は重くならないですよ。です。
重くなるのは、主にインターネット回線やサーバ（FC2）が原因がほとんどなんで、自分が重いときは他人も重いと考えていいかもです・・・
| ￣▽￣)

それとアフェリエイトリンクがたくさんあるので、なんかギュと見えちゃう感じがしますが（私はそう感じました）、これはサイドバーや本文部分のサイズを広くすれば問題ないです。
スタイルシートを変更するんですが、簡単です。

アリさんの一番新しいテンプレだとブラウザの大きさにより可変でサイズ変わるんですけど、せっかく今のテンプレに手を入れたんで、これを成長させた方がいいですよね。

カテゴリとかコメントとかツリー化すれば、もっと見やすいサイトになると思いますよ。簡単っす。

何かあればお聞き下さい。私でよければお手伝いしますよ。

そうそう。リンクはＯＫですので。

【2005/10/10 19:36】 | ごぞんじ #6J9OhUjw | [edit]

はじめまして。助かりました。超初心者なんでこまってました。これで解決です。ありがとうございました。

【2005/11/11 10:33】 | あつ #- | [edit]

＞あつ様

拙い記事で申し訳なかったですね。
関係ないですが、何故かこの記事のコメントだけ、サイドバーにうまく表示されません。

バグだろうか？

関係ない話ですいませんね。

【2005/11/14 10:05】 | ごぞんじ #6J9OhUjw | [edit]

トラックバック

トラックバックURL：
http://gozonji.blog4.fc2.com/tb.php/204-c97930db

≪　トップページへ｜このページの先頭へ　≫