fc2ブログ
2006.05.02

plastik

plastik

Firefoxのビジュアルテーマのplastikfoxを参考にさせて頂いて作ってみました。
plastikfoxとは全く違うものになってしまいましたが、なんとかきれいに収まったと思います。
今回もライブドアからの移植作品です。


上のプレビュー画像はWinIE6で表示させたときのものです。
他のブラウザでは表示が若干違うかもしれません。
» PREVIEW


2006.05.08 追記: 記事一覧に対応しました。


このテンプレートの使用上の注意

それぞれの幅は全体幅900px固定、コンテンツ(記事)部分600px固定、サイドバー260px固定です。
全体幅が900pxありますのでSVGA(800x600)の画面の方にはやさしくありません。
モダンブラウザでご覧になるほうが色々といいかも。


このテンプレートは個人・法人を問わず自由に使用することが出来ますが著作権は放棄しておりません。
※ただしアダルト関係や宗教関係のブログ、公序良俗に反するブログでのご使用はお控えくださいますようお願いいたします。


画像の二次加工やHTML,CSSをカスタマイズしてのご利用はご自由にしてください。
ただし再配布や共有テンプレート化はお控えください。


このテンプレートに関しまして何かご質問などありましたらこちらにどうぞ。


制作環境は以下の通り。
OS:WinXP
ディスプレイ解像度: 1024x786 32bitカラー
ブラウザ:InternetExplorer6、Firefox1.5.0.2、Opera8.53、Netscape8.1
IE使用時の文字サイズ:中

スポンサーサイト




Posted at 09:48 | Template | COM(27) | TB(1)
この記事へのトラックバックURL
http://cie.blog11.fc2.com/tb.php/31-89970b13
この記事へのトラックバック
試行錯誤を繰り返して、ようやく形ができました。
新しい月になったので…(2) | 雨の日が好き at 2006.10.09 07:35
この記事へのコメント
テンプレお借りしました。リンク先や、飾りが増えてすっきり感が無くなっていたので、助かりました[はあと]
Posted by 3+4+1の 母 at 2006.05.04 20:38 | 編集
cieさん初めまして。fc2のテンプレート紹介で知りお邪魔しました。私はfc2blogを初めて一ヶ月くらいの初心者ですが、cieさん自身のblogのデザインが気に入りました。自分のnet環境がphs接続ということもありなるべく画像未使用のシンプルなもの、ただし見やすいもの、画面サイズの小さいノートパソコン使用のため記事部は可変タイプを探していました。是非テンプレートで公開してもらえないでしょうか?特に上部のhome等のリンクにマウスを当てるとベース色がかわるのが良いと思いました。欲を言えば左サイドのリンクも同じようにベース色がかわり文字色もオレンジ等にかわれば更に見やすいと思いました。ご検討お願いします。
Posted by hyh at 2006.05.05 14:15 | 編集
>> 3+4+1の 母さん
はじめましてこんばんは。
テンプレートのご利用をご利用いただきありがとうございます。[にこっ]

共有化したタイミングが良かったのか週間DLでトップでしたね。[驚]
ランキングに載るのがflier以来だったので嬉しいです。[ぽっ]

>> hyhさん
はじめましてこんばんは。
実は以前同じようなコメントを非公開で頂きました。
大変申し訳ありませんが、配布しているデザインと差別化しておきたいので今使用しているものを共有化するつもりはありません。すみません。

CSSや(X)HTMLの構造を参考にしていただくのはご自由にどうぞです。
Posted by cie at 2006.05.07 00:19 | 編集
こんばんは。残念ですが、了解しました。勉強してcieさんのようなデザイン目指そうと思います。
Posted by hyh at 2006.05.07 23:14 | 編集
シンプルで綺麗なテンプレートですね。

本日、楽天からfc2に移転してきました。

何かと不慣れなため、お尋ねしたいのですが、

タイトル部の変更(アレンジ)は具体的にどうやれば良いのでしょうか?

素人な質問で恐縮です。
Posted by noodles at 2006.05.16 22:25 | 編集
noodlesさんはじめまして。
テンプレートのご利用ありがとうございます。

> タイトル部の変更(アレンジ)は具体的にどうやれば良いのでしょうか?
タイトル部というのはブログのタイトルでしょうか?記事タイトルでしょうか?

こちらと致しましては具体的にと仰られても、どのようにされたいかによって方法が変わってくるのでなんとも・・・

ブログタイトル部のCSSクラスは
#banner .blogtitle { }
記事タイトル部のCSSクラスは
.title { }
になっています。
Posted by cie at 2006.05.16 23:46 | 編集
度々済みません。
ブログタイトル部ですが、
#banner .blogtitle { }の
{ }内に自分で作ったタイトルロゴ画像のHTMLを挿入すればいいのでしょうか?

素人で済みません。
Posted by noodles at 2006.05.17 00:27 | 編集
ブログタイトル部ですね。

上で書いたのはスタイルシートなのでHTMLタグを入れても反映されません。

テンプレートの編集画面の「スタイルシート」の下の枠の方の
#banner .blogtitle { } 内に
background: url(ロゴ画像のURI) no-repeat;
と入力するとブログタイトル文字の後ろにロゴ画像が表示されるはずです。
後はpaddingなどで調節すればOKなのですがちょっと難しいかもしれません・・・

また、#banner { } 内にあります
background: transparent url(http://blog11.fc2.com/c/cie/file/plastik_banner.png) no-repeat 50% 100%;
この赤い文字の所にある画像をダウンロードしていただいて、ロゴ画像とくっつける処理などされた後、再度アップロードして上の赤い文字とアップロードした画像URIと差し替えると良いかもしれません。

難しいようでしたら「HTMLテンプレート」の下の枠のほうの
<div id="banner">
<h1 class="blogtitle"><a href="./" accesskey="1"><%blog_name></a></h1>
<div class="description"><%introduction></div>
</div>

こちらの記述がブログタイトル部分の記述ですので、こちらのdivタグの間にロゴ画像のHTMLタグを入れていただいても構いません。

なんだか説明下手ですみません。
わかりにくかったり、質問がありましたらどうぞです。[汗]
Posted by cie at 2006.05.17 20:43 | 編集
うひゃ~、難しい!

ド素人相手にわざわざ、恐縮です。
僕もCSSというものをネットでいくつか調べたんですが、チンプンカンプンでした。

HTMLの方でやってみます。
できなかったら、また聞きにくると思います(汗)

すみません。。
Posted by noodles at 2006.05.18 01:50 | 編集
htmlで、何とか様になりました~。

本当にありがとうございました~~~。

感謝。。
Posted by noodles at 2006.05.18 03:17 | 編集
おはようございます。

質問です。
読者の方から質問がありました。
MacOS9だと、右のメニュー部分が真っ白になる。
左日記部分は問題なく表示されるようです。

一応、僕もOS9のマシーンで検証しましたが同様です。
因みに僕はOSXユーザーです。
OSXでは何の問題もありません。

これは想定内の現象でしょうか?
解決法など、ありますでしょうか?
Posted by noodles at 2006.05.18 14:00 | 編集
返事が遅れてしまいすみません。

> 右のメニュー部分が真っ白になる。
質問に質問で返してしまいますが・・・

真っ白と言うのはメニューや背景画像自体が表示されていないと言う事でしょうか。
それともメニューの項目などが下のほうに下がって表示されているのでしょうか。
また、ブラウザは何をお使いになっているのでしょうか。

スタイルシートはOSやブラウザの種類やバージョンによっても解釈などが違う為、対応も違ってきますので教えてください。

あとにMacで確認する環境が手元にございませんので手探りでの対応になってしまいますがご容赦願います。
Posted by cie at 2006.05.21 01:34 | 編集
初めまして。テンプレお借りしています。
このテンプレ(plastik)に関して質問なのですが、
1度リンクや月別アーカイブなどをクリックするとしばらく
その横に淡いオレンジでチェック表示されますよね。
あれを表示させないようには出来ないのでしょうか?

素人質問で恐縮ですが、お答え頂ければ幸いです。
Posted by tougo at 2006.06.15 04:40 | 編集
tougoさんはじめまして。
テンプレートのご利用ありがとうございます。[にこっ]

> 表示させないようには出来ないのでしょうか?
スタイルシートの中から

.side li a:visited {
padding-right: 1.5em;
background: url(http://blog11.fc2.com/c/cie/file/plastik_check.png) no-repeat;
background-position: 100% 50%;
}


この部分を削除してもらうと表示されなくなります。
Posted by cie at 2006.06.15 09:31 | 編集
流石ですね!解決しました。
ありがとうございます。
Posted by tougo at 2006.06.16 00:38 | 編集
すみません。追加の質問なのですが、
コメント欄の本文だけ文字のサイズを調節するにはどのようにしたらいいですかね。
色々やってみたのですが分からなくて…。
Posted by tougo at 2006.08.11 19:57 | 編集
ご無沙汰しておりました。

再度メニュー(右)の下部空欄にアフィリエイトのHTMLタグを貼るには、どの箇所に挿入すればよいのでしょうか?

いつも素人な質問で恐縮です。。
Posted by noodles at 2006.08.11 20:43 | 編集
>> tougoさん
こんばんは。

> コメント欄の本文だけ文字のサイズを調節する
スタイルシートの .comments-body { }の中に
font-size: 0.9em;
というプロパティがありますので、小さくしたければ数値(0.9em)を小さく、大きくしたければ数値を大きくすればOKです。
#120%とかでもサイズ指定できます。

>> noodlesさん
お久しぶりですこんばんは。

> メニュー(右)の下部空欄にアフィリエイトのHTMLタグを貼る
プラグインを有効にされているようですので「プラグインの設定」から「フリーエリア」を追加して、その中にアフィリエイトのタグを入れると良いのではないでしょうか。
順番も好きに変えることが出来ますし、直接HTMLテンプレートに記述するよりは色々と便利だと思いますよ。
Posted by cie at 2006.08.11 22:36 | 編集
さっそくのお返事ありがとうございます。
なるほど、プレビューではなく更新でないと反映されないのですね。
大変勉強になりました!

追記:
あーっ!すみません!前々から聞こうと思っていたことを聞きそびれました!
コメント欄で「新しいコメントが古いものより上」に来ますよね?
これを逆に(つまり下に)出来ないでしょうか??
Posted by tougo at 2006.08.11 23:46 | 編集
ありがとうございました。
出来ました~~~♪
Posted by noodles at 2006.08.17 19:13 | 編集
こんばんは。

>>tougoさん
すみません。追記見逃してました。[汗2]

> これを逆に(つまり下に)出来ないでしょうか??
管理画面の「環境設定の変更」から「ブログの設定」にアクセスして、「コメントの設定」にある「コメントの表示の方法」の項目を「古い順」から「新しい順」に変えるといけるんじゃないでしょうか。
試した事ないのでできるかどうかはわかりませんが。
Posted by cie at 2006.08.18 00:51 | 編集
すみません!そういえばそんな箇所ありました!
テンプレ制作者様にわざわざ聞くことではなかったですね…。
申し訳ない。。
Posted by tougo at 2006.08.18 20:11 | 編集
初めまして。
テンプレートをお借りいたしました。

さらに、背景画像と、文字サイズを変更して使用しております。

なにか不具合等ございましたら、お知らせください。

Posted by KANA at 2006.10.09 07:08 | 編集
はじめまして。
シンプルで上品なデザインが素敵なのでお借りしました。

サイドメニューのそれぞれのタイトルの文字を
少し小さくしたいのですが
sidemenu settingsのなかを見てもフォントサイズ指定がどこなのか・・・。
どこで、文字サイズを指定しているのでしょうか。

それと
エントリータイトルの矢印をはずしたいのですが
それもよくわからなくて

お手数おかけしますが、宜しくお願いします。
Posted by yamaguchi at 2008.04.07 23:43 | 編集
このコメントは管理者の承認待ちです
Posted by at 2010.06.10 21:26 | 編集
このコメントは管理者の承認待ちです
Posted by at 2014.05.31 05:55 | 編集
このコメントは管理者の承認待ちです
Posted by at 2014.05.31 07:10 | 編集
この記事へコメントする

ご利用のブラウザ、設定ではご利用になれません。
  コメントが反映されない現象が起こっているようですので お手数ですが「書込」ボタンを押される前に本文を全てコピーしておいて下さい。
書き込み後はコメントが反映されているかどうか確認をお願い致します。