概要と本文を切り替える(公開テンプレート版)
当サイトで利用している、トップページのエントリー概要とエントリー本文の表示を切り替えるカスタマイズです。
概要に本文の先頭から指定文字数を表示する設定になっている(=概要フィールドに何も書いていない)場合、デフォルトで概要を表示し、タイトルまたは概要の末尾にあるリンクをクリックすることで、ページ遷移をせずに全文を表示することができます。
このエントリーでは公開テンプレートのトップページおよびカテゴリーアーカイブ/日付アーカイブに適用する例を紹介します。
なお先日紹介したデフォルトテンプレート版のカスタマイズ手順に一部誤りがありましたので修正しています(本エントリーは修正済)。
1.スクリプトのダウンロード・アップロード
下記のリンクより menufolder.js をダウンロード(本カスタマイズ用に機能追加しています)
ダウンロードしたスクリプトは、ブログの index.html と同じディレクトリにアップロードしてください。
2.script 要素の追加
カスタマイズを適用するテンプレートに下記の script 要素を追加。
<script type="text/javascript" src="<$MTBlogURL$>menufolder.js"></script>
3.エントリータイトルに折りたたみのリンクを与える
エントリータイトルのタグ
<h2 id="a<$MTEntryID pad="1"$>" class="entry-header"><a href="<$MTEntryPermalink$>"><$MTEntryTitle encode_html="1"$></a></h2>
を下記のように変更します。a 要素を削除して h2 の id 属性を書き換えます。
<h2 id="content<$MTEntryID$>name" class="entry-header"><$MTEntryTitle encode_html="1"$></h2>
4.概要を追加する
エントリーを表示するタグ
<!-- エントリー -->
<div class="entry-content">
<$MTEntryBody$>
<!-- 追記 -->
<MTIfNonEmpty tag="EntryMore">
<p class="entry-more"><a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle encode_html="1"$>"</a></p>
</MTIfNonEmpty>
に対し、青色のタグを追加します。
<!-- エントリー -->
<div class="entry-content">
<div id="content<$MTEntryID$>list2">
<p><$MTEntryExcerpt$> <a class="foldmark" href="./" onclick="FoldNavigation('content<$MTEntryID$>','chng',''); return(false);" onkeypress="FoldNavigation('idName', 'chng',''); return(false);" title="全部読む">[ all ]</a></p>
</div>
<div id="content<$MTEntryID$>list">
<$MTEntryBody$>
<!-- 追記 -->
<MTIfNonEmpty tag="EntryMore">
<p class="entry-more"><a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle encode_html="1"$>"</a></p>
</MTIfNonEmpty>
</div>
また、MTEntries の終了タグ直前にスクリプト起動用の script 要素を追加します。
<script type="text/javascript">
//<![CDATA[
FoldNavigation('content<$MTEntryID$>','off',false);
//]]>
</script>
</MTEntries>
これでテンプレートを再構築すれば、概要と本文の切り替えができるようになります。
5.注意事項
概要の表示文字数より本文の文字数が少ないと効果ありません。
- Movable Typeで製品情報のテーブルを作る
- Movable Typeのブログ記事ページのファイル名に日別の通番を振る
- 予定日を過ぎたブログ記事を「最近のブログ記事」に表示しない
- mt-csv2customfields v0.03
- 複数ブログのブログ記事を時間順に1件ずつ表示する
- Movable Type のブログ記事にフラグメント識別子(ページ内リンク)を設定する
- 特定のカテゴリーに属するブログ記事一覧を表示する(改)
- Movable Type 4 でカテゴリー別にブログ記事ページのデザインを切り替える方法(その2)
- Movable Type 4 でカテゴリー別にブログ記事ページのデザインを切り替える方法(その1)
- ブログ記事に同一カテゴリーのブログ記事リストを表示(MT4版・改)
- ブログ記事に同一カテゴリーのブログ記事リストを表示(MT4版)
- 概要と本文を切り替える(Movable Type 4・デフォルトテンプレート版)
- Movable Type で画像挿入時の form 要素について
- 概要と本文を切り替える(デフォルトテンプレート版)
- Movable Type で全エントリーを表示する方法
- Movable Type のエントリー削除でHTMLファイルも自動的に削除する
- Movable Type で blockquote 要素を記述する時の注意
- エントリー・アーカイブで親カテゴリーに含まれる全エントリーをサブカテゴリー別に表示
- エントリーの文字数を表示する
- エントリーの中でMTタグを使う
≫ MT4のカスタマイズ from FOX3 Diary
"概要と本文を切り替える(公開テンプレート版)"を適用したんですが、本文に切り替... [続きを読む]
yujiroさん
どうも、keiです。
いつも、便利なカスタマイズを、有り難うございます。
今回は、"概要と本文を切り替える(公開テンプレート版)"をMT4で使用してみたんですが、
エントリーの表示なんですが、概要のみの表示から「全部を読む」をクリックすると、本文が表示され成功したと思ったんですが、上にそのまま概要が残ったままになってしまっています。
いろいろと試してみているんですが、いまいち分からないんです。
お忙しい中、すいません。 アドバイスをいただければ嬉しいのですが、宜しくお願いします。
>keiさん
こんにちは。
ご利用ありがとうございます。
ご質問の件ですが、1項にあります、この記事からリンクされている menufolder.js(ver7.01~) に差し替え願えますでしょうか。
それではよろしくお願い致します。
>yujiroさん
ども、keiです。
ああ、お手数おかけしました。
menufolder.jpをバージョンアップさせるの忘れていました。
よく読んでいるようで、抜けてますね。
バージョンアップさせたら、問題なく表示されるようになりました、有り難うございました。
>keiさん
こんばんは。
ご連絡ありがとうございました。
無事に直ったようで良かったです。
少し前に私も同じ失敗をしてましたので(笑)。
いつもありがとうございます。MT4の公開テンプレートでカスタマイズしてみましたがどうしてもうまくいきません。右のサイドが下にきてしまいうまくいきません。お手すきのときにおしえてもらえませんでしょうか?よろしくおねがいします。
>揚羽蝶さん
こんにちは。
ご質問の件ですが、解消されましたでしょうか。
午前中に少し拝見させて頂いた限りでは、右サイドバーにあったプルダウンメニュー(セレクトボックス)の横幅がサイドバーの幅を超えているのが原因のように思われました。
それではよろしくお願い致します。
ありがとうございます^^無事にできました。
これからもよろしくおねがいします。
二重コメントすみません。
>揚羽蝶さん
こんばんは。
ご連絡ありがとうございます。
重複コメントは削除しておきました。
ではでは!
このエントリー通りにしてるのですが折りたたみ表示させた後に
また続きを読むができてしまい全文表示できません。
また、最後のscript要素挿入箇所が説明通りの箇所が説明通りの
箇所がありませんしわかりません。
MT4.1ようにもう少しサポートして頂けないでしょうか
宜しくお願いします
すみません。 追記に記事を書き込んでいたので重複して表示していたようでした。
追記を切り替えるとはまた違う考え方なんですね
誠に失礼しました。
いつもお世話になっております。
同じようなものかわかりませんが、
「小粋空間」のトップページの様に
タイトルの表示のみにしたいのですが、
この応用でよいのでしょうか?
教えていただけたら幸いです
>SOULさん
こんばんは。
はい、その通りです。
もし設定が分からないようであればご連絡ください。
(気が向いたら当ブログの方法をエントリーするかもしれません)
それではよろしくお願い致します。
yujiro様
早速の回答ありがとうございます。
本を見ながら勉強中なのですが。。
なかなか難しくて・・・
少し自分で弄ってみます。
分からないことがあれば質問させていただきます。
ありがとうございました。
MT4.2になってからこちらのどのカスタマイズも少し修正方法が
違うみたいですね
MT4.2のテンプレートのタグ構成が違うからでしょうね
カスタマイズがなかなかできないので困ります
また少しづつMT4.2でのカスタマイズ方法もエントリーして頂ければ幸いです
宜しくお願いします
いつもお世話になっています。
メインページではなんとかできたのですがカテゴリー、タグ、月別アーカイブ
ではテンプレートをどのように修正すれば良いのでしょうか?
全てのページでこのカスタマイズを適用させたいと思います。
お手数ですがご教授の程宜しくお願いします。
投稿した後でscriptの追記してみたところ表示させる事ができました。
すみませんでした。
>conanさん
こんばんは。
ご質問の件、自己解決されたようでよかったです。
ご連絡ありがとうございました。
ではでは!
いつも大変お世話になっております。
使って見たいのですが、
これを使うことで各ページの
アクセス解析は可能なのでしょうか?
それぞれのページにアクセス解析のたぐを
埋め込んでいます。
これが集計できないと困るなあと思ったんですが、
続きを読むを押したらカウントされると
考えていいのでしょうか?
>ajiさん
こんばんは。
ご質問の件ですが、本カスタマイズは同じページで表示を切り替えるだけなので、アクセス解析とは特に関連はありません。
それではよろしくお願い致します。
北京 山东 浙江 江苏 湖南 辽宁 吉林 黑龙江 上海 四川 广东 天津 云南 湖北 河南 福建 Moncler Donna
安徽 河北 重庆 江西 陕西 贵州 青海 内蒙古 宁夏 新疆 广西 甘肃 山西 海南 西藏 全部 2012年国家公务员考试真题答案及解析 来源:中公教育 时间:2011-11-27 加入收藏 电邮给朋友 打印文章 写信给编辑
2012年国家公务员考试行测题量不变 难度有所增加
2012年国家公务员行测考试深度解读:稳中求新
2012年国家公务员考试申论深度解读:题目设计新颖 难度有所提升
行政能力测验 真题 答案 解读 估分 数量关系 真题 答案 解读 估分 判断推理 真题 答案 解读 估分 资料分析 真题 答案 解读 估分 常识判断 真题 答案 解读 估分 言语理解 真题 答案 解读 估分 申论(地级市) 真题 答案 解读 估分 申论(省部级) 真题 答案 解读 估分
课程体系 班次名称 课程课时 课程特色 价格 体验 基础巩固
系列课 面试强化班 2天 获评“最优基础巩固”面试课程 680 点击
试听 面试精品班 4天 获评“最优能力提升”面试课程 1980 全面提升
系列课 面试封闭班 赠送前置课程
+6天7晚全封闭 中公教育服务团队推荐
“最具性价比”面试课程 4280 协议特训班 赠送前置课程
+6天7晚全封闭
+赠送4天特加模拟 中公教育历届学员一致推荐
“最受欢迎”面试课程 见协议 高级VIP特训班 赠送前置课程
+9天10晚全封闭
+赠送x天特加模拟 中公教育研究院全力推荐
“最具保障性”面试课程 见协议 个性改造
系列课 一对一辅导 基础能力测试
+个性化辅导方案
+名师一对一辅导 搜狐、新浪、人民网一致认为
“最具个性化”面试课程 260/时
1/1 1 下一页 尾页
责任编辑:xingli
