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

スポンサーサイト

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

Comments: -

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

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

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

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

ヘッダー / フッター / 個別ページ / メニュー&画像差し替え

compact


共有テンプレート「st-colorful」が登録されました。
少し時間をかけて丁寧につくったつもり。
気に入ったらダウンロードどうぞ!

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

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

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

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


最初にした方がいいこと:FC2広告
ヘッダに自分の画像を載せたい
ブログタイトル部分を1行に収めたい
記事本文の下に何かコンテンツを設置したい(12/03訂正)
フッターに何かコンテンツを設置したい
ヘッダの背景色を変えたい
文字サイズを変えたい
ツイッターのボタンを消したい
背景を変更したい
ARCHIVESの月を英語(Nov,Dec)にしたい
メニュー画像の花をなくしたり、色を変えたい

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

HTMLの最初に

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

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

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

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

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

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

ヘッダに自分の画像を載せたい

まず「最初にした方がいいこと」で広告を下に移動させて下さい。
次にスタイルシートで、 /* Header */ にある「.bgimage」のURLを変更します。min-heightは画像の高さに合わせて変更してください。「.bgfix」の行は削除します。(ブログタイトルが2行以上になるときの補助位置=必要であれば残す)

.bgimage {
 background:url(画像のURL) 98% 30px no-repeat;
 min-height:101px;
}
.bgfix {background-position:right 30px;} /* 削除 */

98% は画像の横位置で、減らすと左に寄ります。30px は画像の縦位置で、増やすと下がります。

次にそのすぐ下にある「#header」の 25px でメニューの上部余白を決定します。(ブログタイトルとメニューの間隔)

#header {
 background-color:#09c;
 border-bottom:1px #fff solid;
 color:#000;
 margin:0 0 25px;

実際にTom Rafteryさんの写真を使って設置すると。

.bgimage {
 background:url(http://blog-imgs-49.fc2.com/s/m/a/smartemplate/stcol-t1.jpg) 98% 20px no-repeat;
 min-height:195px;
}
#header {
 background-color:#09c;
 border-bottom:1px #fff solid;
 color:#000;
 margin:0 0 105px;

完成。
colorful-t1

すごくかわいいです。
猫が。

この写真は投稿者のクレジットを表示していれば使えます。上記をこのまま自分のブログで使ってもオッケーです。

クレジットは最下部の<!--FC2AD-->の所にでも追加します。もちろん自分の画像ならクレジットは要りません。

<!--FC2AD-->
<div class="ad-footer">
<p class="dgnd"><a href="http://smartemplate.blog.fc2.com/" target="_blank">Designed by smaten</a>
<br>
<a href="http://www.flickr.com/photos/traftery/4947530411/">title photo by Tom Raftery</a>
</p><%ad><%ad2></div>
<!--/FC2AD-->

メニューとメイン部分との間隔を調整したいときは /* Entry List */ のすぐ上にある「#main」の 25px を減らしたり増やしたりしてください。

#main {clear:both;padding:25px 0 30px;}

ブログタイトルの高さは文字数や文字サイズによって変動します。それによって画像がブログタイトルに隠れるときがあります。そんなときは、次の項目でブログタイトルを1行に収めたり、文字サイズを小さくしたり、h1の高さを固定してください。

ブログタイトル部分を1行に収めたい

スタイルシートの /* Header */ にある「#header h1」に追加します。colorは「...」の文字色です。

#header h1 {
 font-size:15px;
 padding:10px 0 10px 0.7em;
 text-shadow:1px 1px 1px #333;
 color:#fff;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
 -o-text-overflow: ellipsis;
}

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

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

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

<div class="add-body">

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

</div>

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

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

フッターに何かコンテンツを設置したい

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

<div class="elm-btm">

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

</div>

<!--spplugin-->

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

<!--/spplugin-->

<div class="elm-btm">

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

</div>

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

.elm-btm {
 color:#aaaaaa;
 font-size:14px;
 line-height: 1.5;
 padding: 10px 10px 20px;
}

ヘッダの背景色を変えたい

/* Header */ の最初にある「#header」の「}」前に背景色を追加してください。

#header {
 ...

 ...

 ...
 background:#000000;
}

真っ黒になります。

文字サイズを変えたい

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

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

ブログタイトル

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

#header h1 {
 font-size:15px;
上部メニュー・フッタ部分プラグインのリスト(最新記事など)

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

#select-menu li a,#plg-menu li a {
 background:#ea0 url(http://blog-imgs-49.fc2.com/s/m/a/smartemplate/stcol-liw.png) no-repeat right center;
 border-radius:9px 5px 5px 9px;
 -moz-border-radius:9px 5px 5px 9px;
 -webkit-border-radius:9px 5px 5px 9px;
 color:#000;
 display:block;
 font-size:15px;
メイン部分:トップページなどの記事タイトル

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

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

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

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

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

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

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

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

/* Comment Trackback */ にある。

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

/* Plugin */ にある。上が本文で、下が最新記事みたいなリストの文字サイズです。

.elm-body {
 font-size:15px;
 opacity:0.9;
 padding:3px 4px;
}
ul.plugin_list li {
 clear:both;
 font-size:15px;

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

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>

背景を変更したい

スタイルシートの最初の方に body があります。そこを変更してください。

body {
  background:#ddf0be url(http://blog-imgs-49.fc2.com/s/m/a/smartemplate/stcol-back.gif) left top repeat-y;

画像を変更するときは url を。画像を繰り返すときは「-y」を削除して「repeat」に。
色を変えたいときは

background:#ffffff;

みたいにします。真っ白になります。

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

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

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

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

Return to page top

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