ソラマメブログ
HOME > 公開テンプレート > 公開テンプレート「WhiteStripe」
01:26 2009年05月04日
(2010.11.21 テンプレートのダウンロード方法を変更)
(2009.05.04 13:59 「ソースコード」に文字エンコードに関して追記しました)
(2009.05.20 ソラマメブログの広告表示仕様変更によりスタイルシートを更新)
FreshStripe」「BlackStripe」に続き、白を基調にしたテンプレート「WhiteStripe」を公開します。
本テンプレートも HTML は「FreshStripe」と同じ、異なるのは CSS だけです。

キャプチャ


トップページのキャプチャ 個別記事のキャプチャ アーカイブのキャプチャ

ソースコード


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

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

利用方法


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

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

ライセンス


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

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

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

免責


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


動作確認ブラウザ


Windows XP、MacOS 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(36)

TrackBacks

「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

サキ。サキ。
2009年05月07日 18:20
背景画像を入れたいのですが
どうやったらいいですか?
YumeYume
2009年05月07日 19:42
>サキ。さん

初めまして。
すみませんが、どこに背景画像を入れたいのか書いていただけますか?

ページ全体の背景であれば、以下の記事をご参照ください。

「ページ全体に背景画像を指定する」
http://templ.slmame.com/e543998.html
ミミで~~す~♪
2009年05月18日 10:55
はじめまして、ミミと申します。
BlackStripeのテンプレートを利用させていただいてます、ありがとうございます。
ホワイトとかいろいろテンプレートをお作りですが、自分でバックの色を変えることはできますか?・・教えてください^^
できましたら、私のサイトを見て指摘をいただければと思います。
よろしくお願いいたします。
http://mimitica.slmame.com/e622649.html
Yume
2009年05月18日 15:43
>ミミさん

初めまして。
コメントありがとうございます。

すみませんが、具体的にどの部分の背景色を変えたいのか書いていただけますか?全体的に背景色(及び背景画像)を変えたい、ということでしょうか。

ミミさんのブログを拝見しましたが、何について指摘して欲しいのかが明記されていませんでしたのでお答えすることができません。

お手数ですが、上記について再度コメントをいただければと思います。
Mimien LittleMimien Little
2009年05月18日 17:41
あ~すみませんでした^^;
素人なもので、現在の黒いところを(全体的に)、たとえばオレンジ系統の色にするとか、むづかしいでしょうか?ラズベリー色を基調とした「BerryStripe」のように全体的にと考えていました。
私のブログは真似て作らせてもらいましたが、間違っていないか、問題ないかお聞きしたかったです。
お手間とらせて申し訳ありません。
Yume
2009年05月18日 21:02
>ミミさん

コメントありがとうございます。
全体的に色を変えたい場合、一部の背景画像を作り直してアップロードし、「スタイルシート」に手を加える必要があります。

詳しい方法については記事にしたいと思います。
申し訳ありませんが少々お待ちくださいね。

>私のブログは真似て作らせてもらいましたが、
とありますが、テンプレートに何かしら手を加えられたと言うことでしょうか?
Mimien Little
2009年05月18日 21:06
ご連絡ありがとうございました、テンプレートはそのままです。今後ともいろいろおしえてください。感謝^^
羽朱羽朱
2009年05月18日 21:40
はじめまして(・´∀`・ )
テンプレート参考にさせて頂きました。
以前は独自でカスタムしていたので
なかなか思うようにはいかず^^;
Yumeさんのブログに辿り付き、
色々と参考にさせていただき、ありがとうございます
なんとかまとまった感じに完成したので
お礼の報告をしにきました。
また参考にさせて頂きますので
よろしくお願いします
Yume
2009年05月18日 22:04
>羽朱さん

初めまして。
コメントありがとうございます。
淡い色合いが素敵ですね。
お力になれたようで、嬉しいです。
YumeYume
2009年05月19日 00:45
>ミミさん

度々すみません。
ブログ全体の背景色と背景画像を変更する方法、記事にするには少し時間が掛かりそうです。お急ぎでしたら、カテゴリー「カスタマイズ Tips」の各記事をご参照ください。

ソースは若干異なりますが、背景色と背景画像の指定に関しては同じ手法を使っています。手を加えるテンプレートは「スタイルシート」のみです。

よろしくお願いします。
YumeYume
2009年05月19日 21:54
>ミミさん

ん〜ごめんなさい!
色々考えたのですが、やっぱり Web サイトやブログのデザイン経験が無い方には、全体的なカスタマイズはお勧めできないですね・・・。

このテンプレートは、各種OS・ブラウザ間で極力差異が出ないよう作成しています。ソースコードは他の方が見ても解りやすいよう記述しているつもりですが、それは(X)HTML・CSS の知識がある人を前提としています。

配布ページの「免責」に『大幅なカスタマイズのサポートは行わない』と書いているのは、個人のスキルと要望に合わせたサポートを始めてしまうとキリがなくなってしまうという理由からで、当面は、そのぶん空いた時間を新しいテンプレートの公開に使いたいと考えています。

一度「記事にします」と言っておきながら、このようなお返事になってしまい本当に申し訳ありません。
どうか、ご理解頂ければと思います。
タカタカ
2009年08月13日 05:15
はじめまして^^
WhiteStripe使わせていただきました。
このような素晴らしいテンプレを公開なさってるYumeさんに感謝です。
これからも色々と参考にさせていただきます^^
YumeYume
2009年08月16日 19:56
>タカさん

はじめまして、コメントありがとうございます。
気に入っていただけて嬉しいです^^
みきちーみきちー
2009年08月16日 23:21
初めまして^^テンプレート使わせていただきます。色々勉強になります^^
YumeYume
2009年08月18日 14:55
>みきちーさん

初めまして。
コメントありがとうございます。とても励みになります^^
KeiKei
2009年10月16日 01:33
はじめまして(*^^)v
テンプレート使わせていただきました。
「MY ALBUM」の機能がとっても便利で気に入っています。(ほとんど更新しないブログですが・・・)ありがとうございます!
YumeYume
2009年10月24日 01:53
>Keiさん

コメント有難うございます^^
気に入っていただけて嬉しいです。
+++SARAH+++
2010年01月11日 03:19
はじめまして。
シンプルなテンプレート探しもとめてやっとたどり着けました。
使わせていただいています~
ありがとうございます
るいするいす
2010年06月11日 09:39
テンプレート使わせていただいてます。ありがとうございます。
みゆ62みゆ62
2010年06月19日 01:10
こんにちは^^
テンプレートを使わせていただいています^^

お聞きしたいのですが、カスタマイズで
アイキャッチ画像を変更したくて、画像のURLを変更しました。プレビュー画面では変更されているのですが、登録しても反映されません^^;
何が原因なのでしょうか・・。
YumeYume
2010年06月23日 02:22
>るいすさん
コメントありがとうございます!

>みゆ62さん
ごめんなさい、お返事が遅くなりました。
今みゆさんのブログでアイキャッチ画像が表示されているのを確認しました。解決されたということで宜しいでしょうか?
みゆ62みゆ62
2010年06月23日 10:12
あれこれやっているうちに出来ました^^
どこか間違っていたんだと思います^^;
お返事いただいてありがとうございました^^
Hiro
2010年09月07日 09:07
はじめまして。
ど素人なのに、みんなとは違うテンプレートを使いたくて、ここにたどり着きました。

そうしたところ・・・・・・。
>ソースコードはテキストファイル(.txt)形式で配布しています。以下のリンク先を保存して下さい。
◦スタイルシート
◦トップページ
◦個別記事
◦アーカイブ
とありますが、「スタイルシート」はテキストを
見ることができました。
トップページ、個別記事、アーカイブについては、
青いゴシック体で書かれた、このブログの見出し等の
ページに飛んでしまい、テキストを見ることが
できません。

SL内にいる数名の友人にも確認してもらいましたので
私のPCの問題では無いと思います。
どうしても、使いたいので、なんとか宜しくお願いいたします。
Yume
2010年09月16日 03:28
>Hiroさん

コメントありがとうございます。
返事が遅くなってしまい申し訳ありません。

私の環境ではHiroさんと同じ現象を確認することができませんでした。

各ファイルへのリンクを右クリック、「リンク先を保存」し、HiroさんのPCに.txtファイルを保存することも出来ない状況でしょうか?

また、「青いゴシック体で書かれた、このブログの見出し等の
ページ」とは、私のブログの他のページにジャンプしてしまう、ということでしょうか?もしそうであれば、念のためジャンプしたURLを教えていただけますでしょうか。

お手数ですが、宜しくお願いします。
Hiro
2010年09月21日 09:49
回答ありがとうございます。

>各ファイルへのリンクを右クリック、「リンク先を保存」
これを試してみましたが、インターネットエクスプローラーのリンク先が保存されるだけで、テキストページにはなりません。;;

ちなみにURLは、
http://dl.dropbox.com/u/1052222/SLMaMeTemplates/WhiteStripe/ws_top.txt
と、なっています。

txtとなっていますが、IEが開きます。
何か分かりましたら、また、教えてください。よろしくお願いいたします。
Yume
2010年09月24日 01:58
>Hiroさん

お返事ありがとうございます。
うーん、これまでそのような報告は無かったのですが、IEの仕様かもしれません。
テンプレートの配布形態を変えようと思いますので、今しばらくお待ちいただけますか?今週末には対処したいと思います。
お手数をお掛けして申し訳ありません。どうぞ宜しくお願いします。
YumeYume
2010年09月27日 02:45
>Hiroさん

申し訳ありません、この週末はあまり時間がとれず、配布形態の変更が出来ませんでした。。

最近IEを余り使っていなかったので気がつかなかったのですが、リンク先のファイルをそのままデスクトップに保存する場合、IEではリンクを右クリックして「対象をファイルに保存」を選びます。それでもブラウザで開いてしまうのでしょうか?
Yume
2010年09月27日 13:46
>Hiroさん

どういった現象が起こっているのか、IE確認できました。遅くなって申し訳ないです。

「対象をファイルに保存」すると、txtファイルでなく、htmファイルが保存されるかと思います。そのファイルを右クリックして「プログラムから開く」を選び、メモ帳かその他テキストエディタを選択してみてください。Wordは選ばない方が良いでしょう。

そうするとソースコードが確認できるはずです。
宜しくお願いします。
リリポックルリリポックル
2010年10月08日 21:31
こんにちは!!!
ブログを作るたびに使わせていただいてます。
今回作成したのですが、なぜだか一番したの部分が横にながくなってしまいました・・・

どこをいじってるときに、どうしてなったのかまったく分かりません。
お手数ですがお時間のあるときにお返事いただけると嬉しいです。
YumeYume
2010年10月11日 22:58
>リリボックルさん

HTMLの修正で直ります。
ヘッダー近辺の
-----
</div></div><!-- /#banner_inner -->
</div><!-- /#banner -->
-----
を、
-----
</div>
</div><!-- /#banner -->
-----
に直してください。
そしてフッターの
-----
<!-- /#wrap -->
-----

-----
</div><!-- /#wrap -->
-----
としてください。

私のテンプレートでは#wrapにヘッダーエリア、コンテンツエリア、フッターエリアを全て内包させており、ブログ全体の横幅を#wrapに対して指定しています。
リリポックルリリポックル
2010年10月15日 01:42
ご返答ありがとうございます!!!
無事なおすことができました!!!!!
Yume
2011年03月24日 00:52
>かずみさん
コメントありがとうございます。気に入っていただけて嬉しいです。
気がつくのが遅れましたが、問題が解消されたようで良かったです^^
YuzuYuzu
2011年05月04日 14:02
ソースコードってどこに貼るんですか?
Yume
2011年05月04日 15:30
>Yuzuさん
このページの「利用方法」をご覧下さい
YuzuYuzu
2011年07月25日 18:18
それぞれの入力エリアが良く分からないんですが…。
YumeYume
2011年07月28日 01:54
>Yuzuさん

1)ブログ管理画面にログインして、左側の【ブログの設定】をクリックします。
2)【ブログの設定】のメニューが開いたら上から5つ目の【テンプレート】をクリック。
3)ブログのテンプレートは3つまで保存できます。空きがあれば「テンプレートの追加」をクリックして、どれでも良いので適当にテンプレートを選択してください。
3)追加したテンプレートの「編集」欄に「カスタマイズ」というリンクが追加されるのでクリック。
4)『スタイルシート』『トップページ』『個別記事』『アーカイブ』のソースの入力欄が表示されます。
5)入力欄に入っている内容を全て削除して、ダウンロードしたテンプレート(.txt)の内容を入れます。ws_css.txtの中身は『スタイルシート』に、ws_toppage.txtの中身は『トップページ』に、 ws_entry.txtの中身は『個別記事』に、ws_archive.txtの中身は『アーカイブ』にそれぞれ全選択してコピー&ペーストします。
6)「プレビュー」ボタンをクリックして、表示に問題が無ければ「登録」ボタンをクリックし、保存します。
7)あとは2)で開いたテンプレート選択画面で「このテンプレートを使う」をクリックすれば、新たに追加したテンプレートがブログに適用されます。

いかがでしょう?少しは解りやすい説明になっていると良いのですが…

Leave a Comment

 *必須
Name

E-mail

URL

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