テンプレート関連の記事一覧



今回はMovable Typeで制作するときに、すぐにできそうでできなくてハマる「ブログの最新記事を全ページに表示するためのテンプレート」について書いてみます。



●Movable Typeのコンテキストという概念を理解しよう

「ブログの最新記事を全ページに表示するためのテンプレート」の前に理解しておかなければいけないことがあります。

それはMovable Typeの「コンテキスト」という概念です。


コンテキストは、文脈という意味で、Movable Typeでは、個別記事アーカイブのコンテキストやカテゴリーアーカイブのコンテキストなどがあります。

コンテキストについては以下のページがとても分かりやすいのでMovable Typeを使うユーザーはぜひご一読を。

コンテキストとは

直訳すれば「文脈」です。ここではテンプレートにおける前後の文脈のことをそう呼びます。自然言語における人間の会話や文章にも前後の文脈というものが存在しますから、会話を例に挙げます。

 Aさん:今日は天気がいいですね。

→「今日の天気」のコンテキスト


MTのテンプレートでは現在のコンテキストに適合しないMTタグを使おうとすると、エラーが出るようになっています。

20150912-Movable Typeでブログの最新記事を全ページに表示-01

人間の会話において、文脈に沿っていない話題や発言をすると会話が成立しなくなるのと同じです。

Aさん:今日は天気がいいですね。

→「今日の天気」のコンテキスト

Bさん:はい、僕はハンバーグが好きです。

→コンテキストに沿っていないのでエラー

MTのコンテキストについての考察と解説(Like@Lunatic)


このコンテキストの中でテンプレートタグの挙動が変わってきます。

例えば、インデックステンプレートのコンテキストであれば、最新のブログ記事10件の出力は、普通に最新のブログ記事10件の出力がされます。ですが、カテゴリーアーカイブのコンテキストであれば、最新のブログ記事10件の出力は、そのカテゴリー内の最新のブログ記事10件の出力となります。

この挙動のために、ブログのサイドバーに「最新のブログ記事」を表示させようとすると、コンテキストによって異なった結果が表示されてしまいます。コンテキストの意味からすれば間違いではありません。


ただ、この仕様が、カテゴリーアーカイブを含めた全ページに「普通に最新のブログ記事10件の出力」しようとすると、障害になってしまうわけです。


ここまで理解できましたか?

それではブログの最新記事を全ページに表示するためのテンプレートを作ってみましょう。

記事の続きを読む




今回はMovable Typeのコミュニティで質問されていた「●●以前のエントリー記事だけ表示させる」テンプレートコードの紹介です。


実際の質問はこちら。

■要件

記事一覧があるページというと、
通常、最新記事から古い記事を順に表示していくと思うのですが、
たとえば[2007年度以前]の記事だけを表示させることは可能でしょうか。

くわしい説明はこちらに図にしております。

20150314-MovableTypeで2007年度以前の記事を表示-01
http://pppearl.jp/data/mt/zu3.jpg

記事一覧で〇〇年以前の記事だけを表示させることは可能でしょうか。 - MTQ | Movable Type ユーザーコミュニティ


回答に「プラグインを使えばできますよ」というものがあって、それで解決しているのですが、何でもかんでもプラグインというのは問題では…と思っているので、標準のテンプレートタグだけで何とかしてみます。

記事の続きを読む



20150202-MovableTypeで指定文字数を抜き出す-01

画像出典:CMS プラットフォーム Movable Type(Six Apart)


Movable Typeでサイト構築をしていて、トップページにブログの最新記事のタイトル一覧を付けたり、パンくずリストを設置する際に問題になるのが、「やたらタイトルが長い記事をどうするか」というもの。

タイトルが想定したものより長いと、リスト要素で配置した場合(ul>li>)に、2行になってしまい体裁が崩れてしまうことがあります。

はみ出た分はCSSで「overflow: hidden」してしまう方法もありますが、ここは出力時に指定した文字数で出力するようにしてみましょう。

ついでに指定した文字数を超えていた場合は省略しましたと「…」を付けるようにしてみます。



●trim_toのグローバル・モディファイアを使う

タグの中身から指定した文字数を先頭から抜き出すグローバル・モディファイアが標準で用意されています。

なので、ブログの記事タイトルから先頭の20文字を抜き出す場合には以下の様に書きます。

<$mt:EntryTitle trim_to="20"$>

簡単ですね。

記事の続きを読む



というわけで、はてなブログは使っていなくてはてなダイアリーしか開設していない私ですが、はてなのブログカードって「お、これいいな〜」と思っていたのですよ。


はてなのブログカードとは、以下の画像で見える、記事のタイトルと概要とスクリーンショット(またはイメージ)がコンパクトにまとめて紹介できるものです。

20141009-はてなブログカードを他のブログサービスで使う-01

画像出典:はてなブログの記事を紹介しやすくしました。URLを貼るだけで、コンパクトに整ったブログカードを貼り付けることができます【追記あり】(はてなブログ開発ブログ)


ただ、開発日記を見てみると、この機能を他のブログサービス、例えばライブドアブログやMovable Typeなどで使おうとするとちょっと敷居が高いように思えました。なんですか、oEmbedって…。(詳しくは→はてなブログoEmbed APIを公開しました。ブログカードの情報をAPIで取得できます(開発者向け)(はてなブログ開発ブログ))


●ブログカードは他のサービスでは手軽に使えないと思ったら

他のブログサービスでは手軽に使えないのか…残念!と思っていたら、こんなブログ記事が!

このページを読むと、iframeのsrcに「http://hatenablog.com/embed?url=《表示したいアドレス》」と書けばOKとのことだそうです。動作原理は簡単でしたね。


記事の続きを読む



ということでテンプレートのカスタマイズが非常に自由度が高く、テンプレートタグがMovable Typeにもの凄く似ているライブドアブログを使い始めてから10年が経ちました。

管理画面でブログを始めた日を見てみると、2004年 3月28日からとなっています(それ以前の日付のエントリーは日付を操作したのだと思う)。


そんなつきあいの長いライブドアブログですが、なんだかんだでライブドアブログで用意されたテンプレートを自分なりに修正して使用してきました。今まで自分の力で最初からテンプレートを作ったことがなかったのです。

最近はBootstrapで会社のページを作ることが多く、だんだん慣れてきたので、練習がてらライブドアブログもBootstrapで作ってみるか!と突然思って作ってみました。

20140423-ブログの新しいデザイン-09

画像出典:Bootstrap


ただ単にBootstrapでライブドアブログのテンプレートデザインを作るのも芸が無いので、bootmetroというWindows 8のModern UIっぽいCSSやウェブフォントを利用して作成してみました。

20140423-ブログの新しいデザイン-10

画像出典:bootmetro

記事の続きを読む



20130827-AppleアフィリエイトはLinkShareからPHGへ-00
AppleのアフィリエイトでLinkShare(リンクシェア)が提携先から外れてPHGと言うところに変更されるようですね。
それも2013年10月1日から。1ヶ月くらいしか日がないではないですか。大変だ。
iPhone / Mac アプリを紹介する時に、アフィリエイトリンクとしてリンクシェアを貼ってきたわけですが、10月1日以降、リンクシェアが機能しなくなるようです。代わりに、Performance Horizon Group(PHG)が移行先として用意されています。
[WordPress] LinkShare を PHG のアフィリエイトリンクに置き換えるプラグイン「LinkShare To PHG」を作りました | ラクイシロク

ワールドワイドのアフィリエイトサービスを提供するため、改善されたレポーティングツールを提供する新しいアフィリエイトプラットフォームパートナーとして「PHG」と契約(TradeDoublerは継続)し、日本を含めたアジア地域は、PHGとの契約を行う必要があります。

既存リンクの切り替えは、2013年10月01日までに行う必要があり、楽天リンクシェア、dgm Austraからのサービスは終了となるようです。
Apple、新しい「iTunesアフィリエイトプログラム」を発表(日本は、楽天リンクシェアからPHGに移行し10月01日までに切り替え必須) | アフィリエイト | Macお宝鑑定団 blog(羅針盤)

このサイトでは全くLinkShareのアフィリエイトをしていないので関係無いのですが、「[WordPress] LinkShare を PHG のアフィリエイトリンクに置き換えるプラグイン「LinkShare To PHG」を作りました」(ラクイシロク)という記事でWordPressで記事のDB(データベース)には手を付けずに、出力時にURLを置き換えるプラグインを紹介していました。いいですね。


WordPressでできるならMovable Typeでも!
…と思いましたが、プラグインを作るまでもなく、テンプレートに2、3行追加するだけで置き換えができましたので紹介します。


記事の続きを読む



20111212-movabletype-public-post-preview-00

WordPressの「Public Post Preview」というプラグインっぽいことをMovable Typeのテンプレートだけでやってしまおうということで「Movable TypeでWordPressの「Public Post Preview」っぽいものを作る(類推しづらいファイル名編)」というエントリーを書きました。


表だって公開したくないときにはカスタムフィールドのチェックをつけるだけで、類推しづらいファイル名になるので、このアドレスを特定の人にだけ教えれば本公開の前に特定の人だけチェックできるというわけです。

ここで気をつけなければならないのは、エントリーを「公開」にしたことで他のテンプレートの出力結果にも影響してしまうという点です。


デフォルトのテンプレートにもあるわかりやすい例では「最新記事のフィード」(いわゆるRSS・Atom)です。


RSSには最新の公開エントリーが15件分書き込まれています。(デフォルトのテンプレート)
なので、たとえファイル名を類推しづらい複雑なものにしても、そのままではアドレスがしっかり入ってしまっていることになります。

「最新記事のフィード」から除外される様にしておかないと、場合によってはすぐにGoogleさんに情報を収集されてしまってインデックスされ、検索エンジンの結果に掲載されてしまうことも考えられます。


これでは元も子もありません。


このエントリーではそれを防ぐためのテンプレートモジュールの書き方を考えてみます。
記事の続きを読む



20111211-movabletype-public-post-preview-00

以下のブログ記事を読んで、文中に出てくるWordPressの「Public Post Preview」というプラグインはMovable Typeだったらテンプレート作るだけで似た様なことができるんじゃないの?と思い立って書き始めた記事です。


なお、WordPressは使ったことがないので、「Public Post Preview」というプラグインはよく知らないので全然違うものができてしまうかもしれません(笑)。


なんか風邪を引いたみたいなので、うまく頭が回らないけど、書けるところまで書いてみます。
(早く寝ろ)


まずは「Public Post Preview」というプラグインで実現していると思われる「実際に公開するアドレスとは異なる類推しづらい一意の記事のアドレス」を作成します。
記事の続きを読む



20110121-movabletype-00

Movable Type 5をようやく使い始めたjdash2000こと笹川です。
今回はMovable Typeの小ネタというかハマりやすいポイントの解消方法。



MovableTypeって、MTPagesとかMTEntriesでウェブページやブログ記事が出力できますよね。


MTPages・MTEntriesでテンプレートが呼び出されているウェブサイト・ブログと違うウェブサイト・ブログのウェブページやブログ記事を読み出す場合は、モディファイアに「blog_ids="3"」とか設定すると、ブログIDが3のウェブサイト・ブログからウェブページやブログ記事を読み出すことができます。

<MTEntries blog_ids="3" lastn="5">〜〜〜</MTEntries>

といった書き方をします。ポータルのウェブサイトなどで便利な機能ですね。(複数のブログの最新の記事一覧を作ったりできます)




他にもMTIncludeでは<MTInclude module="サイドバー" blog_id="3">などと「blog_id="3"」と書くことでブログIDが3のウェブサイト・ブログからモジュールを読み出すことができます。

モジュール管理用のブログなどがある場合は便利ですね。(印刷通販「トクプレ.」DTPブログなどはテンプレート管理用のブログが別途用意してあってそこからモジュールを読み出しています)

実際にエントリーなどを書くブログとは別にブログを用意してそこでテンプレートを集めておくと、同じデザインのブログを作る際にわかりやすくて良いように思います。


ですが、ここに少し罠が。


それは、ウィジェットセットです。


ウィジェットセットは<MTWidgetSet name="メニュー">などで呼び出せます。
この<MTWidgetSet name="メニュー">は指定がなければ当然現在構築しているブログのウィジェットセットがあるかないかを判断して無ければエラーを返す様になっています。

では先ほどと一緒に他のテンプレート管理用のブログにウィジェットセットを用意しておいて、読み出す場合はどうしたらよいのでしょうか?

考えつくのは先ほどのMTIncludeと同じ

<MTWidgetSet name="メニュー" blog_id="3">

ですよね。


でも、これは動かないんです(「blog_id="3"」が無視される)。なぜ動く様にしていないのかわからないのですが…。モジュールが「blog_id="3"」で読み出せるならウィジェットセットもそうすべきだと思うのですが…。


ということで解決策は以下の通り。


MTMultiBlogを使います。

<MTMuliBlog blog_ids="3">
    <MTWidgetSet name="メニュー">
</MTMuliBlog>

こうやって明示的にウィジェットセットはブログIDが3の所から呼び出して下さい!と記述することで他のブログにあるウィジェットセットが使用できない問題を回避できます。

これは結構ハマるというかMTWidgetSetにblog_idが効かないのに気付くまでわからなくてハマるのですよね。注意しましょう。

バージョンが上がったら直らないかな〜、とか期待を込めてポスト。

記事の続きを読む



MovableType 3.2環境の話なので最近のMovableType 4環境では修正されているかもしれないけど、RSSのテンプレートの話。

RSSのテンプレートでこれだけは設定しておいた方が良いという点をひとつ挙げます。



MovableTypeではRSS 2.0のテンプレートで、エントリーの内容を記述している部分に以下のような記述がある。


<MTEntries lastn="15">
    <item>
        <title><$MTEntryTitle remove_html="1" encode_xml="1"$></title>
        <description><$MTEntryBody encode_xml="1" convert_breaks="0"$></description>
        <link><$MTEntryPermalink encode_xml="1"$></link>
        <guid><$MTEntryPermalink encode_xml="1"$></guid>
        <category><$MTEntryCategory remove_html="1" encode_xml="1"$></category>
        <pubDate><$MTEntryDate format_name="rfc822"$></pubDate>
    </item>
</MTEntries>



しかし、この<description>の記述ではMovableTypeのエントリーで「追記」の部分に記入したときにRSSに「追記」の部分が入らなくて、中途半端な印象を与えてしまう。

それもRSSを見ただけでは「追記」があるかどうかも分からない。


なので、とりあえず「追記」を書く、書かないに関わらず、以下の様な記述に変えておくべきだ。(ついでに「convert_breaks="1"」にして改行が有効になるようにしてある。これはお好みで。)


<description><$MTEntryBody convert_breaks="1" encode_xml="1"$><MTEntryIfExtended><$MTEntryMore convert_breaks="1" encode_xml="1"$></MTEntryIfExtended></description>


また、「追記」の部分に「オチ」を書くブログの場合は、「追記」の部分がRSSに掲載されてしまうと、意味が無くなってしまう場合があるので、そういう場合は以下のようにして「続きを読む」という形でリンクを張るようにしておけばよいのではないだろうか。


<description><![CDATA[<$MTEntryBody convert_breaks="1"$><MTEntryIfExtended><p><a href="<$MTEntryPermalink encode_xml="1"$>">続きを読む</a></p></MTEntryIfExtended>]]><</description>


aタグを書くためにCDATAを使ったんだけど、使い方が間違っている!とかあれば教えていただければと思います。
記事の続きを読む



ブログ著者

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について

サイト内検索