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

スポンサーサイト

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

Comments: -

管理人のみ閲覧できます 2012-01-27 Fri 21:36

このコメントは管理人のみ閲覧できます

saten URL 2012-02-14 Tue 20:59

こんばんは。
返信が遅くなってごめんなさいです。
特に利用形態は制限していないので、どのブログでもOKです。

管理人のみ閲覧できます 2012-02-17 Fri 10:08

このコメントは管理人のみ閲覧できます

URL 2012-04-08 Sun 19:35

こんばんは。記事毎にはてなブックマークするにはどうしたらいいですか?

承認待ちコメント 2013-02-24 Sun 22:24

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

承認待ちコメント 2015-01-26 Mon 15:44

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

承認待ちコメント 2016-01-19 Tue 18:25

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

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

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

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

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

ヘッダー / フッター / 個別ページ / メニュー

weekb


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

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

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

1日以内に新着コメントがあれば、右の吹き出しアイコンに「!」マークがつきます。

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

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


最初にした方がいいこと:FC2広告
メニューの背景色を変更したい
ヘッダの画像を変更したい
記事本文の下に何かコンテンツを設置したい
フッターに何かコンテンツを設置したい
文字サイズを変えたい
コメントを新着表示する時間(24時間→30時間)を変更したい
ツイッターのボタンを消したい
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:#bbb;


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


#menu li.selected {border-bottom:5px #222 solid;}

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

 background-color:#ac3;
#menu li:hover {background-color:#a6c626;}
#menu li.selected {border-bottom:5px #222 solid;}

こうなります。
stweekbk1

下部のメニューは /* Footer */ にある「#page-navi」などが変更するところです。2つあります。

#page-navi {
 min-height:1px;background-color:#bbb;


#page-navi li a:hover {background-color:##999;}

ヘッダとフッタの背景色を変更したい

スタイルシートの /* Reset */ または /* Header */ にある「#header」が変更するところです。

background の#○○○を変更してください。

#header {
 color:#fff;
 margin:0;padding:0;
 text-align:left;
 background:#000 url(http://blog-imgs-49.fc2.com/s/m/a/smartemplate/stweek-bb.png) repeat 0 center;
}

フッタの色は下の方にある /* Footer */ の「#bottom」と「address」が変更するところです。

#bottom{
 background:#111 url(http://blog-imgs-49.fc2.com/s/m/a/smartemplate/stweek-bb.png) repeat 0 center;


address {
 background:#000;opacity:0.7;

こんな感じで変更すると・・・

#header {
 background:#369 url(http://blog-imgs-49.fc2.com/s/m/a/smartemplate/stweek-bb.png) repeat 0 center;


#bottom{
 background:#369 url(http://blog-imgs-49.fc2.com/s/m/a/smartemplate/stweek-bb.png) repeat 0 center;


address {
 background:#036;opacity:0.7;

こうなります。
stweekbk2

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

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

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

<div class="btm-body">

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

</div>

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

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

HTMLの下部に「<div id="bottom">」があるので、その直後に次の要素を加えてください。

<div id="bottom">
<div class="ft-btm">

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

</div>

</div>

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

.ft-btm {
 background:#222;
 border-bottom:1px #333 solid;
 font-size: 14px;
 line-height: 1.5;
 padding: 16px 10px 15px;
 text-align:left;
}
#bottom .ft-btm a {color:#f90;}

文字サイズを変えたい

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

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

ブログタイトル

/* Reset */ にある。

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

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

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

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

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

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

#entry h1 {
 background:#f6f6f6;
 font-size:15px;
メイン部分:個別ページの記事本文

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

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

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

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

/* 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 {
 background:#fff;
 font-size:15px;

コメントを新着表示する時間(24時間→30時間)を変更したい

stweekbk3

HTMLの最下部から少し上の方に「24」があります。

smte.nct(y,24);}
}());
</script>

この右の数字が時間です。2日(48時間以内)にしたいときは「48」に変更してください。

smte.nct(y,48);}
}());
</script>

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

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: 7

管理人のみ閲覧できます 2012-01-27 Fri 21:36

このコメントは管理人のみ閲覧できます

saten URL 2012-02-14 Tue 20:59

こんばんは。
返信が遅くなってごめんなさいです。
特に利用形態は制限していないので、どのブログでもOKです。

管理人のみ閲覧できます 2012-02-17 Fri 10:08

このコメントは管理人のみ閲覧できます

URL 2012-04-08 Sun 19:35

こんばんは。記事毎にはてなブックマークするにはどうしたらいいですか?

承認待ちコメント 2013-02-24 Sun 22:24

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

承認待ちコメント 2015-01-26 Mon 15:44

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

承認待ちコメント 2016-01-19 Tue 18:25

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

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

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

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

Return to page top

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