RSSで数件表示、そこからメインページのページ内リンク飛ばす

各ブログ、xmlファイルの「リンク先」の指定を、
<$MTEntryPermalink$>ではなく、
<$MTBlogURL$>#<$MTEntryID$>にします。 

 一方で メインページ
<mt:Entry>
の中に
<a name="<$MTEntryID$>"></a>のアンカーを埋め込んでおきます。 

これで、記事ごとに記事IDのアンカーが入ります。
 RSS一覧から、各記事へページ内リンクで飛べるというわけです。 

思いついて、仕事で使ってみたら成功しました。 
どうぞ、お試しください。

MT生成のアーカイブリストを折りたたむJQ

月別アーカイブリストを年ごとに折りたたむjqueryにトライしました。
このサイトのサイドバーにも反映してみました。


参考にした本は、「Movable Type 4.x クリエイターが身につけておくべき100の法則。」(発行:インプレスジャパン)です。
4.xなので、もう使えない機能もたまにありますが、今回は5.04にも使えました。

ソースは以下です。

<dl>
<dt></dt>
<dd>
<ol>
<MTArchiveList archive_type="Yearly">
<li class="yearlyList"><$MTArchiveTitle$>の記事を見る
<ol>
<MTArchiveList archive_type="Monthly">
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>

</MTArchiveList></ol>
</li>
</MTArchiveList></ol>
</dd>
</dl>

基本は上記ですが、
今回、今年度のは別に記載したので、去年から過去の表示が欲しい。
と言うことで、ちょっとつけたし。


<dl>
<dt></dt>
<dd>
<ol>
<MTArchiveList archive_type="Yearly"><MTArchivePrevious>
<li class="yearlyList"><$MTArchiveTitle$>の記事を見る
<ol>
<MTArchiveList archive_type="Monthly">
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>

</MTArchiveList></ol>
</li></MTArchivePrevious>
</MTArchiveList></ol>
</dd>
</dl>
------------

<MTArchivePrevious>タグを使います。

さて、

jqueryが入ってなければダウンロードして<head>内で読み込みます。
その下に新たにjavascriptを書くか、別ファイルにして読み込みます。

$(document).ready(function(){
$(".yearlyList ol").css("display","none")
$(".yearlyList").click(function(){
$(this).children().slideToggle("slow");
});
});


---------

スタイルシートは適宜入れてください。
1点。

.yearlyList{
cursor:pointer;
}

は記述したほうがいいです。しないと、オンマウスでもカーソル形状がかわりませんので、リンクなのかわかりづらいです。

さらに、注意。

「<$MTArchiveTitle$>の記事を見る」

の記述のところにスタイルを入れると、とたんにうまく行かなくなります。
「<$MTArchiveTitle$>の記事を見」る、は残ってて欲しいのに、表れた下層リストに押し出されて消えてしまうんです。

そこに背景バーイラストをおきたかったので、いろいろ試しました。
で、行き着いたのでが、
.yearlyListに背景画像をいれて、下のolにその分マージンを取るスタイルを入れました。
それで、なんとかうまく行きましたよ。

よく分からないけど、
js記述内の
.css("display","none")
が反映されちゃうんじゃないかと思うんですが、、、どうでしょうか。
詳しい人にめぐり合えたら聞いてみます。

カテゴリごとの条件分岐

忘れやすいので、覚書です。

<MTEntryIfCategory name="A">
カテゴリページ条件分岐
</MTEntryIfCategory>



<MTIfCategory label="A">
インデックスページ条件分岐
</MTIfCategory>


こんなことで時間とりたくない~

カスタムフィールドで改行を反映させる

<$カスタムフィールド名  nl2br="xhtml"$>

で、カスタムフィールドに入力した改行が反映されます。
この作業は、MT構築の最初のほうに行ったほうがいいですよね。

グループでMTを触って作業していると、担当者のクセで<br />を多用したりする人なんかいたりすることもあり、

途中で設定すると、えらくスカスカで縦のエントリーになってしまうので。
ケンカのもとです。

本文に載せたデカ画像を制御するCSS

Entrybodyに入る画像に最大幅を設定します。

divでくくり、idやclassに、以下設定。

img{ 
 width: auto; 
 max-height: 300px;
 }


img{ 
 max-width: 300px;
 height: auto;
 }

など。

大きな画像をリサイズするのって、慣れてない人にはきついですよね。
説明するのも大変だし。
これで解決。CSSの神様ありがとう!


前に、
img{
 width: auto;
 height: 300px;
 }

で設定したことがあって、
そしたら、絵文字アイコンまで300ピクセルででかでか表示されて、
超ウケました~。
脇役のはずが、すごい存在感だった!
1  2  3  4  5  6  7  8  9  10  11

▲トップへ戻る

2017年2月

      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        

タグクラウド

My Photo