Home > スポンサー広告 > スマートフォン共有テンプレート:st-kiritori

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments: -

承認待ちコメント 2012-05-10 Thu 13:58

このコメントは管理者の承認待ちです

Comment Form
サイト管理者にのみ通知する

Home > スポンサー広告 > スマートフォン共有テンプレート:st-kiritori

Home > テンプレート > スマートフォン共有テンプレート:st-kiritori

スマートフォン共有テンプレート:st-kiritori

ヘッダー / フッター / 個別ページ / メニュー&色変更

kiri


共有テンプレート「st-kiritori」が登録されました。

検索で作者の所に「smartemplate」を入れるか、作品名に「st-」を入れれば出てきます。

サンプル:トップページ個別ページ
(注)ときどき出るピンクな広告はFC2の広告です。(ドウシヨウモナイ)

主な機能はst-compactなどと同じです。一応HTML5です。(マークアップは大目に見て)
メニューのボタンをクリックするとそれぞれのプラグインが表示されます。
個別記事下の左端のコメント書き込みボタンをクリックするとフォームが開きます。

テンプレートの規約、コンテストの登録条件で規定されている通り著作権はsmatenにあります。再配布はダメです。参考と称してIDやクラスの名前などを変えて流用したり、カスタマイズ後のテンプレートを再配布するのはご遠慮ください。
改造はご自由にどうぞです。


最初にした方がいいこと:FC2広告
メニューの背景色を変更したい
記事本文の下に何かコンテンツを設置したい
フッターに何かコンテンツを設置したい
文字サイズを変えたい
ツイッターのボタンを消したい
ARCHIVESの月を英語(Nov,Dec)にしたい

最初にした方がいいこと:FC2広告

HTMLの最初に

<!--FC2AD--><div class="ad-header"><%ad></div><!--/FC2AD-->

っていうのがあります。これの「<%ad>」だけをコピーしてこの1行を削除
次に一番下にあるFC2ADに「<%ad>」を入れます。「<%ad2>」の前でこんな感じ。

<!--FC2AD-->
<div class="inner">
<p class="dgnd"><a href="http://smartemplate.blog.fc2.com/" target="_blank">Designed by saten</a></p>
 <%ad><%ad2></div>
<!--/FC2AD-->

これで一番上にあるFC2の広告を最下部に移動できます。
初期状態では上部にしないと審査に通らない裏話があるので自分で移動させなきゃダメなんです。
移動させるのはマニュアルにオッケーって書いてあるので大丈夫です。

表示位置(広告タグの挿入位置)について規制はありません。一般的なブラウザでページを表示させた際に、広告が可視になっていれば位置は問いません。

あと一番下に「<%ad_overlay>」があります。
これも一応FC2の広告なのですが、<%ad><%ad2>のような必須タグではないようです。
あとで必須になるかもしれませんが、上下に広告を出したくない方は削除しちゃってください。
もちろん自己責任ですよー。
(必須のアナウンスが出たら、できる限りこのブログやツイッターで知らせたい)

メニューの背景色を変更したい

スタイルシートの /* Reset */ にある「#menu li」などが変更するところです。3つあります。

#menu li {
 background-color:#000;
 border-radius:5px;


#menu li:hover {background-color:#222;}


#menu .selected span {background-color:#333;}

例えば、こんな感じにすると・・・

 background-color:#e90;
#menu li:hover {background-color:#d80;}
#menu .selected span {background-color:#d60;}

こうなります。
kiri-t1

記事本文の下に何かコンテンツを設置したい

HTMLに「<!--/more-->」があるので、その後に次の要素を加えてください。

 </div><!--/more-->

<div class="btm-body">

ここに表示したいコンテンツ

</div>

スタイルシートに次の記述を加えてください。文字サイズ・余白(padding)は適当に調整してください。

.btm-body {
 font-size:15px;
 line-height: 1.5;
 padding: 0px 10px 20px 20px;
}

HTMLの下部に「<!--spplugin-->」があるので、その前に次の要素を加えてください。

<div class="ft-btm">

プラグインメニューの前に表示したいコンテンツ

</div>

<!--spplugin-->

プラグインメニューの後に設置するときは「<!--/spplugin-->」の後に。

<!--/spplugin-->

<div class="ft-btm">

プラグインメニューの後に表示したいコンテンツ

</div>

スタイルシートに次の記述を加えてください。色・文字サイズ・余白(padding)は適当に調整してください。

.ft-btm {
 font-size: 14px;
 line-height: 1.5;
 padding: 10px 10px 20px 7px;
}

文字サイズを変えたい

スタイルシート中を「font-size」で検索して、手当たり次第変えていく

のはあまりにも適当すぎるので主要な部分だけ紹介します。
12px、13px~15pxなどに変更してください。

ブログタイトル

/* Reset */ /* Header */ の最初にある。

#header h1 {
 font-size:14px;
上部メニュー

/* Reset */ /* Header */ の真ん中くらいにある。

#select-menu li a {
 background:url(http://blog-imgs-49.fc2.com/s/m/a/smartemplate/stkiri-li2.gif) right center no-repeat;
 color:#000;
 display:block;
 font-size:15px;
メイン部分:トップページなどの記事タイトル

/* Entry List */ の最初にある。

#entry-list li {
 border-bottom:1px #ddd solid;
 font-size:15px;
メイン部分:個別ページの記事タイトル

/* Entry */ の最初にある。

#entry h1 {
 border-left:12px #09c solid;
 font-size:15px;
メイン部分:個別ページの記事本文

/* Entry */ にある。ちなみに1.6が行間です。1.4とか入れると狭まります。

.entry-body {
 border-top:1px #ccc solid;
 padding:15px 10px 20px 20px;
 line-height:1.6;
 font-size:15px;
メイン部分:コメント・トラックバックページのタイトル

スタイルシートに追加してください。

.page-title {font-size:15px;}
メイン部分:コメント・トラックバックページの本文

/* Comment Trackback */ にある。

.res-list dt {
 padding:15px 10px 0;font-size:13px;
 color:#000;
 font-weight:bold;
}
.res-list dd {
 padding:7px 10px 12px;font-size:15px;
 border-bottom:1px #ccc solid;
}
プラグイン:本文

/* Plugin */ にある。

.elm-body {
 font-size:15px;
 padding:3px 0px;
}
フッタ部分:プラグインのリスト(最新記事など)

/* Footer */ にある。

#plg-menu li a {
 background:url(http://blog-imgs-49.fc2.com/s/m/a/smartemplate/stkiri-li2.gif) right center no-repeat;
 color:#000;
 display:block;
 font-size:15px;font-weight:bold;

ツイッターのボタンを消したい

HTMLの真ん中より少し上くらいにある次の記述を削除してください。

<li class="cm-tw">
<a href="http://mobile.twitter.com/?status=<%topentry_enc_utftitle>%20<%topentry_enc_link>" target="_blank" rel="nofollow">
tweet</a></li>

ARCHIVESの月を英語(Nov,Dec)にしたい

HTMLのメニューのところ </nav> の前にある「2」を

m.shift();o.shift();smte.rmon(m,o,g,2);}());

「0」にすると英語表記に

m.shift();o.shift();smte.rmon(m,o,g,0);}());

「1」にすると「○月」になる。

Comments: 1

承認待ちコメント 2012-05-10 Thu 13:58

このコメントは管理者の承認待ちです

Comment Form
サイト管理者にのみ通知する

Home > テンプレート > スマートフォン共有テンプレート:st-kiritori

タグクラウド
検索フォーム
RSSリンクの表示
リンク

Return to page top

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