ブログ カスタマイズ 方法

ここでは、 ブログ カスタマイズ 方法 に関するカテゴリー情報を紹介しています。
☆★☆ ページ内のキーワード(単語)をドラッグすると、キーワードの詳細解説がご覧になれます ☆★☆
2009/10/21(水)
「月別アーカイブ」の部分を、プルダウンメニューや折り畳み式メニュー以外でコンパクトに表示できないかとの問い合わせがありましたので、テキスト入力領域(テキストエリア)風のオブジェクトを作ってスクロール表示させるようにしてみました。(※左メニューの月別アーカイブを参照)

【手順】

環境設定のプラグインの設定より
プラグイン管理 ⇒ 月別アーカイブの編集 ⇒ 【HTMLの編集】の順にクリックします。

デフォルトで表示されているプラグインのソースを以下のソースと入れ替えます。

<div style="width:97%;height:350px;overflow:auto;padding:0px 5px;">
<ul>
<!--archive-->
<li &align>
<a href="<%archive_link>" title="<%archive_year>年<%archive_month>月"><%archive_year>年<%archive_month>月 (<%archive_count>)</a>
</li>
<!--/archive-->
</ul>
</div>

width:97%;height:350px;」の部分の数値をお好みの数値に置き換えて下さい。

 ※参考記事 ⇒ テキスト入力領域(テキストエリア)風のオブジェクトを作る

* 記事の内容にご満足戴けましたならクリックをお願いします ↓
* 人気blogランキング! * ブログランキングくつろぐ * ブログテンプレートランキング

タグ :カスタマイズ CSS スタイルシート

2009/08/12(水)
対応テンプレート : simple_black2cl、simple_black3ca (FC2ブログ未公開テンプレート)
 ※テンプレートのダウンロードはこちら ⇒ simple_black2clsimple_black3ca

▼手順1
手順1まずは上記ダウンロードページから該当するテンプレートのHTMLとスタイルシートをダウンロードしておいて下さい。


ダウンロードしたら、管理画面の「テンプレートの設定」をクリックし、スタイルシートの編集をします。(※HTMLは編集する必要はありません)

▼手順2
手順2
 ※テンプレートをカスタマイズする時には、必ず複製してからカスタマイズするようにして下さい。
手順3

 それでは、「編集」をクリックしてスタイルシートの編集をしましょう。
[ テンプレートのベースカラーを簡単に変更する方法 ] の続きを読む

タグ :カスタマイズ

2009/08/08(土)
> 「166_simple_3c」のブログのタイトルの右左にイラストを入れたいと
> 思うのですがそういうことはできるのでしょうか?

単純に、ブログのタイトルの右左にイラスト(画像)を入れるのであれば、
<h1 id="title"><a href="<%url>"><span class="title_bg"><%blog_name></span></a></h1>
の部分を
<h1 id="title"><img src="画像へのパス" style="margin-right:30px;" /><a href="<%url>"><%blog_name></a><img src="画像へのパス" style="margin-left:30px;" /></h1>
とすればいいでしょう。

他には、スタイルシート記述部分に、「<%blog_name>」を装飾するために設置してあるクラス指定「title_bg」を利用(背景画像として)する方法もあります。
▼記述例
.title_bg {
background: url("画像へのパス") no-repeat;
padding: 30px 8px 30px 100px;  //数値は画像サイズにあわせ微調整してください//
}


他に、「headBlockBase」に、直接、画像を挿入する方法もあります。

<!--headBlockBase-->
<div id="headBlockBase">
<!--headBlock-->
<div id="headBlock">

の部分を
<!--headBlockBase-->
<div id="headBlockBase">
<img src="画像へのパス1" style="float:left;margin-left:30px;" />
<img src="画像へのパス2" style="float:right;margin-right:30px;" />
<!--headBlock-->
<div id="headBlock">

としてください。  ※サンプル ⇒ sample_166_simple_3c
 ※備考
   画像へのパス1;画像を左に寄せ、左にマージン(スペース)を空ける
   画像へのパス2;画像を右に寄せ、右にマージン(スペース)を空ける

他には、「headBlock」をテーブルタグに置き換える方法などもありますが、「166_simple_3c」のテンプレートは、エリアごとにタイトルなどが異なって表示させるように複雑に記述してありますので、全ページに同じように表示させるためには、何か所も修正しなければなりませんし、上級者の方でないとお勧めできません。
(普通のテンプレートでなら簡単にできます)

* 記事の内容にご満足戴けましたならクリックをお願いします ↓
* 人気blogランキング! * ブログランキングくつろぐ * ブログテンプレートランキング

タグ :カスタマイズ

2009/01/23(金)
私は、ブログ環境設定の記事の設定で、月別記事の表示数を50件に設定しており、今までのところ50件を超えるほどのペースでは記事をアップしてはいませんが、それでも、20件、30件と記事の数が多くなると、ページが縦にダラダラと長くなり、記事を読みにくくなってしまいますし、ページによっては(画像などを多く含む記事が多い場合など)表示に時間がかかってしまいます。

そこで、月別記事(アーカイブ)ページのみ、記事本文の要約を表示するようにしました。

FC2ブログでは、ブロック変数のひとつである、「<%topentry_discription>」を使うことで、記事本文の要約(200文字)を表示することができ、画像は表示せず、テキストのみで表示させるようにすることができます。

さて、記事本文の要約を表示する方法ですが、まず、テンプレート管理ページのHTML編集部分に、下記のような記述部分があるはずですので、探してみてください。

<div class="mainEntryBody">
<%topentry_body>
</div>

 ※「<%topentry_body>」の部分が、記事本文にあたります。
 ※class要素(mainEntryBody の部分)はテンプレートにより異なります。

↓青字で囲まれている部分を、以下のように変更します。
<div class="mainEntryBody">
<!--date_area--><%topentry_discription><!--/date_area-->
<!--not_date_area--><%topentry_body><!--/not_date_area-->

</div>

↓上記のタグを日本語でわかりやすく表示すると、以下のようになります。
<div class="記事本文のスペース">
<!--月別記事エリア--><記事本文要約><!--/月別記事エリア-->
<!--月別エリア以外--><記事全文表示><!--/月別エリア以外-->

</div>

注意点
テンプレートをカスタマイズする際には、必ず元のテンプレートをバックアップしてからカスタマイズするようにしてください。また、カスタマイズは自己責任のもとで行ってください。レイアウトが崩れたとか、ページが表示されなくなった等の苦情には一切お答えできませんし、「何とかしてください」とかのアフターケアを求められても対応できません。
(※ IE と Firefox で確認済み)
万が一、正常に表示されなくなった場合でも、おそらく私のせいではありません。

* 記事の内容にご満足戴けましたならクリックをお願いします ↓
* 人気blogランキング! * ブログランキングくつろぐ * ブログテンプレートランキング

タグ :カスタマイズ

2008/09/01(月)
■コメントフォーム欄の幅を調整する
コメントフォーム欄の幅を調整するには、「maintForm要素」の数値を調整します。
.mainFormText {
width: 250px;
}
.mainFormTextarea {
width: 250px;
}
  ※クラス名はテンプレートにより異なります。
■コメントフォームの入力文字数を調整する
コメントフォームの入力文字数を調整するには「size="30"」の数値を変更します。
<input id="name" type="text" name="comment[name]" size="30" class="mainFormText" value="<%cookie_name>" />

* 記事の内容にご満足戴けましたならクリックをお願いします ↓
* 人気blogランキング! * ブログランキングくつろぐ * ブログテンプレートランキング

[ コメントフォームをカスタマイズする ] の続きを読む

タグ :カスタマイズ コメントフォーム

2008/09/01(月)
コメントを頂けるのは、大変にありがたいのですが、ありがたいコメントよりも、非常に迷惑なスパムコメントの方が、圧倒的に多いのが実情です。

その迷惑なスパムコメントの中には、どうも機械的に投稿されているものが多くあるように思われるので、機械的に投稿されるスパムコメント対策の方法を考えてみました。

FC2ブログには、スパムコメント対策として、禁止設定として、「禁止IP・ホスト」や「禁止ワード」をブラックリストとして登録できる機能があります。そこで、あらかじめ、コメントのテキストエリアの部分に、「禁止ワード」を記入しておき、ブラックリストに、その「禁止ワード」を登録しておくという方法です。

ビジター(訪問者)の方には、ひと手間かかってしまい申し訳ないのですが、このようにすれば、機械的に投稿されるスパムコメントは拒否できるようになるはずです。

▼カスタマイズ記述例

<script type="text/javascript" src="<%template_comment_js>"></script><br />
<textarea id="comment" cols="40" rows="8" name="comment[body]" class="mainFormTextarea"></textarea>

と記入されているタグの部分を、以下のように変更します。
(※使用しているテンプレートによっては記述が違う場合もあるかもしれません)

<script type="text/javascript" src="<%template_comment_js>"></script><br />
<span style="font-size:12px;">※<span style="color:#ff3300;font-weight:bold;">投稿前に本文を削除</span>の部分を削除して下さい</span><br />
<textarea id="comment" cols="40" rows="8" name="comment[body]" class="mainFormTextarea">投稿前に本文を削除して下さい</textarea>

※実際の表示例は、この記事単体をご覧になってください。

注意点
テンプレートをカスタマイズする際には、必ず元のテンプレートをバックアップしてからカスタマイズするようにしてください。また、カスタマイズは自己責任のもとで行ってください。レイアウトが崩れたとか、ページが表示されなくなった等の苦情には一切お答えできませんし、「何とかしてください」とかのアフターケアを求められても対応できません。
(※ IE と Firefox で確認済み)
万が一、正常に表示されなくなった場合でも、おそらく私のせいではありません。

* 記事の内容にご満足戴けましたならクリックをお願いします ↓
* 人気blogランキング! * ブログランキングくつろぐ * ブログテンプレートランキング

タグ :カスタマイズ スパムコメント対策 コメントフォーム