注目キーワード
  1. 体験談
  2. ブログ開設
  3. 仕事
アイキャッチ画像

<-WordPress->ブログの文字間隔を調整する方法!超簡単!

ブログの文字間隔を調整しよう!

文字間隔によって、読みやすさが変わるニャンぞー!

上がデフォルト(規定)の幅ニャンぞー

下がちょっと幅を広げてみたニャンぞー

TVアニメ『この音とまれ!』箏曲生演奏が、WOWOWとソニーイメージングプロダクツ&ソリューションズの共同制作によりVR&3D音響化。YouTube WOWOW officialにて公開された。作中の演奏シーンなどで実際に演奏しているプロの箏奏者が、アニメ第1クールのOPテーマ「Tone」を生演奏。ソニーIP&Sの技術協力のもと最先端の映画製作カメラでその様子を撮影し、WOWOWの持つ最新鋭3Dオーディオ技術で音響収録してVR&3D音響化したもの。
TVアニメ『この音とまれ!』箏曲生演奏が、WOWOWとソニーイメージングプロダクツ&ソリューションズの共同制作によりVR&3D音響化。YouTube WOWOW officialにて公開された。作中の演奏シーンなどで実際に演奏しているプロの箏奏者が、アニメ第1クールのOPテーマ「Tone」を生演奏。ソニーIP&Sの技術協力のもと最先端の映画製作カメラでその様子を撮影し、WOWOWの持つ最新鋭3Dオーディオ技術で音響収録してVR&3D音響化したもの。

どんな感じニャンぞー?

おぉー。ニャンぞー先生やるではないか!

手順

  1. CSSコードを書く
  2. HTMLコードを書く

 

CSSコードを書く

 

CSSコードを書く

ボックス枠を作って、その中の文字間隔を調整するコードを説明しましょう!

下のCSSコードを「style.css」へ記述(コピペ)して保存してください。子テーマのスタイルシート(style.css)があればそこに書きます。


.box {
 margin: 2em auto;
 padding: 1em;
 width: 90%;
 letter-spacing:0.1em;/*文字の間隔*/
 border: 1px solid #ccc; /* 枠線 */
 background-color: #fff5ee; /* 背景色 */
 box-shadow: 1px 1px 2px #ccc;
}

文字間隔を調整するのは、 letter-spacing:0.1em;/*文字の間隔*/ の部分です。 この数値を変えることで、文字間隔が変化しますので調整してみてください。

単位は「em」や「px」などありますが、読者の表示環境(ブラウザなど)に影響される場合もあるとのことなので「em」を使用しています。

 

 

HTMLコードを書く

 

HTMLコードを書く

WordPressのテキストエディタで、下のコードを記述してください。


<div class="box">ここに文字を書く。</div>

 

プレビュー画面で確認して、いろいろ試してみてください!

 

アイキャッチ画像
最新情報をチェックしよう!