ソラマメブログ
HOME > 公開テンプレート > 公開テンプレート「FreshStripe」
12:25 2009年05月03日
(2010.11.21 テンプレートのダウンロード方法を変更)
(2009.05.04 13:59 「ソースコード」に文字コードに関して追記しました)
(2009.05.20 ソラマメブログの広告表示仕様変更によりスタイルシートを更新)
このブログを始めて早3ヶ月。ようやく1つ目のテンプレートが完成しました。

全体の配色はソラマメのロゴに合わせてビタミンカラー、装飾はストライプでまとめています。なのでテンプレート名は「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」の4つです。

ボタンは最大6つまで増やすことができますが、6つ目のボタンにのみクラス名を追加する必要があります。例えば「サイトマップ」が6つめのボタンになる場合、テンプレート「トップページ」「個別記事」「アーカイブ」の以下の部分、<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="ボタン4">ボタン4</a></li>
<li><a href="<%BlogUrl%>xxxx.html" title="ボタン5">ボタン5</a></li>
<li class="btn_right"><a href="<%BlogUrl%>sitemap.html" title="SITEMAP">SITEMAP</a></li>
</ul>
</div><!-- /#nav -->


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

記事中の装飾について


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

記事中の見出し
<h3>見出しにしたい文字列</h3> と書くことで記事の中に装飾された見出しを使用することが出来ます。
リンクアイコン
テキストリンクの a タグに「class="inside"」(内部リンク用アイコン内部リンク用)「class="outside"」(外部リンク用アイコン外部リンク用)「class="slurl"」(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:広告表示設定の仕様変更に伴いスタイルシートを変更


同じカテゴリー(公開テンプレート)の記事画像
公開テンプレート「BlackFloral」
公開テンプレート「CheckerBlue(2カラム)」
公開テンプレート「CheckerRed(2カラム)」
公開テンプレート「CheckerBlue(3カラム)」
公開テンプレート「CheckerRed(3カラム)」
公開テンプレート「BerryStripe」
同じカテゴリー(公開テンプレート)の記事
 公開テンプレート「BlackFloral」 (2010-11-18 03:18)
 公開テンプレート「CheckerBlue(2カラム)」 (2009-05-24 19:50)
 公開テンプレート「CheckerRed(2カラム)」 (2009-05-24 19:03)
 公開テンプレート「CheckerBlue(3カラム)」 (2009-05-24 14:24)
 公開テンプレート「CheckerRed(3カラム)」 (2009-05-24 02:11)
 公開テンプレート「BerryStripe」 (2009-05-06 00:13)
Wrote by Yume|Comments(10)

TrackBacks

「FreshStripe」に続いて、黒を基調とした「BlackStripe」を配布します。黒背景にグレーのストライプ、テキストリンクはオンマウス時に蛍光色に近いブルーになります。HTML・CSS 共に「FreshStripe...
"公開テンプレート「BlackStripe」"
from "Templates for SLMaMe" at 2009年05月03日 20:27
「FreshStripe」「BlackStripe」に続き、白を基調としたテンプレート「WhiteStripe」を公開します。白背景にストライプ、テキストリンクはオンマウス時に赤色になります。本テンプレートも HTML・C...
"公開テンプレート「WhiteStripe」"
from "Templates for SLMaMe" at 2009年05月04日 01:26
「FreshStripe」「BlackStripe」「WhiteStripe」と続き、ラズベリー色を基調とした「BerryStripe」を公開します。本テンプレートも HTML は「FreshStripe」と同じ、異なるのは CSS だけです。
"公開テンプレート「BerryStripe」"
from "Templates for SLMaMe" at 2009年05月18日 15:57
「SLMaMe(ソラマメ)スタッフブログ:【お知らせ】ブログに表示される広告部分の文字色、背景色等」にもある通り、本日より Overture 広告表示部分のソースコードが変更されました。
"当ブログの公開テンプレートをご利用の皆様へ"
from "Templates for SLMaMe" at 2009年05月20日 19:56

Comments

KP
2009年05月03日 13:04
こんにちは。
シンプル綺麗で素敵ですね。
こういうの探してました。
ありがたく使わせて頂きます!
YumeYume
2009年05月03日 20:37
> KP さん
早速使っていただきまして有り難うございます!
briand
2009年07月08日 07:07
こんにちは、
最近、みなさんが素敵なテンプレートを使っているので、どこで入手したんだろーと・・探していたら、YUMEさんのブログにたどり着くことができました。 ただ、なぜかスタイルシート以外のソースコードが、テキストで表示されず、コピーすることができません。 いい方法ありますか? 
Yume
2009年07月08日 13:33
> briand さん

こんにちは。
うーん、全て .txt ファイルなんですけどねぇ。なんでだろう・・・。

もしブラウザでテキストファイルを表示しようとされていたのなら、各テンプレートへのリンクを右クリックして「リンク先を保存」してみてください。テキストファイルそのものをローカルPCに保存することが出来ます。

お手数ですが、念のため briand さんがお使いになっている PC と OS 、ブラウザを教えていただいても宜しいでしょうか。
briand
2009年07月12日 19:05
yumeさん、
こんにちは、できました^^ すんなりは、だめでしたが、すこし工夫すれば、OKです^^ いいテンプレートですので^^ 大事に使用させていただきますね。 ところで。一番上の青い部分を(私の場合) 画像を張り付けたいのですが、どこを修正すればいいですか・・・素人な質問で申し訳ないですが、ご教授してください^^
Yume
2009年07月12日 20:48
> briand さん

『一番上の青い部分』ということは、使用されているテンプレートは本記事のテンプレートではなく、「CheckerBlue(http://templ.slmame.com/e629479.html)」でしょうか?

誠に申し訳ありませんが、これらChecker系テンプレートはヘッダー画像の追加を前提としていません。

不可能ではありませんが、ヘッダー全体(ナビゲーション含む)の背景画像を作成し直し、HTML 構成を修正する必要があり、手順が少々複雑です。

お手数ですが、ヘッダーに画像を表示したい場合はStripe系テンプレートをご使用ください。
リバ子
2009年08月13日 00:54
yume様 はじめまして
最近他の方のソラマメ見て「んん?なんてすてきなんだ!」と。どーにかしたいと思っていたところ、ここにたどりつきました。
「WhiteStripe」を使わせていただきました、文字コードの変換って、メモ帳で保存する時にUTF-8にすればオッケですよね、、?
スタイルシートが文字化けしてましたが気にせずやっちゃいました、結果オーライみたいです^^
あと、ブログタイトルの文字の大きさも自力で小さくしてみました、(あてずっぽで%を少なくしちゃいました)
こういうのを探してたんです。ありがとうございました^^
YumeYume
2009年08月13日 01:21
>リバ子さん

初めまして、コメントありがとうございます。
気に入っていただけて何よりです^^

> 「WhiteStripe」を使わせていただきました、
> 文字コードの変換って、メモ帳で保存する時にUTF-8にすればオッケですよね、、?

そうです。
全ファイルを「別名で保存」すると、Windows のメモ帳でも文字コードが選択できるはずなので、その時にUTF-8を選択してください。一番良いのは、エディタソフト(http://templ.slmame.com/e529174.html)を使って正しい文字コードで編集していただく方法です。

> あと、ブログタイトルの文字の大きさも自力で小さくしてみました、
> (あてずっぽで%を少なくしちゃいました)

それで合っていますよ(^^)b
リバ子
2009年08月13日 02:31
Yumeさま
さっそくありがとうございます。安心しました。
わかりやすくて、 ・・ ステキです^^
画像も500でアップするようにします、また何かあったら教えてください。。では。
kuto
2009年11月24日 12:51
テンプレート頂きました。
説明がわかりやすいので設置も簡単に出来ました。
また素敵なテンプが開発されるのも楽しみにしています。
ありがとうございました。

Leave a Comment

 *必須
Name

E-mail

URL

Cookie
 *必須
Comment
上の画像に書かれている文字を入力して下さい
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。