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

スポンサーサイト

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

Comments: -

むらかわ URL 2011-12-12 Mon 15:01

教えてください!
st-compactのシンプルなテンプレが気に入りまして、使わせていただいています。

ど素人のため教えていただきたいのですが
一番下の方にあるプラグインで最新記事などを表示させると日にちなどのスラッシュやかっこが文字化けします。何かこちらがミスをしているのでしょうか?
また、ブログのタイトルの下にブログの説明(サブタイトル)を入れ込みたいのですがどのようにすればよろしいでしょうか?
お手数をおかけいたしますがよろしくお願いします!

smaten URL 文字化けと説明文 2011-12-12 Mon 23:42

初めまして、ありがとうっす。

全体なら文字コードの設定の可能性もありますが
プラグインだけ文字化けは不具合なような気がします・・・。
このブログのプラグイン最新記事も文字化けしているでしょうか?
http://smartemplate.blog.fc2.com/
していない場合はプラグイン自体かFC2側の問題なんじゃないかと。
一旦プラグインを削除して追加し直したり
問い合わせフォームから連絡するといいかも・・・。
https://form1ssl.fc2.com/form/?id=15028


説明文はHTMLの最初あたりにある<h1>の下に
<p id="intro"><%introduction></p>
を追加してください。こんな感じ。

<h1><a href="<%url>"><%blog_name></a></h1>
<p id="intro"><%introduction></p>
</header>

あとスタイルシートの一番下にでも

#intro {
clear:both;
color:#ffffff;
font-size:12px;
padding:5px 10px 10px 15px;
}

を追加。
色とか文字サイズは適当に調整してくださいー。

むらかわ URL RE:文字化けと説明文 2011-12-14 Wed 12:10

とてもわかりやすかったです!
ありがとうございました。

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

Trackback+Pingback: -

TrackBack URL for this entry
http://smartemplate.blog.fc2.com/tb.php/6-03fc401a
Listed below are links to weblogs that reference
スポンサーサイト from SATEN PLATE

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

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

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

compact compact

個別ページ / コメントボタンクリック / メニュークリック


共有テンプレート「st-compact」が登録されました。
コンテストやってるんで、気に入ったらダウンロードしてやってくださいです。

スマートフォン用テンプレート検索で作者の所に「smartemplate」を入れるか、作品名に「st-」を入れれば出てきます。

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

登録時点では他の公式・共有テンプレートにはない機能として、個別記事やコメント表示ページからもコメントが投稿できるようにしてあります。
公式をベースに作ると構造がみんな同じになっちゃうので一から作りました。
一応HTML5です。(マークアップは大目に見て)

メニューのボタンをクリックするとそれぞれのプラグインが表示されます。
個別記事下の左端のコメント書き込みボタンをクリックするとフォームが開きます。

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


最初にした方がいいこと:FC2広告
ヘッダに自分の画像を載せたい
記事本文の下に何かコンテンツを設置したい
フッターに何かコンテンツを設置したい
ヘッダとフッタの背景色を変えたい
文字サイズを変えたい
ツイッターのボタンを消したい
背景を変更したい
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>のような必須タグではないようです。
あとで必須になるかもしれませんが、上下に広告を出したくない方は削除しちゃってください。
もちろん自己責任ですよー。
(必須のアナウンスが出たら、できる限りこのブログやツイッターで知らせたい)

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

HTMLの最初ら辺に「</header>」があるのでその前に画像を置きます。

 <h1><a href="<%url>"><%blog_name></a></h1>
<div id="top-image">
<img src="トップ画像のURL" alt="<%blog_name>" width="100%">
</div>
</header>

画像をクリックするとホームに戻るようにするにはリンクを付け足します。

<div id="top-image">
<a href="./"><img src="トップ画像のURL" alt="<%blog_name>" width="100%"></a>
</div>

画像は横幅を320px~480pxくらいで作成します。高さは横幅に合わせて150pxなどあまり長すぎないようにします。

laszlo-photoさんの写真を入れるとこんな感じ。

compact

<div id="top-image">
<img src="http://blog-imgs-49.fc2.com/s/m/a/smartemplate/st-title1.jpg" alt="<%blog_name>" width="100%">
</div>

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

クレジットは最下部の<!--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/laszlo-photo/4154722733/">title photo by laszlo-photo</a>
</p><%ad><%ad2></div>
<!--/FC2AD-->

スタイルシートには次の記述を入れます。

#top-image {
 clear:both;
}

画像にブログタイトルを入れて、リンクを付け足すと、テキストのブログタイトルが邪魔になると思います。
そのときは /* Header */ にある「#header h1」にdisplayを追加して

#header h1 {
 font-size:14px;
 margin:0;
 padding:10px 0 10px 0.7em;
 text-shadow:2px 2px 1px #666;
 display:none; /* ブログタイトル非表示 */
}

「#header .change a」の5pxを0にします。

#header .change a {
 border-radius:0 0 0 0px;

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

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

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

<div class="elm-body">

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

</div>

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

.elm-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 */ の最初にある。000を変更してください。

#header {
 background:#000;
 color:#fff;
 margin:0 0 18px;
 min-height:40px;
 padding:0;
 text-align:left;
}

「background:#069;」にするとこんな感じ。

ブログタイトル

文字色は次の所で変えます。

#header h1 a {color:#fff;}
フッタ

/* Footer */ の最初にある。000を変更してください。

#footer{
 background:#000;clear:both;opacity:0.9;
}

プラグインリストの文字色は /* Plugin */ にある。fffを変更してください。

#plg-menu li a {
 background:url(http://blog-imgs-49.fc2.com/s/m/a/smartemplate/stcom-li2.gif) right center no-repeat;
 color:#fff;
 display:block;
 font-size:94%;
 padding:8px 30px 10px 8px;
}

最下部の背景色は /* Footer */ の最後ら辺にある。333を変更してください。

.ad-footer {
 background:#333;
 border-top:1px #999 solid;
 padding:10px 0;
 text-align:center;
}

線は「border-~」の色を適当に変更してください。

文字サイズを変えたい

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

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

ブログタイトル

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

#header h1 {
 font-size:14px;
 margin:0;
 padding:10px 0 10px 0.7em;
 text-shadow:2px 2px 1px #666;
}
上部メニューのリスト(最新記事など)

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

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

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

#entry-list li {
 border-top:1px solid #ccc;
 font-size:15px;
 clear:both;
 padding:0 0 4px;
}
メイン部分:個別ページの記事タイトル

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

#entry h1 {
 font-size:100%;
 margin:0;
 padding:2px 10px 7px;
}
メイン部分:個別ページの記事本文

/* 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 */ にある。

#plg-menu li a {
 background:url(http://blog-imgs-49.fc2.com/s/m/a/smartemplate/stcom-li2.gif) right center no-repeat;
 color:#fff;
 display:block;
 font-size:94%;
 padding:8px 30px 10px 8px;
}
プラグイン:本文

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

.plg-body {
 background:#fff;
 border-top:1px #ccc solid;border-bottom:1px #ccc solid;
 font-size:15px;
 margin:0 0 10px;
 overflow:hidden;
}
ul.plugin_list li {
 border-top:1px solid #ccc;
 clear:both;
 font-size:15px;
 margin:0;
 padding:0;
}

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

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:url(http://blog-imgs-49.fc2.com/s/m/a/smartemplate/stcom-back.gif) left top repeat;

画像を変更するときは url を。色を変えたいときは

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

むらかわ URL 2011-12-12 Mon 15:01

教えてください!
st-compactのシンプルなテンプレが気に入りまして、使わせていただいています。

ど素人のため教えていただきたいのですが
一番下の方にあるプラグインで最新記事などを表示させると日にちなどのスラッシュやかっこが文字化けします。何かこちらがミスをしているのでしょうか?
また、ブログのタイトルの下にブログの説明(サブタイトル)を入れ込みたいのですがどのようにすればよろしいでしょうか?
お手数をおかけいたしますがよろしくお願いします!

smaten URL 文字化けと説明文 2011-12-12 Mon 23:42

初めまして、ありがとうっす。

全体なら文字コードの設定の可能性もありますが
プラグインだけ文字化けは不具合なような気がします・・・。
このブログのプラグイン最新記事も文字化けしているでしょうか?
http://smartemplate.blog.fc2.com/
していない場合はプラグイン自体かFC2側の問題なんじゃないかと。
一旦プラグインを削除して追加し直したり
問い合わせフォームから連絡するといいかも・・・。
https://form1ssl.fc2.com/form/?id=15028


説明文はHTMLの最初あたりにある<h1>の下に
<p id="intro"><%introduction></p>
を追加してください。こんな感じ。

<h1><a href="<%url>"><%blog_name></a></h1>
<p id="intro"><%introduction></p>
</header>

あとスタイルシートの一番下にでも

#intro {
clear:both;
color:#ffffff;
font-size:12px;
padding:5px 10px 10px 15px;
}

を追加。
色とか文字サイズは適当に調整してくださいー。

むらかわ URL RE:文字化けと説明文 2011-12-14 Wed 12:10

とてもわかりやすかったです!
ありがとうございました。

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

Trackback+Pingback: 0

TrackBack URL for this entry
http://smartemplate.blog.fc2.com/tb.php/6-03fc401a
Listed below are links to weblogs that reference
スマートフォン共有テンプレート:st-compact from SATEN PLATE

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

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

Return to page top

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