山本はどのようにしてWebサイトのテキストの行間を調整するのか?

「WordPressの行間を広げたいんだけど、
 山本さんってどうやってるの?」
 

CSSという技術を使えれば簡単なお話なのですが、
それをどのように調整するのが早く分かりやすい、
ということを相談されました。

そこで私なりのやり方をお伝えしたいと思います。

どのような方法かというと、、、

 

開発者ツールを利用します。
 

すべてはウェブブラウザーで表示される

前提条件としては、どんなWebサイトであっても
最終的に見るアプリケーションは
ウェブブラウザーだということです。

ウェブブラウザーにはChromeやFirefox、
Internet ExplorerやEdgeなどさまざまなものがあります。

HTMLやCSSなどの技術を駆使して
サーバー側のデータに対してデザインを行ったとしても、
ウェブブラウザーが表示できるかどうかに
すべてがかかっているのです。

逆に言えば、ウェブブラウザー上でデザインを編集できれば
完成形を直接見ながら弄くれるので早い、とも言えますね。
 

開発者ツールとは?

開発者ツールというのは
ウェブブラウザーが持っている機能の一つであり、
まさに今お伝えしたウェブブラウザー上で
デザインを一時的に編集することができます。

ウェブブラウザーによって利用可能な機能に差がありますが、
先述した有名処のウェブブラウザーであれば
どれも似たように利用できますので、
今回はChromeを使った方法について解説します。
 

開発者ツールの使用方法

開発者ツールを表示する

Chromeの場合、開発者ツールはメニューから
「その他のツール|デベロッパー ツール」を開きます。

新しく開発者用のパネルが開きます。

◎Chromeデベロッパーツールを開く
Chromeデベロッパーツールを開く

開発者ツールで編集する

インスペクターボタンをクリックし、
調べたい要素(今回の場合は行間を調整したい)を選択すると、
対象となるHTML要素のCSSなどの構造を確認できます。CSSなどの構造を確認できます。

◎ChromeのデベロッパーツールでCSS構造を見る
ChromeのデベロッパーツールでCSS構造を見る

行間を指定するline-heightの値を変えることで、
実際の行間がすぐに変化することがわかります。

◎ChromeデベロッパーツールでCSSを編集する
ChromeデベロッパーツールでCSSを編集する

 

編集した内容を反映させる

開発者ツールの編集結果は
あくまでもウェブブラウザー上の結果を弄っただけですので、
再読み込みしたら編集した内容は消えてしまいます。

編集した結果は必ずWordPressに反映させましょう。

CSSの変更の反映は、テーマやプラグインによって設定箇所が違います。

Jetpackプラグインであれば「外観|CSS編集」で行えいますので、
ここに記述すれば良いでしょう。
※Jetpackの場合、テーマを切り替えると
 CSS編集のカスタマイズ内容が消えるので注意です

◎JetpackのCSS編集機能
JetpackのCSS編集機能
 

まとめ

今回のポイントをまとめます。

  • デザインは完成形を見ながら行うのがよい
  • Webサイトの完成形はブラウザーにどう表示されるか
  • ブラウザーで完成された表示を一時的に弄れるのが開発者ツール

いかがでしたでしょうか。

 
こういったツールを使いこなすことで、
デザインの変更などに関わる時間を大幅に短縮できます。

編集して、保存して、アップロードして、確認して、
の繰り返しよりもはるかに効率が良いですね。
 

本日の内容が良くわからない、もっと詳しく聞きたい、
代わりにやって欲しい、などの個別対応がご希望であれば、
専門の相談サービスがあります。

初回無料です。
http://concierge4u.biz/inquiry
 

【最後まで読んでくれたあなたにプレゼント】

あなたは、24時間365日、自分の代わりに集客し続けてくれるWebサイトを作りたい!と思ったことはありませんか?

私はこれまで500以上のWebサイトの構築と運営のご相談に乗ってきましたが、Webサイトを作ってもうまく集客できない人には、ある一つの特徴があります。

それは、「先を見越してサイトを構築していないこと」です。

Webサイトで集客するためには、構築ではなく「どう運用するか」が重要です。

しかし、重要なポイントを知らずにサイトを自分で構築したり、業者に頼んで作ってもらってしまうと、あとから全く集客に向いていないサイトになっていたということがよく起こります。

そこで今回、期間限定で

『10年集客し続けられるサイトをワードプレスで自作する9つのポイント』

について、過去に相談に乗ってきた具体的な失敗事例と成功事例を元にしてお伝えします。

  • ワードプレスを使いこなせるコツを知りたい!
  • 自分にピッタリのサーバーを撰びたい!
  • 無料ブログとの違いを知りたい!
  • あとで悔しくならない初期設定をしておきたい!
  • プラグイン選びの方法を知っておきたい!
  • SEO対策をワードプレスで行うポイントを知りたい!
  • 自分でデザインできる方法を知りたい!

という方は今すぐ無料でダウンロードしてください。

期間限定で、無料公開しています。

普段お使いのメールアドレスを入力し、ボタンをクリックしてお申し込みください。

メール講座『10年集客し続けられるサイトをワードプレスで自作する9つのポイント』

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です