公開テンプレート「FreshStripe」

Yume

2009年05月03日 12:25

（2010.11.21 テンプレートのダウンロード方法を変更）
（2009.05.04 13:59 「ソースコード」に文字コードに関して追記しました）
（2009.05.20 ソラマメブログの広告表示仕様変更によりスタイルシートを更新）
このブログを始めて早３ヶ月。ようやく１つ目のテンプレートが完成しました。

全体の配色はソラマメのロゴに合わせてビタミンカラー、装飾はストライプでまとめています。なのでテンプレート名は「FreshStripe」。特徴はヘッダー下にアイキャッチ画像が入ることを前提としている点です。

特別なことはしていないのでブログによくあるベーシックなデザインですが、ベーステンプレートとしても使えるかな、と思います。

キャプチャ

ソースコード

「FreshStripe」をダウンロードする

ダウンロードしたzipファイルを解凍すると、「FreshStripe」フォルダが展開します。その中にある4つのテキストファイル（.txt）にテンプレートのソースコードが記述されています。fs_css.txtは『スタイルシート』、fs_toppage.txtは『トップページ』、 fs_entry.txtは『個別記事』、fs_archive.txtは『アーカイブ』のソースコードです。

利用方法

ブログ管理画面の左サイドバー「テンプレート」＜「テンプレートの追加」もしくは使用していないテンプレートの「カスタマイズ」をクリック、必要であれば既存のテンプレートのバックアップをとり、上記ソースコードをそれぞれの入力エリアにコピー＆ペーストします。保存する前に各ページをプレビューで確認し、問題がなければ保存して下さい。

本テンプレートをカスタマイズする場合はWord以外のテキストエディタを使用してください。
ソラマメブログの文字コードは UTF-8 となっています。その為、ローカルでテンプレートを編集・保存する際にファイルの文字コードも UTF-8 にする必要があります。この文字コードが別のものになっていると文字化けが起こりますので注意してください。

ライセンス

本テンプレートはクリエイティブ・コモンズのライセンス「表示-非営利-継承 3.0 Unported」に属しています。主な禁止事項は以下の通りです。

本テンプレートを改変せずにそのまま再配布すること
本テンプレートを使ってブログ制作／カスタマイズを受託すること
改変した上で配布するテンプレートのライセンスを本テンプレートとは異なるライセンスにすること
改変した上で配布するテンプレートに本テンプレートで使用している画像を流用すること

本ライセンスの適用範囲はソラマメブログに限ったものではありません。
尚、商用ブログに本テンプレートを使用することは上記の「非営利」に抵触しません。

免責

本テンプレートの XHTML は W3C が定める Web 標準に準拠していません（CSS はレベル 2.1 に準拠しています）
ソラマメブログ（及び CLOG）の仕様が変更された際に、本テンプレートの表示が崩れる可能性があります。それにより被った損害に対し、当ブログでは一切の保証をいたしません
本テンプレートを大幅に改変したもの、また改変した上で配布するテンプレートに対し、当ブログからのサポートは一切行いません
本テンプレートで使用している画像は全てソラマメブログのサーバにアップされたものであり、テンプレート利用者全員で共有することになります。万が一、ページの表示が遅くなる場合は画像そのものを配布したいと考えていますが、画像のアップロードとスタイルシートに記述している画像 URL の変更は利用者ご自身で行っていただくことになります
本テンプレートのライセンス及び免責の内容は予告無く変更・追加・削除される場合があります

動作確認ブラウザ

Windows XP、MacOSX（10.5）で動作確認済みのブラウザは以下の通りです。

Internet Explorer 6, 7, 8
Firefox 3
Opera 9
Safari 3

アイキャッチ画像について

本テンプレートはヘッダー下にアイキャッチ画像を表示することができます。表示サイズは 860 x 200px です。テンプレート「スタイルシート」にある以下の部分の画像 URL を変更してください。

/*----------------------------------------------------

  アイキャッチ画像

----------------------------------------------------*/

#eyecatch {

    width: 100%;

    height: 200px;

    background: #fff url(ここをアップロードした画像のURLに差し替えてください) no-repeat;

}

アイキャッチが必要ない場合はテンプレート「トップページ」「個別記事」「アーカイブ」の以下の部分を削除（またはコメントアウト）してください。

<div id="eyecatch"><!-- --></div>

グローバルナビゲーションについて

本テンプレートにはグローバルナビゲーションが設置されてます。あらかじめ設定済みのナビゲーションボタンは「HOME」「TAG」「MY ALBUM」「SITEMAP」の４つです。

ボタンは最大６つまで増やすことができますが、６つ目のボタンにのみクラス名を追加する必要があります。例えば「サイトマップ」が６つめのボタンになる場合、テンプレート「トップページ」「個別記事」「アーカイブ」の以下の部分、<li> タグにクラス名「btn_right」を指定します。

<div id="nav">

<ul>

<li><a href="<%BlogUrl%>" title="HOME">HOME</a></li>

<li><a href="<%BlogUrl%>tag" title="TAG">TAG</a></li>

<li><a href="<%BlogUrl%>album.html" title="MY ALBUM">MY ALBUM</a></li>

<li><a href="<%BlogUrl%>xxxx.html" title="ボタン４">ボタン４</a></li>

<li><a href="<%BlogUrl%>xxxx.html" title="ボタン５">ボタン５</a></li>

<li class="btn_right"><a href="<%BlogUrl%>sitemap.html" title="SITEMAP">SITEMAP</a></li>

</ul>

</div><!-- /#nav -->

ナビゲーションが必要ない場合は、テンプレート「トップページ」「個別記事」「アーカイブ」の <div id="nav"> から </div> までを削除（またはコメントアウト）してください。

記事中の装飾について

記事中に使用されるいくつかの HTML タグに対し、あらかじめスタイルを指定しています。個別記事のキャプチャ画像と合わせて内容をご確認ください。

記事中の見出し: <h3>見出しにしたい文字列</h3> と書くことで記事の中に装飾された見出しを使用することが出来ます。
リンクアイコン: テキストリンクの a タグに「class="inside"」（内部リンク用）「class="outside"」（外部リンク用）「class="slurl"」（SLurl 用）を追加することでテキストリンクの先頭にアイコンを付けることが出来ます。例）<a href="リンク先URL" class="inside">リンクにしたい文字列</a>
引用: 引用文はクラス名を指定しなくても装飾されます。閉じ引用符を表示したい場合は <cite> タグを使用してください（詳細）。
画像: 画像の img タグに「class="photo"」を追加することで画像に縁を付けることが出来ます。例）<img src="画像のURL" alt="画像の説明文" class="photo" />
リスト・番号付きリスト: リストはクラス名を指定しなくても装飾されます。リストマーカーは circle（白丸）と decimal（数字）です。
定義リスト: 定義リストは <dl> にクラス名「t_list」を指定する必要があります。
例）<dl class="t_list">
ドット線は画像です。

尚、上記 HTML タグの前後の余白は 0 になっています。これはソラマメブログの仕様で HTML タグを記事中で使用すると <br clear="all"> が自動挿入され、余白ができるためです。あまり推奨される方法ではありませんが、前後の余白には改行（<br />）を使用して調整してください。

クレジットについて

フッターにあるクレジット「Template by Yume.」の表示は任意です。消していただいても構いません。但しHTML と CSS ソース内のクレジットは残してください。

改変したテンプレートを配布する場合は、クレジットを以下のように変更してください。

▼スタイルシート

/*----------------------------------------------------

  Base Template: FreshStripe

  Author: Yume Kohime

  Author URL: http://templ.slmame.com/

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

  Customised Template: テンプレートの名前

  Author: お名前

  Author URL: 配布元URL

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

  License: Creative Commons license (BY-NC-SA 3.0)

  License URL: http://creativecommons.org/licenses/by-nc-sa/3.0/deed.ja

----------------------------------------------------*/

▼トップページ、個別記事、アーカイブ

<!--

  Base Template: FreshStripe

  Author: Yume Kohime

  Author URL: http://templ.slmame.com/

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

  Customised Template: テンプレートの名前

  Author: お名前

  Author URL: 配布元URL

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

  License: Creative Commons license (BY-NC-SA 3.0)

  License URL: http://creativecommons.org/licenses/by-nc-sa/3.0/deed.ja

-->

その他

記事中に掲載する画像の推奨最大サイズは横幅 500px です。それ以上のサイズの画像を掲載された場合、横スクロールバーが出現します
アーカイブページはトップページと異なり、リスト形式で表示されます
バグ＆不備の報告、お問い合わせはメッセージかコメントにてお気軽にお寄せください

更新履歴

2009/05/20：広告表示設定の仕様変更に伴いスタイルシートを変更

公開テンプレート