以下のページを参考に、現在のPin It buttonのコードに対応したものを書いてみた

Pinterest Image URL - Movable Type Forums

ボタンの掲載はブログ記事だけ、最後にアップロードした画像をPinしてもらうことにした。

標準で提供されるコード

<a href="//pinterest.com/pin/create/button/?url=「掲載ページのURL」&media=「画像のURL」&description=「概要」" data-pin-do="buttonPin" data-pin-config="none"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>

Movable Typeのテンプレートタグで記述

<a href="http://pinterest.com/pin/create/button/?url=<mt:EntryPermalink>&amp;media=<mt:EntryAssets lastn="1" type="image"><mt:AssetURL encode_url="1"></mt:EntryAssets>&amp;description=<$mt:EntryTitle encode_html="1" strip="%20"$>" data-pin-do="buttonPin" data-pin-config="none"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" alt="Pin it"></a>

9月15日追記：ブログ記事の概要からブログ記事のタイトルに変更しました。

GENE BERG JAPANさんのサイトにも付けたので、Boardを作ってみた

予てからリニューアル作業を行っておりましたGENE BERG JAPANを本日公開いたしました

Bootstrap + FontAwesome + Movable Type Open Source を利用して短期間で制作いたしました。

VW乗りの間では知らない人はいないアメリカ・カリフォルニア州のオレンジカウンティにあるGENE BERGのパーツや空冷VWを専門に扱うマニアックな自動車専門店です。

Facebookページも公開しておりますので、何卒よろしくお願いします。

本日から少しずつmtde.infoの変数系解説をCode@Styleでご紹介いたします。

以下の様にまだたくさんの有用な情報がありますので、出来る限り掲載するつもりです。

よろしくお願いします。

2014年1月23日追記：Code@Styleは閉鎖いたしました。ありがとうございました。

サイトをMTOSで構築することになった。

サイトオーナー自身で更新作業になるため、なるべく簡単に出来るようAnotherCustomFieldsプラグインを使おうかとも思ったけれども、MT標準の「定型文」を使うことにした。

リッチテキストエディタにはオリジナルのスタイルシートを適用できるので、以下のようにリッチテキスト用のrich-text.cssを設定。

読み込ませるスタイルシートは1つしか設定できないので、Bootstrapなどを利用する場合にやりにくい。そこでrich-text.cssに@importでbootstrap.min.cssとカスタマイズ用のcustom.cssの2つを読みこませる。

@import url("<$mt:Link template="bootstrap_min_css"$>");
@import url("<$mt:Link template="custom_css"$>");

スタイルを変えたい場合には、カスタマイズ用のスタイルシート本体だけを弄ればOK！

JavaScript、CSSやHTMLのコンプレッサーはオンライン上にたくさんありますが、Mac App Storeのs.pressを使ってみた。

ファイルをドロップするだけで圧縮してくれる。割と細く設定でき、「.minを追加」なども指定できる。

エスプレッソを絞り出すような圧縮中のアニメーションが楽しい。