ブログの文字間隔を調整しよう！
文字間隔によって、読みやすさが変わるニャンぞー！
上がデフォルト(規定)の幅ニャンぞー
下がちょっと幅を広げてみたニャンぞー
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音響化したもの。
どんな感じニャンぞー？
おぉー。ニャンぞー先生やるではないか！
手順
- CSSコードを書く
- 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>
プレビュー画面で確認して、いろいろ試してみてください！
