ブログテンプレートを配布しました

FC2ブログ専用のブログテンプレートの配布を始めました。
テンプレート名は「bon_poodle」です。
※PC用となりますので、携帯からは何の変化もありません(^_^;)



まずはどういったイメージになるのかは、
以下のリンクをクリックしてもらえるとサンプルをご参照頂けます。

サンプル（トップページ）
サンプル（個別ページ）
サンプル（検索結果ページ）
サンプル（全記事一覧ページ）

※サンプルは当ブログですが、微妙にカスタマイズしているので
若干崩れている部分がありますが、気にしないで下さい(^_^;)
当ブログのようなカスタマイズされてないブログですと正常に表示されます。

配布を決めた経緯としては、
このぼんのブログを公開するにあたって、最初は犬がポイントのテンプレートを探していましたが、
あまりコレといったのが無く、当初使っていたのは公式テンプレートでした。
そのままではアレなんで、ヘッダのメイン画像をぼんの写真にしたり、
jQueryというjavascriptライブラリを使用していて、
結構カスタマイズしていました。

時が経つにつれ、チョット写真も大きく載せたいし、3カラムが良いなぁと思っていたので、
これ以上既存のテンプレートをカスタマイズするのはかなり手間がかかったので、
一から作った方が早いと感じ、自作でデザインとコーディングをしてみました。

それから数ヶ月経ち・・・
未だに犬のイラストメインのテンプレートが少ないなぁと感じ、
どうせ自作したなら共有申請して、他のFC2ユーザーにも使ってもらおうか？という考えに至りました。
といっても、ヘッダのぼんの写真などはそのまま配布物としてはダメなのと、
他にもこのブログ用のカスタマイズ部分が多々あったので、
ヘッダの写真部分をイラストにしたりして、一般的にも使用できるように改変しました。
で、先日共有申請してみたところ、知らぬ間に登録されていました(^▽^;)
落ちたら連絡あるみたいですが、通ると連絡無いんですね！

というわけで、正式にテンプレートが登録されたということで、
ここでは今回のテンプレートの特徴と、使って頂く際の注意点などを書かせて頂きます。
といっても、FC2ブログの規約に書いてることが全般ですが(^_^;)

----------------------------------------------------------
■テンプレートの特徴

・各パーツのイラストに犬（トイプードル）をイメージしたデザイン
・3カラム
・全体幅は1000px
・パンくずリスト付き
・記事部分の画像は最大500pxまで可能
・記事部分の画像をクリックすると別ページで開くのではなく、その場で開くLightbox仕様（サンプル）
・記事部分の文字サイズ変更ボタン付き
・個別ページに飛ばなくても、コメントが見れます（アコーディオン式）※検索結果ページは除く
・ページトップへ戻る時に何となく良い感じに（賛否両論？）（ここをクリックするとわかります）
・検索結果ページでは、該当ワードをハイライト表示（サンプル）
・印刷は記事部分のみ抽出（ブラウザによってうまく動作しないかもしれません）

----------------------------------------------------------
■動作確認（表示確認）

・Internet Explorer 6
・Internet Explorer 7
・Internet Explorer 8
・Netscape 7.x
・Firefox 3.5以上
・Opera 7.x
・Opera 8.x
・Opera 9.x
・Opera 10.x
・Safari 5.x（Windows版）
・Google Chrome 6.x

----------------------------------------------------------
■ブログテンプレートのご留意事項

１．再配布禁止
２．FC2ブログ以外での使用禁止
３．著作権表示削除禁止
----------------------------------------------------------

こんなところです。
デザインをカワイイイメージにするだけではなく、
機能面でもユーザビリティに配慮するようにしてみました。

文字サイズ変更なんかは結構便利ですが、
今より最大値を大きく、最小値を小さく、標準を変えたいという場合は、
テンプレート内で変更可能です。
左右サイド（メニューなど）の文字サイズも小さいと感じる場合は、
CSSから変更可能です(^▽^)

表示確認は、現在のモダンブラウザは大体OKだとは思いますが、
IE6など、微妙な部分でずれがあります。
あまり気にならないレベルではあるのと、直せなかったのでそのままです(ーー;)スイマセン
あと、Macは手元に無いので確認していません。
SafariもWindows版のみの確認なので、Macだと崩れている可能性もあります。
使っている人はかなり少ないかと思われますが、
Netscapeは多分6は大丈夫でも、4.7などはちゃんと表示されないです。
Operaも6用にコーディングしていないので、6は崩れると思います。
ただ、いずれも各ブラウザの最新版だと大丈夫だとは思いますが、
大きな崩れなどがありましたら教えて頂けると嬉しいですm(_ _)m
その他、かなり精査はしていますが、変なタグとかあったら教えて下さい。

記事内の画像に自動で枠が付きますが、不要の場合は、
該当の画像や写真のimgタグに、class="no" を付けると枠線が消えます。
この場合、508pxの画像で左右の余白が均等になります。

ご留意事項の２に関しては、FC2の変数を入れているので多分普通は使えません。
ある程度知識があれば可能ですが、一応禁止とさせて下さい。
（要望があれば別のブログ用も作ってみたいとも考えています）

あと一応著作権放棄はしていませんので、
ご留意事項の１と３もご遠慮下さい。

カスタマイズは好きにしてやってください。
ぼんのブログのように、ヘッダを写真にするとかもOKです(^ー^)ノ
ただ、それなりに変更するには工夫がいるかもしれませんが・・・

実際のところ、配布したテンプレートのイラストは
ぼんをイメージして作画したものなので、
汎用性は低いかな？と思ってたりします(^_^;)
でも色んな方に使ってもらえたら嬉しいです(^_^)

今のところ、猫バージョンや違う犬バージョンの配布も考えています(^▽^)
あとは2カラムバージョンも良いですね！
って、まだ全然作っていませんが(^▽^;)

テンプレートに関してカスタマイズは原則サポート外とさせて頂きますが、
それほど難しくないレベルであれば、このページのコメントにて出来る限り対応させて頂きたいと思います。
なんかご質問があればコメント下さい。

なにぶん、テンプレート配布が初めてなもので、不備があるかもしれませんが、
もし気に入って頂けたなら使ってやって下さいませm(_ _)m
※テンプレート名「bon_poodle」でテンプレート検索で見つけられます。
※今回ぼんの記事じゃなくスイマセン

----------------------------------------------------------
早速なんですが、抜けや微妙にずれている部分を発見してしまったので、
以下に修正コードを書いておきます。
早くにダウンロードしてくださった方、申し訳ございませんm(_ _)m
（修正申請中ですが、リアルタイムに反映されないようなので）
（お急ぎで無い場合は数日後に同名のテンプレートを再度ダウンロードして頂ければ反映されます。
※9/29の21時過ぎには修正が反映されていましたので、以下はそれ以前にダウンロードされた方のみ対象です。
既にダウンロードしている場合、現状の「bon_poodle」というテンプレートを削除しないと、
同名のテンプレートはダウンロードできないようなので、お手数ですが一度削除してから再度ダウンロードをお願い致します。）

※全記事一覧ページ用のCSSの設定に抜けがありました。
表示がおかしい場合は以下のコードをCSSファイルに追記して下さい。

/* 全記事一覧
---------------------------------------------------- */
ul#titlelist{
    font-size: 120%;
    background-image: url("http://blog-imgs-38.fc2.com/b/o/n/bonpoodle/entry_bg.gif");
    background-repeat: repeat-y;
    margin: 0;
    padding: 16px;
    width: 508px;
    border-top: 1px solid #f7c8ce;
}
ul#titlelist li{
    line-height: 160%;
    margin: 0 0 5px 15px;
    padding: 0;
}

※リストアイコンが微妙にずれているので、
表示がおかしい場合はCSSファイル内の以下の該当箇所のコードを修正して下さい。

    ul#breadcrumbs li
    p.list_icon
    ul.relate_ul li

上記セレクタの中の
「background-position」がある行を
「background-position: left center;」へと変更して下さい。

    #menuLeft li,
    #menuRight li

上記セレクタの中の
「background-position」がある行を
「background-position: 0px 2px;」へと変更して下さい。

多分これでリストアイコンの位置が少しはマシになると思います。

----------------------------------------------------------

一日1クリックしてもらえると、ぼんのランクが上がります♪

トイプードルブログランキング
犬 人気ブログランキング