--
--
--

スポンサーサイト

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

サイドメニューの背景を色々な色に変えてみた

アルキカタ・フォーラムの質問が面白そうなのでやってみました。

※カスタマイズ例=http://manannan.blog84.fc2.com/?template=colorfree_colorful&index

メニュータイトルの設定を確認する。

 ベースは、うちで出している共有テンプレート「colorfree」を「色変更」でモノトーンにしたもの。

 このテンプレートでは、メニュータイトルの背景は、「<div class="menutitle">」で設定しています。(この部分はテンプレートごとに違います。)

プラグインIDをHTMLに入れる。

 「テンプレート用 変数一覧」で、プラグインIDは
<%plugin_first_no>
<%plugin_second_no>
<%plugin_third_no>
で設定できることを確認して、(【4/9追記-1】以下12行を推敲。)
<!--plugin_first-->
<div class="menutitle">

<!--plugin_first-->
<div class="menutitle" id="pid<%plugin_first_no>">>
に。
<!--plugin_second-->
<div class="menutitle">

<!--plugin_second-->
<div class="menutitle" id="pid<%plugin_second_no>">
に、してみました。

プラグインIDを確認、スタイルシートを設定

 ソースを表示(ブログのページで、テンプレートを使った状態で、マウス右クリック→ソースを表示)、「pid」を検索し、それぞれのプラグインに付されたIDをメモにとります。(pidの後に出る数字は、使っているプラグインごとに違うのではないかと思いますが、未検証です)【4/9追記-2】つまり、ブログごとに違います。この数字をそのまま入れてもダメで、ご自分のブログのソース表示で、ソース内に出てくる数字を確認していただく必要があります。IEでは文字化けしますので、FireFoxなどでソースを見ていただいたほうが判りやすいと思います。

 今回は、テンプレートのスタイルシートの、「menutitle」の設定の直後に、
/* ●●カラフルメニューバー●● */
#pid314781{background-color:#ffff00;}
#pid314756{background-color:#00e1ff;}
#pid314758{background-color:#ff00c3;}
#pid314757{background-color:#a5ff00;}
#pid311341{background-color:#0087ff;}
#pid314755{background-color:#ff0069;}
#pid224143{background-color:#4bff00;}
#pid305977{background-color:#002dff;}
#pid309423{background-color:#ff000f;}
#pid314754{background-color:#00ff0f;}
#pid219525{background-color:#2d00ff;}
#pid837{background-color:#ff4b00;}
#pid831{background-color:#00ff69;}
#pid838{background-color:#8700ff;}
#pid169527{background-color:#ffa500;}
#pid221161{background-color:#00ffc3;}
#pidc{background-color:#e100ff;}

と入れました。入れてみたら、ちょっと色が強すぎたような気もしますが、サンプルなので、はっきりくっきり分かりやすくということで(ーωー)

※カスタマイズ結果=http://manannan.blog84.fc2.com/?template=colorfree_colorful&index


■やってみたのは4/5です。都合により、古い日付の記事枠を再利用しています。
スポンサーサイト
Comment
 


管理者にだけ表示を許可する

[213] 教えて頂きたいと思います

始めまして、FC2ブログの歩き方で背景色の色変更で質問したものです、
ブログを初めて今作成している程度の知識しかありません
そちらのcolorfreeをダウンロードさせて頂き、コメントに書かれていた通りに挑戦したのですが、出来ませんでした
「プラグイン1内のメニュータイトルは、
<div class="menutitle" id="<pid%plugin_first_no>">
プラグイン2内のメニュータイトルは、
<div class="menutitle" id="<pid%plugin_second_no>">
としてみました。」
と書かれている部分はcolorfreeのHTMLの編集では何処にいれると良いのですか?
又/* ●●カラフルメニューバー●● */を貼る箇所はCCSの/* メニュータイトル部分
------------------------------------------------------------ */
.menutitle {
width : 200px;
height : 26px;
background-color:#ede;
background-image : url(http://blog-imgs-23.fc2.com/m/a/n/manannan/colorfree-menu.png);
font-size : x-small; /* 古いIEの文字サイズ */
border-bottom : 0px solid #c9c; /* 下線 */
text-align : center; /* センタリング */
voice-family : ""}""; /* おまじない */
voice-family : inherit; /* おまじない */
font-size : small; /* CSSを正しく解釈出来るブラウザ用の文字サイズ */
の直後でよろしいでしょうか?
突然でしかもずうずうしいお願いですが、お時間のある時に教えて頂ければ大変助かります
では 宜しくお願いいたします     

[214] takanoさん、いらっしゃいませ。

すみません、わかりにくかったですね。
記事中、【4/9追記-1】【4/9追記-2】を書き込みましたので、ごらんください。

>文字サイズ */
>の直後でよろしいですか?

(略)文字サイズ */
}
の後ろに入れてください。

[215]

こんばんは
早速のお返事ありがとうございました
発見してすぐにチャレンジしてみたら、
なんとできました。
なんて言ってお礼を書けばいいのか、
本当にありがとうございました。
colorfreeを使わせて頂き、トップに画像を入れたり
これからカスタマイズ挑戦したいと思います
また お手数お掛けすることもあるかもしれません
が宜しくお願いします
本当にアリガトウございました。

[216] takanoさん

> なんとできました。
良かったです^^

> トップに画像を入れたり
『colorfree』に、ヘッダロゴ画像を入れる
http://manannan.blog84.fc2.com/blog-entry-147.html
という記事もありますので、よかったらどうぞ。

[220]

ありがとうございます
痒い所に手が、、、といったお返事で痛み入ります。
topの画像のサイズを大きくしてTRYしてみたいです
色々本を買ってきたのですが、、、目がまわります、、
ついつい頼ってしまい。ご迷惑お掛けするもの、
ずうずうしいと思われますが!2,3日過ぎても出来ない
場合はまたご質問させ頂きたいと思います
宜しくお願いします。本当に感涙です   

[222] takanoさん

>topの画像のサイズを大きくしてTRYしてみたいです
一番難しいのは、ステキな画像を作るところです。
(その面はうちもまだまだ。。。。orz)
それさえできればHTMLとかCSSは「ちょちょい」ですし、画像を見せていただければ「こういう入れ方をすれば?」というご提案もできると思います。

がんばってください。

[225] お言葉に甘えて、、、

お世話様です
画像作りました。
http://blog-imgs-30.fc2.com/l/o/g/logmarlin/top-c.jpg
サイズを750×250にしました
このサイズの画像を今そちらにあるテンプレーとのtopやカレンダーの
上に貼りたいのです。ヘッダー部分というのでしょうか?

HTMLの編集でヘッダーの部分を本を見ながら、変更して
みたら、右のカレンダーが動いてしまったり、
既存のtopの中に画像が入ったり(もちろん画像が大きい
ので切れて映りました)

出来ませんでした。

お言葉に甘えて、また質問の書き込みをさせて頂きます
何卒、宜しくお願いします m(--)m

[226] ブログを拝見したんですが…

素敵なヘッダ画像ですね!
いちおう、CSSは作ってみました。
こんな感じでしょうか。
http://manannan.blog84.fc2.com/?template=colorfree_colorfish&index

でも、じつは、ブログのほうも拝見しまして。

いまのテンプレートすごくいいと思います!
変えないとダメですか?
いまのテンプレートのまま、メニュータイトルの色も変えられます、角丸を四角くしていいならすぐできます。角を丸くしたいのだとちょっと小細工がいりますけど。

[227] ありがとうございます

本当にありがとうございます
全然分からず出来なくて、、、頼ってしまった上に、更に今のテンプレートの色も変えてくださるとおっしゃっていただけるとは、、、、もしお仕事のお邪魔にならない時間がありましたら、していただけるとうれしいです。。。。宜しくお願いします。
色を変えたいという希望をして頂いた方のテンプレートを使わせて頂くのが筋かと思っていました。またカラフルでとても可愛いし、colorfreeも使わせて頂きたいと思います

本当にありがとうございます

[228] 追伸

何度もすみません
http://manannan.blog84.fc2.com/?template=colorfree_colorfish&index のようにするには、まずこのURLを開いてソースをみて、colorfreeのソースと違う部分を発見してから、CCSの編集をするといいのでしょうか?
今からやって見ますが、、、違ったら大変申し訳ないのですが、またご教授願います

[229] 追伸2

浅はかでした
CCSも変更しないといけないのですね
HTMLのみ変更 というかコピーしても何も変わりません
でした。
HTMLの変更箇所を教えて頂けませんでしょうか?
宜しくお願いします 

沢山要望を出してしまって、本当に申し訳ございません

[230] ヘッダ画像つき「colorfree」は記事にしました

記事にしました、もしかしたら後で過去日付に直すかもしれません(いま共有テンプレートチャレンジ中なので)
http://manannan.blog84.fc2.com/blog-entry-220.html

今お使いのテンプレートは何ですか?hiyokokunさんのどれかじゃないかと思うのですが……。教えていただいたら、ちょっといじってみます。うちのテンプレに遠慮していただくことはないです。海好きだし、魚の写真とかも実はうらやましくてたまりません^^。お役にたてたら、とても嬉しいです。


[232] こんにちは

お昼の間にお返事頂けていたのですね
感激です。本当にありがとうございます
今のテンプレートは「hiyoko-calendar750 」をお借りしたものです。そして何をしたのか覚えていないのですが、上にメニューをつけました。
(どうやってしたのか覚えてないのです。。。)
記事拝見しました。チャレンジして見ます。
海お好きですか(^^)潜りますか ?!
是非 ご招待させて下さいませ。

[235] 学生のころ、スキンダイビングしに大島まで行ったりしました^^

テンプレート、「hiyoko-calendar750」でしたか。
だいぶ手を加えていらっしゃるんじゃないですか。
もったいないですよ。

あと、
>角を丸くしたいのだとちょっと小細工がいりますけど。
って書いたのですが、大嘘でした、ごめんなさい、細工はすでにhiyokokunさんがなさっていました。


一応、バックアップ複製をとってから操作してください。

【テンプレートHTML】
青文字のところを注意して探しながら、赤文字をいれてください。
<h2 class="navi-title" style="text-align:<%plugin_first_talign>" id="pid<%plugin_first_no>">

<h2 class="navi-title" style="text-align:<%plugin_second_talign>" id="pid<%plugin_second_no>">

<h2 class="navi-title" style="text-align:<%plugin_third_talign>" id="pid<%plugin_third_no>">

【テンプレートスタイルシート】
「colorfree」の色かえをしたときにこんな感じのを作っていただいたと思うんですが、それをそのまま、テンプレートスタイルシートの最後に入れてください。
/* ●●カラフルメニューバー●● */
#pid314781{background-color:#ffff00;}
#pid314756{background-color:#00e1ff;}
#pid314758{background-color:#ff00c3;}
#pid314757{background-color:#a5ff00;}
#pid311341{background-color:#0087ff;}
#pid314755{background-color:#ff0069;}
#pid224143{background-color:#4bff00;}
#pid305977{background-color:#002dff;}
#pid309423{background-color:#ff000f;}
#pid314754{background-color:#00ff0f;}
#pid219525{background-color:#2d00ff;}
#pid837{background-color:#ff4b00;}
#pid831{background-color:#00ff69;}
#pid838{background-color:#8700ff;}
#pid169527{background-color:#ffa500;}
#pid221161{background-color:#00ffc3;}
#pidc{background-color:#e100ff;}

うちだといま、こんな風になっていますが。今お使いのテンプレに上の設定を入れていただけば、メニューのカスタマイズとか、そっくり生きるはずです。
http://manannan.blog84.fc2.com/?template=hiyoko-calendar750&index

[237] ありがとうございます

昨日の内に出来ていたのですね
びっくりです。ご質問しておいて、のんびりしていてすみません。
早速 チャレンジしていみます。
時間掛かるとおもいますが、結果ご報告しに参ります(^^)
スキンダイビングですね。島まで行かれるなんて凄いです
大島 むかーし行きました。クラゲに刺された、、、、思い出が
あります。トホホ

[238] ありがとうございます2

manannan様!!
出来ました。それもすぐに、、、ありがとうございます
更新をしてからプレビュー押して、、、どきどきしながら
見てみたら、、、色が変わっています。
凄いです。本当に何て言っていいやら、、、、
ありがとうの気持ちで一杯です。
プラグインの内容とか決めかねて、ただただ試しに
入れているだけですが、、、こんな感じです
http://logmarlin.blog42.fc2.com/?preview&index
manannanさんのテンプレートも画像の変更チャレンジして
見ます。また 自力で出来ない所はずうずうしくお伺いしに
来ると思いますが、何卒宜しく願いします。
まずはご報告まで、、、、感謝で一杯です。
私に出来る事何かありますか?お写真送らせていただきま
すが???宜しくお願いします

[239] よかったです^^

>出来ました。それもすぐに、、、
良かったです、でもすぐにできたのは、plugin番号のリストをすでに作っていらしたからで……。
あそこがけっこう面倒だったのでは?

記事はこれからですよね、拝見しにいきます、楽しみです。

Trackback
Trackback URL

«  | HOME |  »

Manannan Mac Lir

共有テンプレート


Tree-Recent


Tree-Comment


Tree-TB


カテゴリ


Tree-Arcive


CalendArchive


ブログ管理メニュー(新)


タグリスト(旧


ユーザータグ


テンプレート構造解析


フォーラムリンク


最新コメント


リンク


バナー貼


カテゴリ


画像一覧(月別)


ブログ内検索


プロフィール


Tree-LINK


RSSフィード


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