sample skin

1記事テンプレートにて、overflowになっていなかったのを修正。

→　追記に大きな画像を入れると、記事部分が延びてしまってましたＴＴ

<!-- entry -->
<div class="entry">
<h3><span class="point"> </span>{$BlogEntryTitle$}</h3>
<div class="entry_text">
<div class="date"><nobr>{$BlogEntryDate format="%Y/%m/%d [%a] %H:%M" language="jp"$}</nobr></div>
<div style="width:100%; overflow: hidden;">{$BlogEntryBody$}</div>
<br><br>
<a id="BlogEntryExtend"></a>{$BlogEntryExtend$}
<br clear="all">

となっていたところを、

<!-- entry -->
<div class="entry">
<h3><span class="point"> </span>{$BlogEntryTitle$}</h3>
<div class="entry_text">
<div class="date"><nobr>{$BlogEntryDate format="%Y/%m/%d [%a] %H:%M" language="jp"$}</nobr></div>
<div style="width:100%; overflow: hidden;">{$BlogEntryBody$}
<br><br>
<a id="BlogEntryExtend"></a>{$BlogEntryExtend$}</div>
<br clear="all">

{$BlogEntryExtend$}の後ろに</div>を移動させました。

※　スタイルシート+テンプレートをセットにして、ご利用下さい〜。
（ヤプログデフォルトのテンプレート+ここのスタイルシートでは、うまくいきません）

※　サイドバーにあるセレクトボックスで、そのスタイルシートに変えることができます。

---

■　Asterisk：幅指定：2 （s4_ast2.txt）


自分で使うために作ったヤツ。
なので、少し制限がある。使いにくいかも・・・。
サイズとか変えるには向いてません。
使用画像も多め。
ブログ説明文は1行まで。

この記事だけ、1記事が崩れています・・・何故だろう。
もう一つの記事幅より大きい画像の方は平気なのになぁ。

使用画像は追記で。

※　スタイルシート+テンプレートをセットにして、ご利用下さい〜。
（ヤプログデフォルトのテンプレート+ここのスタイルシートでは、うまくいきません）

※　サイドバーにあるセレクトボックスで、そのスタイルシートに変えることができます。

---

■　ドット：幅指定：2 （s3_dot2.txt）


まぁサンプルってことなので、ちょっと変種レイアウトで。

使用画像→

※　スタイルシート+テンプレートをセットにして、ご利用下さい〜。
（ヤプログデフォルトのテンプレート+ここのスタイルシートでは、うまくいきません）

※　サイドバーにあるセレクトボックスで、そのスタイルシートに変えることができます。

---

■　空：幅指定：変形3 （s2_sky3.txt）


まぁサンプルってことなので、ちょっと変種レイアウトで。

使用画像→ そこそこ大きいので、リンク先

※　スタイルシート+テンプレートをセットにして、ご利用下さい〜。
（ヤプログデフォルトのテンプレート+ここのスタイルシートでは、うまくいきません）

※　サイドバーにあるセレクトボックスで、そのスタイルシートに変えることができます。

---

■　基本：3 （s1_def3.txt）
■　基本：2 （s1_def2.txt）


ヤプログの「HTML/CSS編集可」のテンプレートのように、シンプルなもの。
s1_def3.txtのほうは、スタイルシートに説明を加えています。
幅可変なのが特徴か。

基本：2は、それをただ2カラムにしただけ；
サイドバーのパーツは、全て右側に寄せてます

tableレイアウトを排除したテンプレートです。
（でも、すごいdivの嵐・・・ＴＴ）

このテンプレート+スキンをセットにして、ご利用下さい〜。


■　使用方法

　1.　自分でカスタマイズしている人は、それらのバックアップ。
　　　（これが気に入らなくても元に戻せるように。）
　　　各テンプレート・スタイルシート内を全部コピー→テキストなどに保存。

　2.　下記のテンプレートを開いてコピー
　3.　ヤプログ→スキンの、対応テンプレートにペースト
　4.　スタイルシートは好みで、コピー＆ペースト

　5.　独自タグのサイドバーを使うなら、それらをサイドバーの機能と追加でコピー&ペースト
　6.　2カラムものなら、サイドバーの並び替えで、すべて右側に寄せる

　7.　確認


■　使用テンプレ−ト・サイドバー

　　こちらのページからどぞ。
　　サイドバーは好きなトコだけ切り取っても使えます。
　　〜が1セット


■　動作確認
　　OS： WinXP
　　ブラウザ： IE6、NN7、FireFox0.9、Opera7


※　わかっている難点

　1. 幅をピクセルで指定するのが・・・少し難しい。　border=0なら大丈夫。
　2. IEにて、指定記事幅より大きい画像を置いたときに、広がってしまう。
　　　#mainにてoverflowを指定することで、すこしマシに。
　3. div多すぎ多すぎっ。　・・・どうしようか。
　4. XHTMLと、思ってはいるけれど・・・ヤプログの方で
とになっている間は無理だろうな。


あ、一番下の「ブログ+ヤプース=ヤプログ」とかcoryright画像はそのままで。
問い合わせたところ、いじらないでと言われました；
スタイルは変えて大丈夫なようです。

広告用のタグを挿入しました。

メインテンプレート・アーカイブテンプレート　→　{$feedmeint$}、{$feedme1a$}
1記事テンプレート　→　{$feedme2a$}

挿入位置は、他のと同じように「ページの中で最初の記事」の下にしています。

テンプレートのページ

・・・いつの話だったか忘れたけどＴＴ

ベースのスタイルシートが、その後に影響したりするようなので、最低限のに変更しました。

このスタイルシートです
→　http://yaplog.jp/skin/style.css （基本の基本：3）

↑この画像は、750*200です。
（大きい画像は、右側が切れます）

左右どちらかにある、セレクトボックスを使ってみてください♪
ブラウザによっては動かないかも知れませんが・・・；；
JavaScriptオフでも、動きません。

サイドバーが左右に動いて、ちょっと気持ち悪いかも。


それぞれのサイドバー位置は、以下のようになってます。

■　3カラム時
←　左のサイドバーは、ヤプログで最初から用意されているものを使用してます。
→　右のサイドバーは、独自タグを使って表示させてます。（カレンダー以外 カレンダーも独自タグにしました）

■　2カラム時
サイドバーは、設定画面ですべて右側に寄せ、それを右や左に表示してます。
（どっちにあっても、独自タグ）

■　変形3カラム時
左から、記事部分、右サイドバー、左サイドバー、の順になってます。