アイキャッチ画像

【超簡単!】ブログの文字間隔を調整する方法!

 

 

ブログの文字間隔を調整する方法!

 

 

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>

 

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

 

アイキャッチ画像
最新情報をチェックしよう!
>最高のコスパ「ロリポップ!サーバー」

最高のコスパ「ロリポップ!サーバー」

当サイトで実際に導入し、運用中。
【安さ】【使い易さ】【信頼性】【知名度】を総合的に判断、不満なし。
迷ったらロリポップ!で失敗なし。
当サイトは「サイト・ブログの開設、運営」をサポートします。
→ お問い合わせはコチラから
→ サイト・ブログの開設手順はコチラから

CTR IMG