文字詰め（カーニング）なし。「ちっちゃく、詰めます。」
文字詰め（カーニング）あり。「ちっちゃく、詰めます。」
FLAutoKerning の 改良版を利用し、文字詰め（カーニング）を行いました。上が文字詰めなし、下が文字詰めありです。カッコや句読点の前後の変化が分かりやすいでしょう。ブログ内の h1, h2, h3 のタイトル要素に適応させました。
ただ、ここまで至るのが案外大変で。
元のコードでは、<body onload=”……”> で始まる書き方使われていましたので、ThinkIT さんを参考に jQuery っぽく $(function() ではじまる形に変更。<body> に直接 JavaScript を書きたくありませんから。
しかし、jQuery のコードをそのまま WordPress に貼り付けても動きません。すでに WordPress には jQuery が使われているからです。そのため、さらに、wembley さんを参考に jQuery のコードを WordPress 用に変更。
最終的にはこんな形。header.php 内の <?php wp_head(); ?> の前に貼り付けました。ふぅ。1
<!-- 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(); ?>
参考：
- fladdict ≫ HTMLで文字詰めするタイポグラフィー用JS
- nijitaro’s gist: 846898 — Gist
- HTMLでカーニング！手軽に文字詰めできる「FLAutoKerning.js」 | デザイナーブログ | 株式会社LIG
追記：2012/10/29
デザイナーブログさんにリンクを張っていただいていましたのに、動かないまま放置していてゴメンナサイ。
修正しました <(_ _)>
- 前後に貼り付けていましたが、修正。どちらでもいい？ [↩]
2 comments / Add your comment below