Showing all posts tagged Design

In Windows

日本語とアルファベットとの間の半角スペースを Word で一括削除する方法。

Author 棚旗織Posted on Leave a comment
日本語とアルファベットとの間の半角スペースを Word で一括削除する方法。

日本語とアルファベットとの間のスペースは必要です。絶対に。

　Web 上で日本語とアルファベット（英数字）の混植するとき、日本語とアルファベットの間に半角スペース（U+0020、0x20）を入れるかどうかで意見が分かれています。

　読みやすさのためには半角スペースが必要、DTP への使い回しを優先させるべき、見栄えは CSS やソフトに任せるべきだ、バッドノウハウだ、半角スペースなんて大嫌い、可読性なんて Web の理想を抱いて溺死しろ。などなど、様々な意見があります。というか、以前にも、充分、語りました。

　結論を言います。
　わたしは、半角スペースを入れます。
　理由は明快。

　半角スペースを入れた方が読みやすいからです。

　実際、Word や InDesign では、自動的に日本語とアルファベットの間に文字間が空きます。1 身の回りの書籍でも、ほぼ 100%、日本語とアルファベットの間はスペースが空いています。

　なぜなら、読みやすいからです。

　そう、読みやすさのためには日本語とアルファベットの間には文字間スペース2 が必要です。CSS で日本語アルファベット間スペースを指定できない 3 以上、見栄えと可読性のためにスペースを入れます。4

 

　さて。
　一方、半角スペースを否定する大きな根拠として、DTP 用にデータの使い回しができないという問題があります。
　確かに Word や InDesign で文書を書くときは半角スペースが不要です。
　いえ、半角スペースがありますと、デザインが崩れて困ります。

　だから Web やプレーンテキストでも半角スペースを抜く？
　使い回しと理想のために見栄えを捨てる？？
　本末転倒です。

　Word で読みやすい体裁で書く？
　違うでしょ、Word 機能を駆使して Word にふさわしい体裁を整えなおす。それが正しい Word の使い方です。

Word を利用して、日本語とアルファベット間の半角スペースを削除する方法。

　ここからが本文です。

　Word の「オートフォーマット機能」を利用して、不要な半角スペースを削除しましょう。まず、オートフォーマットの設定をします。

Word2013 オートフォーマットの設定

　ファイル > オプション > 文章校正 > オートコレクトのオプション > オートフォーマット（タブ） > 日本語と英数字の間の不要なスペースを削除する(C) にチェックを入れます。

 

　つぎに、オートフォーマットに簡単にアクセスできるよう、クイック アクセス ツール バー を設定しましょう。

クイック アクセス ツール バーの設定

　ファイル > オプション > クイック アクセス ツール バー から、「オートフォーマット…」をクリックして追加します。

　あとは、オートフォーマットボタンを 1 click するだけで、（Word や InDesign 上では）不要なスペースが綺麗さっぱり削除されます。便利。

 

　同様に、オートフォーマットを利用することで、文頭の全角スペースもインデントに変換できます。5

　また、Word のオートフォーマットを使うことで、クォーテーションを自動でそろえられる点も素敵。まぬけ引用符 “dumb quotes” にさようなら。6
　ただ、オートフォーマットだけですと、Rock ’n’ Roll や ’cause, ’em, ’bout あたりの短縮形に対応していませんので、一部は手動で直しましょう。7

 

　余計なことをすると酷評されがちな Word のオートコレクト／オートフォーマット機能ですが、使いこなせばこれほど便利な機能もありません。
　Web でも印刷物でも、特定の書き方に拘泥せず、それぞれに合わせた体裁で、読みやすく美しい文章を。

 

 

  1. 半角スペース（U+0020、0x20）が入るわけではありません。 [↩]
  2. 半角スペースであれ、カーニング処理であれ。 [↩]
  3. 参考: 自動で半角スペース挿入 [↩]
  4. HTML と CSS の思想なんてくそ食らえ。もともと、英語に最適化されていますしね。 [↩]
  5. Web では CSS で指定しろ、という考えもありますが、日本語は原稿用紙が基本ですからねー。行頭スペースではなくインデントが正しいと一概には言えません。 [↩]
  6. 参考: I Love Typesetting: InDesignによる欧文組版の基本操作その4 [↩]
  7. むしろ、綺麗な英語を使いましょう？ [↩]
In WordPress

WordPress テーマの日本語テキスト周りを設定しました。

Author 棚旗織Posted on 2 Comments
WordPress テーマの日本語テキスト周りを設定しました。

　HTML5 に対応した WordPress テーマ、FreeDream を利用していますが、アルファベット圏が前提に組まれたテーマですから、どうしても日本語周りがきちゃなくなります。
　デザインのカナメ1 はタイポグラフィ、日本語周りを中心に整えました。WordPress に限らず、すべての Web サイト/ブログで使える、基本的な事項です。
Read More

  1. シカメと読むとほむほむに重火器で殺られます。 [↩]
In WordPress

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

Author 棚旗織Posted on 2 Comments

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

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

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;
}
  1. 前後に貼り付けていましたが、修正。どちらでもいい？ [↩]
  2. Wordで文章を打つのと同じですね。 [↩]