Powered By FC2ブログ
ブログやるならFC2ブログ
今すぐブログを作っちゃおう!

--年--月--日

スポンサーサイト

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

2007年05月23日

広告をテンプレートに挿入して、自動で表示させる

今回は、アフィリエイトなどの広告を自動で挿入するカスタマイズを紹介します。全てのエントリに同様の広告を掲載する場合などならば、記事に広告コードを入れるより簡単です。
また、他のサイトへのリンクなどなら、テンプレートに挿入しておいた方が楽かもしれまん。これなら簡単に全ページのリンクが自動で書き換わります(記事の場合は該当記事全部を書き換える必要がある)。
それ程難しくありませんし、テンプレートの挿入箇所さえわかれば、他のFC2ブログ用テンプレートを使用していても利用可能です。
いくつかパターンがありますので、使用目的に合わせて選んで下さい。

1.固定リンクページに広告を貼り付けるカスタマイズ

この場合、本文を追記にしておいて、続きを読むのリンク先で表示するページに広告コードを貼り付ける形になります。

htmlのカスタマイズ(追加)箇所


<!--more-->
<a name="more"></a>
<div class="maincontent"><!-- 追記本文 -->
<%topentry_more>
</div><!-- maincontent -->
<!--/more-->

<!--permanent_area-->
<div class="mainad">
<a href="<%url>">広告リンク</a>
</div><!-- mainad -->
<!--/permanent_area-->

<div class="maintag"><!-- タグ表示 -->
<!--topentry_tag-->
タグ : <%topentry_jointtag>
<!--/topentry_tag-->
</div><!-- maintag -->

cssのカスタマイズ(追加)箇所


.mainad{
margin-top: 10px;
font-size: 12px;
color: #000;
line-height: 1.5;
}

仕組みとしては、固定リンク画面に移ったときのみ表示するための変数、permanent_area内に広告コードを貼っているだけです。ここではタグ表示の上に表示して、かつスペースもcssによって空けていますが、ここを本文と追記の間においたり、あえて本文記事とつなげて表示したりもできます。表示箇所及び、広告用のコードは適宜変更してください。例ではブログのトップページへのリンクを表示しています。

2.トップページの追記の前に広告を貼るカスタマイズ

よく見かけるパターンですが、これをテンプレートで行ってみましょう。


<!--more_link-->
<div class="mainmore">
<!--index_area-->
<a href="<%url>">広告リンク</a><br />
<!--/index_area-->
<a href="<%topentry_link>#more" title="「<%topentry_title>」の続きを読む">…続きを読む</a>
</div><!-- mainmore -->
<!--/more_link-->

実は簡単で、追記を表示する箇所に広告のコードを貼り付けるだけです(スペースを取らない場合)。例の赤部分が広告のコードで、青の部分はトップページのみの表示にする場合(検索、カテゴリなどでも表示するなら外す)の表記です。

3.各エントリの最後に貼り付けるカスタマイズ

1のパターンは追記の場合でしたので、普通に追記無しの場合でエントリの下部(フッターの前)に広告をテンプレートに貼り付けるカスタマイズです。

htmlのカスタマイズ(追加)箇所


<!--more-->
<a name="more"></a>
<div class="maincontent"><!-- 追記本文 -->
<%topentry_more>
</div><!-- maincontent -->
<!--/more-->

<div class="mainad">
<a href="<%url>">広告リンク</a>
</div><!-- mainad -->

<div class="maintag"><!-- タグ表示 -->
<!--topentry_tag-->
タグ : <%topentry_jointtag>
<!--/topentry_tag-->
</div><!-- maintag -->

cssのカスタマイズ(追加)箇所


.mainad{
margin-top: 10px;
font-size: 12px;
color: #000;
line-height: 1.5;
}

勘のいい方はお分かりかもしれませんが、固定リンク画面のみ表示する変数を削除するだけです。これで、自動的にエントリ下部に指定した広告が表示されるようになります。

テンプレート中で使える変数一覧という公式のページがありますので、特定のページのみ表示する変数などを使用する場合に参考にしてみて下さい。

スポンサーサイト

2007年02月17日

テンプレートに、コメント欄の絵文字・デコレーション機能を追加

今回はリクエストにお応えする形ですが、需要はあると思いますのでエントリでご紹介します。
FC2ブログの機能にある、コメント時に絵文字&装飾を使用できる機能を追加します。公式のテンプレだと付いているようですが、こちらでご紹介しているFC2ブログ用のテンプレートには付いていません。必要と思われる方は以下の方法でカスタマイズをお願いいたします。

0.記事を書く機能にある装飾機能を利用する場合

(コメント時の絵文字&装飾機能とは関係ありませんので、それだけをカスタマイズする場合は必要ありません。)
このテンプレだと、FC2の標準機能を用いた場合の、文字を大きくしたり小さくしたりする機能がうまく利用できませんので、それを修正するカスタマイズです。以下の通りに変更してください。

CSS部分

  • テキストエディタにCSS全文をペースト
  • 置換機能を使って、font-size: 12px;を全て削除
    (置換部分を空白にしておけば、削除(空白で置換)されると思います。改行はそのままでも大丈夫です)
  • 以下を追加

* {
margin: 0;
padding: 0;
font-style : normal;
font-weight: normal; /*太字を使うなら削除*/
word-break: break-all;
font-size: 12px; /*追加*/
font-family: Verdana, Arial, sans-serif;
}

.maincontent{
padding: 0 10px;
margin-bottom: 10px;
color: #000;
font-size: 14px;/*追加*/
line-height: 1.5;/*変更*/
}

これで修正は終わりですので、テキストエディタ全文をコピーして、FC2ブログ管理画面のテンプレート編集画面でペーストして下さい。
プレビューでは確認できませんので、元のCSSをテキストエディタなどで保存した上で、管理画面の方も保存して、表示を確認してください。
また、エントリ本文の太字が効かない件に関してはこちらもご覧下さい。
FC2の新しく記事を書く機能を使って強調文字を使用する場合

1.FC2ブログの機能、コメント時に絵文字&装飾の追加

コメント時に絵文字&装飾機能の追加はHTMLを編集します。追加だけですので、以下箇所を変更して下さい。


<!-- コメント投稿フォーム -->
から3行下にある、
<form method="post" action="./"><form method="post" action="./" name="comment_form">
に変更


<dt><label for="comment">comment :</label></dt>
<dd><textarea id="comment" cols="44" rows="8" name="comment[body]"></textarea></dd>
<dt><label for="pass">pass :</label></dt>
<dd><input id="pass" type="password" name="comment[pass]" size="45" /></dd>
<dt><label for="himitu">secret :</label></dt>
<dd><input id="himitu" type="checkbox" name="comment[himitu]" />サイト管理者にのみ通知する</dd>
</dl>
<div class="comment-button">

上記の部分を下記に置き換えて下さい(該当部分にそのまま貼り付けて、その下の説明箇所だけ更に変更してください)。


<dt><label for="pass">pass :</label></dt>
<dd><input id="pass" type="password" name="comment[pass]" size="45" /></dd>
<dt><label for="himitu">secret :</label></dt>
<dd><input id="himitu" type="checkbox" name="comment[himitu]" />サイト管理者にのみ通知する</dd>
<dt><label for="comment">comment :</label></dt>
<dd><textarea id="comment" cols="44" rows="8" name="comment[body]"></textarea></dd>
</dl>
<script type="text/javascript" src="http://blogxx.fc2.com/load.js"></script>
<div class="comment-button">

赤が追加青が移動箇所です。また、http://blogxx.fc2.comのxx部分はご利用のFC2ブログのサーバー名を入れて下さい。このブログならblog78.fc2.comなので、xxは78になります。

これでFC2ブログのコメント機能である、絵文字&装飾が追加されます。java scriptですので機能を有効にしないと表示されませし利用できません。

カスタマイズは以上です。ちなみにこの絵文字&装飾機能についてはこちらが公式の情報のようです。この記事もこちらを参考にしています。
コメント欄での絵文字・デコレーション機能のカスタマイズについて

2007年01月23日

FC2の新しく記事を書く機能を使って強調文字を使用する場合

今回はコメントで質問をいただいた返答を元に、FC2ブログで用意されている、新しい記事を書くの本文欄で使用できる、strong(強調)とi(斜体)タグを使用する場合向けのカスタマイズです。

1.スタイルシートのカスタマイズ


* {
margin: 0;
padding: 0;
font-style : normal;
font-weight: normal;
word-break: break-all;
font-family: Verdana, Arial, sans-serif;
}

上記の抹消線を削除してください。


#box-right{
float: right;
width: 230px;
}

#box-right h3{
font-weight: normal;
}

#box-sub{
float: left;
width: 150px;
}

#box-sub h3{
font-weight: normal;
}

今度は赤色の部分を追加します。できたらこの場所に追加してください。
これで本文に強調文字、斜体文字が設定でき、左右カラムのh3タグ部分も標準フォントで表示されるはずです。(後ほどこのようにFC2ブログ用のテンプレートを変更するかもしれません。この方がよいかも。)

2.FC2ブログ本文で文字のサイズ変更を使用する

大・小の文字設定機能ですが、文字の指定方法が異なるため、うまくは機能しません。どうしても使用したい場合は、以下のようにFC2ブログ用テンプレートを変更してください。


.maincontent{
padding: 0 10px;
margin-bottom: 10px;
color: #000;
font-size: 12px;
line-height: 150%;
}

上記のスタイルシート抹消線部分を削除して、替わりにfont-size: small;font-size: x-small;を追加してください。
これで大文字・小文字も設定できますが、本文の文字サイズはコントロールできなくなります(ブラウザなどにより異なるサイズで表示される)。

2007年01月03日

背景画像を使用するブログカスタマイズ方法

今回は背景画像を使用するカスタマイズの解説です。多少クセがあるので、説明を参考にしてカスタマイズしてみてください。(背景画像はリピートさせる、標準指定を想定しています)

1.ボックス外部の背景画像


body{
text-align: center;
background-image: url(背景画像のアドレス);
}

#bodyid{
margin-top: 10px;
margin-bottom: 20px;
text-align: center;
background: #fff;
}

#box{
width: 930px;
margin-right: auto;
margin-left: auto;
border: solid 1px #000;
background: #fff;
}

カスタマイズ
抹消線のbackground: #fff;は削除してください。
左右に背景画像が表示されます。大きいモニタだと、意外に横にスペースがありますので、意味はあります。

2.背景画像をボックス内にも適用

背景画像を、コンテンツが無い部分に対して全体的に使用します。コンテンツがある部分は背景色を適用させます。


body{
text-align: center;
background-image: url(背景画像のアドレス);
}

#bodyid{
margin-top: 10px;
margin-bottom: 20px;
text-align: center;
background: #fff;
}

.mainbox{
width: 100%;
margin: 0 auto 10px;
border: solid 1px #000;
background: #fff;
}

.mainnavi{
margin-top: 10px;
text-align: center;
font-size: 12px;
background: #fff;
}

.comment-entry{
font-size: 12px;
color: #000;
width: 100%;
background: #fff;
}

カスタマイズ
抹消線のbackground: #fff;は削除してください。
変更箇所は離れていますので、検索などを使用して該当部分を見つけて下さい。エントリ部分やフリーエリア、左右カラムメニューなどの背景色は指定していますので、それ以外の部分には背景画像が適用されます。

以上が基本的な背景色を使用する際のカスタマイズ方法です。ちょっと簡単とまではいかないので、これ以外のカスタマイズをする場合は少々面倒かもしれません。

2006年12月23日

テーブル内のフォントサイズと色の指定

「画像の下にいれた文字のサイズが大きくなる」、という質問を頂いたんですが、考えられるのは画像をテーブル内に配置する場合です。
以前にエントリしていますが、テーブルは使い方が単純ではないので、あえて何もスタイルシートで設定していません。
ですので、文字サイズはブラウザの標準サイズになりますので、たいていは大きくなってしまいます。

特に深く考えない場合は、メイン部分で使用するテーブル全てに対してスタイルシートを適用すれば簡単です。


#box-main img{
margin-right: 16px;
margin-bottom: 16px;
}

#box-main ul{
margin: 10px 0 10px 16px;
line-height: 175%;
}

#box-main table{
font-size: 12px;
color: #000;
}

/* メイン部分 */

赤色の部分をできればこの場所に追加してください。これでテーブルを使用しても、他のテキストと同様に12pxサイズのフォントで表示されます。

また、この場合はメイン部分だけの指定になりますので、ブログ全体で同じサイズ(12px)で表示したい、という場合は以下になります。


.section{
}

table{
font-size: 12px;
color: #000;
}

/*    基本的な設定    */

この場所だけに追加すれば大丈夫です。先ほどの部分の追加は必要ありません。
テーブルを画像組みや、簡単な表でしか使わない場合は、このスタイルシートを追加してしまったほうがよいかもしれません。

これでも画像の下のフォントサイズが治らない場合は、再現していただかないと原因がわかりかねます。

プロフィール

templatetube

Author:templatetube
FC2ブログへようこそ!

最近の記事
最近のコメント
最近のトラックバック
月別アーカイブ
カテゴリー
ブロとも申請フォーム

Appendix


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