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

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

プラグイン「最新記事」に表示される記事タイトルが長過ぎる場合は省略する

プラグインの「最新記事」において、表示される記事タイトルが長過ぎる場合は
「○○○○○
 ○○○○○...」
と、「...」で省略して表示する方法を紹介します。

任意のプラグインHTMLを下記のようにしてください。

<ul>
<!--recent-->

<script type="text/javascript"><!--

var mojisu = 10; //最大表示文字数を設定
var str = new String();
str = "<%recent_title>";

if ( str.length > mojisu ) {
str = str.substring(0,mojisu);
str = str+"...";
}

document.write('<li><a href="<%recent_link>" title="<%recent_title>">',str,' (<%recent_month>/<%recent_day>)</a></li>');

--></script>

<!--/recent-->
</ul>


上記の場合だと10文字を超える記事タイトルは11文字目以降が「...」として省略されます。
最大表示文字数はお好きなように設定してください。

【2009/10/28 追記】日付が不要であればこの部分を削除してください。
コンマ「,」やシングルクォーテーション「'」も忘れずに削除してください。

,' (<%recent_month>/<%recent_day>)</a></li>'




【2009/11/17 追記】以前追記した内容に間違いがありました。誠に申しわけありません。
日付が不要であればこの部分を削除してください。

(<%recent_month>/<%recent_day>)


スポンサーサイト



特定の記事で一部分を非表示

特定の記事で一部分を非表示にするカスタマイズを紹介します。

HTMLを編集します。
特定の記事で非表示にしたい部分を、このdivタグで囲んでください。

<div class="none_en<%topentry_no>"></div>


そしてスタイルシートの末尾に以下の様な設定を加えてください。

.none_en1 { display: none; }
.none_en2 { display: none; }
.none_en3 { display: none; }


赤い数字は記事番号を設定してください。各記事番号は、その記事ページのURLを見ると判ります。
http://~/blog-entry-x.html
xの位置にある数字がその記事の番号です。

ここで設定した番号の記事が、上記タグで囲んだ部分を表示しなくなります。


例えば当サイト配布のテンプレートであるlightframeシリーズの場合、記事の下にあるコメント等へのリンク
[日付] カテゴリ | TB(0) | CM(0)
という部分を記事番号99(blog-entry-99.html)において表示させたくないときは、次の様になります。

HTMLの以下の箇所に赤い記述を加えます。

<!--▼ エントリー(記事)▼-->

</div><!--/ently_text-->
<div class="none_en<%topentry_no>">
<div class="ently_navi">

</div><!--/ently_navi-->
</div>
</div><!--/ently_body-->

<!--▲ エントリー(記事)▲-->


そしてスタイルシートの末尾にこれを加えてください。

.none_en99 { display: none; }


これで記事番号99(blog-entry-99.html)において、記事の下にあるコメント等へのリンクを非表示にすることができます。

タイトル画像のaltとリンクタイトルを「記事タイトル ~ ブログタイトル」とする

以前紹介した「タイトルを画像にしたときのSEO」は、個別記事ページにおいてタイトル画像のaltとリンクタイトルを「記事タイトル」にするものでした。
この「記事タイトル」を「記事タイトル ~ ブログタイトル」とする方法を紹介します。

これは現在閉鎖されたサイト様の記事内容を、そのサイト様のご好意により転載させてもらいました。

HTMLを編集します。タイトルを画像にしているとき、そのリンクタイトルとalitを次の様に書き換えてください。

<!--▼▼ ヘッダー ▼▼-->

<h1><a href="<%url>" title="<!--not_permanent_area--><%blog_name> トップページへ<!--/not_permanent_area--><!--permanent_area--><%sub_title> ~ <%blog_name><!--/permanent_area-->"><img src="画像のURL" alt="<!--not_permanent_area--><%blog_name> トップページへ<!--/not_permanent_area--><!--permanent_area--><%sub_title> ~ <%blog_name><!--/permanent_area-->" width="画像の横幅" height="画像の高さ" /></a></h1>

<!--▲▲ ヘッダー ▲▲-->


これでタイトル画像のaltとリンクタイトルを「記事タイトル ~ ブログタイトル」とすることができます。

FC2ブックマークの位置を変更

FC2ブックマークの場所を変更するカスタマイズを紹介します。

これは現在閉鎖されたサイト様の記事内容を、そのサイト様のご好意により転載させてもらいました。

ページナビゲーションを記事の下に表示する (standard)

当サイト配布の共有テンプレート standardシリーズの個別記事ページにおいて、記事の下(コメントの上)に
<< 前ページ | HOME | 次ページ >>
というようなページナビゲーションを表示するカスタマイズを紹介します。

このページナビゲーションはlightframeシリーズでは標準で実装されています。

トップページや個別記事ページで一部のスタイルを変える

トップページや個別記事ページにおいて、一部のスタイルを変える方法を紹介します。

例えば当サイト配布の共有テンプレート lightframe_white の記事背景色は通常白ですが、トップページや個別記事ページでこの色を変えたいときは以下の手順になります。

HTMLを編集します。赤い部分を加えてください。

<!--▼ エントリー(記事)▼-->
<!--topentry-->
<div class="ently_outline <!--index_area-->topcss<!--/index_area--> <!--permanent_area-->entrycss<!--/permanent_area-->">


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

/* トップページのとき */
.topcss {
background-color:#CCCCCC;

/* 個別記事ページのとき */
.entrycss {
background-color:#99FFFF;
}


このようにトップページや個別記事ページでスタイルを変えることが出来ます。

メニューバーのドロップダウンにカテゴリを表示

以前にメニューバーのドロップダウンを紹介しましたが、このドロップダウンにカテゴリを表示する方法を紹介します。

このドロップダウンメニューは親子設定したカテゴリにも対応しています。

画像の上に文字等を重ねる

背景に画像を設定した場合、その上(手前)に文字等を表示することは簡単です。
ですがimgタグの画像の上(手前)に文字等を重ねて表示する場合は少し工夫が必要です。

「position: relative;」の内側にある「position: absolute;」は、
「position: relative;」を基準とした相対位置に表示されることを利用します。

プラグイン3のレイアウト (lightframe)

以前に共有テンプレートlightframeシリーズにおいて、記事と同じ幅であるプラグイン3の幅を広げるカスタマイズを紹介しました。
これはプラグイン3が、記事,プラグイン1,プラグイン2の上に、サイト全体と同じ幅で表示されるものでした。

今回は、プラグイン3を、プラグイン1と記事の上に表示するカスタマイズ
img20091008b.gif

そしてプラグイン3を、記事とプラグイン2の上に表示するカスタマイズを紹介します。
img20091008a.gif

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

コメント入力欄に初期値を設定する方法を紹介します。

HTMLのコメントを入力するテキストエリア<textarea>に、以下の赤い箇所を加えてください。

<!--▼コメント投稿▼-->

<textarea id="comment" cols="50" rows="8" name="comment[body]" onfocus="if (this.value == '語句を入力') this.value = '';" onblur="if (this.value == '') this.value = '語句を入力';">語句を入力</textarea><br />

<!--▲コメント投稿▲-->


語句を入力」の部分はお好きな文言に変えてください。
ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
09 | 2009/10 | 11
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

09 | 2009/10 | 11
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
ユーザータグ


△ ページトップへ戻る