今月のいらんことしい(2013年 4月)

今月(2013年 4月)、カスタマイズした点をまとめたエントリです。

  • Atom feed に LINEで送る のリンクを追加
  • FOAF とXSLT を Movable Type で作成上書き
  • Disqus コメントのコメント数表示を、メインインデックス・アーカイブページに導入
  • ActionStreams プラグインのプロフィールイベントリスト、利用サービスリストのテンプレート修正とCSSを5.x 用に修正
  • ウェブページにTwitterボタン のリンク共有ボタンを設置した

LINE で送るリンクの設置方法については、以下のページを参照しました。

なお、ガイドラインの、 4. 利用条件の(2)(* 便宜上の番号です。規約改訂で変更の場合もありうるという意味です) では、「専用アイコン」の利用の命令がなされていますが、設置者が専用アイコンの代わりに、「LINEで送る」「LINE」というテキスト文字の利用が許可されています。

以上ふまえて、テキスト形式にて、フィードにLINEで送るというリンクを設置いたしました。

オワコン[感]?な FOAF (Friend of a Friend)ですが、しばらく放置してたので更新してみることにしました。

Movable Type が様々な形式のファイルを出力するツールであることを知ってる人は知っているとおもうのですが、 rdf XSL も出力できます。XSLTスタイルシートは以前に使ったものをそのままで、Generator がMovable Type になったため、Powered by Movable Type のリンクを出力するように追加しました。

ActionStreams はGitHubから、2.3~ を持ってきたのですけど、5.x 系だと表示されるテーブルがえらい崩れてるので、テンプレートからなおしてみることにしました。この際なのでいっておくと、もう 5.x系用に fork されていてもいいとおもうんですよね。。

自分の修正点の覚えとして簡略したもので示しておきます(細かく書いてもいいのだけど雑多になるし)。主に Firefox で使っている状態にあわせているので、他のブラウザではどうなっているかまでは分かりませんのであしからず。

スタイルシート action-streams.css

position: static; は無効にしておかないと、リンクをクリック出来ない箇所がでてくるのでコメントにしてしおく。

list_profileevent.tmpl で、table 要素の部分

  • button 要素に class => button ( 5.xのスタイルに合わせる必要がなければそのままで )
  • チェックボックスのところは class => cb col
  • th 要素に class => col head
  • th.primary-col は th.primary へ変更する

fixed_style_actionstreams.jpg

Twitterボタンはdata-* をdata-* をもたない文書型向けに改造。

Twitterボタンは、 Twitter / Twitterボタン から作成。

ボタン部は id 付与のため以下に。

<div id="tweetbtn_" style="display:inline;"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a></div>

スクリプト本体が読み込まれる前に、data-* を追加する。

<script type="text/javascript">
  void function(){var twID = document.getElementById("tweetbtn_")||false;
  if(!twID){return;}else{
  // ボタンのコード中の、data-* の内容をsetAttribute に置き換え
  twID.firstChild.setAttribute("data-url","<$mt:PagePermalink$>"); // ページのパーマリンク。URL統一のため
  twID.firstChild.setAttribute("data-size","large");  // ボタンサイズを大で選んだとき
  twID.firstChild.setAttribute("data-dnt","true");  // カスタマイズされたTwitterからのオプトアウトを true にしたとき 
  }
}();
</script>

bodyの終了タグ前付近にスクリプト本体をそのままで。

<script type="text/javascript">!function(d,s,id){...省略...</script>
</body>

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

Comments:

コメントをどうぞ。書き込む場所が不明な場合やサイトオーナーへのコンタクトは、GuestBookまでお気軽にどうぞ

blog comments powered by Disqus