追記を開く「続きを読む」の横に別窓で開くリンクを追加する方法

ファンブログカスタマイズ：リンク編投稿日：2009年07月20日 15:30

ファンブログ　カスタマイズシンプル系スキン限定

ファンブログの編集画面で、本文のヘルプの「？」の上にマウスを置くと、「本文が長くなる場合は、追記に続きを書きましょう」と追記を推奨する記載があります。

この追記といいますのは、本文を2つに分けることで、使用しますとこの記事のように本文の前半と「続きを読む」というリンクが表示され、本文の後半は隠される形になります。

私のような長文を書くものには、とてもありがたい機能なんですが、この追記の機能を使用した場合に表示されます「続きを読む」を押すと、「１記事」になってしまう最大の欠点があるんです。

たとえば、訪問者の方がカテゴリを選択して、その中に気になる記事が2～3個あったとしまして、「続きを読む」を押したとします。そうしますとその記事だけが表示され、他の気になっていた記事を読むためには、ブラウザの「戻る」ボタンを押せばいいのですが、それに気がつかない方は戸惑ってしまします。

そこで今回は、訪問者の方が同じ窓か別窓で開くかの選択ができるように「続きを読む」の横に「別窓で開く」リンクを追加する方法を説明します。

▼　この説明は「シンプル系スキン」限定です。他のスキンの場合はタグの記述が異なります。 ▼

「続きを読む」が表示されるのは、「メイン」と「アーカイブ」の HTML です。それぞれの HTML のバックアップをとっておいてくださいね。

CSSやHTMLファイルのバックアップの方法

▼ それではやり方の説明です ▼

「メイン」も「アーカイブ」も目的のタグの記述は同じで、記述してある場所もほとんど同じくらいの所にあります。
「メイン」の HTML を開いたら、 <BlogEntryIfExtended> という記述を探してください。
比較的上の方にありますので、上からスクロールしればすぐ見つかります。

そのすぐ下の行の <a href="{$BlogEntryPermalinkUrl$}#BlogEntryExtend">続きを読む...</a> をコピーして </a> と </div> の間に貼り付けてください。この際、 </a> と <a href="… の間に全角スペースを入れますと見栄えがよくなります。
コピーしたタグの <a href="{$BlogEntryPermalinkUrl$}#BlogEntryExtend"> の最後に別窓で開くタグである target="_blank" を追記して、テキストの続きを読む... の前に別窓で開いてを追記してください。

<BlogEntryIfExtended>
　　　　　　　　<div class="entryContinue">
　　　　　　　　<a href="{$BlogEntryPermalinkUrl$}#BlogEntryExtend">続きを読む...
　　　　　　　　</a>　 <a href="{$BlogEntryPermalinkUrl$}#BlogEntryExtend" target="_blank" >
別窓で開いて続きを読む...</a> </div>
</BlogEntryIfExtended>

※ 本来、<div class="～の記述は１行です。実際に追記する場合は改行する必要はありません。

追記ができましたら、「プレビュー(P)」で確認してください。「続きを読む」の横に表示された「別窓で開いて続きを読む」のリンクを押して別窓で開けば成功なので「保存(S)」を押してください。

「メイン」が終わりましたら、「メイン」で追記したタグをコピーして、「アーカイブ」の同じ場所に貼り付け、
「プレビュー(P)」で確認して問題なければ「保存(S)」を押して終了です。

いかがでしたでしょうか？これは最近、一部の検索エンジンでも取り入れられている手法でもありますんで、追記を使用している方は一度試してみていただいても損はありませんですよ。(≧ω≦)b

次回は「HOMEへ戻る」とか「このページのTOPへ」などのナビゲーションリンクの作り方と設置する方法を説明します。(´・ω・`)ｂ

※Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。

この情報が、お役にたちましたら ≫ FC2 Blog Ranking ≪ 押していただけると励みになります

≪　前の記事に戻る　｜　次の記事を読む　≫