WordPressでブログを書いてます。
文字の間隔をもう少し広げたいんですが、どうすればいいのか教えて下さい！
その質問にお答えします
WordPress（ワードプレス）で、文章の文字間隔を調整する手順を解説します。
この記事の信頼性
元SEが実際に試した内容を、重要なポイントを含めながら解説しています。
当サイトの運営環境
【目次】
【1】WordPressで記事の文字間隔を調整する方法
文字の間隔を調整する手順
手順は以下の通りです。
簡単なので、すぐやってみて下さいね！
手順
- CSSコードの記述
- HTMLコードの記述
（記事がない時） - プレビューで確認
1. CSSコードの記述
まずは下記のCSSコードを
子テーマの『style.css』または
カスタマイズの『追加CSS』
にコピペします。
WordPressのカスタマイズから『追加CSS』へ記述すると、リアルタイムで変更が反映するので、既存の記事を表示しながら調整するのに便利です。
CSSコード
- 【コード表示】
（ここをクリックorタップ） -
Copy
p { letter-spacing: .2em;/*文字の間隔*/ }
上記CSSコードの『.2em』の部分を、お好みで変更して調整して下さい。
数字を大きくすると広くなります。
単位などは下記を参照願います。
プロパティ設定
- letter-spacing: normal;（初期値）
- letter-spacing: ～px;
- letter-spacing: ～em;
2. HTMLコードの記述
記事がない場合は、3行程度のテスト記事を書きましょう。
HTMLコード（例）
- 【コード表示】
（ここをクリックorタップ） -
Copy
<p>これはテスト文章です。ここに文章を書いて確認しましょう。これはテスト文章です。ここに文章を書いて確認しましょう。これはテスト文章です。ここに文章を書いて確認しましょう。これはテスト文章です。ここに文章を書いて確認しましょう。これはテスト文章です。ここに文章を書いて確認しましょう。早く記事を書きたい！</p>
3. プレビューで確認
style.cssに記述した場合は、プレビューで確認します。
【最後に】
前述しましたが、WordPressのカスタマイズから『追加CSS』へ記述すると、リアルタイムで変更が反映するので、既存の記事を表示しながら調整するのに便利ですよ。
★よくあるご質問【FAQ】★
【Q.】いま使っているWordPressテーマに【カスタマイズ】が無いんですけど、どこにCSSコードをコピペしたらいいですか？
『行間』を調整する方法はコチラの記事で解説しています。
オンラインストレージで
PCのデータを無料で二重化
ロリポップサーバー
【ownCloudの導入方法】
★よくあるご質問【FAQ】★
【Q.】ownCloudって何なの？
ロリポップサーバーの『ownCloud』は、リモートワークなど多人数でファイルの共有が出来ます。
更に、PC内の大切なデータのバックアップとしても機能しますので、リスク回避としてぜひ導入してみて下さい。
2022年10月 追記
ロリポップ!のownCloud簡単インストールは2022年7月6日に利用停止となりました。
理由は「ownCloudの開発が停止しているため」との事です。
すごく便利だったので残念です^^;
今後、最適な代替えクラウドサービスを探そうと思います。
【LOLIPOP!の『ownCloud』をゼロから導入する手順】
【ownCloudの使い方】
『第三者とファイルの受け渡しをする方法』
【ownCloudの使い方】
『スマホアプリ（iPhone）のインストール方法』
