上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
FC2用テンプレート・エアメール

 青空に雲が流れ行く、さっぱりとしたカジュアル系、空のテンプレートです。

 この雲が流れるエフェクト、単純なJavaスクリプトを使用しています。DOMを使い、スクリプトはテンプレートの最後に記述していますので、HTMLトップを汚しません。
 ラフなテクスチャを使用していますので、角も立たず、気楽に使って頂けるテンプレートかと思います。また、ブログトップのナビゲーションアイテムをすべて取り去ったシンプル設計です。

 またIE6には非対応です。IE6に対応させたい場合は、当記事最終章の簡単な処理を施すことで、おかしな表示はなくなります。


テンプレートの特徴


ブックマークボタン&RSSフィードボタン
 グーグル、ヤフーのマイページに、アイコンクリックで簡単に追加できます。
 RSSフィードは多用途に。

 また、はてなブックマーク追加ボタン、ツイッターボタンで、訪問者の煩雑な作業を軽減。ブログが気に入られたのに、お気に入り登録やフィードの追加がめんどくさくてそのまま忘れられる。と言うのを防ぎます。
記事最下部ナビゲーション 次の記事の導入、新着エントリー、タグリストを本文下部に。
 ページを最後まで読み切ってくれた訪問者への利便性を上昇させています。次のページへのリンクや、新着記事が記事本文直下にあり、間髪入れずに次のページへのご案内。訪問者の興味が別のところに移るのを、なるべく抑える仕組みです。
クールなコメントフォーム 綺麗な便箋に必要事項を入力するイメージです。
 ストレートな入力フォームをデザインして、ソフト・クール・シンプルに。
プラグイン3
 トップページのみに表示されるプラグインです。
 本文部分に表示されます。



テンプレートサイズ

●ヘッダー
800px
●メインカラム
530px
●サイドバー
200px(180px)
●フッター



ブロック構造

<div id="conteinar">
コンテナ
<div id="header">
ヘッダー
</div>
<div id="main">
メインカラム
</div>
<div id="side">
サイドバー
</div>
<div id="footer">
フッター
</div>
</div>





カスタマイズしてみよう


 最低限のテンプレート最適化は施してあります。あとは、自由にテンプレートを改造していくだけ。
 簡単にできるカスタマイズから始めてみよう!

①大きなブログパーツや、300pxサイズの広告を美しく表示してみよう。
②サイドバーを左右交換してみよう。
③ランキングボタンやブックマークボタンを配置しよう。

 これらのヒントは、カスタマイズカテゴリーの項目にヒントが隠されています。

テンプレート簡単カスタマイズ
シンプルテンプレートのHTMLカスタマイズ詳細
世界のブログパーツ




テンプレートのダウンロード方法


テンプレートダウンロードは、FC2管理画面の共有テンプレート検索「作者」で

 で、一覧が表示されます。

☆FC2ログイン画面へ
FC2ID


■全テンプレート一覧はこちらから。
テンプレート一覧


 このテンプレートに関してのご質問、不具合は、必ず以下のコメント欄からお願いいたします。FC2サポートやヘルプ等では、恐らく個別のテンプレートに関しての質問は受け付けていないと思いますので…



IE6に対応させるには?

 まず、「テンプレートの設定」画面を開き、下部の「スタイルシートの編集」ボックスに注目します。
 以下の赤字を削除してください。
/* 全体設定
------------------------------------------------------------ */

*{
margin:0;
padding:0;
word-break:break-all;
zoom:100%;
color:#555;
}
ul,li,ol{
margin:0;
padding:0;
}
ol li{
display:list-item;
vertical-align:top;
}
input,textarea{
color:#555;
}

/* 画像
------------------------------------------------------------ */
img{
border:0;
}
.emoji{
vertical-align:middle;
}
.text_body img{
margin:0 5px 0 0;
border:1px solid #ccc;
padding:3px;
}
.eng{
font-family:arial;
}

/* デフォルトのリンク設定
------------------------------------------------------------ */
a{
text-decoration:none;
}
a:link{
color:#788bfa;
}
a:visited{
color:#787baa;
}
a:hover{
color:#69f;
}
a:active{
color:#f55;
}

/* 強調文字・引用
------------------------------------------------------------ */
.text_body strong{
}
.text_body blockquote{
background:#edc url("http://blog-imgs-44.fc2.com/d/e/s/designlabolatory/air2-010.gif") repeat;
border:1px solid #ccc;
margin:10px 10px 10px 60px;
padding:10px 20px;
font-size:90%;
}
.text_body table{
font-size:90%;
width:90%;
margin:10px auto;
border:1px solid #ccc;
border-collapse:collapse;
}
.text_body th{
background:#edc url("http://blog-imgs-44.fc2.com/d/e/s/designlabolatory/air2-010.gif") repeat;
padding:2px 10px;
text-align:left;
}
.text_body td{
text-align:left;
border:1px solid #ccc;
padding:2px 10px;
}
.text_body ul,
.text_body ol{
padding-left:20px;
}
.text_body li{
margin-left:10px;
list-style-position:outside;
}

/* レイアウト
------------------------------------------------------------ */
body{
text-align:center;
background:#fff url("http://blog-imgs-44.fc2.com/d/e/s/designlabolatory/air2-004.gif") repeat center top;
}
.body_skin{
background: url("http://blog-imgs-44.fc2.com/d/e/s/designlabolatory/air2-005.gif") repeat-y center top;
}
.body_skin_bottom{
background: url("http://blog-imgs-44.fc2.com/d/e/s/designlabolatory/air2-006.gif") no-repeat center top;
height:20px;
}
.middle_box{
background: url("http://blog-imgs-44.fc2.com/d/e/s/designlabolatory/air2-012.gif") no-repeat center top;
padding-top:20px;
}
#conteinar{
text-align:left;
width:800px;
margin:0 auto;
background:#fff;
}
#header{
text-align:left;
height:120px;
margin:0 auto;
background:#03f url("http://blog-imgs-44.fc2.com/d/e/s/designlabolatory/air2-008.jpg") no-repeat 0px 0px;
}
#main{
width:580px;
float:left;
overflow:hidden;
}
#side{
width:200px;
float:right;
overflow:hidden;
font-size:12px;
margin-top:16px;
border-left:1px dotted #555;
padding-left:9px;
}
#footer{
width:800px;
margin:0 auto;
text-align:left;
}

/* ヘッダー
------------------------------------------------------------ */
.header_inner{
background:url("http://blog-imgs-44.fc2.com/d/e/s/designlabolatory/air2-013.png") no-repeat right top;
}

#header h1{
font-size:16px;
margin: 0 0 0;
padding:10px 20px;
}
#header h1 a{
color:#fff;
border:none;
}
#header h1 a:hover{
color:#ccf;
}
.intro{
font-size:12px;
width:500px;
padding:10px;
color:#fff;
margin:10px 20px;
}

/* メインカラム
------------------------------------------------------------ */
このエントリーをはてなブックマークに追加
Mon.07.26.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。