FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

プラグイン説明の入力有無を判定して、表示/非表示を振り分けるフラグ [2009/08/31]
コメントの題名入力欄に初期値を設定する [2009/08/30]
便利ナビ「月別アーカイブ」のページ送りリンク [2009/08/29]
プラグイン内にある入力欄の幅を設定する [2009/08/29]
記事別最近のコメント「Tree-Comment」 [2009/08/29]
コメント入力欄の幅設定 [2009/08/28]
親子カテゴリ対応サイトマップのリンクタイトル [2009/08/28]
linkタグ relの設定 [2009/08/26]
記事タイトルやプラグインタイトルを画像にする (lightframe) [2009/08/24]
metaタグ descriptionの設定 [2009/08/23]

≪ 前月 | 2009年08月 | 翌月 ≫

プラグイン説明の入力有無を判定して、表示/非表示を振り分けるフラグ

普段はあまり使われることはありませんが、プラグインにはその上と下に説明文を付けることができます。

プラグインの設定→設定[詳細]
プラグイン説明(上部)
プラグイン説明(下部)

プラグインの説明文が何も入力されないと、HTMLに無駄な空タグが生じてしまいました。

この無駄な空タグを、テンプレート変数「プラグイン説明の入力有無を判定して、表示/非表示を振り分けるフラグ」を利用して非表示にする方法を紹介します。

ただこの空タグが悪影響を及ぼすことは無いので無理に修正する必要はありません。

【続きを読む】

【続きを閉じる】

当サイト配布のテンプレートであれば、HTMLの下記箇所に次の赤い記述を加えてください。

【standardシリーズの場合】

～





<div class="menu_title" style="text-align:<%plugin_first_talign>"><%plugin_first_title></div>
<table width="100%" summary="plugin1"><tr><td class="menu_cont">



<div style="margin: 10px 0; text-align:<%plugin_first_ialign>">
<%plugin_first_description></div>



<div style="margin: 10px 0; text-align:<%plugin_first_align>">
<%plugin_first_content>
</div>



<div style="margin: 10px 0; text-align:<%plugin_first_ialign>">
<%plugin_first_description2></div>



</td></tr></table>
<hr class="left_width" />





～






<div class="menu_title3" style="text-align:<%plugin_third_talign>"><%plugin_third_title></div>
<div class="menu_cont3">



<div style="margin: 10px 0; text-align:<%plugin_third_ialign>">
<%plugin_third_description></div>



<div style="margin: 10px 0; text-align:<%plugin_third_align>">
<%plugin_third_content>
</div>



<div style="margin: 10px 0; text-align:<%plugin_third_ialign>">
<%plugin_third_description2></div>



</div>

<br />





～





<div class="menu_title" style="text-align:<%plugin_second_talign>"><%plugin_second_title></div>
<table width="100%" summary="plugin2"><tr><td class="menu_cont">



<div style="margin: 10px 0; text-align:<%plugin_second_ialign>">
<%plugin_second_description></div>



<div style="margin: 10px 0; text-align:<%plugin_second_align>">
<%plugin_second_content>
</div>



<div style="margin: 10px 0; text-align:<%plugin_second_ialign>">
<%plugin_second_description2></div>



</td></tr></table>
<hr class="right_width" />





～

【lightframeシリーズの場合】

～





<div class="plugin3_outline">
<div class="plugin3_title" style="text-align:<%plugin_third_talign>">
<%plugin_third_title></div>
<div class="plugin3_body">



<div style="text-align:<%plugin_third_ialign>; margin:1px 1px;">
<%plugin_third_description></div>



<div style="text-align:<%plugin_third_align>">
<%plugin_third_content></div>



<div style="text-align:<%plugin_third_ialign>; margin:1px 1px;">
<%plugin_third_description2></div>



</div>
</div>





～




<div class="plugin1_outline">
<div class="plugin1_title" style="text-align:<%plugin_first_talign>"><%plugin_first_title></div>
<div class="plugin1_body" style="text-align:<%plugin_first_align>">



<div style="text-align:<%plugin_first_ialign>; margin:1px 5px;"><%plugin_first_description></div>



<%plugin_first_content>



<div style="text-align:<%plugin_first_ialign>; margin:1px 5px;"><%plugin_first_description2></div>



</div>
</div>




～




<div class="plugin2_outline">
<div class="plugin2_title" style="text-align:<%plugin_second_talign>"><%plugin_second_title></div>
<div class="plugin2_body" style="text-align:<%plugin_second_align>">



<div style="text-align:<%plugin_second_ialign>; margin:1px 5px;"><%plugin_second_description></div>



<%plugin_second_content>



<div style="text-align:<%plugin_second_ialign>; margin:1px 5px;"><%plugin_second_description2></div>



</div>
</div>




～

これで無駄な空タグを出力しなくて済みます。

【2009/09/06 追記】この記事の修正はlightframeシリーズのver.05以降、standardシリーズのver.10以降には実装済みです。各バージョン情報はHTMLかCSSの最下部に記されています。

スポンサーサイト

[ 2009/08/31 22:40 ] 修正報告実装済みカスタマイズ | TB(0) | CM(2)

コメントの題名入力欄に初期値を設定する

コメント投稿欄の名前やURLは、クッキーが記憶している場合は自動で入力欄に表示されます。

しかしコメントの題名は空欄で、そのまま何も入力されることなくコメントが投稿されることは多いと思います。

この題名の入力欄に、予め決まった文言を表示しておく方法を紹介します。

例えば No title と表示したい場合は、HTMLの下記箇所に次の赤い部分を加えてください。

～
<label for="subject">題名:</label><br />
<input id="subject" type="text" name="comment[title]" size="40" value="No title" onfocus="if (this.value == 'No title') this.value = '';" onblur="if (this.value == '') this.value = 'No title';" /><br />

Re: 記事タイトル と表示したい場合は、３カ所の No title を
Re: <%sub_title> と変えてください。

これでコメント投稿者が題名を入力しなくても、コメントタイトルには初期値が表示されます。

[ 2009/08/30 23:16 ] カスタマイズ共通カスタマイズ | TB(0) | CM(0)

便利ナビ「月別アーカイブ」のページ送りリンク

設定できる「月別アーカイブ」の表示件数は、最大で30件です。
環境設定の変更→ブログの設定[記事の設定]→記事(月別)

しかし「月別アーカイブ」の便利ナビ末尾に表示されるページ送りリンクは、前月や翌月へのリンクはあっても、その月の31件目から先を表示するリンクはありませんでした。

月に30件以上記事を掲載する方にとっては不十分なページ送りリンクでした。
申しわけありません。m(__)m

この問題を解決するために、HTMLに次の記述の赤い箇所を加えてください。

【続きを読む】

[ 2009/08/29 22:13 ] 修正報告実装済みカスタマイズ | TB(0) | CM(2)

プラグイン内にある入力欄の幅を設定する

公式プラグイン「メールフォーム」は、そのHTML内で入力欄の幅が90%と設定されています。
しかし公式プラグイン「検索フォーム」の入力欄等は幅が設定されていません。

これら入力欄の幅が設定されていない公式、共有プラグインを実装したときに、IEでは収まっているのにFirefoxでは枠から飛び出している等、ブラウザにより違う幅が表示されてしまいます。

この問題を解決するためには、プラグインを囲っているクラスのinput,textareaに対して、スタイルシートで幅を設定します。

【続きを読む】

[ 2009/08/29 17:32 ] 修正報告実装済みカスタマイズ | TB(1) | CM(3)

記事別最近のコメント「Tree-Comment」

FCafeを運営するdanielさんが、記事別に最新コメントを表示できる
共有プラグイン「Tree-Comment」
を公開してくれています。

【参考記事】
FCafe plugin Treeシリーズ
FCafe 新着マーク３

最近のコメントが記事別にツリー表示できるのはとても便利でお勧めです。

このプラグインが２つ以上あると正常に表示されないようなので、複数ダウンロードした場合は１つだけ表示するようにしてください。

[ 2009/08/29 12:21 ] 共有プラグイン | TB(0) | CM(4)

コメント入力欄の幅設定

コメント等のテキスト入力欄の幅は、設定しなければブラウザによって少し違う幅が表示されてしまいます。

当サイト配布のテンプレートはこの幅を設定していなかったために、ブラウザにより少し差異が生じてしまいました。
申しわけありません m(__)m

これらの幅を設定するには、以下をスタイルシートの末尾に加えてください。

/* コメント諸項目（名前、URL等）の入力欄の幅 */
#subject,
#name,
#mail,
#url {
width: 50%;
}

/* コメント本文の入力欄の幅 */
#comment {
width: 95%;
}

/* コメントパスワード入力欄の幅 */
#pass {
width: 30%;
}

各数値はお好みに合わせて設定してください。

この設定は、公式、共有に関わらず、どのテンプレートでも有効になると思います。

[ 2009/08/28 21:33 ] 修正報告実装済みカスタマイズ | TB(0) | CM(7)

親子カテゴリ対応サイトマップのリンクタイトル

リンクタイトルはマウスカーソルをリンクに乗せたときに表示されます。

当サイト配布のテンプレート(standard_ver.09,lightframe_ver.04 以降)であれば、次の赤い箇所がリンクタイトルに相当します。

～

<div class="display_no">
<ul>

<li Name="<%titlelist_category_no>" ID="<%titlelist_category_no>">
<a href="<%titlelist_url>" title="<%titlelist_body>"><%titlelist_title></a>
-　<%titlelist_year>.<%titlelist_month>.<%titlelist_day>
</li>

</ul>
</div>

～

この <%titlelist_body> は、本文冒頭(約20文字)しか表示しません。リンク先に移動せずに内容がある程度解るのなら良いのですが、20文字前後だと少し不十分です。

より記事タイトルをSEOのキーワードとして強調したければ、記事タイトルと同じリンクタイトルにしたほうが良いかもしれません。

記事と同じリンクタイトルにする場合は<%titlelist_body>を<%titlelist_title>に入れ替えてください。

[ 2009/08/28 00:10 ] 修正報告実装済みカスタマイズ | TB(0) | CM(2)

linkタグ relの設定

linkタグのrelとは現在のページからみた別のページとの関係を設定するために使われるタグです。

当サイト配布のテンプレートであれば<head></head>内に次のような箇所があります。

<link rel="stylesheet" type="text/css" href="<%css_link>" media="screen,tv" title="default" />
<link rel="alternate" type="application/rss+xml" href="<%url>?xml" title="rss" />
<link rel="top" href="<%url>" title="トップ" />
<link rel="start" href="<%url>" title="最初の記事" />
<link rel="prev" href="<%preventry_url>" title="<%preventry_title>" />
<link rel="next" href="<%nextentry_url>" title="<%nextentry_title>" />

個別記事の前後関係は設定していましたが、その他（カテゴリや日付等）のページの前後関係は設定していませんでした。

もしこのタグが検索エンジンのクロールやインデックスに効果があるとすれば、さらに以下のタグを加えると良いかもしれません。

<link rel="prev" href="<%prevpage_url>" title="前のページ" />
<link rel="next" href="<%nextpage_url>" title="次のページ" />
<link rel="index" href="<%url>archives.html" title="サイトマップ" />

効果があるかどうか解りませんが、これで少しでも検索エンジンのインデックスがスムーズになると良いですね。

【2009/08/27 追記】
一部スラッシュ「/」が抜けていたので追加しました。
ちゃんさんご指摘ありがとうございました m(__)m

また、全記事一覧は「索引」でも「目次」でもあると思うので
<link rel="index" href="<%url>archives.html" title="サイトマップ" /> を
<link rel="contents" href="<%url>archives.html" title="サイトマップ" />
としても問題ないと思います。

ちなみにFC2の公式テンプレートは「index」を使っていましたが、三大検索エンジン(Google, Yahoo, MSN)のトップページはこのどちらも使っていませんでした。あまりこのタグの効果を期待しないほうが良さそうです＾＾；

[ 2009/08/26 23:15 ] 修正報告実装済みカスタマイズ | TB(0) | CM(5)

記事タイトルやプラグインタイトルを画像にする (lightframe)

当サイトが配布している共有テンプレート「lightframeシリーズ」において、記事タイトルやプラグインタイトルを画像にするカスタマイズを紹介します。

スタイルシートの末尾に以下を加えてください。

/* 記事タイトル */
.ently_title {
background-image: url("画像URL");
}

/* プラグイン１ */
.plugin1_title {
background-image: url("画像URL");
}

/* プラグイン２ */
.plugin2_title {
background-image: url("画像URL");
}

/* プラグイン３ */
.plugin3_title {
background-image: url("画像URL");
}

これでlightframeシリーズの記事タイトルやプラグインタイトルを画像にすることが出来ます。

[ 2009/08/24 23:19 ] カスタマイズ lightframe 専用 | TB(0) | CM(28)

metaタグ descriptionの設定

metaタグのdescriptionとは、そのページの要約を紹介するところです。

かつてスパムとして利用されたために今では検索エンジンの上位表示効果は無いと言われていますが、ここに設定された記述は検索結果の説明文として表示されることが多くなります。

当サイト配布のテンプレートであれば、次のような箇所があります。

<head>
～
<meta name="description" content="<%introduction>" />
～
</head>

<%introduction>には、環境設定にあるユーザー情報の設定「ブログの説明」があてはまります。
これは全てのページのdescriptionに「ブログの説明」を設定した状態です。

今までこのタグの扱いを重要視していませんでしたが、Googleウェブマスターツールによるサイト診断では「重複するメタデータ(descriptions)」があると警告が出てしまいました。

descriptionを設定しなくても検索結果にはキーワード周辺の文章が表示されるので、この設定を削除したほうが良さそうです。

全てのページで同じdescriptionは良くないが、トップページだけ設定したいという方は以下のようにしてください。