スポンサーサイト 
-- -- --
-- --:--:--

スポンサー広告  Comment -  Trackback -  edit.

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

C-Pod nano 5カラーバージョン 
2006 02 10
Fri 02:01:16

テンプレート  Comment 8  Trackback 0  edit.


今回のバージョンは、前回のバージョンを更にINDEXページを付けて画像を使用出来る様に改造されたバージョンです。
あまり大きな画像は使えませんが、ワンポイントとしてお使い頂けると思います。
他にもトップページには管理人のコメントを書き込む所も有りますし、そのスペースを特別なパーツなどに使うことも出来ると思います。

カウンターやFC2のアクセス解析の貼り付け場所に関しては、HTMLファイルに書かれていますので、所定の位置へスクリプトを貼り付けてご使用下さい。
尚、トップページの画像に関して、大きさをカスタマイズする方も居るでしょうが、カラム落ちやデザインの崩れを起こす原因に成りますので責任は持てません。
ご自身で解決して頂くことが前提と成ります。(小さくすることには問題は有りません。)

本来が、画像を背景画像として使用していますので、多少の大きさの違いは問題有りません。
幅480px、縦340pxが表示されるサイズですので同じ様なサイズで画像の編集を行うと良いでしょう。
(大きくても隠れるだけですw)
画像の表示は、左上を基準に設定されていますのでそれを考慮に入れて編集すると分かりやすいと思います。
(今回、テンプレートに付けたトップ画像はeLouai's Candybar Doll Maker 3さんのアバターツールで制作されたものを使用しています。あくまでサンプルとお考え下さい。)

他に今回のバージョンは記事表示ページで少し変更部分があります。
ツールバーに有る項目は、メニューから外しました。

固定バージョンプレビューはこちら↓
C-Podブルーバージョン
C-Podオレンジバージョン
C-Podグリーンバージョン
C-Podレッドバージョン
C-Podグレーバージョン

カラーチェンジバージョンはこちら↓
C-Podカラーチェンジバージョン

以下はカラー固定バージョンのファイルです。(右クリック「対象をファイルに保存」でDLしてからメモ帳などで開きコピー&ペーストして登録して下さい。)
ブルーバージョンCSSファイル
ブルーバージョンHTMLファイル
グレーバージョンCSSファイル
グレーバージョンHTMLファイル
グリーンバージョンCSSファイル
グリーンバージョンHTMLファイル
オレンジバージョンCSSファイル
オレンジバージョンHTMLファイル
レッドバージョンCSSファイル
レッドバージョンHTMLファイル

カラーチェンジバージョンは共有登録も致しますのでそちらをDLしてお使い下さい。
カラーチェンジバージョンCSSファイル
カラーチェンジバージョンHTMLファイル



カラーチェンジバージョンのデザイン変更方法。(カラーの入れ替え)

まず始めにHTMLの編集ですが、既にHTMLファイルに説明書きが有りますので参考にして下さい。


<!-- 以下はカラーチェンジの設定です。各ページの色変更は下のbodyタグのid名を、blue,green,red,orange,gray
のいずれかに変更して下さい。尚、単一色での使用時はブログ記事を参考にお願い致します。 -->

<!--not_category_area-->
<!--not_date_area-->
<!--not_permanent_area-->
<!--not_index_area-->
<body id="orange">         通常の記事表示ページでの設定
<!--/not_index_area-->
<!--/not_permanent_area-->
<!--/not_date_area-->
<!--/not_category_area-->

<!--permanent_area-->
<body id="blue">          個別記事での設定
<!--/permanent_area-->

<!--category_area-->
<body id="green">         カテゴリー表示の際の設定
<!--/category_area-->

<!--date_area-->
<body id="red">          月別表示での設定
<!--/date_area-->

<!-- カラーチェンジの設定ここまで。 -->



更に少し下の部分にはINDEXページでの色設定箇所が有りますので同じようにID名を変更して下さい。


<!-- INDEXページ部分 -->

<!-- トップデザイン変更時はこの部分のID名も変更します。 -->
<div id="gray" style="padding-bottom: 13px;">


HTMLファイルに関しては以上ですが、スタイルシートの変更も必要に成ります。
スタイルシートにも説明書きが有りますのでそれを参考にします。
HTMLでINDEXページとして設定した同じ色に変更します。


/* INDEXページ背景色設定 */
/* トップページのデザイン色を変更する場合は、#index_top の背景色 background: #D8DADE; を変更が必要です。 */
/* #A4B8D9 (blueの設定色) */
/* #D8DADE (grayの設定色) */
/* #EAE4CC (orangeの設定色) */
/* #ADC2C2 (greenの設定色) */
/* #D4AEB9 (redの設定色) */

#index_top {background: #D8DADE;}



上の様に全面の背景色を設定しないと画像と同じ色合いに成りません。(背景画像は本体周りのみです。)

以上で設定箇所の説明は終わりですが、INDEXページのみ背景画像が個別に成ってしまっています。
色々考えましたが、どうしても共通のものには出来ないので少し設定が難しく成ってしまいました。(^^;

ジャンル [ ブログ テーマ [ 共有テンプレート ]

Re comments.

「こんにちわ」
ブログの方訪問いただいたみたいで。。。
ひとまず現在のようにできあがりました。

何かアドバイスでもあればいただけたらと
思います(;´▽`lllA``

今度は5カラムですか!
流石にすごいの一言ですil||li _| ̄|○ il||li

それではまたちょくちょく訪問させて
いただきますね

失礼します。
2006/02/10(金) 12:17:36 [URL] 愁哉にぃさん [編集]
「ども~愁哉にぃさん」
凄いカスタマイズですよね(笑)
私もいつも見せるものをどうやって配置するかを悩む所で難しい問題です。(^^;

>今度は5カラムですか!
違いますよ~(^^;5カラーです。
と言いながら5カラムとか横長でも良いからスクロールとかしなくても見せられるデザインと言うのも考えてます。
他の方でそう言った5カラムとか作って居るんですが、「自分ならどうする?」って、アイディアが出ませんね。(^^;

まぁ~一つのデザインでも多様性を持たせた2カラム、3カラムとバージョンを広げる事で使う人に選択肢を多くすると言うのが対処方かも知れませんね。
2006/02/10(金) 21:28:23 [URL] 有希之武さん [編集]
「Firefoxで・・・」
教えてください。
ブログのテンプレートをC-PodまたはC-Pod nanoに変更しようと思ってますが
1つ問題が出てしまいました。

普段わたしはブラウザにFirefox(ver1.5.0.1)を使っているのですが
試しにC-Podに変更してみたら微妙にレイアウトがずれるんです。
うまく説明できないので、ファイル名で言うと
3cc_menu_title01.gif、3cc_main_title_o.gif、3cc_menu_title02.gifの3つの間隔が
IEだと問題ないのですが、Firefoxだと3cc_menu_title01.gifの位置が微妙に左に寄ってしまうんです。

なんとか調整しようと頑張ってみましたがどうしてもうまくいきません。
有希之武さんはFirefoxをお持ちでないかもしれませんが
IEとFirefoxの両方できれいに見えるようにするには
どうしたらいいのかお知恵を拝借できればと思います。
よろしくお願いします。
2006/02/15(水) 05:33:00 [URL] ともよさん [編集]
「Firefoxでのズレ」
ともよさんどうもです。
実はFirefoxでのズレは確認済みです。
どうしても使う方がIEの方が比率的に90%以上居ますので、IEに合わせています。
他のプラウザでも同じ様にしたいのですが、背景画像の解釈の違いで同じには成りません。
それぞれのタイトルに関しても、微妙にIEと他のブラウザでは、違う為ズレが生じます。
これは中央寄せにする為に全てのブラウザで共通のデザインには出来ないと言うことなんです。
中央寄せではなく、左寄せでデザインすればきっちりとした1ピクセル単位での修正も可能ですが、このバージョンでは不可能な為、知りながら告知してません。(自分のスキルの問題なのかも知れませんが)
そう言う事情ですのでご承知の上、ご使用頂くしか有りません。m(_ _)m
2006/02/15(水) 09:08:34 [URL] 有希之武さん [編集]
「ありがとうございました」
やはりブラウザごとに解釈が違うため大変なのですね。
IEできれいに見えればOKとします。
わざわざどうもありがとうございました。
2006/02/15(水) 21:00:10 [URL] ともよさん [編集]
「初めまして。」
初めまして。テンプレ、昨日より使用させて頂いています。
只今、悪戦苦闘中なのですが、ちょっと行き詰ってしまいました…。
幾つか質問させて下さい。

●アクセス解析なのですが、タグを入れると
「Recent Entries.」全てのタイトルに
New!のマークが付いてしまいます。

●ENTERしてからのメニューに折りたたみと、そうで無いものが
ありますが、折りたたむもの・させないものを、
どこかで指定を出来るのでしょうか?

●これもENTERしてからなのですが、本記事タイトルが
一番上が左寄り、下の本記事タイトルが中央なのです…。


数々の質問をスミマセン。
私が、いじりすぎてしまった結果です…(´`。)
お手数ですが、お時間ございました時、お願いします。
また、カスタマイズに「そんな事するな!」など
何か問題がございましたら、お知らせ下さい。

ではでは、ヨロシクオネガイシマス m(uu* m
2006/04/13(木) 11:21:19 [URL] りせさん [編集]
「質問です」
こんにちは
もう長いこと素敵なテンプレを愛用させて頂いています
私自身また区知識がないので細かく分かりやすい説明にもとても助けられています
ありがとうございます

ひとつ質問なのですが先ほどC-PODのHTMLファイルをコピペさせて頂こうと右クリックしたのですが不可思議な文字列のページが表示されます
ご確認頂けましたら幸いです
どうぞよろしくお願いします
2008/07/24(木) 09:34:47 [URL] あづさん [編集]
「OS的な事なのですが」
質問の意味は分かります。
リンクに貼られたファイルは普通のテキストファイルなのですが、ブラウザがその中身を解釈して、表示したり拡張子を変更したりして保存を促すんです。
テキストファイルなのに中身がHTML文書が書かれていた場合、IEは右クリックで保存の時に、拡張子をファイル名.htmとしてしまいます。
ですから、その対処として拡張子をTXTに変えて保存してみてください。
これでそのファイルは只のテキスト(元々の形式)で保存できます。
多分、それをクリックしたときに変な文字列が出てきたのは、書かれた文章にFC2のテンプレート用変数が書かれているため、それを誤変換して表示しているためです。
勿論、この場合でも「ソースを表示」で見てみると、テキスト文章がちゃんと見られます。
分かりましたか?
2008/07/24(木) 13:59:42 [URL] 有希之武さん [編集]
Comment form.

  管理者にだけ表示を許可する 
  注意 名前、タイトル、本文を入力する事で投稿可能になります。

Trackbacks.

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