WordPress - タメハ

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

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

jquery.FLAutoKerning.jsをWordPressに反映

　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',
    'https://tameha.net/wp-content/plugins/FLAutoKerning/jquery.FLAutoKerning.js',
    array('jquery')
);
?>

<script type="text/javascript">
jQuery(function($){
    $('h1').FLAutoKerning();
    $('h2').FLAutoKerning();
    $('h3').FLAutoKerning();
});
</script>

<!-- jquery.FLAutoKerning end -->

<?php wp_head(); ?>

参考：

追記：2012-10-29

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

追記：2026-09-21　font-feature-settings: “palt”

　WordPressのアップデートに伴い、結構前からjquery.FLAutoKerning.jsが動かないままなのを放置していました。ときどきこのページにアクセスがあるので修正しようと思いましたが、いろいろ面倒くさくなって、jquery.FLAutoKerning.jsを使うのを辞めました。

　代わりに、CSSでfont-feature-settingsを設定します。いつの間にか主要ブラウザが全て対応してくれましたので、令和はこっちを使いましょう。ただし、Open Typeのフォントにしか有効にならない点、かなり詰まりすぎるので本文には適応させないのが重要です。冒頭の例示も、font-feature-settingsに変更しています。

　ついでに、text-autospaceも有効に。半角英数字と全角文字との間に1/8スペース（八分アキ）が自動で入るようになります。このブログでは半角英数字と全角文字との間に手癖で半角スペースを入れておりますが、これからは意図的にスペースを入れないようにしなくっちゃ。2

h1, h2, h3, h4, h5, h6 {
    font-family: 'Crimson Text', '游明朝', YuMincho, serif;
	/* OpenType のフォントを指定 */
    font-feature-settings: "palt";
	/* プロポーショナルメトリクスを有効化。詰まりすぎるので h にだけ */
}

body {
	/* 半角英数字と全角文字の間に隙間を空ける*/
	text-autospace: normal;
}

前後に貼り付けていましたが、修正。どちらでもいい？ [↩]
Wordで文章を打つのと同じですね。 [↩]

Showing all posts in WordPress

こっちに書くのもなんなのですが。

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

jquery.FLAutoKerning.jsをWordPressに反映

参考：

追記：2012-10-29

追記：2026-09-21　font-feature-settings: “palt”

WordPress に引っ越します（仮）

WordPress: はじめました。

jquery.FLAutoKerning.jsをWordPressに反映

参考：

追記：2012-10-29

追記：2026-09-21 font-feature-settings: “palt”

追記：2026-09-21　font-feature-settings: “palt”