STORK(ストーク)での行間・改行幅・段落幅の変更方法

どうも、リュウセイです!

 

STORKを使っているが、行間が広すぎてなんだか記事がスカスカに見える…。もう少しギュッと詰めたいのだけど、どうやればいいのかな?

 

今回はこのようなお悩みに答える形で、WordPressテーマ「STORK(ストーク)」における行間・改行幅・段落幅の変更方法について書きます。

 

まず、行間・改行幅・段落幅が具体的にどこの幅を示すのかを確認しておきましょう↓

 

 

図を見る通り、行間と改行幅は基本的に同じになります。

 

なので、幅の編集は「行間と改行幅」のセット、段落幅は別で指定という形になります。

 

 

STORK(ストーク)での行間・改行幅・段落幅の変更方法

 

まずやっておくこと

 

ブログデザインをいじる時は「テーマエディター」からファイルを編集する必要があります。

 

今回の場合は「スタイルシート(style.css)」を編集していきます。

 

今からその方法について書いていきますが、ちょっとその前にやることがあります。

 

それは何かと言うと「バックアップを取る」ことです。

 

テーマの編集は、失敗するとブログそのものが真っ白になってしまう危険性があるので、万が一に備えて編集前にバックアップを取っておくのが一般的です。

 

今お使いのバックアップ用プラグインで最新のバックアップデータを取るようにしましょう。

 

おすすめは「UpdraftPlus」で、これについて書いた記事があるので良ければそちらも合わせてご覧ください。

 

バックアップデータが重い場合は「UpdraftPlus」を使おう

 

編集するコードを親テーマのスタイルシート(style.css)から見つけよう

 

STORKの場合、親テーマの「stork」と子テーマの「stork_custom」があると思います。

 

編集する方は子テーマの「stork_custom」になります。

 

なぜかと言うと、WordPressテーマの仕様として、テーマのアップデートがあるとコードが初期化されるため編集した分も全て元通りになるからです。

 

子テーマは親テーマと違ってアップデートがあってもコードは初期化されないので、親テーマが上書きされても子テーマには影響がありません。

 

なので、コードの編集は基本的に子テーマで行っていくことになります。

 

メモCSSの仕様として「一番下に書かれてあるコードが優先的に反映」されるため、コードを追記する時は一番下に記述していくということも合わせて覚えておいてください。

 

STORKの子テーマは何も編集していない場合、このようになっていると思います↓

 

 

見て分かると思いますが、STORK子テーマのスタイルシートはスッカスカの状態です。

 

なので、まずは右上の「編集するテーマを選択」から「stork」を選択して、親テーマの中から編集対象のコードを見つけていきます。

 

切り替えると、一番上にある「スタイルシート(style.css)」が開きます↓

 

 

ここに書いてあるCSSによって、今のブログのデザインが構成されています。

 

余計なところをいじるとデザインが崩れてしまうのでそこは気を付けるとして、この記述の中から行間や段落幅を指定している下記のCSSを探していきます。

 

.entry-content p {
margin: 0 0 1.6em;
line-height: 1.75;
}

 

ですが、4468行にも渡ってCSSが記述されているので、この中から探すのは大変ですよね…笑。

 

そこで使うのが「検索のショートカットキー」です。

 

下記を参考にして検索モードを立ち上げましょう。

 

  • Windows:Ctrl + F
  • Mac:command(⌘) + F
  • Chrome OS:Ctrl + F

 

ショートカットキーを押すと右上に検索窓が出現すると思うので、そこに「.entry-content p {」と入力してください。

 

そうすると、検索した対象がオレンジ色(Windowsの場合)になって表示されるので、一発でコードの場所が分かります↓

 

 

編集対象のコードは「1828~1831の行」にあることがこれで分かりましたね(デフォルトでは1163行目にあるそうなので、僕だけかもしれません笑)。

 

コードが見つかったので編集を行っていきましょう。

 

「margin」が行間・改行幅、「line-height」が段落幅を指定しているコードになります。

 

marginなら「1.6em」、line-heightなら「1.75」の数値を変更すれば、それぞれの幅を変更できます(デフォルトの設定)。

 

数値を大きくすると幅が広くなり、小さくすると幅が狭まります。

 

僕は「margin: 0 0 0.5em;」「line-height: 1.6;」で指定しました。

 

ここはお好みなので、自分に合った改行幅を探してみて下さい。

 

子テーマにCSSを記述しよう

 

先ほども書いたように、テーマのアップデートの度にコードは初期化されるため、コードの編集は子テーマで行うのが基本です。

 

コードの編集は、親テーマと子テーマがある場合には子テーマの方が優先されます。

 

親テーマのスタイルシートの内容を全て子テーマに貼り付ける必要はなく、編集したコードだけ貼り付ければOKです↓

 

 

やり方はおまかせしますが、「コードの編集は子テーマで行う」ことは覚えておいてくださいね。

 

そして、コードを編集したら最後に必ず「ファイルを更新」をクリックして変更内容を保存してください。

 

 

まとめ

 

以上、STORK(ストーク)での行間・改行幅・段落幅の変更方法でした。

 

繰り返しですが、コードの編集は慎重に行うように!

 

作業前にはバックアップを取るか、またはテキストエディタにコードをまるっとコピーして保管しておくのも一つの手です。

 

それと、コードの編集は子テーマで行うと作業が無駄にならずに済みます。

 

是非、自分にあった改行幅を見つけてみて下さい。

 

それでは、今回はこのへんで。

 

ありがとうございました。

 

チャオ(・∀・)!

コメントを残す

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