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

Pocket
LINEで送る

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

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

 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(); ?>

参考:

追記:2012/10/29

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

Pocket
LINEで送る

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

2 comments / Add your comment below

コメントを残す