fc2ブログ

共有テンプレート第七作「Clear_Glass_Seconds」審査合格

Clear_Glass_Seconds

今回はFC2共有テンプレート第七作目となる「Clear_Glass_Seconds」が
無事にFC2の審査を通り共有開始となりました。

今回のテーマは綺麗なガラスと見やすい文章と言うことで、「綺麗」と「実用性」を
兼ね備えた作品となりました。

それではテンプレートの概要は続きからどうぞ
【はじめに】

まず初めに、当サイトを訪問&共有テンプレート「Clear_Glass_Seconds」を
ダウンロードしていただき、誠にありがとうございます。




【利用規約】

この共有テンプレートを使用していただく規約は次のようになっております。

アフィリエイト:使用OK

アダルトサイト:不可

素材の二時配布:不可

二次転載:不可

カスタマイズ後の著作権記述者部分変更(カスタマイズはOK):不可




【プレビュー】

Clear_Glass_Seconds」をお試し表示する




【ダウンロードURL】

ダウンロードURL:?share=27140&index&mob=0
共有テンプレートナンバー:27140

*ダウンロードに関しわからない場合はお気軽にコメントから相談していただければ幸いです。




【共有テンプレート名】


【Clear_Glass_Seconds
Clear_Glass_Seconds

カラム構造:2カラム

全体部分(幅):900px(ピクセル)

ヘッダー部分(幅):900px

ヘッダー部分(縦):180px

センター部分:640px

センター文字表記部分::600px

ライト部分(幅):250px

フッター部分(幅):900px




【更新服歴】

2009年3月27日:22:17分
コメント欄で最初の数秒間のあいだだけ(読み込み中)背景画像が表示される仕様を改善
コメントにアクセスしてもしっかりと白背景が表示されるように修正致しました。




【後書き~説明~】

今作品のテンプレートは綺麗なガラスということをテーマにトップ部分には綺麗なガラスの雰囲気を出して、
背景画像なども固定して表示させていただきました。ちなみに画面解像度による表示の違いや
各ブラウザでの表示の違いなどにも対応済みです。

メニュー部分はいくらリストを増やしても表示が崩れないようにして、
デザインに調和がとれるようにしました。

全体的には「綺麗」に「見やすく」ということをテーマにしており、文章部分も誰にでも見やすい
フォントと文字の大きさをとなっており、Webページ独特のあのギザギザな文章が無く
ストレス無く回覧することが出来ます。

なので、ブログの回覧者の多くが感じている「ブログの文章は読みにくい」や
「文字が小さくて目が悪い人にとってはとても見えにくい」などの弱点を克服する
作品となったと思います。

他にもカスタマイズ性なども考慮しており、利用者は様々なカスタマイズを
しやすい構造となっています。

目指したテンプレートはシンプルかつ使いやすくということで、今回も目標通り
作成することが出来たのではないかな~と思っています。


それにしても・・・恐らく共有開始になったのが今日だとは思いますが、
既に200人・・・っと・・・いつの間にか250人超えていますね。

制作させていただいた自分でもびっくりです^^;

自分の制作させていただいたテンプレートに人気が出るのは本当に喜ばしく光栄なことです。
ダウンロードしてくれた皆さん本当にありがとうございました。




【制作秘話】

今回なんだかんだで第七作目・・・プラグインや携帯用のテンプレートや
FC2の共有プラグインと合わせるとかれこれ11作目となるテンプレートになりますが、
(ちなみに、携帯用のテンプレートやFC2共有プラグインなどは下の関連記事や
管理人の制作物を参照)

未だにあの審査前のドキドキ感は未だに感じている今日この頃です^^;

本当に何回申請させていただいても、審査→合格発表までの
緊張感にはなかなか慣れないものですね~^^;

それでは当サイトを訪問してくれた方、並びにダウンロードしてくれた方へ

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

今回の作品は自分の中では一区切りとなる作品でしたので、本当に喜ばしいことです。
機会があれば今度はDTDなどの本格的なHTML・CSSを学んでみたいな~と思っています。

それでは、今後ともSun Eternity & 管理人の暗黒の鬼神共々よろしくお願い致します。


*当テンプレートと関連性のないカスタマイズの質問はご遠慮ください



関連記事:
FC2共有テンプレート第一作「The-truth-Sky-Bblu」審査合格
FC2共有テンプレート第二作「Truth-AnotherVer」審査合格
FC2共有テンプレート第三作「Nature_Mystery_2culm」審査合格
FC2共有テンプレート第四作「Truth_Flare_Fire」審査合格
FC2共有テンプレート第五作「White_Blue_Nature」審査合格
FC2共有テンプレート第六作「Black_Clear_Clean」審査合格
FC2共有テンプレート第七作「Clear_Glass_Seconds」審査合格
FC2共有テンプレート第八作「Nature_Mystery_3C」審査合格
FC2携帯用共有テンプレート第一作「Mobile_Truth_Blue」審査合格
FC2共有テンプレート制作者の心得
英語や韓国など計8カ国の言語に対応させる翻訳プラグイン「World-Word-翻訳」
キラキラ画像が降ってくるJavaScript製FC2共有プラグイン「PikaPika_Atlantis」
コメント

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

No title

上梓 おめでとうございます。
 素晴らしい作品です。
びっくりするほどきれいです透明感ありますし、
読みやすそうです。
それに軽い感じがします。

Linkus と Categoryは、カスタマイズされるかた
用のスロットなのですね。 
クリックしても反応がないです。

お借りします

使わせていただきます。
かっこいいデザインなのに見やすいので、重宝してます。
できれば、2カラムを右にさらに一つ増やした3カラムにカスタマイズしたいのですが、方法を教えていただけませんか?
http://ninny0102.blog23.fc2.com/

No title

とっても綺麗で使いやすそうだと思い、今日から使わせてもらっています。
以前書いたブログ記事をみたところ改行部分がおかしくなってしまっているところがあり、文字間をもう少し狭くするか文字サイズを少し小さめにしたいと思っているのですが、カスタマイズ可能なのでしょうか?
初心者な質問で申し訳ありません。

No title

カッコイイですね!翼のイメージでしょうか。
何とも言えない透明感ですし、背景のfixもグーです^^

どうも^^

>いのさん

ありがとうございます^^

今回のテンプレートは少し画像が多めなのですが、画像自体にWeb上で素早く回覧できるように、画像自体に処理を施しているので、自分の環境ではキャッシュなしの状態で2~3秒といった比較的早めの環境を実現することが出来ました。

>Links と Categoryはカスタマイズされるかた
用のスロットなのですね。クリックしても反応がないです。

はい、アンカー部分の「href="#"」は効果自体は「ページの先頭に移動する」という効果を持っていますので、よくアンカー属性のhrefの値の代用として使用されています。

それと、アンカータグのよくある注意点などはDTDなどにも書かれていますが、<a name="idou">などのnameを使用する場合にも必ず<a name="idou"></a>とタグを閉じる必要がある・・・という部分などですかね・・・DTDの勧告文章によると

<!ENTITY % A.content "(%heading|%text)*">
<!ELEMENT A - - %A.content -(A)>
<!ATTLIST A
HREF CDATA #IMPLIED
NAME CDATA #IMPLIED
%linkExtraAttributes;
%SDAPREF; "<Anchor: #AttList>"
>
と書かれているところを見ると、
(ここで注目するのは<!ELEMENT A - - %A.content -(A)>です)

!ELEMENT A - - の「- -」とは簡単に説明すると
左が開始タグを・・・右が終了タグをあらわしています。

この「-」の意味はタグの省略不可という意味を表していますので、この場合は<a>(アンカータグ)の場合は開始タグも終了タグも省略できない・・・という意味ですね。よく上記のような<a>を閉じない使い方をしている人を見かけますので少しは気にとめておくと良いかもしれません。

あっ、ちなみにですが上記のメニュー部分は多くなると二段になるように表示の崩れないようにさせていただいていますので、事実上<li><a href="#">新しいよ</a></li>という感じに追加するだけで、いくらでもメニューを増やすことが可能となっていますよ。^^

それにしてもDTDなどの文章は読んでいくと、自分のHTMLの知識がいかにゆるい認識なのかを思い知らされますね・・・

今まで知らなかったタグの正式な使い方がよくわかります・・・
う~ん・・・参考になるものですね・・・


>ninny0102さん

コメントありがとうございます。

>できれば、2カラムを右にさらに一つ増やした3カラムにカスタマイズしたいのですが、方法を教えていただけませんか?

前回のテンプレートの時でもそうでしたが、大変多くの方に絡む違いのテンプレートをご希望いただけていることに制作者としては、とても嬉しく光栄に思います^^

ただ・・・2カラムを3カラムにするとなると多少の
HTMLとCSSの知識が必要となってきます。

自分のCSSの記述法はfloatによる3カラムや2カラムのデザインを作成させていただいています。

実際にこれを実現するには下記のサイトに書かれていることと同じ事をする必要がありますね。
ttp://www.geocities.jp/multi_column/practice/3column1.html

もし、HTMLとCSSの基本知識がない場合などは自分が一番初めの頃に学ばせていただいたHTMLとCSSの入門サイトがありますので、そちらを参考にしてみて下さい。

HTML
ttp://park16.wakwak.com/~html-css/hp_koza/koza_top.html

CSS
ttp://park16.wakwak.com/~html-css/css/index.html

他にも自分が今回の3カラムテンプレート自体を
作成することも出来ますが、何分今は管理人の時間の都合がとれない場合が多い多忙な時期のため、3カラムを作成&配布になるのは少し時間がかかってしまいます。

それでは、今後とも当サイトを宜しくお願い致します。



>ffさん

コメントありがとうございます。

>以前書いたブログ記事をみたところ改行部分がおかしくなってしまっているところがあり、文字間をもう少し狭くするか文字サイズを少し小さめにしたいと思っているのですが、カスタマイズ可能なのでしょうか?

はい、カスタマイズは可能ですよ。
文字サイズのカスタマイズ方法はCSS部分の

/*センターの文字(続きを読む)*/
.centermore {
margin: 0px;
font-size: 95%;
padding:12px 10px 30px 12px;
line-height : 1.6;
color: #444444;
}

/*センターの中の文字*/
.centermozi {
color : #444444;/* 文字の色 */
line-height : 1.6; /* 行間 */
font-size : 95%;/* 文字サイズ */
margin: 0px;
padding: 12px 10px 7px 12px; /*文字の位置*/
}

という記述部分の「font-size: 95%;」の部分の値を変更すれば記事内部の文字のサイズも変更することが出来ますよ。

ちなみに、「.centermore」が記事の追記部分の文字に対しての設定で「.centermozi」が記事の追記前・・・の本文となっています。「追記前」と「追記後」の二つの部分を簡単にカスタマイズできるようになっています。

文字間に関しても、上記記述の部分に「letter-spacing: -1px;」を追記すれば文字間(横)のを調整できるようになっています。
(値は-で縮まります)

逆に上記記述部分の「line-height : 1.6;」の「1.6」の値を変更すれば今度は文字間上下の幅などもカスタマイズすることができますよ。

それでは、上記の件ffさんの参考になれば幸いです。


>パペポさん

>カッコイイですね!翼のイメージでしょうか。
何とも言えない透明感ですし、背景のfixもグーです^^

ありがとうございます^^

イメージとしては綺麗なガラスのイメージですね。確かにツバサのイメージも出ていますね・・・なんとなく神秘的な感じがします・・・
登録申請させていただくときのジャンルは「見た目重視」と「実用性重視」があったので、どちらを選ぼうか迷いましたが、結局「実用性重視」とさせていただきました。

背景のfixedは、ブラウザ間の環境などによって最初表示の差違がでてしまったので、少し焦りましたが、無事にどのような環境でもしっかりと表示ができるようになりました。

他にも画面解像度による表示の違いなどに関しては画像自体をリピートさせて問題の無いように加工させていただくことにより改善することが出来ました。

それではパペポさんご感想ありがとうございました。
今後とも宜しくお願い致します。

というより

あの・・・確認しましたけど,こちらのテンプレートがまた週間DLランキングのトップになっていますよ?

本当にいったい何回トップとるんですかw(良い意味で

ダウンロード数が途中で途切れているところを見るとDL数リセットによるしり切れ状態だとは思いますけど,そんな中でもトップDL数ですか・・・(^o^)

証拠の画像をとりましたけどよかったら後でメールで送っておきますね

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

No title

すっきりした美しさに惹かれました。
お借りさせて頂きます。

ありがとうございます

>P O N Y Oさん

>あの・・・確認しましたけど,こちらのテンプレートがまた週間DLランキングのトップになっていますよ?

確認しましたけど、なんだかまたDL数がリセットされたようですね^^;
もう、週間じゃないような気がします・・・^^;
本当に一体どういう統計になっているんでしょうか・・・^^;

>ダウンロード数が途中で途切れているところを見るとDL数リセットによるしり切れ状態だとは思いますけど,そんな中でもトップDL数ですか・・・(^o^)

ありがとうございます^^
そういっていただけて大変嬉しいです。DL数は途中の尻切れによる順位降下だとは思いますが、個人的にはそんなDLカウント数半分のハンデを持っていたとしても、堂々と・・・と1位になりたいものですね。そのためには日々精進しかないと思っています^^;

>証拠の画像をとりましたけどよかったら後でメールで送っておきますね

画像の件ですがありがとうございます^^
正直証拠の画像を見るまでは少し半信半疑でしたが、1位というのは本当なようですね。大変光栄なことです。ありがとうございます。


>そうてん

>すっきりした美しさに惹かれました。
お借りさせて頂きます。

個人的にはすっきりと綺麗で読みやすいイメージを目指しましたので、そういっていただけて幸いです。ありがとうございます^^

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

本当に・・・

>非公開コメントの方

自分もチェックさせていただきましたが、もし本当にテンプレートを一回も手をつけていないというのでしたら、最も多い要因が

1、記事本文分のタグの使い方が適切ではない
(<div>などのHTMLタグの閉じ忘れなど)

2、プラグイン部分のタグの記述が間違っている(プラグインを使用していないようですので、これは除外です)

などが考えられますね。
FC2の基本仕様解説ページにも書いてありますが、
ttp://fc2blogmanual.blog60.fc2.com/blog-entry-160.html

日付を有効にする変数は
<%topentry_year> 年を表示
<%topentry_month> 月を表示
<%topentry_day> 日を表示
<%topentry_hour> 時を表示
<%topentry_minute> 分を表示
<%topentry_second> 秒を表示

となっています。

これを記事中にて表示させることが出来ない場合はFC2ブログのサーバー間のトラブルという可能性もありますね。

No title

綺麗なので使わせてもらっています。

質問ですが、TOP画像のところにあるメニューを、画像の中心辺りに持っていくことはできますか?

No title

>nozidさん

コメントありがとうございます。

>質問ですが、TOP画像のところにあるメニューを、画像の中心辺りに持っていくことはできますか?

TOP画像のメニューを画像の中心辺りに移動するには、HTMLテンプレートフォームの下記部分を下にある</div>で包む必要があります。具体的には

<div id="gaiyou"><%introduction></div>
</div>

<!--ナビゲーション部分~自由に編集してください~-->
<div class="navinavi">
<ul id="navinavi">
<li><a href="<%url>">HOME</a></li>
<li><a href="<%url>?all">Sitemap</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Category</a></li>
<li><a href="<%prev_month_link>">Prev Month</a></li>
<li><a href="<%next_month_link>">Next Month</a></li>
<li><a href="#">Sample</a></li>
<li><a href="#">Sample</a></li>
</ul>
</div>

と、なっている部分を

<div id="gaiyou"><%introduction></div>

<!--ナビゲーション部分~自由に編集してください~-->
<div class="navinavi">
<ul id="navinavi">
<li><a href="<%url>">HOME</a></li>
<li><a href="<%url>?all">Sitemap</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Category</a></li>
<li><a href="<%prev_month_link>">Prev Month</a></li>
<li><a href="<%next_month_link>">Next Month</a></li>
<li><a href="#">Sample</a></li>
<li><a href="#">Sample</a></li>
</ul>
</div>
</div>

というようにします。
その後に、CSSのnavi部分の位置を調節する必要があります。


上記の手順ではなく、TOP画像の大きさのみ調整したい場合はCSSの

/*トップヘッダー*/
#my_header{width:100%; height:180px;
background-image: url("http://blog-imgs-19.fc2.com/a/n/n/annkokunokizinn/Glasstopheder.jpg");
background-color:#f1ffff;
background-position: left top;
background-repeat: no-repeat;
}

の部分のheight:180pxの値を調整するとTOP画像の表示される大きさを調整することが出来ます。

それでは、上記の件nozidさんの参考に鳴れば幸いです。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
コメントの投稿
管理者にだけ表示を許可する

トラックバックURL

Blog カスタマイズ

やぁ(´・ω・`) リニューアルして、テンプレート変えてみました。。。 お借りしたテンプレートは暗黒の鬼神さんのClear_Glass_Secondsです。 本当...