トリビア・ライフ - 天狼記

世の中の至る所にあるトリビア(主にPC上での物創りトリビア、生活トリビア)を発見する生活日記

カレンダー

ブログ内タグ検索

カウンター

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
FC2ブログではじめるこだわりブログ第2版
年末にブログテンプレート申請して約2週間程度かかりましたが、FC2ブログ共有テンプレートとして公開されました。
修正もなく一発で公開されたので少しびっくりしていますが、かなり嬉しいです。
アフィリエイトされる方やGoogle Adsenseでクリックしてもらいたい方である程度HTMLについて知識のある方を対象にしたテンプレートです。簡単に使い方を紹介します。

「Legend_V100」ブログテンプレートに関しての要望等あれば可能な限りは対応したいと思います。 ⇒ブログ作成(ブログランキング)
カテゴリの編集
説明
ブログで書いた過去記事を少しでも読んでもらうために横メニューを用意しています。
カテゴリ分けを綺麗に分けていると読む人も分かりやすいですね。

使用方法
読んでもらいたいカテゴリ(もしくは記事でも可能。URLを指定して表示するだけなのでURLがあれば何でも使用可能)の名前とURLを下記のように指定します。マウスオーバーしたときのアニメーションの色を5つ用意しているので、修正対象のサンプルを参考に好きな色を選んでメニューを作成して下さい。

修正対象
<div class="menu">
  <ul class="win7">
    <li class="win7blue break-right"><a href="<%url>"><%template_home></a></li>
    <li class="win7blue break-right"><a href="<%url>">カテゴリ1</a></li>
    <li class="win7yellow break-right"><a href="<%url>">カテゴリ2</a></li>
    <li class="win7yellow break-right"><a href="<%url>">カテゴリ3</a></li>
    <li class="win7green break-right"><a href="<%url>">カテゴリ4</a></li>
    <li class="win7green break-right"><a href="<%url>">カテゴリ5</a></li>
    <li class="win7red break-right"><a href="<%url>archives.html">記事一覧</a></li>
  </ul>
</div>


記事のサムネイル表示

説明
記事内に画像表示を左に説明文を右に表示するタグです。ブログを開いた際のトップ記事ではサムネイル画像が表示されていればなんとなくどんな記事か想像出来るため見る人にとっては分かりやすく見えます。

使用方法
・影付きの場合
<div class="thumbnail"><a href="画像URL"><img src="画像URL" width="画像横幅" alt="" /></a></div>

・影なしの場合
<div class="thumbnail2"><a href="画像URL"><img src="画像URL" width="画像横幅" alt="" /></a></div>

使用方法 - 補足説明
画像横幅を実サイズより小さくすることで縮小表示されます。少しでも綺麗に表示されるように特殊なCSSを 用いています。縮小表示されるためファイルアップロード時にサムネイル画像を生成する必要がなくなります。 クリックすることで、サムネイル画像が拡大されて見えます。

注意事項
・画像横幅を指定しないと画像の実サイズで表示されます。トップ記事では140pxまでのサムネイル画像に しておくとよいでしょう。
・</div>のタグ閉じ忘れをすると記事を書いた時にページが崩れますので閉じ忘れに注意。

使用例
<div class="thumbnail2"><a href="http://www.google.co.jp/intl/ja_jp/images/logo.gif" target="_blank"><img src="http://www.google.co.jp/intl/ja_jp/images/logo.gif" width="140px" alt="Googleロゴ" /></a></div>これはGoogleロゴのサムネイルです。


大きめの画像を綺麗に縮小して表示

説明
サムネイルとして使用するのではなく普通に画像を記事に表示する際にしようします。特に使用しなくても 問題ありませんが、サムネイルでも使用していますが、画像を綺麗に縮小して表示する特殊なCSSを使用 しています。普通に縮小するより綺麗に表示されます。

使用方法
基本はサムネイルと同じです。
<div class="clearimg"><a href="画像URL"><img src="画像URL" width="画像
横幅" alt="" /></a></div>

注意事項
記事の最大横幅もあるので、記事内で使用する際は画像横幅は450pxまでにしておくとよいでしょう。


記事内の小見出し表示

説明
記事内にちょっとした見出しを作る場合のタグです。この説明ページでも使用していますが、ちょっとした見出しを作ることで訪問した人がぱっと見て、長文のページであってもどこにどんな内容が書いてあるのか分かりやすくなるので説明するようなページでは使用した方が分かりやすく見えます。

使用方法
<h5 class="form-title-blue">小見出し(青)</h5>
<h5 class="form-title-red">小見出し(赤)</h5>
<h5 class="form-title-orange">小見出し(オレンジ)</h5>
<h5 class="form-title-green">小見出し(緑)</h5>
<h5 class="form-title-gray">小見出し(灰色)</h5>
使用方法 - 補足説明
5種類用意していますので、お好きな色を使用して下さい。タグの閉じ忘れには注意です。
尚、見出しについては別画像で用意しているものなのでお好みに応じて自分の好きな見出し画像を用いて使用することも出来ます。

3カラム(右)のフリーエリア

説明
敢えて3カラム(右)のフリーエリアはきまりきった表示スタイルにしていません。横幅もある程度大きめに用意しているので、広告を張り付けたり過去ブログ記事の特集をしたり等ご自由に利用出来るようにしています。
デフォルト状態ですと、何も枠が表示されていませんが3種類サンプルを用意していますので参考にしてスタイルシートをカスタマイズして下さい。

サンプル使用方法:ランキング
<h3 class="ranking clearimg">ブログランキング</h3>
<div class="rankingbody">
トリビア・ライフはブログランキングに参加しています。皆様の応援クリックに支えられています。
<a href="http://blog.with2.net/link.php?922088" target="_blank"><img src="http://image.with2.net/img/banner/banner_22.gif" width="88" height="31" border="0" title="人気ブログランキング一覧が表示されます" /></a>
</div>
サンプル使用方法:トピック
<h3 class="topic">TOPIC</h3>
<div class="topicbody">
トピックを記載
</div>
サンプル使用方法:その他
<h3 class="base">その他</h3>
<div class="topicbody">
広告等を記載
</div>

ソースコードの表示

説明
HTMLやCSS等ソースコードを表示したい場合に利用します。
<pre class="brush: xml;">
○○○○○○
</pre>

xml以外、css等も利用できます。改行設定を解除しないといけないです。

プラグイン3の使用に関して

説明
プラグイン3はGoogle Adsenseの検索バーを表示するもしくは大きめの広告画像等を貼り付けることを想定して作成しています。

「Legend_V100」ブログテンプレートに関しての要望等あれば可能な限りは対応したいと思いますのでこの記事にコメント追記お願いします。テンプレート利用頂きありがとうございます^^


コメント

  • 01月 09 2010
    • 2010/01/09(土) 22:34:50
    • [ 編集 ]
    • URL
    • おーたむ #Gpb25aJA
テンプ使用させていただいています^^かっこよくて気に入りました。
質問ですが、
左側のフリーエリアを左側と同様な囲いのあるプラグインを表示する方法をおしえてもらえますか?
  • 01月 10 2010
    • 2010/01/10(日) 14:00:13
    • [ 編集 ]
    • URL
    • #-
↑の方と同じ質問だと思いますが、右側サイドバーのスペース、、、プラグインごとに枠が表示されませんし、プラグインのタイトルも表示されません。
http://trivialife.blog119.fc2.com/blog-entry-88.html#more
の記事に左側と同じように修正する方法を記載しました。画像ファイルの修正も行ったので一度ブラウザのキャッシュに残っている可能性もあるので表示後リロード(ページの再読み込み)を行った方が良いです。
いつも相互リンクありがとうございます。
iPhone's Masterの管理者yuyayukaです。

天狼記さんの配布テンプレートの横カテゴリーですが...どうしてもあとひとつカテゴリーを増やしたくて、カテゴリーを増やしたんですが、8個目のカテゴリーの文字と画像どうしてもズレてしまいます(T0T)
どのようにしたら1~7までのカテゴリみたいに綺麗にできますか??

お忙しいと思いますが、宜しくお願いします。

yoyuyukaさんのHomePageにコメントさせて頂きました。
8個のカテゴリーでぴったりになるようにしていますので

1.サイズをずらしたりしていないか?
2.8個目はしきり線のbreak-rightが不要のため
li class="win7blue
となっているかの確認をお願いします。
  • 02月 25 2010
    • 2010/02/25(木) 20:50:34
    • [ 編集 ]
    • URL
    • ライトニング #-
僕のブログもあなたのブログの「ブログ内タグ検索」みたいにしたいです。どうすればいいのですか?
テンプ使用させていただいてます。
カテゴリを15個までしたのですが
黒い所が合いません。
2段目のところの修正が分かりません。

コメントの投稿

   管理者にだけ表示を許可する
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。