MTカスタマイズ Archive

mt.Vicuna Simple テンプレートに Pinterest の Pin it ボタンを設置してみます

はじめに

すでに使っている人向けで記述してますので、HTML構造については、本家サイト(vicuna.jp)など参照してください。

参考にしているのは、 Pinterest ブログ上に設置されているコードで、旧タイプのボタンをカスタマイズしたものです。

通常は、Pin It Button for Web Sites （http://pinterest.com/about/goodies/）のフォームにサイトのURL をいれて得たコードをもとに URLのパラメータを Movable Type 用のテンプレートタグに置き換えするなどしてカスタマイズします（このページではこの方法の説明はしません）。

表題のとおりに、mt.Vicuna テンプレートでの貼付け法で、ほぼ初期の状態で設置の動作を確認したものです。カスタマイズされたものについてはこのとおりに動作しない場合もあり得ます。

設置について

ボタンをつける箇所は、ブログ記事テンプレートの タイトル下の ul .info のリストに追加するということとして説明しています。

Pin itボタンパーツ

<li class="pint">
     <a class="pinit" onclick="pinitbtn(this);return false;" href="http://pinterest.com/">
        <img src="http://passets-ec.pinterest.com/images/pinit_preview_none.png" width="49" height="25" alt="pin it" />
     </a>
</li>

<ul class="info"></ul> 内にいれます。

Pin it をおこなう部分

前掲のコードはすでに設置されているものとして、以下のコードを</body> より前に設置

以下は、テンプレートタグを利用して直接 JavaScript コードを埋め込む場合です。

<script type="text/javascript">
//<![CDATA[
var pinitbtn = function(elm){
  var desc,url,media='', image='', section;
  desc = '<$mt:EntryTitle remove_html="1" encode_js="1"$>';
  url = '<$mt:EntryPermalink encode_js="1"$>';
 
  section = elm.parentNode.parentNode.parentNode.getElementsByTagName('DIV')[0];

      if (section) {
        image = section.getElementsByTagName('IMG')[0];
        if (section.getAttribute('class','textBody') && image && image.src) {
          media = image.src;
        }

      if (desc && url && media) {      
        window.open( 'http://pinterest.com/pin/create/button/?url='
        + encodeURIComponent(url)
        + '&media='
            + encodeURIComponent(media)
        + '&description='
            + encodeURIComponent(desc)
       , 'signin'
       , 'width=665,height=300,scrollbars=1,resizable=1');
      }
}
};
//]>
</script>

詳細

外部ファイルにしたいとき

タイトルなどの情報を JavaScript から取得する形にしたいときはそれぞれ url は location.href とか、rel=canonical(指定してあるとき)など、 desc はPin itしたときテキストエリアに入るテキストで、タイトルでいいときは document.title などです。

section でエントリの部分を拾ってきます。要素がカスタマイズされているとノードの取得がうまくいかないかもしれませんので適宜調整がいるでしょう。

記事に画像があるときとないときがあるような場合、記事中の画像の有無でふり分けて出力といった方法が考えられます。

Pinterest ブログのほうでは、ボタン設置の a要素の内容は空として、背景画像にボタンの画像をあてているようです。

mt.Vicuna Simple テンプレート

• mt5-theme-mtvicuna-simple GitHub

今月（2013年 1月）、サイトでカスタマイズした点をまとめたエントリです。

• Vicuna テンプレートの枠にbox shadow を適用

このブログ（Vicuna テンプレート使用）にbox shadow をつけてみました。

• box-shadow－CSS3リファレンス

Vicuna の場合、ヘッダーとフッター、コンテンツと分けられて構成されています。

影のために外枠でラッピングするのもなんですので、今ある要素のままでスタイルを適用したいとおもいます。

そのためには、それぞれ3つの要素ごとにbox shadow をかける必要がでてきます。

これをやると、影の広がりの距離の関係で、水平方向の影が要素の上下で重なって不自然な影のつきかたになってしまいます。

そこで、影の位置をそれぞれずらすことによって（なるべく）不自然につながらないようにみせています。

div#header には

• box-shadow: 0px -6px 10px 4px rgba(0, 0, 0, 0.6);

div#content には

• box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.6);

div#footer には

• box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.6);

今月のカスタマイズは以上です。以下に過去のカスタマイズ記録リストがあります

• 当ブログのカスタマイズ記録

Movable Type 上で使用するエディタに CodeMirror を設定するやりかたです

もともとMovable Type（ここではヴァージョン5.2 以上ということです）に CodeMirror は同梱されているのですが、使えるようにするのにあれこれしないといけなくなるわけです。

探しましたところ、CodeMirror を使えるようにするためのプラグインが GitHub にありました。

• movabletype/mt-plugin-codemirror · GitHub

CodeMirror for Movable Type として提供されています

簡単な導入手順は以下の通りです。システム管理者権限の有る者がおこないます。

1. 前掲のページより master.zip をダウンロードして、展開しておきます
2. plugins 内のフォルダを Movable Type の plugins ディレクトリに入れます
3. mt-config.cgi に SourceEditor CodeMirror を追加します。参考：SourceEditor | 環境変数リファレンス
4. TinyMCE を使わない場合は、システムメニューのプラグイン設定のところで、TinyMCEを無効にします

で、設定後のキャプチャは以下です(ローカルのMTOS v5.2.2で試しています)。

以下は、表示できる補助ボタンをカスタマイズした例で、リンク挿入を入れています。

カスタマイズの参考までに。プラグインの editor.tmpl のコードを追ってみると参考になります。

今月（2012年12月）、今年最後のサイトでカスタマイズした点をまとめたエントリです。

本文中の「ウェブマスターツール」ですが、名称変更があり(http://goo.gl/tjQxT4)、Google Search Console となりました。

• CSSファイルの読み込みを mt/mt-static 外に移動し、そちらから読み込みように変更した
• Action Streams でTwitterからのアクション取得を停止

CSSファイルの読み込みですが robot.txt によってCSSファイルを置いているディレクトリを ブロック（Disallow）している場合にGoogle インスタンスプレビューでCSSファイルを読み込めずにCSSが適用されない形でプレビューされることへの対処です（この件はGoogle ウェブマスターツールのLabs内のインスタントプレービューの機能より、確認することができました）。

Twitter のタイムラインフィードですが、'http://twitter.com/statuses/user_timeline/{{ident}}.atom' は以前より取得不可でしたので（Twitter側は2013.3 以降JSONのみ提供を決めており、Action StreamsプラグインがJSONにも対応してないといけないので対処は見送りに。Githubにあるstreams.yamlは、ざっとみたところ scraper 使ってるけど、これがスクレイピングにあたるのか微妙なので） Twitterのストリーム設定で取得しないようにチェックを外すとしました。

今月のカスタマイズは以上です。以下に過去のカスタマイズ記録リストがあります

• 当ブログのカスタマイズ記録

今月（2012年11月）、サイトでカスタマイズなどをした箇所をまとめたエントリです。

• Google Analytics のサイトの速度レポート用のコードを削除した
• トップページ / において、MTOS運用サイトの新着記事情報も追加
• レスポンスヘッダで文字コード出力するようにした
• 関連記事の見出しは Other entries you might get interested をやめて、Similarity Content とした

Google Analytics のヘルプの「サイトの速度について」に、"ページ速度の測定はトラッキング コードで自動的に有効になり、改めて設定を行うことなく、サマリー レポートとページ速度レポートにデータが表示されます。"とありますので、これまでつけていたトラッキングコードの関数（_trackPageLoadTime）は削除しました。

なお、これをやるとサンプルとなるサンプリング レートがこれまでより引き下がるとのことで、サイトの速度レポートでサンプルとなった数は減少しました。

PHPにしているページはテンプレート上に追記の形で以下の通りです。

• header('Content-Type: text/html; charset=UTF-8');

Similar content だとMTはじめた頃のカスタマイズを思うので、Similarityのほうにしてみました。

今月のカスタマイズは以上です。以下に過去のカスタマイズ記録リストがあります

• 当ブログのカスタマイズ記録

今月（2012年10月）、サイトでカスタマイズをおこなった点をまとめたエントリです。

• Movable Type の Firefox 16 以降ユーザーに向けたパッチの適用
• WordPress 公式テーマ Twenty Twelve （http://wordpress.org/extend/themes/twentytwelve）に変更
• WPtouch プラグインの使用を中止した

Firefox をヴァージョン16 へアップデートして以降、カテゴリが選択できずに、新規記事作成でカテゴリをつけた記事として投稿できない、といった不具合がおこっていました。以下に修正のパッチファイルとして提供されています。なお次のリリースでパッケージとして提供されるようです（参照）。

• Firefox 16 でカテゴリおよびフォルダの選択が保存できない。 | Movable Type FAQ

4.38用のもので適用しています。（FileMergeで確認したところ、指摘されていた変更による影響のあった個所　〈modest の「Firefox 16 サイト互換性に関わる修正のまとめ」10/15 追記分に詳細があります〉の修正でしたのでとりあえず近いヴァージョンという判断で適用しています。もちろん、ヴァージョン違いによる適用で、動作保証されないという認識で）将来を見据えると4.x 系のMovable Type は可能であればversion 5のほうに移行しておいたほうがいいと考えています（----とここで書いていても説得力がありませんけれども）。

Twenty Twelveテーマは、WordPress 3.5 ベータ1 発表時のボーナスとして紹介されていたものです（記事）。これにともない、スマートフォン向け表示の WPtouch の使用をやめることとしました（以上tsuredurebox.geo.jp内の変更点です）。

今月のカスタマイズは以上です。以下に過去のカスタマイズ記録リストがあります

• 当ブログのカスタマイズ記録

今月（2012年 9月）、サイト内でカスタマイズをおこなった箇所をまとめた記事です。

• Twitter widget を Embedded Timelines に切り替えた
• はてなスターの追加ボタン画像の変更

以下、Embedded Timelines の設置メモです。

Twitterにログインしておき、以下の場所にいきます。

• https://twitter.com/settings/widgets

まだ移行していない状態だと何も出ていないので[新規作成]をクリック。

あとはフォームに必要事項を入力して貼付け用コードを得るだけです。

注意点として、同じウィジェットを複数サイトで使い回したい場合、ドメインのところは貼付けたいサイトのURLをドメイン単位でカンマ区切りで入力します。

＊設置ページと設定ドメインがあっていないと設置しても表示されません。

詳細は、https://dev.twitter.com/docs/embedded-timelines のページにあるとのことです

はてなスターの画像の変えかたは、もっとカスタマイズをしよう - はてなスター日記 にあるとおりです。

今月のカスタマイズは以上です。以下に過去のカスタマイズ記録リストがあります

• 当ブログのカスタマイズ記録

今月（2012年7月）、サイト内のカスタマイズ、変更をおこなった点を纏めたエントリーです。

• Movable Type 4 のロゴを復帰
• Fastladder への登録リンクを削除

ロゴマークについては、しばらく表示をやめていたのですが再び使うことにしました。Movable Type 4系とMovable Type 5系の記事が混在してますので、このブログではヴァージョンが４であるというのを明示したいためです。

今月のカスタマイズは以上です。以下に過去のカスタマイズ記録リストがあります

• 当ブログのカスタマイズ記録

今月（2012年6月）、サイト内のカスタマイズ、変更をおこなった点を纏めたエントリーです。

• ブログの説明を変更
• XML宣言をはずした
• new DISQUS 2012 をアクティベーション
• タグ一覧ページの各タグのリンクカラーで、ステータスの区別を色の濃さによる違いへと変更した

ブログの説明（BlogDescription）を「週末はコピペコーダー」に変更しました。特に意味はなく、はてなのプロフィールの説明でつかっているのと同じものでそのままです。

XML宣言ですが、ウェブページ（Movable Typeのシステム上での名称）においては、既に宣言をつけない形で以前から公開していました。これを記事ページ等にもXML宣言なしに切り替えをおこないました。

Disqus が新しい feature を公開されていましたので使えるようにしてみました。

• http://blog.disqus.com/post/22325598158/try-out-disqus-2012 Try out the new DISQUS 2012
• The new DISQUS 2012: Elevating the Discussion. Get it now!

設定が済むと、コメントで使用していたフォームが新しいものに切り替わっています。

今月のカスタマイズは以上です。以下に過去のカスタマイズ記録リストがあります

• 当ブログのカスタマイズ記録

今月（2012年5月）、サイト内でカスタマイズした箇所をまとめたエントリです

• あわせて読みたいブログパーツを撤去
• CSS ファイルの修正
• WordPress のSocial Media Widgetプラグインをいれてみた
• MTOS 、5.14 へアップデート
• MTOS で使用中のDisqus プラグインの 「disqus_post_message」の出力を変更した

「あわせて読みたい」のブログパーツですが、表示に変化がおこっていない状態なので普通に画像を貼っているのと違いが無いという理由で外すことにしました。

Social Media Widget はウィジェットに各ソーシャルメディアのアカウントとアイコンを一括設定して、follow usなウィジェットとして利用できるといったプラグイン。

つれづれぼっくす にて導入してみました。

表示のサポート的なもので、ソーシャルメディアアカウントが少ない場合は自前でウィジェット作ってもそんなに時間的なものは変わらないのかな、----と使ってみた感想です。

利用中のMTOSを5.13 -> 5.14 にしました。

• Movable Type 5.14 の提供開始 | MovableType.jp

Disqus プラグインで、disqus_message が記事全文そっくり出力しているのに加えて、二重引用符に対し、バックスラッシュのエスケープ文字（と改行コード）を差し込む（<div "id="disqus_post_message">"></div>内に収められる内容）といった問題がありました。但し、この要素自体はdisplay:noneによって隠されています。

ということで、応急の対応として以下のように変更をおこないました。text をみないようにして、 excerptのほうを呼び出すように変更しました。

対象ファイル

• /disqus/lib/DisqusCommentSystem/Tags.pm

変更箇所

116行目付近。

    #    my $text = encode_php($entry->text, 'qq');
    my $text = encode_php($entry->excerpt, 'qq');

今月のカスタマイズは以上です。以下に過去のカスタマイズ記録リストがあります