*Essence

HP用フリー素材とFC2共有テンプレートを作成・配布しています。

Top Page › Template › カスタマイズ › 折り畳み追記の開閉
2019-06-27 (Thu) 23:50

折り畳み追記の開閉

折り畳み追記についてを、要望の有ったカスタマイズと一緒にまとめました。

この『折り畳み追記』については、FC2ブログテンプレートの[レガシー・カスタマイズ]とでも言いますか、昔から要望されるカスタマイズで、古い記事に掲載があるブログも多数ございます。(掲載が古い共有テンプレートにも付いている事が多い機能です。)
そのため当方のテンプレートでも初めから付帯しております。
しかし、追記の使用・表示方法は、テンプレートを利用される方のお考えで賛否等もあり、機能の使用を強制するものではございませんので、ご不要の方・追記を隠す必要性を感じない方は、大変お手数ですがHTML編集枠内のコメントアウト内を削除・編集して下さい。

1) 折り畳み追記の表示方法変更。
2) トップページ全文表示で折り畳み追記を開閉。


1) 折り畳み追記の表示方法変更。
5/14 の修正記事のように、個別記事ページの折り畳み追記方法を、JavaScriptの使用からCSSのみに変更致しましたので、カスタマイズ記事として再掲載致します。(修正記事以降にDLされた方には必要ありません。HTMLソースで下記のようになっているかをご確認下さいませ。m(__)m)
個人で追加したJavaScript等がバッティングして開閉動作がされない場合にご利用下さい。
また、追記開閉が不要の場合は該当箇所の
<!-- 記事ページの追記開閉が不要の場合はここから削除 --> から
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる --> のように削除及び文言の追加をお願い致します。

変更可能なテンプレート 『al_responsive』『ct_responsive』『candy』『green』『lace_al』『dt21_ryo』 の2カラム・3カラム。


変更箇所は、HTML編集枠内1/3程スクロールした所に有る

<p id="readmore" style="padding-top:3em;margin-top:-3em;margin-left:-5px;">&#8203;</p>
<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--permanent_area-->
<a href="javascript:void(0);" onClick="showHide('more<%topentry_no>');">Read More</a>
<noscript>
<a href="<%topentry_link>#more">Read More</a>
</noscript>
<div class="sidehide" id="more<%topentry_no>">
<hr class="hr1">
<%topentry_more><a href="#readmore" onClick="showHide('more<%topentry_no>');">Return</a>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->


という部分を下記に変更

<p id="readmore" style="padding-top:1.8em;margin-top:-3em;margin-left:-5px;">&#8203;</p>
<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--permanent_area-->
<div class="hidden_box">
<input type="checkbox" id="navTgl">
<label for="navTgl" class="open">ReadMore</label>
<div class="hidden_show"><%topentry_more>
<label for="navTgl" class="close">Close</label>
</div>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->


そして、スタイルシート編集枠内一番下(“@media only screen” で括っていない所)にでも

/* 記事ページ追記ボタン */
.hidden_box{
margin-top:1.5em;
}
.hidden_box label{
padding:0 10px;
border:solid 1px #aaa;
cursor:pointer;
}
.hidden_box label:hover{
background:#e1f0f6;
color:#333;
}
.hidden_box input {
display:none;
}
.hidden_box .hidden_show{
height:0;
padding:0;
overflow:hidden;
opacity:0; /* 中身を非表示にしておく */
}
.hidden_box input:checked ~ .hidden_show{
padding:10px 0;
height:auto;
opacity:1; /* クリックで中身表示 */
}


上記を追加して更新ボタンを押せば完了です。
不具合が有った時のために複製を作っておくと安心です。




2) トップページ全文表示で折り畳み追記を開閉。
テンプレート内に既に記述して有るJavaScript(コメントOpen用)を使って、トップページ全文表示(要約表示から全文表示へのカスタマイズ後も含む)での追記開閉が出来ます。
ただ、トップページで追記も見せてしまうと個別記事ページへの誘導は難しくなると思いますので、ご自身の判断でお使い頂きます様お願い致します。m(__)m
(カスタマイズ後の個別記事ページでは、展開された状態の表示になります。)

HTML編集枠をスクロールしていくと、
<!--more_link-->
という部分が有ります。
(PCのキーボードで『Ctrl+Fキー』を押して開いた窓に <!--more_link--> を入れて検索すると一ヵ所だけ有ります。)
場所を見付けて頂いたら、その個所から
<!-- 全文表示用HTMLの貼り換え ここまで-->
を下記に貼り換えて下さい。

<!--more_link-->
<p><a href="javascript:void(0);" onClick="showHide('more<%topentry_no>');">Read More</a></p>
<noscript>
<a href="<%topentry_link>#readmore">Read More</a>
</noscript>
<div class="sidehide" id="more<%topentry_no>">
<%topentry_more>
<p><a href="#more<%topentry_no>" onClick="showHide('more<%topentry_no>');">Return</a></p>
</div>
<!--/more_link-->
<!--more-->
<p id="readmore" style="padding-top:1.8em;"></p>
<%topentry_more>
<!--/more-->
</div>
<!-- 全文表示用HTMLの貼り換え ここまで-->


上記に貼り換えて更新ボタンを押せば完了です。
不具合が有った時のために複製を作っておくと安心です。

Comment







管理者にだけ表示を許可