カスタマイズの最近のブログ記事

MT4.1にシステムバージョンアップして、最初に行ったカスタマイズが、Highslide JS - JavaScript thumbnail viewerのタグを自動で生成できるようにすることでした。ファイルアップロード・ポップアップウインドウ用のファイル生成するためのファイルを探すのに時間がかかりましたが、以前よりもスクリプトがわかりやすく書かれていたのですぐにカスタマイズできました。

highslidejsmt

今回は、Highslide JS用のコードをMT4.1のファイルアップロード>ファイルオプション>[アップロードしたファイルを使ってブログ記事を書く]にチェックをつけた時に、自動で生成されるようにするカスタマイズを紹介します(一応ここ2週間ほど使っていますが、問題なく使えていますので紹介記事としてエントリーアップ)。

※尚、このカスタマイズを行って正しく動作するためには、「WYSIWYGのフォーマット設定がなし」の状態でないと正しいコードが生成されません。 また、現状問題なく動作していますが、もしコードを改編してシステムがおかしくなるかもしれませんので、自己責任の元参考にして試してみてください(デフォルトファイルのバックアップを取っておくことをおススメします)。

MovableType4.1AutoPagerizeに対応させるコードを紹介しておきます。

mtentryautopagerize_jpg

AutoPagerize対応class指定を設定しておくことで、エントリーを昇順で読むことができるようになります。実際にMovableType.jpで対応されているので、導入している方には、過去のエントリーから読んでいくとページ末尾に新しい記事(次ページ)が追加表示されるようになり、読みやすさを実感できるかと思います。

インデックスページ(トップページ)で、エントリーがアップした日付で降順に表示されるのが一般的です。記事を読み始めると昇順に記事が追加され読めるようになります。逆でもいいのですが、こっちの方がスマートかもしれません。

最初のエントリー投稿内容からコードの追記修正いたしました。最新記事において、「次の記事」が表示されていたのを表示されないコードに修正しました。

MovableType4.1でエントリーリストはじめ、コメントトラックバックなどのリスト表示をストライプにする変数設定について紹介します。

mt_list_stripe

MT3.3xでは、MTRoundRobin:一覧表示で交互に背景・文字色をかえるで紹介していたMTRoundRobinというプラグインを使って、記事リストをストライプにして表示させていました。

新しいMovableType4.1では、そうしたプラグインは必要なく、変数を設定し条件分岐させることで、対象の要素に奇数偶数回数目で設定内容を指定してページ生成することが可能です。この変数指定での条件分岐を使って、奇数、偶数の要素に対してclass指定を交互に変えて生成するようにすれば、cssの設定だけでストライプ表示をさせることが可能となります。

参考になるエントリーは、こちらの拡張された MTElse タグを利用した複雑な条件分岐 | MovableType.jpを読んでみるとその内容がわかると思います。

また、サンプルページは、MovableType.jpにて最近のブログ記事リストがこの方法を使って、ストライプ表示をさせていると思われます。

javascript タブUI導入の参考になるサイトでも紹介したタブ機能・jQueryTab(タブ)プラグインjQuery UI Tabs / Tabs 3)をこのブログに実装しました。

iGooleやYahoo!ニュースなどユーザーがよく見るページで普通に使われるようになった便利なタブ機能。実装するにも意味を持って使わないとタダのタブになってしまいます。ブログの中で使える場所は?と考えた結果。エントリー文末に使うのがベストであるという結論になりました。

そんなタブ機能を実装した思惑と配置場所の理由なんかを書き出してみます。

以前からサイト検索機能をアップさせたいと思っていました。検索結果表示のスピードアップです。。今後エントリーが増え続けてくるとMovable Typeの検索機能ではストレスを感じるようになってくる。そんなことからいろんな検索(サーチ)機能のカスタマイズを探してみました。結果、Google AJAX Search APIを利用したサーチ機能に切り替える方向に決めました。

Movable TypeにGoogle AJAX Search APIを利用した検索機能を実装:Google Ajax Search

使ってみた感想は、なかなかいい感じです。検索結果表示も早い方だと思います。また、Custom Search Engine:Google Co-opの実装も合わせて表示できるので訪問者にとっては、いい検索機能だと思います。(試しに一度検索機能を使ってみてください。)

今回はこの便利なGoogle AJAX Search APIを利用した検索機能をMovable Typeに実装する方法を紹介します。一度使ってみるとわかりますが、自分のブログにも欲しくなると思います。日々、情報を探している自分が常々思っていたことを自分のブログで実践・改善できるのはうれしいです。これからこんなサーチ機能がほとんどのブログに実装されるといいなと思います。

ウェブページ

   
  

アイテム

  • ff-logo-big

    ff-logo-big: firefoxロゴ

  • fmtube_image

    fmtube_image: fmtubesキャッチイメージ

  • mock.jpg

    mock.jpg: fm+tubesのモックページ(デザインレイアウト)。最終的にはこのスタイルでマルチブログで展開してみる構想。

  • mtdeinfo

    mtdeinfo: Movabletypeを勉強するならこのサイト。サンプルファイルもあって、情報も探しやすいです。とてもきれいに情報表示されていて、とても参考になります。

  • mytumblr

    mytumblr: 個人の趣味でのtumblrです。女性のポートレートなんかがおおいです

  • caputure_contextmenu

    caputure_contextmenu: tumblr caputureを右クリックコンテキストメニューで選択する

  • tumblrgallery

    tumblrgallery: tumblrを使ってWEBデザインGalleryを簡単に作ってみました。

  • psdtuts

    psdtuts: http://psdtuts.com/のイメージ画像

  • designflavor.

    designflavor.: http://www.designflavr.com/のイメージ

  • entrymain_template

    entrymain_template: ブログ記事の概要は、インデックステンプレート、ブログ記事のリスト(アーカイブテンプレート)、検索結果(システムテンプレート)の3つのテンプレートで共通に使われています。それぞれのテンプレートでの表示内容の違いをイメージに表してみました。

このアーカイブについて

このページには、過去に書かれたブログ記事のうちカスタマイズカテゴリに属しているものが含まれています。

前のカテゴリはmovabletype4.1です。

次のカテゴリはタグ,プラグインです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。