| テンプレート講座第十一回 |
|
◆ テンプレート講座 ◆ Comment 0 ◆ Trackback 0 ◆ edit.
都合により、テンプレートで使用したままと言う訳にもいかず省略した部分が有りますが基本を理解するには簡単な方が良いでしょう。
<script type="text/javascript">
<!--
function showhide(id){
if(document.getElementById){
if(document.getElementById(id).style.display == "block"){
document.getElementById(id).style.display = "none";
}else{
document.getElementById("sub1").style.display = "none";
document.getElementById("sub2").style.display = "none";
document.getElementById(id).style.display = "block";
}
}
}
//-->
</script>
ちょっとスクリプトをいじった事が無い人には何が書かれているか判りませんが、簡略に説明すると「クリックしてスクリプトを呼び出し受け渡されたID名のスタイル属性displayが" "なら"none"を設定し直す。"none"なら" "に設定する、それ以外の設定されたID名の属性は全て"none"に変更」と言うスクリプトです。
スタイルシート属性の「display: none"」が「表示しない」と言う意味だという事を理解して下さい。
これが設定されたブロック(divでもPでもulでも構いません)にID名を設定してstyle="display: none"を追加する事で、初期状態は「非表示」になる訳です。(ソース上は読み込まれてますが、ブラウザには表示されないという事)
更にこのスクリプトは、項目数を増やす事も可能な為、色々な事に使えます。(ハンバーグでは記事自体に使用しました。)
これを1セットとして考えsub1の名前が重複しないように増やしていけば良い訳です。(それに準じてクリックする項目も増やします。)document.getElementById("sub1").style.display = "none";
次は、ブロックやパーツを開閉する為のHTMLタグを説明しましょう。
取りあえず、以下のタグを眺めて見て下さい。
<div>
<a href="JavaScript:showhide('sub1')" title="項目1">項目1</a><br />
<a href="JavaScript:showhide('sub2')" title="項目2">項目2</a>
</div>
<div id="sub1" style="display: none" onclick="showhide('sub1')">
ここに項目1で表示する内容を設定します。
</div>
<div id="sub2" style="display: none" onclick="showhide('sub2')">
ここに項目2で表示する内容を設定します。
</div>
ここで重要なのが、スクリプトを呼び出す方法です。
とリンク設定されているのが分かりますよね。<a href="JavaScript:showhide('sub1')" title="項目1">項目1</a>
この中で「sub1」と言うのが重要な意味を持ちます。
スクリプトにも既に「sub1」が設定されています。
(document.getElementById("sub1").style.display = "none";)
動作を説明すると、「項目1のリンクをクリックした時に、「sub1」と言うID名を持つブロックのスタイルシート属性(display)を調べ" "で有るなら"none"に変更し、"none"で有るなら" "に変更して表示・非表示を切り替える」という事です。
ここまでは、「一番簡単な折りたたみスクリプト」でも説明されてますので分かると思います。
ちょっと違うのは、FCafeさんのこのスクリプトは、いくつかの項目を全て開閉させるのではなく「個別に順次開閉」と言うスクリプトです。
つまりは、「他の項目を開くと開いていた別の項目は閉じる」と言う事で、同じエリアなどに別の項目をクリックすると表示される様な使い方がこのスクリプトの性質です。
今回、このスクリプトを使用し、更に開いた項目(ブロック)をわざわざボタンで閉じるのではなく、開いた項目(ブロック)で閉じよう!と言うカスタマイズです。
上のHTMLタグに《onclick="showhide('sub1')"》と言う見慣れないタグが書かれているのが判りますよね?
実は、これもスクリプトを呼び出す方法の一つです。(詳しくはTAG indexリファレンスサイトを参考にして下さい。)
スクリプトを呼び出し「sub1」と言うID名を渡す事でid="sub1"を付けられたブロックが開閉されると言う仕組みです。
ここでは開いた状態でonclickが使える訳ですから、《閉じる》に限定される事になります。
勿論、onclickを使わずに、<a href="JavaScript:showhide('sub1')" title="閉じる">閉じる</a>と言うリンクを作っても構わない訳です。
色々考えられますが、今回はブロックエリア自体を開閉に使用する方法と言う事で理解して頂ければ幸いです。
まぁ〜《onclick》を付けられるブロックが有ればそこをクリックする事で閉じる事が出来ると言う事ですね。
有る程度の知識を持っている方には、あまり参考にならない記事ですが、これから色々スクリプトもいじってみたいと思う方には参考になるかなと出来るだけ分かりやすく記事にしました。
くれぐれもこの記事は、開発者FCafeさんのお陰で色々楽しめる訳ですから、感謝こそすれご迷惑な事だけはしないで下さい。
「自分では作れないが、作れる技術を持っている方が、好意で使用させてくれている」と言う事を決して忘れないように。
ではまた。
Close.↑
| テンプレート講座第十回 |
|
◆ テンプレート講座 ◆ Comment 0 ◆ Trackback 0 ◆ edit.
使用するスクリプトは、当方で使っている一番簡単なスクリプトです。
共有登録しているodorikoを例に解説してみましょう。
<script type="text/javascript">
<!--
function dd(id){
if(document.all)OBJ = document.all(id).style; else if(document.getElementById)OBJ = document.getElementById(id).style; if(OBJ) OBJ.display=='none'?OBJ.display='':OBJ.display='none';
}
//--></script>
続いては、プラグインの設定に移る訳ですが、プラグインの開閉は、個別には出来ません。
カテゴリー別の開閉という事になります。
これは変数が個別ではなく、カテゴリーで分けられている為です。
まず基本となるプラグイン変数を使った設定を見てみましょう。
<!-- プラグインカテゴリー1の設定 -->
<!--plugin_first-->
<div class="menu_title">▽<%plugin_first_title></div>
<ul class="menu_ul" style="text-align:<%plugin_first_align>">
<li><%plugin_first_content></li>
</ul>
<!--/plugin_first-->
<!-- プラグインカテゴリー2の設定 -->
<!--plugin_second-->
<div class="menu_title">▽<%plugin_second_title></div>
<ul class="menu_ul" style="text-align:<%plugin_second_align>">
<li><%plugin_second_content></li>
</ul>
<!--/plugin_second-->
<!-- プラグインカテゴリー3の設定 -->
<!--plugin_third-->
<div class="menu_title">▽<%plugin_third_title></div>
<ul class="menu_ul" style="text-align:<%plugin_third_align>">
<li><%plugin_third_content></li>
</ul>
<!--/plugin_third-->
大体、テンプレートで実装されているプラグインの設定は同じ様な構成になっています。
(多少のタイトルデザインの違いは有りますが、基本は同じです。)
ここでスクリプトを使う為に、設定する訳ですが、通常はタイトルをクリックする事で開閉するようにしています。
<div id="menu_open"><a href="javascript:void(0)" onclick="dd('menu_column')">▽Plugin Menu.</a></div>
<div id="menu_column" style="display: none;">
この部分が開閉したいプラグインパーツなどが入ります。
</div>
上の設定は、プラグインメニュー全てを開閉する設定にしていますが、基本は同じで、タイトル部分のonclick="dd('menu_column')に内容部分のブロックタグにID名を付けその名前を(’プラグインブロックID名’)と言うように設定する事で開閉させている訳です。
更に、<div id="menu_column" style="display: none;">のブロックタグにスタイル属性を加えています。
style="display: none;
display: noneとする事で、初期設定は閉じた状態です。
これをstyle="display: ;と言うようにnoneを削除する事で、初期設定は開いた状態になります。
これらを基本として、実際にプラグインカテゴリーを設定してみましょう。
<!-- プラグインカテゴリー1の設定 -->
<!--plugin_first-->
<div class="menu_title">▽<%plugin_first_title></div>
<ul class="menu_ul" style="text-align:<%plugin_first_align>">
<li><%plugin_first_content></li>
</ul>
<!--/plugin_first-->
上記のタグは、プラグインカテゴリー1のスクリプト設定追加前の状態です。
<!-- プラグインカテゴリー1の設定 -->
<!--plugin_first-->
<div class="menu_title"><a href="javascript:void(0)" onclick="dd('<%plugin_first_title>')">▽<%plugin_first_title></a></div>
<ul id="<%plugin_first_title>" class="menu_ul" style="display: none;text-align:<%plugin_first_align>">
<li><%plugin_first_content></li>
</ul>
<!--/plugin_first-->
ここの中で赤文字で書かれた部分がスクリプト用に追加された部分です。
タイトル部分に、スクリプトを読み込むリンクタグを追加しているのが判りますね。
ここでonclick="dd('')"の部分に注意して下さい。
始めに説明した部分では、menu_columnの様に内容部分を囲っているタグに付けたID名が書かれていますがプラグインではカテゴリーにいくつかのパーツを追加する為、パーツの名前の変数を使用しています。
<%plugin_first_title>と言う変数は、パーツ毎のタイトルを読み込むFC2テンプレートの変数です。
ここではこの変数を使ってパーツ毎に開閉スクリプトを使用出来るようにしています。
(同じ名前のタイトルを付けるとエラーとなりますので注意して下さい。)
次にパーツの内容部分を囲っている<ul>タグにもID名が追加されています。
ここでもタイトル部分で使った、変数を使用しています。(onclick=の名前とID名は同じ名前でなければ動作しない事は理解してますよね?)
最後に、<ul>タグにスタイル属性を追加しています。(style="display: none;を追加しています)
このスタイル属性は、《非表示》と言うスタイル属性です。
ですから、初期状態で《非表示》にする場合は、style=display: none;
初期状態で《表示》にしたい場合は、style="display: ;
と言うように、noneを削除する事で《表示》させる事が出来る訳です。
使用している開閉スクリプトは、この属性を、display: none;で有った場合はdisplay: ;に変更し、display: ;で有った場合は、display: none;に変更する作りになっています。
ここまで理解出来れば、他のプラグインカテゴリー2やカテゴリー3に付いても同じように設定出来ますね。
<!-- プラグインカテゴリー1の設定 -->
<!--plugin_first-->
<div class="menu_title"><a href="javascript:void(0)" onclick="dd('<%plugin_first_title>')">▽<%plugin_first_title></a></div>
<ul id="<%plugin_first_title>" class="menu_ul" style="display: none;text-align:<%plugin_first_align>">
<li><%plugin_first_content></li>
</ul>
<!--/plugin_first-->
<!-- プラグインカテゴリー2の設定 -->
<!--plugin_second-->
<div class="menu_title"><a href="javascript:void(0)" onclick="dd('<%plugin_second_title>')">▽<%plugin_second_title></a></div>
<ul id="<%plugin_second_title>" class="menu_ul" style="display: none;text-align:<%plugin_second_align>">
<li><%plugin_second_content></li>
</ul>
<!--/plugin_second-->
<!-- プラグインカテゴリー3の設定 -->
<!--plugin_third-->
<div class="menu_title"><a href="javascript:void(0)" onclick="dd('<%plugin_third_title>')">▽<%plugin_third_title></a></div>
<ul id="<%plugin_third_title>" class="menu_ul" style="display: none;text-align:<%plugin_third_align>">
<li><%plugin_third_content></li>
</ul>
<!--/plugin_third-->
後は、カテゴリー毎に初期設定をどうするか考えてカスタマイズすれば良い訳です。
(ちなみに上のHTMLは共有テンプレートに登録しているodorikoを使っています。)
それと、odorikoでは、プラグインカテゴリー全てを開閉させて居ますが、これも同じようにカスタマイズすれば、メインのプラグイン全てを開閉させ、個別のカテゴリーでも開閉させる事が出来るようになります。
一応参考までに私なりにカスタマイズしたHTMLを掲載しておきますので参考にしてみて下さい。
<div id="menu">
<div id="menu_open"><a href="javascript:void(0)" onclick="dd('menu_column')">▽Plugin Menu.</a></div>
<div id="menu_column" style="display: ;">
<!--plugin-->
<!-- プラグインカテゴリー1の設定 -->
<!--plugin_first-->
<div class="menu_title"><a href="javascript:void(0)" onclick="dd('<%plugin_first_title>')">▽<%plugin_first_title></a></div>
<ul id="<%plugin_first_title>" class="menu_ul" style="display: none;text-align:<%plugin_first_align>">
<li><%plugin_first_content></li>
</ul>
<!--/plugin_first-->
<!-- プラグインカテゴリー2の設定 -->
<!--plugin_second-->
<div class="menu_title"><a href="javascript:void(0)" onclick="dd('<%plugin_second_title>')">▽<%plugin_second_title></a></div>
<ul id="<%plugin_second_title>" class="menu_ul" style="display: none;text-align:<%plugin_second_align>">
<li><%plugin_second_content></li>
</ul>
<!--/plugin_second-->
<!-- プラグインカテゴリー3の設定 -->
<!--plugin_third-->
<div class="menu_title"><a href="javascript:void(0)" onclick="dd('<%plugin_third_title>')">▽<%plugin_third_title></a></div>
<ul id="<%plugin_third_title>" class="menu_ul" style="display: none;text-align:<%plugin_third_align>">
<li><%plugin_third_content></li>
</ul>
<!--/plugin_third-->
<!--/plugin-->
</div>
</div>
以上が開閉スクリプトの改造例ですが、希にプラグインパーツにスクリプトなどが使われている場合、作動しない場合が有りますが、その際はスクリプトの変更が必要になります。
しかし私の技量では全てのスクリプトに対応させる事は、不可能でありその場合は、開閉スクリプトを諦めるか、ブログパーツの使用を断念するかになりますのでご自身の判断でお使い下さい。
Close.↑
| テンプレート講座第九回 |
|
◆ テンプレート講座 ◆ Comment 1 ◆ Trackback 0 ◆ edit.
と言うのがFC2ブログの良さでも有るんですが、まずはその仕組みから説明しましょう。(分かっている方は読み飛ばしてちょ!)共有テンプレートは、プレビューして気に入ったテンプレートをボタン一つで追加出来る。
共有テンプレートを登録する場合、自分で組んだHTML文書とスタイルシートを用意して登録する訳ですが、皆さんがダウンロードしてカスタマイズしたテンプレートも登録しようと思えば出来ることは知っていますよね。(常識な判断でしませんが)
登録すると言うのは、別に複雑な事ではなく、FC2で用意されたテンプレート専用のフォルダーにHTML文書とスタイルシートの文書がファイルとして保存されると言う事です。
登録する側から見ても一々作者の所でファイルを作る必要も無いので多くの方がこのシステムを利用してFC2の目玉と成っています。
只、数多くのテンプレートを登録すると、制作者はその更新作業などが大変に成ってきます。
本来はもっと詳しい情報などを伝えたくてもコメント欄は文字数が制限されていますので伝えきれない部分も生まれます。
作者さんの中には、テンプレート専用のブログを用意して共有テンプレートの記事を書くことで詳しい情報を伝える手段として居る方もいます。
しかしこれも又ある程度の労力が必要であり、私の様に「ブログ一つでも大変なのよ」って方には向きません。
と言うより、私はテンプレートを中心にブログを運営しているつもりもなく
「一つの趣味」として制作している訳です。
それに、コメントを残してくれる方々も「借ります」だけでは「どんな所を気に入って使ってくれているのかな?」と、言う制作者側が一番ほしい情報が無い訳です。
そこで「自分のブログでファイルをダウンロードして貰う、
ついでに他の記事も見てね!」と思う訳ですよ。w
まぁ〜自分の事はこの辺にして、それじゃそのファイルの使い方を説明したいと思います。
テンプレートを使う場合、HTML文書とスタイルシートの二つが必要だと言うことは始めに書きましたね。
私の所では、それぞれのテンプレート紹介記事にファイルへのリンクを載せています。
の様にテンプレート名の最後にhtml.txt css.txt と書かれています。
このファイルは只のテキストファイル(メモ帳などで書いたファイルと同じもの)です。
本来なら、クリック一つで登録も出来ると良いのですが、システムに関わることなのでご容赦を。
ここで注意が必要に成るのですが、確かにファイルはテキストファイルなのですが
ブラウザはファイルに書かれている内容を自動的に判断して表示しています。
ですから、クリックしてみると、html.txt の方は「なんだか良くわかんない状態」で表示されてしまいます。
ここでファイルをリンクしているのはあくまで「ファイルを保存」して貰うためだと言うことを理解して下さい。
保存方法は、リンクの上で右クリックをするとメニューが表示されます。
そのメニューに「対象をファイルに保存(A)」が有りますので適当な所に二つのファイルを保存します。
それではテンプレートの登録作業を始めましょう。
まず、管理者ページの「テンプレートの設定」を開きます。
そうすると、DLしたテンプレートが並んでいると思いますが、ここで要らないテンプレート(無い場合は公式からでも適当にDLします。)
この使わないテンプレートの「修正」をクリックすると、「テンプレートの編集」画面が出てきます。
下の所に「HTMLの編集 ○○○を編集しています。」と言う所にテキストフィールド(フォームのコメント欄みたいな所)があります。
先ほどダウンロードした、glim_design_blue-html.txt と言うファイルをメモ帳などで開いて下さい。
文字化けなどをしていないか確認したら「全てを選択」してコピー。
それをHTMLの編集テキストフィールドの中身と入れ替えます。
(一度、要らないテンプレートの内容を消して貼り付けた方が良いですね)
次に、「スタイルシートの編集 ○○○を編集しています。」と言う所が下の段に有ります。
そこに書かれているものを削除して、先ほどダウンロードした
glim_design_blue-css.txt ファイルをメモ帳などで開きます。
ここでも「全てを選択」してコピー。
コピーしたら「スタイルシートの編集」の所に貼り付けます。
この作業が終わったら「更新」ボタンを押して設定を反映させます。
(この際、テンプレートの名前も変えておきます{半角英字のみ})
これで作業は終わりですのでプレビューしてみて下さい。
無事、デザインが変わっていたら成功です。
他の作者さんでもスタイルシートのみをブログで公開している方も居ますのでこの作業の流れを覚えておくと役立つでしょう。
初心者の方は「何かあったらどうしよう」と、不安に思うかも知れませんがテンプレート作業でブログの記事が消えたり不具合を生じる事は有りませんのでご安心を。
それにファイルをダウンロードしていますので、バックアップしているのと同じですから何度でもチャレンジ出来ますね。
この方法は「気に入ったテンプレートをバックアップ」する事にも繋がります。
そう言った時の為にもこれらの作業を覚え、バックアップをお勧めします。共有登録している作者さんがいつまでもFC2ブログを使い続けるとは限りません。
尚、画像などもスタイルシートにアドレスが書かれていますのでそのアドレスを直接、ブラウザで呼び出し保存しておくと、作者さんが居なく成ってもそのまま使い続けられます。
本来は、画像などもテンプレートと一緒に自分のサーバーに保存出来れば良いのですが残念ながらFC2ではこのシステムを使ってません。
出来れば始めから画像を自分の所にアップしてスタイルシートの編集まで行えば安心なんですがそれは、ご自身のスキルに合わせて行いましょう。
最後に、共有テンプレートに登録すると言うことは、FC2ブロガーなら誰でも使えると言うことですが著作権はその制作者さんにあり、使用者には無い事を理解して下さい。
無断で画像を流用したり、著作権表示を消したりしてもHTMLやスタイルシートをカスタマイズしたから自分のもの。
こういった考えを持つ方は、最低限のモラルをもてないネット落第者で有ると言うことを心がけて楽しくテンプレートを使いましょう。
Close.↑
| テンプレート講座第八回 |
|
◆ テンプレート講座 ◆ Comment 3 ◆ Trackback 0 ◆ edit.
まず必要なもの。
1,Terapad(じゃなくても良いですが、置換機能と文字コードに対応したモノ)
2,色見本(私の所に有るものでも参考に)
3,カスタマイズするためのテンプレート使用時のページ。
こんな感じでしょうか。
では詳しく見ていきましょう。
ここでタグやスタイルシートの属性がよく分からないと言う方は「TAG index-スタイルシート - ホームページ制作情報」と言うとても親切な解説ページが有りますのでそれを見ながら作業をします。
しかしここで忘れてならないのが、カスタマイズしようとするテンプレートです。
これは一度、自分のブログをカスタマイズするために適用して下さい。
適用したら必要なページ(トップページ、記事一覧ページ、個別記事ページ、フォームページなど)
これらの「ソース」が必要ですので《右クリック→ソースの表示》でメモ帳が開きソースが表示されますのでそれを《すべて選択》でコピーして下さい。
次にそのコピーしたソースをtop.htmlなどと言う名前のテキストファイルを作りそこへペースとします。
これを各ページ事にファイルを作り、スタイルシートのアドレス部分が有りますのでそれを《./style.css》と変更します。
ついでにFC2のブログは<meta http-equiv="content-type" content="text/html; charset=euc-jp">と言う文字設定がされてますのでこの部分も削除して下さい。
このままでも良いのですが、パソコンに保存したHTMLファイルはshift-jisで読み込まれるため文字化けが生じます。
それを回避するためにこの部分を削除する訳です。
これで一応、下準備は終わりました。
次は、HTMLファイル(各ページ)と同じフォルダに《style.css》と言うファイルを用意します。
このファイルも只のテキストファイルなので《右クリック→新規作成→テキストドキュメント》で「新規テキスト ドキュメント.txt」と言うファイルが出来ますのでそれを《style.css》と言うファイル名に変更するだけです。
それではこのstyle.cssをTerapadなどで開いてみましょう。
勿論、何も書かれてません(笑)
ここにFC2ブログの管理画面→テンプレートの設定でスタイルシート部分をすぺて選択してコピーし、それを開いたstyle.cssに貼り付けます。
まぁ〜本来は普通にメモ帳でスタイルシートを作っても良いのですが、文字コードが違うと文字化けする事も有りますので《文字コード対応》のテキストエディタを使う事を心がけて下さい。
ちなみに多少の編集で一々Terapadを開くのも面倒なので、そう言った作業の場合は、AreaEditorをインストールしておくと便利です。
これは管理画面などのフォームをテキストエディタで開けるようにするツールです。
管理画面のスタイルシートが書かれている部分で《右クリック→メモ帳で編集》を選ぶとメモ帳が起動しますのでそれで編集しても良いでしょう。(意外と知らない方も居ます)
あの小さなフォームで文字を打つよりメモ帳で開いて編集の方が作業しやすいです。
編集が終わったら必ず《上書き保存》を行って下さい。
そうしないと、編集が反映されませんので。
後は、スタイルシートの編集作業になる訳ですが、「テンプレート講座第六回 」で述べたように基本となる属性の名前は英語なので有る程度分かるでしょう。
細かい設定法などは、「TAG index-スタイルシート - ホームページ制作情報」に詳しく解説されてますのでその使い方を真似して変更していきます。
ただ、慣れていないと「どこを直したらいいの?」と、戸惑う事も有りますのでそう言った時は、最初の保存したページ(トップページや記事ページ)を開き、自分が変更したい部分の文字などを覚えておいて、ソースを開きその部分を探します。
始めは慣れないでしょうが、そのうちに慣れてそれほど苦にはならなくなります。
変更したい部分を見つけたらそこのタグにID="○●”とかclass="○○”などと書かれた所が有りますので、同じ名前をスタイルシートの方で探して下さい。
つまりここで使われているID名やclass名がスタイルシートの変更場所で有るという事です。
「リンクや同じ様な文字色や色を変更したい」という場合は、テキストエディタの《置換機能》が役立ちます。
変更したい文字色設定を選択(#FFF000などを反転選択)しテキストエディタのメニューから《置換》を選ぶとダイアログが現れます。
そうするとすでに自分が選択した色が《検索する文字列》の中に入ってますね。
下のダイアログの《置換後の文字列》という部分に変更したい文字色を入れます。
後は、《連続置換》ボタンを押すと、次々に置換候補が出てきますので随時変更を行って行きます。
《すべて置換》でも良いのですが、変えたくない部分も変更されてしまいますので気をつけて下さい。
変換が終わったら《上書き保存》を行います。
これで新しいスタイルシートが適用出来ますので、開いてあったトップページや個別記事のHTMLを《更新》してみて下さい。
どうですか?変更されてますか?
スタイルシートの編集と言うのはこれが基本になります。
勿論、この方法は私自身が勝手に楽な方法として使って居るので自分に馴染む方法をすれば良いでしょう。
後、「どうしてもここだけ違うようにしたい」という場合は、自分で好きなclass名を使ってスタイルシートに設定しておきます。
勿論、HTMLファイルにも同じくclass名を追加します。
ここで確認作業を行い《自分が設定したとおりになっているか》を確認後、追加したclass名をFC2管理画面のテンプレート編集で実際にclass名を同じ場所に追加します。
(ただしこういった追加は、タグも理解していないと出来ませんし、テンプレートの構造次第ではHT|MLと違う構造をしていて理解出来ない場合はあまりお勧めしません。)
こういった作業の繰り返しで、自分なりのスタイルシートが出来上がったら最終的に、これを管理画面→スタイルシートの編集で《すべて入れ替え》を行います。
後は、本当に変更が出来ているか実際のブログで確かめてみる事です。
細かな編集が必要な所が出てきたらその時は、AreaEditorを使っている場合はメモ帳で開き再編集をします。
以上が私自身が行っているカスタマイズ及びテンプレート制作の方法です。
まぁ〜テンプレートに関しては、実際にタグでページを組んでデザインを終えてからFC2の変数に置き換える部分を考えながら組み立てていく訳です。
こうした作業も基本となるテンプレートなどが有ると意外と時間はかかりませんし画像などの入れ替えなどにも、一々自分のブログを見ながら確認していては面倒なので、画像ファイルのアドレスも《./画像ファイル》という風に変更して、同じフォルダに保存して組み立てています。
後は、スタイルシートの《./画像ファイル》を《http://bureaktim・・・/画像ファイル》と言うように《置換》してから管理画面で入れ替えてます。
この方が、バックアップも考えなくても良いと言うか、作業自体がバックアップも兼ねてますので意外と楽です。
後は、ある程度の所で一度適応させて、上手く行ったらそれを別のファイルに保存しておきます。
そしてまた続きをする訳です。
くれぐれも一度に行おうとしない。(転送作業の時、エラーが起きてせっかくの作業が水の泡とならないためにも)
と、こんな感じですね。
まぁ〜初心者のうちからこれをやれと言っても無理ですので、《編集はテキストエディタで》を心がける事から始めて下さい。
Close.↑
| テンプレート講座第七回 |
|
◆ テンプレート講座 ◆ Comment 0 ◆ Trackback 0 ◆ edit.
基本と言うか元ネタは「月日を英語表記に出来ないか?」と言うもので、これもまたdanielさんの作ったものだが、これを使って他の事は出来ないだろうかと考えてみた。
面白半分でテスト的にトップに今月の英語名を表示してみた。
そんな事をしていたら<%now_month>と言う変数を使う事でクラス属性の入れ替えが出来る訳だが。(すでにタイトルのボーダー線やカラー属性を曜日毎などに変更するものはここでも使っている。)
この考えを更に発展させて例えば、「月毎に背景画像やスタイルシート・コメント文を変える」など、<%now_month>を使う事で出来るのではと考えた。
これがフォーラムでの回答例である。<%archive_month> の部分を以下の様にします。(少々長くなります)
<span class="n p<%archive_month>1">January</span>
<span class="n p<%archive_month>2">February</span>
<span class="n p<%archive_month>3">March</span>
<span class="n p<%archive_month>4">April</span>
<span class="n p<%archive_month>5">May</span>
<span class="n p<%archive_month>6">June</span>
<span class="n p<%archive_month>7">July</span>
<span class="n p<%archive_month>8">August</span>
<span class="n p<%archive_month>9">September</span>
<span class="n p<%archive_month>10">October</span>
<span class="n p<%archive_month>11">November</span>
<span class="n p<%archive_month>12">December</span>
CSSに以下を追加します
.n {display:none}
.p011,.p022,.p033,.p044,.p055,.p066,
.p077,.p088,.p099,.p1010,.p1111,.p1212 {display:inline}
<%topentry_youbi> の部分を以下の様にします。
<span class="wd <%topentry_youbi>1">Monday</span>
<span class="wd <%topentry_youbi>2">Tuesday</span>
<span class="wd <%topentry_youbi>3">Wednesday</span>
<span class="wd <%topentry_youbi>4">Thursday</span>
<span class="wd <%topentry_youbi>5">Friday</span>
<span class="wd <%topentry_youbi>6">Saturday</span>
<span class="wd <%topentry_youbi>7">Sunday</span>
CSSに以下を追加します
.wd {display:none}
.Mon1,.Tue2,.Wed3,.Thu4,.Fri5,.Sat6,.Sun7 {display:inline}
これは実際に自分の所でテストで使っているもので「月ごとに英語表記を表示」するだけなのだが、こんな事をしながら変数の使い方次第で背景画像のスタイルシート指定型月別壁紙チェンジャーが出来る事に気が付いた。<style type="text/css">
.n {display:none}
.cal011,.cal022,.cal033,.cal044,
.cal055,.cal066,.cal077,.cal088,
.cal099,.cal1010,.cal1111,.cal1212 {display:inline}
</style>
<span class="n cal<%now_month>1">January</span>
<span class="n cal<%now_month>2">February</span>
<span class="n cal<%now_month>3">March</span>
<span class="n cal<%now_month>4">April</span>
<span class="n cal<%now_month>5">May</span>
<span class="n cal<%now_month>6">June</span>
<span class="n cal<%now_month>7">July</span>
<span class="n cal<%now_month>8">August</span>
<span class="n cal<%now_month>9">September</span>
<span class="n cal<%now_month>10">October</span>
<span class="n cal<%now_month>11">November</span>
<span class="n cal<%now_month>12">December</span>.
これを以下のように変更する。<td class="top_pic"> ←インデックスページの画像を指定している部分。
そのスタイルシート
.top_pic {
width : 100%;
height : 380px;
background: url(http://blog-imgs-1.fc2.com/b/r/e/breaktime/glim_red_top.jpg) no-repeat top left;
}
とこのように画像アドレスをクラスで指定しておけば<%now_month>と言うFC2の変数がその月の数字を取得してくれる。(今月は12だから12と言う数字をこの変数に割り当てる)<td id="top_pic" class="pic<%now_month>"> ←インデックスページの画像を指定しているHTML部分。
そのスタイルシート
#top_pic {
width : 100%;
height : 380px;
}
.pic01 {background: url(1月に表示する画像アドレス) no-repeat top left;}
.pic02 {background: url(2月に表示する画像アドレス) no-repeat top left;}
.pic03 {background: url(3月に表示する画像アドレス) no-repeat top left;}
.pic04 {background: url(4月に表示する画像アドレス) no-repeat top left;}
.pic05 {background: url(5月に表示する画像アドレス) no-repeat top left;}
.pic06 {background: url(6月に表示する画像アドレス) no-repeat top left;}
.pic07 {background: url(7月に表示する画像アドレス) no-repeat top left;}
.pic08 {background: url(8月に表示する画像アドレス) no-repeat top left;}
.pic09 {background: url(9月に表示する画像アドレス) no-repeat top left;}
.pic10 {background: url(10月に表示する画像アドレス) no-repeat top left;}
.pic11 {background: url(11月に表示する画像アドレス) no-repeat top left;}
.pic12 {background: url(12月に表示する画像アドレス) no-repeat top left;}
曜日毎とか365日となると話はちょっと違ってくる。
FC2の変数には、今日の曜日を表すような<%now_youbi>や<%now_day>が無いためそれを取得するにはスクリプトを使う以外方法は無い。(何か有るかも知れないが思いつかない)
それでもこれは画像に限った事ではない。本来の設定法は「12ヶ月分英語名を書いておきそれを変数を使って必要なものだけを表示する」と言う手法な訳である。
一番簡単なカスタマイズは、「月ごとに違ったコメントを表示する。」事が可能だという事であり、自分はこの手法を見てたまたま画像の入れ替えも出来る事に気が付いただけである。(勿論、すでに誰かが実践しているかも知れないが(自爆))
フォーラムとは使い道などは全然違うが、基本は「変数を意外な使い方をする」という事である。
取りあえず今回はちょっとカスタマイズで気が付いた事をつらつらと書いた訳だが一年中同じテンプレートを使う人がどれだけ居るかと言う問題があり、そう言った人には使えるだろう(爆)。
Close.↑
| テンプレート講座第六回 |
|
◆ テンプレート講座 ◆ Comment 0 ◆ Trackback 0 ◆ edit.
「初心者に優しい講座」と言う事で行きましょう。
カスタマイズと言えば・・・・
など文字に対するものが多いですね。1,文字色を変えたい。
2,文字サイズを変えたい。
3,文字の種類を変えたい。
4,行間の幅を変えたい。
上の設定が上の表に対応する属性の書き方です。1, color: #FF0000;(文字色はredなどの英語でも構いません)
2, font-size: 10pt;(100%とか10pxとか書かれてます)
3, font-family: "Comic Sans MS","MS Pゴシック", "Osaka";
4, line-height: 120%;
英語を習って居る方なら分かると思いますが、スタイルシートやHTML文と言うのは作った人が英語圏の人なので英語表記です。
英語を全く出来ない私でも今ではどのような意味か分かる程度の簡単な単語ですので誰にでもわかりやすいと思います。
後は、これが 「どこに使われているのか分からない」と、言う事でカスタマイズを諦めている方もいます。
独学で学んできた私も始めは分かりませんでした。
そう言った時に検索を使う事を知り、まず試しに「色やサイズ」を変更してみる事にしました。
これは文字の色を設定している訳ですが、テンプレートなどを見ると色々な所に使われている事が分かります。color: #FFFFFF;
優しい方が作ったテンプレートなら注釈が付いている場合が有りますのでそれを読む事でどこの設定なのか分かるでしょう。
(注釈が付いているのに分からないと言う方は日本語を勉強してください。w)
カラーサンプルをアップしましたのでそれを参考に変更したい所の(#FFFFFFなど)色を変えてみて下さい。
勿論、この表に使われている英語名でも大丈夫です。
次にフォントサイズの変更ですが、これはfont-sizeとそのまま英語で書かれているので分かりますね。
その後に続く: 10pt などと書かれている部分の数値を変更するとサイズを変えられます。
この数値も基本と言われるものは、12pt 100% 1em 16px などが標準とされていますが、小さなモニターやブラウザの設定で「大」とかにしている方は「大きすぎる」と感じるでしょう。
これらもまずは色々な数値に変更してどのようになるかテストしてみて下さい。
ちなみにpt(ポイント)を使う人が多いと思いますが、これはブラウザでの変更が可能な単位なので使われてます。
%やemを使う人も居ますが、文字サイズによってはデザインの崩れなどを起こすので嫌う方も居ますが、本来は見る人が自由に変えられる為、推奨されています。
pxに関しては、モニターのドットに(解像度を表す単位で一つの点が1pxです)対応するため見る人の環境では変える事が出来ないためあまりお勧めしません。
(自分だけ見るなら構いませんけどw)
次に、font-family ですがこれは「文字種」の設定で使われます。
「丸文字」や「ゴシック」などフォントの種類を変えるために設定しますがこれまた見る人のパソコンにインストールされていないと標準に置き換えられて、本来の意味を持たない設定になります。
その為、一種類だけではなく複数 ,(カンマ)で区切り設定しています。
「CSS2 リファレンス - CSS Dencitie」さんの所に詳しい説明が有りますので文字種のサンプルを見ながら設定してみて下さい。
最後に行の間隔(一行と一行の行間の設定)line-height
これに関しても設定は「数値」で書き込まれます。
100%と言えば文字のサイズと同じサイズなので行間は空きません。
通常見やすい行間と言えば140%辺りでしょう。
何も設定しないと100%なので詰まって見え、一部の文字を大きくしたり「太文字」にすると文字が重なってしまう事が有ります。
「なんか詰まっていて見にくい」と、思う方はこれを設定してやると読みやすくなります。
(単位は1emなども使えます。わかりやすいので私は%を使っていますが。)
以上ですが、ちょっと「太字」が忘れてましたね。
これはタグを知って居る方なら<b>〜</b>で囲むと太文字になりますがスタイルシートでは、「font-weight」を使います。
英語で「フォントウエイト」ですから「フォントの重量感」みたいな感じでしょうか。
太字にしたい時は、「font-weight: bold;」と言う一行を加えてみて下さい。
それに対応した部分が太字になります。
まぁ〜太字は「強調」に使われますのでブログ名やメニューなどのタイトル部分に多く使われます。(本文を太字にすると見にくいw)
取りあえず、今回は文字に関する設定ですが、それ以前にスタイルシートのIDとクラス(#menu とか .menuとか書かれてます。)がどこの部分に対応した設定なのかを見極める事が最初です。
スタイルシートに、#menu と書かれていた場合は、HTML本文のタグに ID="menu" と書かれている部分が有りますのでそこの設定になっています。
.menu と書かれていたらHTML文のタグに class="menu" と書かれた部分がありますのでその設定だという事です。
以上が基本の基本ですが、これだけででもかなりのカスタマイズが可能でしょう。
まずは頑張って試してみる事です。
Close.↑
| テンプレート講座第五回 |
|
◆ テンプレート講座 ◆ Comment 0 ◆ Trackback 0 ◆ edit.
それと言うのも前四回を見るとトップページに特化した講座内容になっている。
そこで次に来るモノは?と考えたら「カスタマイズ」になる訳だ。
私事で恐縮だが、ブログを始めた頃、私は「何でも一つに」と言う気持ちから3カラムを作りそこに各パーツを詰め込んだ。
一時はこれで満足するのだけれど、次に「整理」を考えてしまう。
トップページを付ける事もメニューや記事の「整理」に繋がる訳だが、「見る人の事を考える」と、詰め込まれたページを見て「読みやすい」とは思わないだろう。
そこで「あまり使わないパーツは非表示」と言う考えが浮かぶ。
そして出来たのが「タブメニュー」。
フォームを使ったメニュー。
スクリプトで開閉式にしたメニュー。
ページ事に違うメニュー。
私が選んだのは言うまでもない「スクリプトを使ったメニュー」である。
しかしこれにも弱点はあり、読み込む速度が遅いという事だ。
何せ開閉式でメニューを使ってパーツを隠したとしてもソース上はちゃんと読み込んでいる訳であり、「軽快なナビゲーション」を全く考えていない事になる。
そこで最近の私の傾向としては、「必要なメニューをそのページに」になってきている。
詰まる所、ブログのデザインを考えた時に「使いやすい」と「見やすい」を意識して構成を考える事が一番良いのではないかと思ったからだ。
とは言え、そこに辿り着くまでには色々な方の記事を読んでいくうちに自ずと見えてきた事なんだが・・・。
で、我がテンプレート講座では、この「メニュー」と言うものを考えて見たいと思う。
一度に全部という訳にはいかないので、今日は考えだけを書き連ねるが次回からは、実際にソースを提供しながら「メニューのカスタマイズ」を考えていこうと思う。
一つにメニューと言っても「ナビゲーション」も一つのメニューとも呼べる。
その時その時に必要な「メニュー」は何か?それを考えながら進めて行ければと思ってます。
次回に続く。(不定期)
Close.↑
| テンプレート講座第四回 |
|
◆ テンプレート講座 ◆ Comment 0 ◆ Trackback 0 ◆ edit.
そこで実際にデザインしてみた方が、覚えるし使えるかな?と、思いファイルを用意してみました。
test_top.html
test_style.css
実際にファイルをダウンロードしてスタイルシートの編集でオリジナルなトップをデザインしてみて下さい。
HTMLファイルは三回目で創ったHTML文を使って創ったページファイルです。
補足
bonkさんのテンプレートを使い幅固定とトップページを付けたモノを実際に用意しました。
デザインはほとんどしていませんが、ちゃんと基本的な機能などは付属されていますので後はスタイルシートをカスタマイズするだけです。
プレビューしてみる
テスト版ソースファイル
bonk_with_glim-html.txt
bonk_with_glim-css.txt
<!--index_area-->
<div class="index_top">
<div id="blog_name"><%blog_name></div>
<div id="blog_introduction"><%introduction></div>
<div class="index_enter">
<a href="./?page0" title="記事一覧ページへ">ENTER</a>
</div>
<div class="recent_all">
<div class="recent_title">▽ENTRIES</div>
<div class="recent_body">
<!--topentry-->
<!--same_day-->
<%topentry_year><%topentry_month>/<%topentry_day>
<!--/same_day-->
<a href="<%topentry_link>#CommentHeader" title="<%topentry_title>へ"><%topentry_title></a><br />
<!--/topentry-->
</div>
</div>
<div class="category_all">
<div class="category_title">▽CATEGOEY</div>
<div class="category_body">
<!--category-->
<a href="<%category_link>" title="<%category_name>"><%category_name></a> [<%category_count>]<br />
<!--/category-->
</div>
</div>
</div>
<!--/index_area-->
スタイルシートはこちら。
* 基本設定 */
@charset "EUC-JP";
* {margin : 0px;padding : 0px;}
body {
margin:0px;
padding:0px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.index_top {
margin:0px;
padding:0px;
margin-left:auto;
margin-right:auto;
text-align:center;
width:600px;
height:450px;
background: url(./○○.jpg) no-repart top left;
}
.index_enter {
margin-left:auto;
margin-right:auto;
margin-top:10px;
text-align:center;
font-size:20pt;
}
#blog_name {font-size:18pt;}
#blog_introduction {font-size:12pt;}
.recent_all {
float:right;
margin:0px;
padding:0px;
width:50%;
text-align:left;
}
.recent_title {font-size:12pt;}
.recent_body {font-size:10pt;white-space : nowrap;}
.category_all {
float:left;
margin:0px;
padding:0px;
width:50%;
text-align:left;
}
.category_title {font-size:12pt;}
.category_body {font-size:10pt;}
HTMLファイルはここのカテゴリー一覧や記事一覧が付けられていますが、このファイルをスタイルシートの編集でデザイン出来れば、そのまま使える事になります。
ご自身のパソコンに保存する訳ですから、画像ファイルのアドレスは後で追加します。(取りあえず画像ファイルなどはHTMLファイル・スタイルシートファイルと同じフォルダに保存して編集です。)
それほど項目数も無いのでカスタマイズは以外と簡単でしょう。
完成したら画像ファイルなどはご自身のサーバーアドレスに変更し、スタイルシートを改造したいテンプレートに追加します。
勿論、HTML文も上に書かれたものを実際に追加します。
後は、今までの講座通りに<!--not_index_area-->で囲めばトップページ付きテンプレートの完成です。
頑張ってみて下さい。(^ー^)
Close.↑
◆ ジャンル [ ブログ ] ◆ テーマ [ オリジナルテンプレート ]
↑Top.| テンプレート講座第三回 |
|
◆ テンプレート講座 ◆ Comment 3 ◆ Trackback 0 ◆ edit.
bonkさんの「ゼロから創るテンプレート」を見るとよく分かりますが、実際に創らなくてもその構造を知る事で、新たな発見が出来ると思います。
私の場合は「無いなら創れ」的な発想でINDEXシリーズが出来た訳ですが当然、基本となる部分はいつも考えています。
ブログを始める時にbonkさんの記事を知っていたら良かったんですが(^^;
では必要な機能とは・・・・
・ブログタイトル。
・記事を見せる。
・ナビゲーション。
・コメント機能。
・編集機能。
まぁ〜この4つがブログで必要不可欠なモノでしょう。
そこから何を一番見て貰いたいかと考えると、「自分が書いた最近の記事」でしょうね。
「私はカテゴリーだな」と言う方も居るでしょうが、訪問する方が初めて目にするページ、それがトップページな訳ですよ。(記事リンクやトラックバックから来ないと仮定して)
そこで記事やらコメントやらブログパーツが一斉に目に入る一般のブログスタイルをどうしてもなじめない、ホームページのように「自分の顔」とも呼べるモノがほしいと考えると、効果的なのがトップページと記事部分を分ける事じゃないでしょうか。
そう考えると、二回目に続いて何が必要なのか見えてきますね。
・最近の記事一覧。
・最近のコメント。
・カテゴリー。
・記事表示ページへの入り口
ブログタイトルに関しては、別に文字でなくても画像を使うのであれば直接画像に書き込んだ方が見栄えが良いでしょう。
一番目の「最近の記事一覧」と言っても本文まで載せては意味がないのでここではタイトルと投稿日が分かればOK。
実は私個人的にトップに一番必要なモノは、「最近の記事一覧」だけだと思ってます。
でもそれには訪問者が一目で「どんな内容の記事なのか」を理解するタイトル付けが必要になってきます。(これは難しい問題)
それを補う形で「カテゴリー」が存在するとも言えます。
カテゴリーを見て「この人はこういう記事を書いて居るんだ」と、言うのが有る程度予測して貰えるからです。
そう考えると、この二つは必要だなと理解出来るでしょう。
それでは実際にFC2の変数を見てみましょう。
<div class="recent_title">▽ENTRIES</div>
<div class="recent_body">
<!--topentry-->
<!--same_day-->
<%topentry_year><%topentry_month>/<%topentry_day>
<!--/same_day-->
<a href="<%topentry_link>#CommentHeader" title="<%topentry_title>へ"><%topentry_title></a><br />
<!--/topentry-->
</div>
これが「最近の記事」のタイトルと日付を表示するFC2の変数達です。
ひとつひとつの変数については説明を省きますが、変数表を見ればある程度は理解出来るでしょう。(理解しなくてもこの形が一般的と覚えても良いですw)
「何故これでタイトル一覧が出来るの?」と言う方のために、ちょっとだけ説明。
<!--topentry-->〜<!--/topentry-->と言う変数に囲まれた部分をFC2は管理画面で「最近の記事の表示数」で設定した数だけ繰り返します。
そして「%」が付いている変数は、それを使う事でサーバーからそれに対応したデータが入ると言う仕組みです。
次にカテゴリーの表示変数を見てみましょう。
<div class="category_title">▽CATEGOEY</div>
<div class="category_body">
<!--category-->
<a href="<%category_link>" title="<%category_name>"><%category_name></a> [<%category_count>]<br />
<!--/category-->
</div>
一応、「最近の記事」と同じ様な構造で創ってみました。
これも又 <!--category-->〜<!--/category-->に囲まれた部分を登録しているカテゴリー数だけ繰り返す事でカテゴリーの一覧が出来上がります。
(注意!後々のためにクラス名を付けています。)
実際に二回目で創ったトップページのHTMLに組み込んでみましょう。
<body>
<!--index_area-->
<div class="index_top">
<div id="blog_name">
<h1><%blog_name></h1>
<%introduction>
</div>
<div class="index_enter">
<a href="./?page0" title="記事一覧ページへ">ENTER</a>
</div>
<div class="recent_all">
<div class="recent_title">▽ENTRIES</div>
<div class="recent_body">
<!--topentry-->
<!--same_day-->
<%topentry_year><%topentry_month>/<%topentry_day>
<!--/same_day-->
<a href="<%topentry_link>#CommentHeader" title="<%topentry_title>へ"><%topentry_title></a><br />
<!--/topentry-->
</div>
</div>
<div class="category_all">
<div class="category_title">▽CATEGOEY</div>
<div class="category_body">
<!--category-->
<a href="<%category_link>" title="<%category_name>"><%category_name></a> [<%category_count>]<br />
<!--/category-->
</div>
</div>
</div>
<!--/index_area-->
<!--not_index_area-->
〜 (この中は2カラムのタグが書かれてます)
<!--/not_index_area-->
</body>
これで取りあえずHTMLの方は完成です。
次にスタイルシートに加えたクラス名を設定します。
.index_top {
width:500px;
height:450px;
background: url(http://画像のアドレス○○.jpg) no-repeat top left;
}
.index_enter {
margin-left:auto;
margin-right:auto;
margin-top:10px;
text-align:center;
font-size:20pt;
}
h1 {font-size:18pt;}
#blog_name {font-size:12pt;}
.recent_all {
float:right;
margin:0px;
padding:0px;
width:50%;
text-align:left;
}
.recent_title {font-size:12pt;}
.recent_body {font-size:10pt;}
.category_all {
float:left;
margin:0px;
padding:0px;
width:50%;
text-align:left;
}
.category_title {font-size:12pt;}
.category_body {font-size:10pt;}
実際にはもっと色々な設定が必要かも知れませんが、これで左右に「最近の記事一覧」と「カテゴリー一覧」がトップページに表示されるでしょう。
後はこの配置を細かな設定を施す事で自分の考えた所に配置し、色や文字の種類などを設定する事でトップの構成を完成させます。
(注意!多分、このまま使っても配置が崩れたりどのブラウザでも同じように見えるとは限りません。)
大雑把な説明ですが、基本は以上です。
後は、好きなブログパーツを配置するなり、画像を使うなりしてトップデザインの完成になります。
詳しい設定などが知りたい場合は、質問に応じますが、まずは色々試してみる事が第一です。
色々と失敗して見る事が何より覚える早道です。
ちなみにクラス名・ID名に関して、タグ名やスタイルシートの属性名と同じ名前を決して付けない事だけを覚えておけばどのような名前でも構いません。
とまぁ〜今回は初心者には難しいかも知れませんね。
でもタグとかスタイルシートと言うものは、英語で書かれていますのでその単語の意味を理解する事で何を意味しているのか察しが付くと思います。
何を隠そう私自身英語は「赤点人間」ですので初歩的な英語だと思われます。(爆)
各々の「決まり事」と言うのは眺めているだけでも分かってくるものです。まずは諦めないでチャレンジして下さい。
ん〜三回目でトップページが完成してしまいました。(^^;
四回目は何を書きましょうか?(爆)
次回へ続く(不定期)
Close.↑
◆ ジャンル [ ブログ ] ◆ テーマ [ オリジナルテンプレート ]
↑Top.| テンプレート講座第二回 |
|
◆ テンプレート講座 ◆ Comment 1 ◆ Trackback 0 ◆ edit.
二回目は、トップページをどうデザインするか?です。
絶対に必要なのは、記事一覧ページに入るためのリンクですね。
これが無いと記事が読めませんので。w
それとブログのタイトル。
後は、せっかく来てくれたのだから「ここは私のブログです」と言う目印の意味でも画像なんかを使うと良いでしょう。
勿論、コメントなども有ると「どんなブログなの?」と言う訪問者も戸惑わないでしょうね。
しかし誰でもがタグを組んでトップページを作る事は出来ません。
ソフトなどが有ればそれで作ったモノを貼り付けるという手法もとれますが、初心者でも意外と簡単な方法として私が紹介するのは「画像を使う」デザインです。
「画像は難しいよ〜」と、思われるかも知れませんが何も一から画像を作る必要は有りません。
スクリーンキャプチャを使ってブログテンプレートからデザインを画像として使う、と言う手法も有ります。
まぁ〜画像なら何でも良いので適当にインターネットで探してみましょう。
一回目の時に簡単な変数を使った構成を覚えてますか?
<body>
<!--index_area-->
これはトップページです。
<!--/index_area-->
<!--not_index_area-->
〜 (この中は2カラムのタグが書かれてます)
<!--/not_index_area-->
</body>
これを使って見ましょう。
まずメインの画像をどうするか?です。
普通なら <img> タグを使って貼りたい所ですがそうすると画像の上に文字やリンクは張れません。
そこでブロックタグを使います。
<div>〜</div>
これは<div>で囲まれたタグをひとつのブロックとして扱うタグです。
この<div>にクラス属性を使って大きさと背景画像を指定する事で画像を貼る事が出来る訳です。
<body>
<!--index_area-->
<div class="index_top">
これはトップページです。
</div>
<!--/index_area-->
<!--not_index_area-->
〜 (この中は2カラムのタグが書かれてます)
<!--/not_index_area-->
</body>
classを付けたのでスタイルシートに色々な設定値が使えるようになりました。
.index_top {
width:500px;
height:450px;
background: url(http://画像のアドレス○○.jpg) no-repart top left;
}
上の設定をスタイルシートに追加する事でトップページには画像が表示されたと思います。
(スタイルシートの設定は、width(幅)500px height(高さ)450px background(背景の指定)no-repart(繰り返さない) top left(左上に合わせる)と言う設定をしています。)
ここまでは大丈夫かな?
画像をウインドウの中央にしたい場合は、
margin:0px;
padding:0px;
margin-left:auto;
margin-right:auto;
text-align:center;
と言う魔法の言葉を追加して下さい。
タグを知っている方は<center>を使いたい所ですがせっかくスタイルシートを使うようになっている訳ですから、中央に寄せる場合は上の属性を指定するようにしましょう。
ちなみに
body {
margin:0px;
padding:0px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
と同じ魔法の呪文を追加して下さい。(ちょっと面倒ですがこれでIEだけじゃなく他のブラウザでも中央に表示されます。)
これで取りあえずトップに画像が貼れました。
次にこの画像の上に、記事一覧へ入るための入り口(ENTERなど)を付ける訳ですが、トップページを使う場合、今までのアドレスのままだと記事一覧ページへは入れません。
./?page=0
と言うアドレスが追加される事になっています。(試しにご自身のアドレスに上の ?page=0 を追加してみて下さい。記事一覧ページが表示されたと思いますが)
<body>
<!--index_area-->
<div class="index_top">
<a href="./?page0" title="記事一覧ページへ">ENTER</a>
</div>
<!--/index_area-->
<!--not_index_area-->
〜 (この中は2カラムのタグが書かれてます)
<!--/not_index_area-->
</body>
上のようにすると、画像の上に ENTER のリンクが見えますね。
でもこれだと ENTER が左上に来て格好良くないです。
そこでこれもブロックタグで囲って位置を指定してあげましょう。
<body>
<!--index_area-->
<div class="index_top">
<div class="index_enter">
<a href="./?page0" title="記事一覧ページへ">ENTER</a>
</div>
</div>
<!--/index_area-->
<!--not_index_area-->
〜 (この中は2カラムのタグが書かれてます)
<!--/not_index_area-->
</body>
これでクラス名を index_enter と付けましたのでスタイルシートで設定してあげましょう。
.index_top {
width:500px;
height:450px;
background: url(http://画像のアドレス○○.jpg) no-repart top left;
}
.index_enter {
margin-left:auto;
margin-right:auto;
margin-top:225px;
text-align:center;
font-size:20pt;
}
これでほぼ画像の真ん中にENTERが配置出来たと思います。
細かい位置は、px単位で設定してあげると好きな位置に出来ます。
ついでにフォントサイズも 20pt の大きめサイズにしています。
これだけでも立派にトップページが出来上がった訳ですが、ブログのタイトルやコメントなども載せたいと思う場合は、それぞれを<div>タグで囲い class= を付けてスタイルシートで設定してあげましょう。
その場合は、上から順番に配置して上げると細かな設定がやりやすいと思います。
一応、トップページが出来たという事で今回はこの辺にしましょう。(長文ですしw)
次回へ(不定期)
Close.↑
◆ ジャンル [ ブログ ] ◆ テーマ [ オリジナルテンプレート ]
↑Top.






