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

スポンサーサイト

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

Comments: -

URL 2012-04-05 Thu 08:54

気に入ったのでお借りしてます。ありがとうございます。
広告の挿入についてお聞きしたいのですが
①グーグルアドセンス320×50を最新記事の上
②グーグルアドセンス320×250を一番下の記事の下にある、記事を割り振っている1~○○の下に表示させたいのですが


①の場合
<!--FC2AD--><div class="ad-header"><%ad></div><!--/FC2AD-->
<%ad>←これを下に移動させてそこに貼り付ける

②の場合
<!--/main_contents-->
の下に張り付ければいいのでしょうか?
お手数ですがよろしくお願いいたします。

URL 2012-04-05 Thu 22:07

もうひとつおききしたいのですが
私はFC2ブログを使っているのですが個別ページに飛ぶとPCで表示されてしまいます。
ここのは記事を個別ページ表示するとスマートフォン用で表示されますが、そのように表示したいです。どこをいじればいいのでしょうか?
お願いいたします。

saten URL 2012-04-06 Fri 00:48

こんばんはです。
そうですね、<%ad>の場所と入れ替えると記事の上に表示されます。

<!--FC2AD--><div class="ad-header">
(1)ここに入れる
</div><!--/FC2AD-->

あとは「最初にした方がいいこと:FC2広告」のように<%ad>を最下部の<%ad2>の直前などに移動させます。


(2)はmain_contentsの後でも</div>の前でもいいと思いますが

</div><!--/main_contents-->
<div class="ad-body">
(2)ここに入れる
</div>

個別ページの影がずれてしまうのでスタイルシートの編集も必要になります。
スタイルシートのやや下の方に「 Pager -----*/」があります。
そこの「#nav-btm」のこの2行を削除してください。
「#nav-btm」で検索(Ctrl+F)すればすぐに見つかります。
→box-shadow:inset 0px -3px 3px rgba(0,0,0,0.1);
→-webkit-box-shadow:inset 0px -3px 3px rgba(0,0,0,0.1);
削除した後はこんな感じです。

#nav-btm {
margin:0;
padding:15px 0 30px;
}

それから広告部分の余白を設定するためにスタイルシートに以下を追加。

body .ad-header {
font-size: 14px;
padding: 0px 0px 8px;
text-align: center;
}
.ad-body {
font-size:14px;
line-height: 1.5;
padding: 0px 0px 20px;
text-align: center;
}

左寄せの場合は「text-align:left;」に変更。
上下の余白を変更する場合は「padding」を変更。
padding: 上余白px 左右余白px 下余白px;
てな感じです。

個別ページに飛ぶとPCで表示されるのは、こちらではちょっと再現しないのでわからないデス。
PC・スマートフォンの切り替えはFC2さん側のUA自動判定とクッキーで行われているので、ブラウザ側でクッキーの処理が正常に機能していなかったりするとPC用が表示さることもあるかもしれません。
確認のため、このブログも「st-photo」に変えてみました。
これで再現しなければ、何か他の問題ということに・・・。

※関係ないと思いますが、PCでテンプレートをプレビューして、そこから飛ぶとPC表示になるのはPCだからそうなります。

URL 2012-04-06 Fri 07:29

おはようございます。
おかげさまで綺麗に配置することができました!ありがとうございます!


>※関係ないと思いますが、PCでテンプレートをプレビューして、そこから飛ぶとPC表示になるのはPCだからそうなります。

すいません。これです^^;ということはスマートフォンをもってない人は確認ができないってことですよね?それでも記事の下に広告の配置だけできればいいので恐縮ですがご指導ご鞭撻のほどお願いします。。。m(__)m

saten URL 2012-04-07 Sat 00:39

個別ページはURLの最後に「?sp=1」をつけると一応PCでも確認できます。
※編集し終えた後で確認
自分のブログアドレス?sp=1
http://smartemplate.blog.fc2.com/blog-entry-4.html?sp=1

記事の下は昨日のコメントに書いてある通りにすると
>(2)はmain_contentsの後でも</div>の前でも~の部分
こんな感じで下に表示されます。
http://smartemplate.blog.fc2.com/?no=10&sp=1
スタイルシートの2行を削除するのも忘れないようにすれば同じように表示されると思います。
個別記事下のみに表示するときは<!--permanent_area-->と<!--/permanent_area-->で挟んでくださいです。

</div><!--/main_contents-->
<!--permanent_area-->
<div class="ad-body">
(2)ここに入れる
</div>
<!--/permanent_area-->

URL 2012-04-07 Sat 06:10

おはようございます。
なるほど。PCとはディスプレイのサイズが違うから<!--permanent_area--><!--/permanent_area-->で囲って、したに2つ表示しとけばいいですね。んーいろいろ混乱してわけのわからないこといってすいません^^;

すごく勉強になりました!これから個別ページ確認しながらやってみます!ありがとうございましたm(__)m

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

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

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

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

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

photo


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

検索で作者の所に「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:#38c;


#menu li:hover {background-color:#3ac;}


#menu .selected {background-color:#39c;}

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

 background-color:#000;
#menu li:hover {background-color:#3a0;}
#menu .selected {background-color:#39c;}

こうなります。
photo-t1

ヘッダ左の画像を変更したい

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

画像を変更するには backgroundのurl を変更してください。
高さは min-height で調整してください。

#header {


 min-height:150px;


 background:url(http://blog-imgs-49.fc2.com/s/m/a/smartemplate/stpho-hi.jpg) -1px 0 no-repeat;
}

左の -1px は画像の横位置で増やすと右に寄ります。右の 0px は画像の縦位置で増やすと下がります。

画像は横幅80px高さ150pxで作成します。画像の右端に 1pxの白いライン を引くと空の写真との境界がくっきりします。

画像を変更してみます。-1px は 0px に変更します。

background:url(http://blog-imgs-49.fc2.com/s/m/a/smartemplate/stpho-hi2.png) 0px 0px no-repeat;

結果。
photo-t2

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

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

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

<div class="btm-body">

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

</div>

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

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

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

<div class="ft-btm">

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

</div>

<!--spplugin-->

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

<!--/spplugin-->

<div class="ft-btm">

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

</div>

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

.ft-btm {
 font-size: 14px;
 font-weight: normal;
 line-height: 1.5;
 padding: 18px 10px 17px;
}

文字サイズを変えたい

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

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

ブログタイトル

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

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

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

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

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

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

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

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

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

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

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

.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 {
 font-size:14px;
 padding:3px 0px;
}
フッタ部分:プラグインのリスト(最新記事など)

/* Footer */ にある。

#plg-menu li a {
 background:url(http://blog-imgs-49.fc2.com/s/m/a/smartemplate/stpho-li.png) no-repeat right center;
 color:#000;
 display:block;
 font-size:14px;

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

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

URL 2012-04-05 Thu 08:54

気に入ったのでお借りしてます。ありがとうございます。
広告の挿入についてお聞きしたいのですが
①グーグルアドセンス320×50を最新記事の上
②グーグルアドセンス320×250を一番下の記事の下にある、記事を割り振っている1~○○の下に表示させたいのですが


①の場合
<!--FC2AD--><div class="ad-header"><%ad></div><!--/FC2AD-->
<%ad>←これを下に移動させてそこに貼り付ける

②の場合
<!--/main_contents-->
の下に張り付ければいいのでしょうか?
お手数ですがよろしくお願いいたします。

URL 2012-04-05 Thu 22:07

もうひとつおききしたいのですが
私はFC2ブログを使っているのですが個別ページに飛ぶとPCで表示されてしまいます。
ここのは記事を個別ページ表示するとスマートフォン用で表示されますが、そのように表示したいです。どこをいじればいいのでしょうか?
お願いいたします。

saten URL 2012-04-06 Fri 00:48

こんばんはです。
そうですね、<%ad>の場所と入れ替えると記事の上に表示されます。

<!--FC2AD--><div class="ad-header">
(1)ここに入れる
</div><!--/FC2AD-->

あとは「最初にした方がいいこと:FC2広告」のように<%ad>を最下部の<%ad2>の直前などに移動させます。


(2)はmain_contentsの後でも</div>の前でもいいと思いますが

</div><!--/main_contents-->
<div class="ad-body">
(2)ここに入れる
</div>

個別ページの影がずれてしまうのでスタイルシートの編集も必要になります。
スタイルシートのやや下の方に「 Pager -----*/」があります。
そこの「#nav-btm」のこの2行を削除してください。
「#nav-btm」で検索(Ctrl+F)すればすぐに見つかります。
→box-shadow:inset 0px -3px 3px rgba(0,0,0,0.1);
→-webkit-box-shadow:inset 0px -3px 3px rgba(0,0,0,0.1);
削除した後はこんな感じです。

#nav-btm {
margin:0;
padding:15px 0 30px;
}

それから広告部分の余白を設定するためにスタイルシートに以下を追加。

body .ad-header {
font-size: 14px;
padding: 0px 0px 8px;
text-align: center;
}
.ad-body {
font-size:14px;
line-height: 1.5;
padding: 0px 0px 20px;
text-align: center;
}

左寄せの場合は「text-align:left;」に変更。
上下の余白を変更する場合は「padding」を変更。
padding: 上余白px 左右余白px 下余白px;
てな感じです。

個別ページに飛ぶとPCで表示されるのは、こちらではちょっと再現しないのでわからないデス。
PC・スマートフォンの切り替えはFC2さん側のUA自動判定とクッキーで行われているので、ブラウザ側でクッキーの処理が正常に機能していなかったりするとPC用が表示さることもあるかもしれません。
確認のため、このブログも「st-photo」に変えてみました。
これで再現しなければ、何か他の問題ということに・・・。

※関係ないと思いますが、PCでテンプレートをプレビューして、そこから飛ぶとPC表示になるのはPCだからそうなります。

URL 2012-04-06 Fri 07:29

おはようございます。
おかげさまで綺麗に配置することができました!ありがとうございます!


>※関係ないと思いますが、PCでテンプレートをプレビューして、そこから飛ぶとPC表示になるのはPCだからそうなります。

すいません。これです^^;ということはスマートフォンをもってない人は確認ができないってことですよね?それでも記事の下に広告の配置だけできればいいので恐縮ですがご指導ご鞭撻のほどお願いします。。。m(__)m

saten URL 2012-04-07 Sat 00:39

個別ページはURLの最後に「?sp=1」をつけると一応PCでも確認できます。
※編集し終えた後で確認
自分のブログアドレス?sp=1
http://smartemplate.blog.fc2.com/blog-entry-4.html?sp=1

記事の下は昨日のコメントに書いてある通りにすると
>(2)はmain_contentsの後でも</div>の前でも~の部分
こんな感じで下に表示されます。
http://smartemplate.blog.fc2.com/?no=10&sp=1
スタイルシートの2行を削除するのも忘れないようにすれば同じように表示されると思います。
個別記事下のみに表示するときは<!--permanent_area-->と<!--/permanent_area-->で挟んでくださいです。

</div><!--/main_contents-->
<!--permanent_area-->
<div class="ad-body">
(2)ここに入れる
</div>
<!--/permanent_area-->

URL 2012-04-07 Sat 06:10

おはようございます。
なるほど。PCとはディスプレイのサイズが違うから<!--permanent_area--><!--/permanent_area-->で囲って、したに2つ表示しとけばいいですね。んーいろいろ混乱してわけのわからないこといってすいません^^;

すごく勉強になりました!これから個別ページ確認しながらやってみます!ありがとうございましたm(__)m

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

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

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

Return to page top

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