テンプレート カスタマイズ

ここでは、テンプレート カスタマイズ に関するカテゴリー情報を紹介しています。
--/--/--(--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2006/10/20(金)
皆さんは、記事を分類するのに、「カテゴリーリスト」を利用しているのではないかと思いますが、
このユーザータグ機能を利用すれば、更に詳細な「サブカテゴリーリスト」として利用できます。
 ※サンプルページ:カスタマイズ (スマイルマークからポータルユーザータグへリンク)
  (ユーザータグがタイトルとして表示されるよう、テンプレートをカスタマイズしてあります)

「ブログ内検索」を利用して記事を探そうとすると、一語でも検索対象となるキーワードが含まれていると、そのすべてのページが表示されてしまいますが、このユーザータグ機能を利用すれば、文章中のキーワードのあるなしに関わらず、ユーザータグを指定したページのみ表示されます。

最近、少しずつ、ポータルユーザータグページからのアクセスが増えてきており、検索エンジンで、キーワードのチェックをしていると、キーワードによってはこの、ポータルユーザータグページが上位に表示されていることがあります。この、ユーザータグを上手に利用すれば、SEO対策としての効果も期待できるのではないかと思います。

●ユーザータグ機能についての解説

この機能は記事に関連すると思われるタグ(キーワード)を付ける事が出来ます。
付けたタグは本文中の語句をリンク変換する事ができます。
また、他のブログとタグを共有でき、同じタグを付けた他のユーザーを検索する事も出来るので、共通の話題を扱うブログ等を探す時にも便利です。 また設定したタグのリストをプラグインとして表示することも可能です。
管理画面へログイン後、「プラグインの設定」→「プラグインの追加」→「ユーザータグの表示」から追加することが出来ます。 (FC2インフォメーション;「ユーザータグ機能を追加」より記事引用)

●ユーザータグ機能の利用方法

記事編集ページの、カテゴリー別分類プルダウンメニュー下部にあるユーザータグ挿入用のテキストボックスにキーワード文字列を入力します。複数のキーワードを入力する場合は、語句と語句の間に半角もしくは全角のスペースを入力します。一度に指定できるユーザータグは最大 10 個までです。
スポンサーサイト

タグ : カスタマイズ

2006/05/18(木)
◎ ページタイトル下部のカレンダー表示を削除する

テンプレートによっては、ページタイトル下部に横型のカレンダーが表示されるように設定されていますが、ページタイトル下部のカレンダー表示を削除するには、以下の手順で作業して下さい。

  1. 管理者ページ>テンプレートの設定>テンプレートの一覧より編集画面を表示し、
    該当するテンプレートを選択
  2. <!--calendar-->
    <div id="Calendar">
    <p style="margin:0px 0px 0px 0px;">
    <a href="<%prev_month_link>" title="「<%prev_year>年<%prev_month>月」を表示する"><%prev_year>/<%prev_month></a> |
    <!--calender2--><span class="day"><%days></span><!--/calender2-->
    | <a href="<%next_month_link>" title="「<%next_year>/<%next_month>月」を表示する"><%next_year>/<%next_month></a>
    </p>
    </div>
    <!--/calendar-->

    の部分を削除する
  3. スタイルシートの編集より、/* 上部カレンダー設定 */ 部分の
  4. #Calendar {
    text-align: center;
    font-size: 12px;
    color: #997700;
    margin-top: 10px;
    }
    #Calendar .day {
    margin-right: 2.5px;
    padding-right:3px;
    }
    #Calendar a {
    font-weight: bold;
    color: #cc9900; text-decoration : underline;
    }

    #Calendar a:hover {
    color:#ff3300; text-decoration : underline;
    }

    の部分を削除する


2006/05/18(木)
◎ ブログタイトル部分の背景色(画像)変更方法

以下のスタイルシート(CSS)の赤字部分を変更してください。

ブログタイトル部分の背景色を変更する場合

#headBlock {
background-color : #123456;
}

 ※参考; HTMLリファレンス - カラー編(RGB)

ブログタイトル部分の背景画像を変更する場合
#headBlock {
background : #123456 url("画像へのパス(URL)");
}
 ※備考; "#123456" は、背景画像が表示されない時に表示する色を指定

 ▼ 背景画像の位置を指定する場合
  #headBlock {
  background : #123456 url("画像へのパス(URL)") no-repeat fixed 50% 30%;
  }


● 関連する記事 ⇒ ※背景イメージを指定するCSS&背景画像(フリー素材)

おすすめブログ カスタマイズ関連書籍
  さすが!と言わせる FC2ブログ徹底攻略術
  ポータル プロバイダ別blogデザインカスタマイズ事典


2006/05/18(木)
アフィリエイトや物販などでブログを利用する場合など、記事部分に日付を表示したくないという方もいるでしょう。

そこで、記事部分の日付表示をさせないようにする設定方法を説明します。
ここでは、「blog298_10-3」を例に説明します。
(※テンプレートによって記述が違う場合がありますので注意してください)

記事の日付を表示しない設定方法

  1. 管理者ページ>テンプレートの設定>テンプレートの一覧より編集画面を表示
  2. テンプレートの編集画面が開いたら、キーボードの「Ctrl」ボタンと「F」ボタンを同時に押す
  3. 検索ボックスが出てくるので、「 <a href="<%topentry_link>"><%topentry_year>/<%topentry_month>/<%topentry_day>(<%topentry_wayoubi>)
    </a>
    」と入力して、エンターキーを押してください
  4. 反転表示された上記の該当部分(赤字)を全て削除して下さい
  5. 更新ボタンを押して完了です。

部分的に削除したい場合には、下記の該当する部分だけ削除して下さい。

各パーツの説明
 ※ <%topentry_link> ⇒ 記事ページのURL
 ※ <%topentry_year> ⇒ 投稿した年
 ※ <%topentry_month> ⇒ 投稿した月
 ※ <%topentry_day> ⇒ 投稿した日
 ※ <%topentry_wayoubi> ⇒ 投稿した曜日

2006/05/17(水)
時折、自分が書いた文章を、そのままコピーして利用しているブログやWebサイトを見受けます。
苦労して書き上げた文章を、記事引用の表示なく無断で利用されると、あまり気分の良いものではありません。

そこで、コピーされたくない文章を、マウスで選択(ドラッグ)できなくします。(IEのみ有効)

ページ全体の文章を、マウスで選択できなくする方法

<body onselectstart="return false">

部分的に文章を、マウスで選択できなくする方法

<p onselectstart="return false">P 、DIV などブロック要素に適用<p>

実際の適用例

  ドラッグしてみてください! ⇒ 無料レンタル ブログ比較評価

 ※ 注意 ; この方法は、IE でのみ有効です。

2006/05/07(日)
エントリー記事部分に広告挿入欄などのスペースを挿入します  ※サンプル

◎HTMLソース部分

<!--mainEntryBase--> ~ <!--/mainEntryBase--> で囲まれている部分がエントリー記事内容部分です
緑字の部分は、テンプレートにより異なる場合もありますので注意して下さい
 ※赤字の部分を挿入したいところに追加して下さい。

<!--mainEntryBase-->
<div class="mainEntryBase">

<div class="EntryBody_cm">
→ ※エントリー記事部分、広告挿入欄のサンプル 上部スペース ←
</div>

<div class="editentry">
<a href="./admin.php?mode=editentry&no=<%topentry_no>" title="記事を編集する">
<%topentry_year>/<%topentry_month>/<%topentry_day>(<%topentry_wayoubi>)</a>
</div>
<div class="mainEntryBody"><%topentry_body></div>

<div class="mainEntryMore">
<!--more_link-->
≫<a href="<%topentry_link>#more">[<%topentry_title>]の続きを読む</a>
<!--/more_link-->
<!--more-->
<a name="more" id="more"></a><%topentry_more>
<!--/more-->
<div class="EntryBody_cm">
<hr />
→ ※エントリー記事部分、広告挿入欄のサンプル 下部スペース ←
<p class="cm_banner">
◎ 広告のサンプル
</p>
</div>

</div>
<div class="mainEntryDate">
<a href="<%topentry_category_link>" title="カテゴリ一分類"><%topentry_category></a> |
<!--allow_tb-->
<a href="<%topentry_link>#trackback">トラックバック:<%topentry_tb_num></a> |
<!--/allow_tb-->
<!--deny_tb-->
<!--/deny_tb-->
<!--allow_comment-->
<a href="<%topentry_link>#comment">コメント:<%topentry_comment_num></a> |
<!--/allow_comment-->
<a href="#page_top" title="ページトップへ"> Page Top↑</a>
<!--deny_comment-->
<!--/deny_comment-->
</div>
</div>
<!--/mainEntryBase-->

◎CSSソース追加部分

.EntryBody_cm {
margin: 10px 0px 10px 0px;
font-size: 14px; color: #6C6C6C;
}
.cm_banner {
text-align: center;
margin: 5px 0px 2px 0px;
}

 ※この部分で文字サイズやスペースなど適当に調整して下さい。
 ※margin の左右部分(0pxの部分)をとると記事部分の幅が広くなりレイアウトが崩れます

2006/05/07(日)

◎ カテゴリー&エントリー毎にタイトルを変える

一般的なブログでは、ブログタイトルが全ページに適用される事が多く、カテゴリーページやエントリーページ(記事表示)ごとにタイトルが変化しないものが多いようです。

FC2ブログでは、FC2独自タグを使うことで、カテゴリーページやエントリーページ毎にタイトルを変える事ができますが、ここでは、そのために必要なFC2ブログ テンプレート中で使える変数について説明します。
 ※備考; FC2ブログ テンプレート中で使える変数一覧

カテゴリー&エントリー毎にタイトルを変える為に必要な変数

  1. <%blog_name>:ブログのタイトルを表示
  2. <%sub_title>:サブタイトルを表示。エリアによりタイトルが変わる。
    ※トップページでは表示しない
    ※カテゴリーページの時は、カテゴリー名を表示
    ※エントリー記事ページの時は、個別エントリー名を表示
    ※月別アーカイブページの時は、年・月・日の数字を表示
    ※検索結果ページの時の時は、検索語句を表示
  3. <!--index_area--> ~トップページにのみ表示~ <!--/index_area>
  4. <!--category_area--> ~カテゴリーページにのみ表示~ <!--/category_area>
  5. <!--permanent_area--> ~個別エントリーページにのみ表示~ <!--/permanent_area>
  6. <!--date_area--> ~月別アーカイブページにのみ表示~ <!--/date_area>
  7. <!--search_area--> ~検索結果ページにのみ表示~ <!--/search_area>

エリアタグは、notをつける事でその「エリア以外」で表示させることもできます。
 ※例 : <!--not_index_area--> ~トップページ以外に表示~ <!--/not_index_area-->

2006/01/28(土)
文字サイズや色、行間隔などを変更するには、「テンプレートの設定」「スタイルシートの編集」にて、各、該当するブロックの文字サイズ指定箇所を変更して頂く必要があります。

ブログ全体の文字サイズや色、行間隔などを変更するには

body{
font-size: 12px; // 文字サイズ
color: #333333; // 文字色
line-height: 130%; // 行間隔
text-align: center; // テキスト配置位置
}

エントリー本文の文字サイズや色、行間隔などを変更するには
 ※ブログ全体の指定を引き継ぐ場合には設定の必要はありません

.mainEntryBlock {
font-size: 13px; // 文字サイズ
color: #555555; // 文字色
line-height: 130%; // 行間隔
text-align: left; // テキスト配置位置
}

メニュー枠の文字サイズや色、行間隔などを変更するには
 ※ブログ全体の指定を引き継ぐ場合には設定の必要はありません
 ※3カラムの場合には「.menu2BlockBase」も設定する必要がある場合もあります

.menu1BlockBase {
font-size: 13px; // 文字サイズ
color: #555555; // 文字色
line-height: 130%; // 行間隔
text-align: left; // テキスト配置位置
}

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