キミガタメ「ヲ」

tanahata’s blog in “Hatena Blog”

jquery.FLAutoKerning.js を使い、HTML でも文字詰めしました。

文字詰め(カーニング)なし。「ちっちゃく、詰めます。」

文字詰め(カーニング)あり。「ちっちゃく、詰めます。」

 FLAutoKerning改良版を利用し、文字詰め(カーニング)を行いました。上が文字詰めなし、下が文字詰めありです。カッコや句読点の前後の変化が分かりやすいでしょう。ブログ内の h1, h2, h3 のタイトル要素に適応させました。

 

 ただ、ここまで至るのが案外大変で。

 元のコードでは、<body onload="……"> で始まる書き方使われていましたので、ThinkIT さんを参考に jQuery っぽく $(function() ではじまる形に変更。<body> に直接 JavaScript を書きたくありませんから。

 しかし、jQuery のコードをそのまま WordPress に貼り付けても動きません。すでに WordPress には jQuery が使われているからです。そのため、さらに、wembley さんを参考に jQuery のコードを WordPress 用に変更。

 最終的にはこんな形。header.php 内の <?php wp_head(); ?> の前に貼り付けました。ふぅ。 *1

[php] <!-- jquery.FLAutoKerning start -->

<?php wp_enqueue_script('jquery.FLAutoKerning', 'http://tameha.net/wp-content/plugins/FLAutoKerning/jquery.FLAutoKerning.js', array('jquery')); ?> <script type= text/javascript > jQuery(function(){ jQuery('h1').FLAutoKerning(); jQuery('h2').FLAutoKerning(); jQuery('h3').FLAutoKerning(); }); </script> <!-- jquery.FLAutoKerning end -->

<?php wp_head(); ?> [/php]

参考:

追記:2012/10/29

 デザイナーブログさんにリンクを張っていただいていましたのに、動かないまま放置していてゴメンナサイ。  修正しました <( )>

*1:前後に貼り付けていましたが、修正。どちらでもいい?