FC2ブログ

オサーンのFC2ブログテンプレート

テンプレートとあと何か

2006-04-28(Fri)

基礎からのカスタマイズ1

新しく登録したテンプレート、simple_base_oneをカスタマイズしていく連載記事です。初めてテンプレートを弄る人にも分かりやすく書いていきますんで参考にしていただければと思います。
あくまでもオサーンが作るテンプレートに関した記事ですので、他の作者さんが作ったテンプレートには当てはまらない部分も出てきます。そこいら辺は適宜読み替えて応用してください。

まずはテンプレートの構造から覚えましょう。これを知っておくとメニューの配置を変更したり、後から3カラムに変更したりと色々と弄れるようになりますので。まずは下の図を見て下さい。

ss

これがsimple_base_oneの大まかなレイアウトです。


赤い部分がブログタイトルの枠
ベージュの部分がプラグイン1とプラグイン2が表示されるメニューの枠
ピンクの部分がプラグイン3と記事が表示される枠
シルバーの部分が著作権表示部分

この4つの枠を更に外側の緑色の枠で囲っています。
緑色の枠で囲うのは中央寄せで表示するためです。
更にそれぞれの枠の中には小さな枠が組み込まれてます。

こうして図形にしてみると色々なことが分かります。
例えば、メニューを右側にするにはベージュの部分とピンクの部分を入れ替えればいいんだな。とか、ピンクの記事部分の横幅を拡げるためには緑色の部分も拡げなくてはいけないな。といったことです。

と、こんな感じで進めていたのではいつまで経っても本格的なカスタマイズまで進めませんので、実践的な内容を盛り込みながら進めていきたいと思います。
では次の図をご覧下さい。

ss

これは各ブロック(枠)に対して実際のテンプレート内でどのような名前で指定しているかを示したものです。いやいや、横文字だらけですが難しくはありません。まずはsimple_base_oneのテンプレート編集画面を開いてみて下さい。

上の方からゆっくり見ていくと以下のような部分があると思います。

<!-- 一番外側のブロック(枠)ここから最終行付近までcontainer -->
<div id="container">

これは「ここから緑色の部分(container)が始まっていることを表しています。
上の図を見るとベージュの部分やピンクの部分は緑に枠の中に収まっているので、実際のテンプレートのソースでもベージュやピンクの部分は緑の部分より下(中に)記述されることになります。

では次にテンプレートの編集画面からスタイルシートを見て下さい。
上からゆっくり見ていくと以下のような部分が見つかります。

/* 一番外側の大きなブロック 全体の文字色や横幅もここで決めます*/
#container {
    width:720px;                /* 全体の横幅 */
 margin:0px auto 0px auto;   /* 全体のセンタリング(中央寄せ)に必要 */
 color:#333333;              /* 全体の文字色 */
 padding:0px 0px 0px 0px;    /* 全体を枠で囲う場合に使います */
 text-align:left;            /* 全体の枠内を左寄せに戻します */
}

HTMLの方に <div id="container"> と「container」という記述があって、
スタイルシートでも #container と「container」と記述してあります。
これを相互に照らし合わせてみると、

一番外側の枠(緑色の部分)はcontainerという名前が付けられていて、横幅が720px 文字の色が#333333(ダークグレー)に指定されているんだな

ということが分かります。
このようにそれぞれのブロック(枠)には名前が付けられていて、HTMLとスタイルシートで相互に連携し合ってデザインされています。
これを理解することが自由自在にカスタマイズするための第一歩。これさえ理解してしまえば「どこを弄っていいか分からない」ということが無くなります。

例えば著作権表示の文字の大きさを変えたい場合は・・・・。
そうです、著作権表示部分は footer という名前が付けられていますからスタイルシート内で footer と言う場所を見つければいいんです。

ということで、カスタマイズをする前にまずはHTMLとスタイルシートをザッとでいいから読んでみて下さい。simple_base_oneではなるべく詳しい説明書きを加えたつもりですので、HTML内の大まかな順番や、スタイルシートでどこをどう設定しているかが何となくお分かり頂けると思います。

ということで第一回目は終わりです。次回は文字色を変更してみたいと思います。

スポンサーサイト



2006-04-27(Thu)

Simple base One

ssカスタマイズベースとしてお使いいただけるテンプレートです。管理画面では「simple_base_one」という名前でお探しいただけます。
サンプル

CSSに説明書きを加えてあるので初心者の方でも比較的簡単にカスタマイズできると思います。また、当ブログでもこのテンプレートを題材としたカスタマイズ記事を連載しますので自由に弄っていただけると思います。


基本的な構造は月間訪問者数50000人を数える「待ち受け画像探検隊」で使用しているものと同じになっており、そこで培ったSEO対策やアクセシビリティの要素などを盛り込んでいますのでアフィリエイトブログのアクセスアップにも有効だと思います。

テンプレートに依存した内容であればサポートもさせていただいておりますのでお気軽にご利用下さい。

2006-04-20(Thu)

引用部分の動作指定

共有テンプレートとして登録するテンプレは人様にお使いいただくわけですから十分な動作チェックをして万全の状態で送り出すように心がけてはいるのですが、細かい部分の動作はお使いいただく方の好みによって違ってきますのでコチラ側で設定していない部分もあるんです。
その最たる部分が引用のはみ出し設定でして、ニュース記事などを多く引用する方やテンプレのソースを貼る機会の多い人には重要度の高い部分です。

通常、引用として扱う文章はblockquoteとというタグで囲みます。FC2の記事を書く画面にもありますね「Q」ってボタンがそれです。
んで、この中に長い英文やURLを記述すると途中で改行されずにはみ出してしまいます。その結果IEではサイドバーが落ちるという現象が起こって見栄えが悪くなります。IE以外では隣の部分にはみ出した部分が重なります。これも見栄えが悪いし読みにくいです。

文章の途中で強制的に改行させる方法として word-break や word-wrap を用いる方法があるのですが、これはIEでのみサポートされているプロパティでして、他のブラウザでは何の役にも立たない使い道の限られるプロパティです。
そこで、はみ出した部分を強制的にカットするかスクロールさせて表示するかの設定をすることで見栄えが悪くなるのを回避させてやるようにします。

まずはスタイルシートの中からblockquoteを定義している箇所を探します。オサーンのテンプレートではカレンダーの設定のちょっと上に書くようにしています。

以下のような箇所が見つかったら好みに合わせてはみ出した部分の処理を決めてやります。


blockquote {
width:95%;
padding:10px;
margin: 20px 0px;
border: 1px dashed #003399;
overflow: ここに好みの値を入れます:
}
overflow: hidden; はみ出し部分を非表示にします
overflow: scroll; はみ出した部分をスクロール表示にします
overflow: auto; ブラウザにお任せです

実際にはこんな感じになります
blockquote {
width:95%;
padding:10px;
margin: 20px 0px;
border: 1px dashed #003399;
overflow: auto:
}

こうして設定してあげることで表示の崩れを防げます
overflow: hidden; のサンプル (Blue Moon Third Divisionの記事)
overflow: scroll; のサンプル →このページです

とまぁ、テンプレートも自分好みに弄っていくことで使いやすくなっていきます。作者がカスタマイズを禁止していなければ自由に弄って構わないとオサーンは解釈しています。もちろんオサーンのテンプレートはガンガン弄っていただいて構いません。

2006-04-20(Thu)

Blue Moon Third Division

ss Blue Moonを3カラム化して微調整を加えたものです。管理画面ではblue_moon_3divisionでお探しいただけます。
サンプル

多少実験的な部分が含まれていますので頻繁に仕様変更するかもしれません


2カラム版からの大きな変更点としてフォントを変えています。テンプレのイメージに合わせるために従来のsans-serifからmonoに変更しました。
変更前 変更後

変更前の丸みを帯びたフォントがお好みの方はスタイルシートの以下の部分から変更が可能です。

/* 背景画像と背景色の指定 */ body {
background:url("http://blog-imgs-22.fc2.com/i/m/a/image1000/blue_moon_back.jpg") bottom right no-repeat fixed;
background-color: #000000;
font-size: 100%;
/* font-family:"Courier New", verdana, arial,"\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF", "\30D2\30E9\30AE\30CE\20Pro\20W3", HiraKakuPro-W3, Osaka, sans-serif; */
font-family:"Courier New", Courier, mono;
line-height:140%;
text-align:center;
}

font-family:"Courier New", Courier, mono;の部分を削除していただき、
その上の行の"Courier New",/* と */を削除することで変更が可能です。(赤字の部分を全て削除)

記事本文と追記部分の区別を付けやすくするために点線を引いています。
変更前 変更後

点線が不要な方はスタイルシートの該当部分を削除してください(スタイルシートをご覧頂ければ説明が書いてあります)

3カラムに関してはまだまだ手探りでやっているのでお気付きの点がありましたらご指摘いただけるとありがたいです。よろしくお願いいたします。

2006-04-20(Thu)

Country bear

ssテンプレート第三弾です。管理画面ではcountry_bearでお探しいただけます。
サンプル

基本的にはBlack Roseのデザイン違いですがプラグイン部分を囲う枠を追加しているのと、全体的なサイズの微調整を行っている部分がBlack Roseとの相違点です。


コメント欄の絵文字機能に対応させています。今までの黒背景だと絵文字が似合わないということで見送っていたのですが、このテンプレなら絵文字も違和感がないと判断しました。上手く動作しない場合はコチラの記事をお読みいただき、サーバー番号をご自分のブログのサーバーに合わせてみてください。

ブログタイトルとブログの説明部分は幅に限りがあるため文字サイズが小さめです。大きめサイズにする場合はスタイルシートの該当部分(説明してあります)を変更してください。
記事内のリンク色も癖のある色になっているので気になるようでしたらお好きなようにどうぞ。

その他テンプレートを見ても不明な部分はコメントいただければお答えさせていただきます。

使用している画像はフリーのPSP用チューブで作製しています。減色やサイズ変更程度なら自由にしていただいて構いません。

Country Bearの検証結果 HTML CSS

不具合のご報告・ご意見ご要望はご遠慮なくお申し出下さい。

2006-04-17(Mon)

Black Rose

ss 第二作目のテンプレート Black Rose です。
管理画面では black_rose で検索してみてください。  サンプル

黒背景に赤をアクセントとして使い、ちょっと大人びた感じを出したつもりです。
ほとんどの部分でフォントサイズが可変するので閲覧環境を選ぶことなくお使いいただけると思います。

記事中のリンク色を赤にしているので、本文にリンクを多用する方は文字色を変更してお使いいただいた方がいいかもしれません^^;


レイアウトがちょっと特殊になっておりまして、ヘッダー(バナー)部分とフッター部分は左側のカラムに組み込まれています。カスタマイズの際はご注意下さい。

ss

ブログタイトルを表示できる幅に限りがあるため、標準ではタイトルの文字サイズを小さめにしています。文字サイズを変更されたい方はスタイルシートに説明書きを記しておりますのでご一読下さいませ。
同時にブログ説明文も小さめになっています。説明文が長い場合は自動的に複数行となります。

サイドメニューのタイトルに特徴を持たせています(最初の一文字だけ大きい)。アルファベットだと格好いいのですが漢字や仮名だとしっくりこないのでちょっと微妙かもしれません(汗)
サイドメニューのタイトルや日付など数字や英文で表示する箇所だけフォントファミリーを変えると更にいい感じになると思います。 font-family:"Times New Roman", Times, serif" なんかがオススメです。

横型カレンダーはおまけ程度に考えてください^^;小さすぎて実用性は「?」です(汗)
ご不要であればテンプレートで指定している箇所を削除していただいてお使い下さい(削除する部分はテンプレート内で説明しています)

背景に使用している画像は海外サイトで拾ったPSPのピクチャーチューブで作っておりまして、厳密に言えばオサーンがデザインしたものではないんですな。もちろんちょっとは手を加えてますけど。
なので減色とかサイズ変更くらいならご自由にやっちゃってください。

Black Roseの検証結果 HTML CSS

とまぁ、Broack Roseに関してはこんな感じでしょうか。
第三作目はちょっと可愛らしいデザインを予定しております。今週中には登録しますのでこちらも宜しくお願いいたします。

テーマ:共有テンプレート - ジャンル:ブログ

2006-04-17(Mon)

リンクバナー

テキストリンクはどうしてもイヤ!という方はお好きなバナーをお持ち帰り下さいませ。
最下部に貼っていただいても構いませんし、サイドバーに貼っていただいても構いません。

タグをコピーペストでも構いませんが、なるべくならご自分のブログにアップされることをオススメします。

待ち受け画像探検隊
<a href="http://image1000.blog50.fc2.com/" target="_blank"><img src="http://blog-imgs-17.fc2.com/o/s/a/osaan/banner-yellow.gif" style="border:0px;" alt="待ち受け画像探検隊" /></a>

待ち受け画像探検隊
<a href="http://image1000.blog50.fc2.com/" target="_blank"><img src="http://blog-imgs-17.fc2.com/o/s/a/osaan/banner-white.gif" style="border:0px;" alt="待ち受け画像探検隊" /></a>

待ち受け画像探検隊
<a href="http://image1000.blog50.fc2.com/" target="_blank"><img src="http://blog-imgs-17.fc2.com/o/s/a/osaan/banner-red.gif" style="border:0px;" alt="待ち受け画像探検隊" /></a>

待ち受け画像探検隊
<a href="http://image1000.blog50.fc2.com/" target="_blank"><img src="http://blog-imgs-17.fc2.com/o/s/a/osaan/banner-green.gif" style="border:0px;" alt="待ち受け画像探検隊" /></a>

待ち受け画像探検隊
<a href="http://image1000.blog50.fc2.com/" target="_blank"><img src="http://blog-imgs-17.fc2.com/o/s/a/osaan/banner-blue.gif" style="border:0px;" alt="待ち受け画像探検隊" /></a>

2006-04-17(Mon)

ご利用いただく前に

自分がウルサく言われるのが嫌いなので、ウルサいことは言いません。
以下のことをお守りいただくだけで結構です。

  • 素材の二次利用・流用・改変は不可
  • 再配布は不可
  • 著作権表示の削除は不可

以上の3点だけです。

使用している画像素材はオサーンが撮影・自作した物です。よって著作権はオサーンに帰属します。
どうしてもと言う場合は個別にご相談いただければ検討させていただきますのでお気軽に。

再配布は現時点では禁止とさせてください。面倒に巻き込まれるのがイヤなので。
オサーンのテンプレートをベースにするくらいなら公式テンプレのSample・Sample2あたりの方が弄りやすいと思いますよ。

テンプレート最下部に著作権表示を掲載させていただいております。テキストリンクに抵抗がある方はバナー置き場よりお好みのバナーをお持ち帰りいただき変更していただいても構いません。プラグインの「リンク」に加えていただいても結構です。
要は何らかの形で「待ち受け画像探検隊」へリンクしていただければ結構です。(常に表示される場所でお願いします)

以上、我が儘を言って申し訳ありませんがお守りくださいますようお願いいたします。

テーマ:共有テンプレート - ジャンル:ブログ

2006-04-17(Mon)

Blue Moon

SS 拙作テンプレートの第1弾です。管理画面では bblue_moon でお探しいただけます サンプル

青いセロファンに透かして見ているような、そんな感じを出してみました。
月が綺麗な晩に、一夜だけ豹変したいときなどに使っていただけたらと思います。


なるべく読みやすいように配慮したつもりではいますが、黒背景ということで読みにくさは残っています。文字サイズ可変なのでブラウザ側で大きくすることも可能ですが、デフォルトでもう少し文字を大きくされたい方はスタイルシートの以下の部分で調節してみてください。

/* 記事本文 */
.entry-body {
font-size: 83%; /* 文字のサイズ */
line-height: 145%; /* 行間の調節 */
overflow: hidden; /* はみ出した部分はぶった切るよ */
}

font-size:90% くらいが妥当でしょうか?100%だとちょっと大きすぎますね。

こうして文字を大きくするとサイドバーが落ちますので、width:510px; を同時に加えてください。これによりレイアウトの崩れは防げます。

.entry-body {
font-size: 90%; /* 文字のサイズ */
line-height: 145%; /* 行間の調節 */
overflow: hidden; /* はみ出した部分はぶった切るよ */
width:510px; }

赤文字が修正した部分です。

line-height の数値を弄ることで行間を調節できますので、お好みに合わせて変更してくださいね。

余計な機能は一切付けておりません。利用規約の範囲内でご自由にカスタマイズしてお使い下さいませ。

IE6 Firefox Operaで表示確認済みですので安心してお使いいただけます。
Blue Moonの検証結果 HTML CSS

2006-04-16(Sun)

お詫び

4月16日、20:20頃から21:20分頃までの1時間に渡り、blue_moonに解析タグを設置したまま配付してしまいました。
なにもいい訳は致しません。、ひたすら頭を下げるのみでございます。

該当する時間にダウンロードされた方はお手数ですがテンプレート最下部に以下に記述した不要なJavaScriptタグが付いていないかご確認下さいませ。
解析タグが付いた状態だとブログの右上に小さなバナーが表示されますのでお気付き頂けると思います。

<!--shinobi1-->
<script type="text/javascript" src="http://??.jp/ufo/02966481401"></script>
<noscript><a href="http://??.jp/bin/gg?02966481401" target="_blank">
<img src="http://??.jp/bin/ll?02966481401" border="0"></a><br>
<a style="font-size:80%" href="http://www.diet-value.net/" target="_blank">ダイエット</a></noscript>
<!--shinobi2-->

以後十分に気をつけます。申し訳ありませんでした。

2006-04-16(Sun)

Blue Moon 修正のご案内

配布中のテンプレート Blue Moonの修正を致しました。

・CSSの整形
・Firefox Opera での表示調整

以上の2点です。

・ぐちゃぐちゃだったCCCを整理すると同時に、簡単ですが説明文を記入いたしました。ご自分でカスタマイズをされる方は参考にしていただければ幸いです。

・横幅を760pxで指定しているにもかかわらず、IE以外のブラウザでは770pxで表示されていることに気が付きました。たった10pxなので気が付きませんでした(汗)
こちらも今回の修正で手を加えておりますので気になる方はダウンロードし直していただければと思います。

どちらも致命的な不具合ではございませんので現在ご不満がなければそのままでも結構です。

新作のテンプレートを登録いたしました。黒背景に赤をアクセントとした大人っぽいデザインとなっております。無事に承認をいただければ月曜日には一覧の中に混ぜていただけると思います。
名称は black_rose です。お気に召しましたらお使い下さいませ。

ss

2006-04-15(Sat)

Blue Moon 修正

blue_moon_cal.gif 何か忘れてると思ったらカレンダーの装飾でした(汗)
以下のリンクをクリックして表示されるソースをスタイルシートに加えることでカレンダーの装飾ができます。リンク色などは好みで変更していただいて構いません。 http://blog-imgs-22.fc2.com/i/m/a/image1000/blue_monn_cal.txt

2006-04-15(Sat)

規約変更

昨夜書いたばかりのことを訂正するというのは非常に申し訳ないのですが、拙作のテンプレートを再配布禁止とさせていただきます。

毎日のようにテンプレートを探している方は既にご存じかと思いますが、あるテンプレートをめぐってちょっとしたトラブルが起きています。とあるテンプレ作者さんの作品を許可を得て再配布されているテンプレートがあるのですが、このテンプレの内容にちょっと問題がありまして一部の環境ではまともに表示されなくなっています。

再配布であろうと本来ならば直接の配布元である再配布者が何らかの態度を示すべきだと思うのですが、「元は○○さんのモノだから私には関係ない」と突っぱねるものだからさぁ大変。オリジナルの制作者の元にまでサポートを求める人が現れるばかりでなく、再配布者に対する批判や非難までもがオリジナルの作者さんにぶつけられています。

このような状況を見てしまうと、軽々しく「再配布OK」とは言えなくなってしまうんですよ。常識ある対応をしていただけるのなら再配布は一向に構わないのですが、今回のように常識もなければスキルも伴わない人に「待ち受け画像探検隊のテンプレを再配布?」なんてやられちゃったら血管がぶち切れると思うので。

といった健康上の理由から再配布は禁止とさせていただきます。どうかご理解下さいますようお願い申し上げます。

*?*?*?*?*?*?*?*?*?*?*?

閑話休題

なんだか沢山の方にダウンロードしていただいて、嬉しいと言うより申し訳ない気持ちで一杯です。「キレイ」と言っていただいたのに作っているのがこんなネタブログの管理人というのが申し訳ないんです^^;

昨夜から沢山の方がこのカテゴリに訪問してくださっておりまして、このブログの片隅でこのカテゴリを続けていくのは無理があると気が付きました。
もう少し種類を増やしたらテンプレート用に別ブログを開設して簡単なサポートもさせていただこうと思っております。それまではこの煩雑な雰囲気をお楽しみ下さいませ^^;

FC2には沢山のテンプレートがありますから、ず?っと使い続けてくださいなんて無茶なことは申しません。ちょっとイメージを変えたいときや気分転換したいときに拙作のテンプレートを候補に入れていただければ幸いです。
今後とも忘れない程度にご愛顧下さいませ^^

2006-04-14(Fri)

テンプレート事始め

思うところあって自作のテンプレートを共有テンプレートに登録してみました。こんなネタブログの管理人がテンプレートを自作するのも珍しいかもしれませんが。実は他所のブログのオリジナルテンプレートも配付していたりするんです。テンプレートの自作は趣味みたいなもんですな。

で、他所のブログ用に作っているデザインをそのままFC2用に流用して配付してみます。 ですので、「どっかで見たことあるデザインだな」と思っても決してパクりじゃありませんのでヨロシクね^^;

え?、今回のテンプレート「Blue Moon」の特徴を少しだけ・・・。
Blue Moon サンプル

まずCSSのソースがグチャグチャです(汗) カスタマイズしやすいように整形を試みたのですが、面倒臭くなって放棄しちゃいました。 時間があるときに少しずつ整形していきますんで、長く生温かい目で見守ってやってください。

これといった機能は付けていません。低機能です。 FC2ブログの大きな魅力は様々な機能を簡単に加えることが出来るカスタマイズ性にあると思っています。ですので、テンプレート作者が「これを使え」とお仕着せにする必要はないかな、と。 サイドメニューの折り畳みなどプラグインでは実装できないこともフォーラムに行けば親切に教えてくれる人がいるし、方法を解説しているブログさんもたくさんあるしね。 その代わり、どんなブラウザでもキチンと表示できるように心がけて作っています。これは使っていただく方の責任ではなく作者の責任だと思うので。

利用規約なんかも書いておいた方がいいのかな? 使用を禁止するブログは特にないです。使用している画像は自分で撮影したり自作したりしてますので、誰に気兼ねすることもないんですな。アダルトだろうとアングラだろうと構いませんよ。作者も好きだしね、アダルト(笑)
ただし、粘って粘って撮影した画像を使っているので愛着があります。他のテンプレートへの流用はご遠慮下さい。

カスタマイズはご自由にどうぞ。 元が分からなくなるほど弄っちゃったら著作権はあなたのものです。自由に再配布してください。 あ、配色を変更したくらいじゃダメだよ。ぶっ壊れるほど弄ってからね^^ フッター部分の著作権表示「待ち受け画像探検隊」の文字がどうしても恥ずかしいと仰る方。 お年頃の乙女の方に限ってバナーへの変更を承認します(偉そうだな、オレ) テンプレートの一番下の方にある以下の部分を書き換えちゃって下さいね。

え?何歳までが「お年頃」かって? う?ん、85才までにしておきます^^;

<p> Blue Moon. Designed by <a href="http://image1000.blog50.fc2.com/" target="_blank" title="テンプレート作者のブログへ">待ち受け画像探検隊</a> </p>
      ↓
<p> <a href="http://image1000.blog50.fc2.com/" target="_blank"><img src="http://blog-imgs-22.fc2.com/i/m/a/image1000/CAQ3KNF4.gif" alt="待ち受け画像探検隊" style="border:none; " /></a> </p>
こうすることで「待ち受け画像探検隊」の文字がカッコいいバナーに変わります。

待ち受け画像探検隊

難しくて分からなかったら遠慮無くコメント下さい。 でもなるべく今のままで使って欲しいなぁ。大人の事情があるのよ、色々と^^;

第二作目を今日中に登録したいと思います。こちらもヨロシクお願いいたします。

04/15 0:15 追記

コメント&トラックバック表示部分の修正を行いました。絶対に必要な修正ではありませんので、それ以前にダウンロードしていただいた方におかれましては修正後のサンプルをご覧いただいたうえで、必要であれば再度ダウンロードしていただければ幸いです。

って、敬語あってる?^^;

|  HOME  |