Web、モバイル(スマホ・格安SIM)、ソーシャルメディア活用術、フリーランスの働き方などを綴ります!

MTでスマートフォンサイト作成|ArchivePathSelectorと相対パス指定

18,026 view
更新日:2015年01月12日 投稿日 : 2012年03月07日
  • はてなブックマーク
  • facebook
  • twitter

MovableTypeで「携帯Pack(ケータイキット)126,000円(税込)」も「スマートフォンオプション for MovableType 52,500(税込)」も「MT4i」も要らないスマートフォンサイトの作り方を綴りたいと思います。

”プラグインの導入”と”パーマリンクの相対パス化”で、一つのブログ内でPC用とスマホ用でテンプレートを切り替えてサイトを開けるようになります。勿論、パスの設定次第でマルチブログにも対応可能です。

デザイン設計に自由が利きコストも無しなので、一度覚えておくと凄く重宝します。

スポンサーリンク

MTプラグイン:ArchivePathSelector

ArchivePathSelectorは、アーカイブファイルをのサイトパスを設定する事によってPC用とスマホ用に複数作ることができるプラグインです。
特定のアーカイブの出力先にサイトパスを自由に設定ができます。
サイトパスをスマートフォンページのフォルダに設定するって訳です。
つまり、アーカイブURL・アーカイブパスでは、次のようなURLが実現できます。

• ホームページのURL:http://user-domain/
• ホームページのアーカイブページのURL:http://user-domain/archive/
• スマートフォンサイトのURL:http://user-domain/m/
• スマートフォンサイトアーカイブページのURL:http://user-domain/m/archive/

ArchivePathSelectorプラグインをインストールすると、アーカイブテンプレートの「テンプレートの設定」に「アーカイブパス適用」というチェックボックスが表示されております(デフォルト状態はチェック)。
スマートフォンサイトアーカイブページであれば、次のように、「パス」の先頭に「..m/」(契約しているサーバーの階層によりけり)を設定し、「アーカイブパス適用」のチェックを外して再構築すれば、そのアーカイブテンプレートについては、サイトパス直下に、設定した「パス」の形式でファイルを出力します(上記画像参照)。
ArchivePathSelectorプラグインのダウンロードはこちらから
小粋空間 ArchivePathSelector プラグイン

MTアーカイブページへのリンクを相対パス(ホストからの相対URL)で表示させるmt:BlogFileExtension

ArchivePathSelectorプラグインに対応して終わりではありません。下記に記す設定も必須です。
mt:BlogFileExtension タグを利用します。
Movabletypeのアーカイブページ(個別ページ・月別アーカイブページ・カテゴリアーカイブページ)へのパーマリンクを、相対パス(ホストからの相対URL)で表示する事により、トップページにエントリーリストを表示させた時に、リンク先を個別ページにリンクする事が可能。

<a href="<mt:EntryPermalink />"><mt:EntryTitle /></a>

この個別ページへのアーカイブパスが、「yyyy/mm/entry-basename.html」となっている場合、URLの代わりに相対パスで出力するには、次のようにします。

<a href="<mt:BlogRelativeURL /><$mt:EntryDate format="%Y/%m/"$><mt:EntryBasename separator="-" /><mt:BlogFileExtension />"><mt:EntryTitle /></a>

• MTBlogRelativeURL タグは、ホストからの相対URLを出力するタグ。
• MTEntryDate タグはブログ記事の公開日時を出力し、format モディファイアを適用することで任意のフォーマットで出力。
• MTEntryBasename タグはファイル名を出力。
• separator モディファイアは、ファイルに含まれる「_」を「-」に変換するもの。

このようにテンプレートタグを書き換えることで、
http://user-domain/2009/11/07/post.html というURLを、
http://user-domain/m/2009/11/07/post.html で出力(リンク)することができるようになります。
上記の方法で、Movabletypeでオリジナルデザインのスマートフォンサイトの作成ができるようになります。
♪ 合わせて読む

.htaccessでスマートフォンサイトをアンドロイドやiPhoneで判別表示

是非お試し下さい。

もう1記事、読んでみませんか?

当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

  • はてなブックマーク
  • facebook
  • twitter
18,026 view 2012年03月07日

webdesignerwork 著者

フリーランスWebデザイナーとして活動をはじめて18年。全国の私を必要としてくれる方々からWordPressでのWeb制作のご依頼を頂いております。

各地のコワーキングスペースやWordPressの勉強会(WordBench/WordCamp)などに顔を出し、様々な人達とご縁をいただき刺激を受け、学んだこと感じたことを、日々のお仕事や自社メディアへの開発・配信にと繋げております。妻、子、プードル2匹と里山暮らし。

当ブログで公開されているテキスト、画像、イラストなどに関する権利は、当方に帰属します。
著作者の許諾を得ることなく複製、改変、転載、販売、出版など著作権法そのほか法律に触れる行為は禁止されております。

運営者情報

© 2004 webdesignwork ALL COPYRIGHTS RESERVED.