[template] herba-3c

クリックでテンプレートのプレビューができます。

FC2ブログ用テンプレート : herba-3c
「Herba」の3カラム版です。
XHTML 1.0 Transitional、プラグインON/OFF対応。幅可変（上限・下限あり）。

★ カスタマイズ情報
・カラムの位置を変更する
ここにないカスタマイズに関しては、コメントして頂ければ対応致します(*＾-')ｂ


ブログランキング・テンプレート部門に参加しています。
よろしくお願いします。

→ [[template] herba-3c]の続きを読む

[template] daylight

クリックでテンプレートのプレビューができます。

FC2ブログ用テンプレート : daylight
初夏をイメージしました。
XHTML 1.0 Transitional、プラグインON/OFF対応。幅可変（上限・下限あり）。

★ カスタマイズ情報
・表示幅を固定する
・全体の文字色を変更する
ここに無いカスタマイズに関しては、コメントして頂ければ対応致します(*＾-')ｂ


ブログランキング・テンプレート部門に参加しています。
よろしくお願いします。

→ [[template] daylight]の続きを読む

表示幅を固定する@Amaris

★ 対象テンプレート：Amaris

スタイルシートを編集します。

#wrapper {
    border-top      : none;
    border-left     : 10px solid #999;
    border-right    : 10px solid #999;
    border-bottom   : none;
    padding         : 0 1px;
    margin          : 0 auto;
    min-width       : 600px;
    max-width       : 900px;
    background-color    : #fff;

    /*　for IE5　*/
    text-align      : left;
}

このなかの、

    min-width       : 600px;
    max-width       : 900px;

の部分を、次のように書き換えてください。

    width           : 800px;

ここでは例として幅を800ピクセルで固定しています。幅のサイズはご自由に変更してください。

次に、

* html #wrapper {
    width : expression(
                (document.documentElement.clientWidth > 800)? "800px" :
                (document.documentElement.clientWidth < 500)? "500px" :
                "auto"
            );
    /* for IE */
    *height         : 1%;
}

という記述が続けて書いてあるので、この部分を削除してください。

最新エントリーの上部にプラグイン3を表示する@Herba

★ 対象テンプレート：Herba

HTMLとCSSの編集を行います。
[ HTML ]

    <!-- 【 ▼メインエリア ここから 】 -->
    <div id="main"><div class="main-container">

↑この箇所を次で置き換えてください。

    <!-- 【 ▼メインエリア ここから 】 -->
    <div id="main"><div class="main-container">
    <!--plugin-->
        <div id="plugin3">
          <!--plugin_third-->
          <div class="menuitem plugin-<%plugin_third_tag>"">
            <h2><span><%plugin_third_title></span></h2>
            <div class="menu-body">
            <%plugin_third_description>
            <%plugin_third_content>
            <%plugin_third_description2>
            </div>
          </div>
          <!--/plugin_third-->
        </div>
      <!--/plugin-->

また、

    <!-- 【 ▼サブエリア ここから 】 -->

より下にある、

        <div id="plugin3">
          <!--plugin_third-->
          <div class="menuitem plugin-<%plugin_third_tag>"">
            <h2><span><%plugin_third_title></span></h2>
            <div class="menu-body">
            <%plugin_third_description>
            <%plugin_third_content>
            <%plugin_third_description2>
            </div>
          </div>
          <!--/plugin_third-->
        </div>

の部分を削除してください。HTMLの編集は以上です。

[CSS]
スタイルシートに、以下の記述を追加してください。

#plugin3 .menuitem{
    margin-bottom   : 1.5em;
}
#plugin3 .menu-body{
    width           : 95%;
    margin-left     : 5%;
    /* 
    右側へのインデントを大きくしたい場合は、margin-leftの値を大きくし、
    widthの値 + margin-leftの値が100%以下になるようにwidthの値を
    調節してください。
    */
    
    overflow        : auto;
    padding-bottom  : 25px;

    /* for IE */
    *overflow-x     : auto;
    *overflow-y     : hidden;
}
#plugin3 h2 {
    margin          : 0;
    padding         : 0.5em 1em 0.5em 0;
    background-image    : url("http://blog73.fc2.com/r/rimse/file/herba_sub_menutitle.gif");
    background-repeat   : no-repeat;
    background-position : right center;
    font-size       : 100%;
    font-weight     : bold;
}
#plugin3 h2 span{
    background-color    : #fff;
    padding         : 0 0.3em 0 0;
}
#plugin3 ul {
    padding-left    : 20px;
    list-style-type : square;
}
#plugin3 dd {
    padding-left    : 20px;
}
#plugin3 input, 
#plugin3 textarea {
    margin          : 2px 0px;
    padding         : 1px;
}

CSSの編集は以上です。

カラムの幅を調整する@Herba

★ 対象テンプレート：Herba

スタイルシートの編集を行います。

/*────────────────────────────────────────
 ■ メインコンテンツを包括する要素の設定
        エントリー部（メイン）を包括する要素の設定。
────────────────────────────────────────*/
#main {
    float           : left;
    width           : 64%;
    overflow        : hidden;
    padding-top     : 1em;
}

また、

/*────────────────────────────────────────
 ■ サブメニュー包括要素の設定
────────────────────────────────────────*/
div#sub{
    width           : 35%;
    padding-top     : 2.5em;
    float           : right;
    background-image    : url("http://blog73.fc2.com/r/rimse/file/herba_sub_border.png");
    background-repeat   : repeat-y;
    background-position : left top;
    /* for IE5 */
    text-align      : center;
}

このそれぞれの「width」の値によってカラムの幅が定められています。
二つのwidthの値の合計が100%を超えないよう（99%あたりにしておくのが無難かと）にそれぞれの幅を調整してください。

タイトルエリアの画像を変更する@Herba

★ 対象テンプレート：Herba

まず初めに、タイトルに使いたい画像をアップロードしておきます。
次に、スタイルシートの編集から、

.header-container {
    background-image    : url("http://blog73.fc2.com/r/rimse/file/herba_title.jpg");
    background-repeat   : no-repeat;
    background-position : left top;
    width           : 100%;
}

という箇所を探してください。
この中の、

    background-image    : url("http://blog73.fc2.com/r/rimse/file/herba_title.jpg");

という部分で、タイトルエリアの画像が設定されています。
この、「url("」と「")」の中の部分を、アップロードした画像のURLで置き換えてください。
画像の配置に関しては、background-positionプロパティを編集してください。

expressionについて（追加情報）

関連記事：javascriptの荒波に

この記事から引き続きexpressionについて調べていたのですが、オライリーの本でexpressionについて触れてあるのを発見し、早速（Amazonで）購入ー。届くまでの間にもう少し調べたら、Web上でもオライリーの情報が少しのっていて、テストサイトなんかもありました。これはありがたい。

http://www.marlin-arms.com/support/hpws/index7.html
驚きなのは、リンク先にある「CSS expressionを使ったカウンタ」。
expressionが評価されるたびに数が増えていくのですが、増え方ハンパ無さ過ぎ。「増え方すごいよ。ほんとだよ」とは言われていたものの、確かにこりゃ重くなるなと納得の数値です。お試しあれ。
これ見たらますますイベントハンドラの必要性を感じました。

今expression絡みで困ってること。
・expression直下でwindow.onresizeが使えるかどうか
・window.onresizeだけで初表示時はだいじょーぶなのかどうか
悩みがふえた（-ω-；）

expressionについてはこちらも詳しくて参考になります。ありがたやー。
ダイナミックプロパティ expression() のまとめ （Snow-Materiaさん）

javascriptの荒波に

Webサイトの高速化 ルール7　CSSのExpression()は使わない!
ここの記事によると、expressionを使うとあらゆるイベントに対して評価が行われ、動作が遅くなってしまうのだそうです。

Nefertのテンプレートではmin-width・max-widthをIE6で適用させるためにexpressionを使っているのですが、この情報を元にイベントハンドラをつかってみよーと思ったのでした。

が、いかんせんjavascriptの知識は皆無に近いもんで(；'-')
あってるのかどうなのかすら分からない状態になってしまいました…(；'-')

expression内のjavascriptの記述はこんな感じです。
意図としては、ウィンドウサイズが変化したときにウィンドウサイズによってwidthを指定するという感じなのですが…

window.onresize = ( 
           (document.documentElement.clientWidth > 1150)? "1150px" :
           (document.documentElement.clientWidth < 600)? "600px" :
           "auto")

javascriptに強い方、これってどーなんでしょうか。
ウィンドウサイズが変化したときだけではなく、ページを最初に読み込んだときにも幅を指定する必要があるので、onloadとかで入れ子？条件分け？したほうがいいのでしょうか。
一応動作確認した段階では問題なさげなのですが…(-ω-;)

問題なければこれを全テンプレートに適用させたいなと思いますー。

結構強引な手段ですが

要望のあった3カラムのherbaとsuspireを一足先に使えるようにする方法を紹介です。
まだ完成版というわけではないので、こちらの方法を適用してそれを使いっぱなしにするということなく、共有に3カラム版が公開された際にはそちらをダウンロードしてお使いください。よろしくお願いします
このエントリーで扱うのは、いわゆる「β版」ってやつです。3カラム版が共有に登録されれば、このエントリーは削除いたします。


まず、てきとーなテンプレートを複製しておいてください。複製したテンプレートのHTML・CSSを次のもので置き換えます。

「herba」の場合
[HTML] ←リンク先を全て選択+コピーし、複製したテンプレートのHTMLと置き換えてください。
[CSS] ←こちらも同様に、複製したテンプレートのCSSと置き換えてください。

「suspire」の場合
[HTML] ←リンク先を全て選択+コピーし、複製したテンプレートのHTMLと置き換えてください。
[CSS] ←こちらも同様に、複製したテンプレートのCSSと置き換えてください。

[template] amaris

クリックでテンプレートのプレビューができます。

FC2ブログ用テンプレート : amaris
手をつないで。
XHTML 1.0 Transitional、プラグインON/OFF対応。幅可変（上限・下限あり）。

★ カスタマイズ情報
・表示幅を固定する
ここにないカスタマイズに関しては、コメントして頂ければ対応致します(*＾-')ｂ


ブログランキング・テンプレート部門に参加しています。
よろしくお願いします。

→ [[template] amaris]の続きを読む

3カラム版Herba

3カラム版のHerbaの要望があったので、試作品作ってみました。
本来の共通HTMLでは3カラムの実現がめんどくさい&自由度が低かったので、3カラム用のHTMLを作成し、それにあわせてCSSも編集しました。最初から意地はらずに3カラム用のHTML作っておけば良かったなぁ(´-｀)
3カラムはあまり作りなれていないので、問題があれば教えてくださいませー。

HTMLが共通のものではないのでスクリプトでのスタイル切り替えは使えません。よってプレビューはFC2の標準方式に。ということで、どんな感じになったかはこちらからどうぞー↓

Herba 3カラム版プレビュー

もう少しテスト+微調整したら共有に登録しますね(*'-')ノ

「Daylight」テスト開始です

ひとまず形になったので、新テンプレート「Daylight」のテストをスタートです。
なんだかんだであまり変わり映えしてません。アイデア枯渇ー
結構前から芝生をアップで撮った写真が欲しいなぁと思っていたのですが、少し前にFlickrで希望通りの写真を見つけることができたので早速つかってみました。Flickr様様！

予定

なんだか最近忙しいですまぁ今までが忙しく無さすぎたのかもしれませんがー（-ω-；）
ということで、今やろうとしていることをメモしておきます。

・文字サイズ変更スクリプトの導入検討
→流行ってるっぽい？一応Nefertのテンプレートのフォントサイズは可変になっていますが、ブラウザ側の文字サイズをサイトにあわせて変更するのも面倒だと思うので、スクリプトの導入も少し考えてみようと思います。

・新規テンプレート案
→草or木を使った緑色系のテンプレートを模索中。基本デザインも新規で。
→モノクロデザインで画像少なめのやつも一つデザインを練っています

・昔作ったテンプレートを再公開
→せっかく作ったんだし…という安易な考え。なんだかんだで修正箇所が多そうなのが困りもの。

次のテンプレートとしてAmarisを共有申請してありますが、テンプレート番号が「22562」ということで登録はかなーり先になりそうです（5/15現在でまだ「22393」が最新だったので）。

[template] suspire

クリックでテンプレートのプレビューができます。

FC2ブログ用テンプレート : suspire
だるそーな猫さん。
XHTML 1.0 Transitional、プラグインON/OFF対応。幅可変（上限・下限あり）。


この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。

使用している画像の原著作者は以下の通りです。
タイトル : d'n'c
背景 : ShippoShappo

ブログランキング・テンプレート部門に参加しています。
よろしくお願いします。

最適化完了ー

意外と時間がかかってしまいましたが、一応最適化完了です。
HTMLの方はそれほど弄ることなく、結局CSSの編集が大部分となりました。

HTMLの主な変更点としては･･･
1. 個別ページでは<body>にページにあわせたクラスが追加されるように。これにより、例えばトップページ・過去ログ・検索ページごとでベースカラーを変える、といったこともできるようになりました。
2. entry-bodyの内部にentry-body-containerを設定。overflowに関する設定がやりやすくなりました。

CSSの主な変更点としては・・・
1. backgroundプロパティを細分化。画像を差し替えたいときに変更が容易になりました。
2. MacIEでコメントが表示できないというバグへの対応。言い訳するとブラウザ側のバグのせいです！
3. その他、誤字や重複する記述などを修正。

ついでに、スタイルシート切り替えスクリプトも変更しました。これでSafariなどでもスタイルシートを切り替えることができるはずです。

最適化とはいったものの、結局HTMLの構造が複雑（入れ子の多用など）になっててどうしようも有りません。全てのCSSが一つのHTMLを共有するという形になっているので、表現の柔軟性を持たせるためには仕方ないのですが、どうにかしたいものです…