STORK(ストーク)でTOPページ画像内の文章を改行する方法【STORKの使い方】

STORK(ストーク)でTOPページ画像内の文章を改行する方法【STORKの使い方】

こんにちは。うめです。

私も使っている、WordPressの人気テーマ「STORK(ストーク)」のTOPページのメイン画像に表示する文章を簡単に改行する方法をご紹介します。

TOP画像内の文章って?

WordPressの人気テーマ「STORK(ストーク)」ではTOPページに大きな画像を配置できます。

storkのTOP画像

そして、その画像の中には好きな文章を設置できるんです。

好きな文章をTOPページに入れられる

ただこの「好きな文章」を入れられる部分、

ただ文章を入れたままだとちょうどいい位置で改行されないんです。

今回は、好きな位置で改行し、文字の大きさなども変える方法をご紹介します。

文章設定場所(カスタマイズから)

まずは文字の設定方法から。

①ダッシュボードの「外観」から「カスタマイズ」をクリック

ダッシュボードから外観、カスタマイズの順にクリック

②「トップページ設定」をクリック

トップページ設定をクリック

③表示したい文章を入力

英語表示テキスト(大テキスト)」と「日本語表示テキスト(小テキスト)」という部分に文章を入力していきます。

英語表示テキストに入力すると「2.3em」の大きな文字が表示され、日本語表示テキストに入力すると、英語表示より小さめの「0.8em」の文字が表示されます。

文章を入力

この部分に何も表示しない状態だと、TOPページの大きな画像自体が表示されません。

何も入力しないと、なにも表示されない

④完成!でも…

表示したい文章を入れて、完成!と思いきや、横に一文すべて表示している状態では読みづらいですね。

下の小さな文字も予期しない位置で改行されています。

完成?でも読みづらい

ここから、本来の目的である、この部分の文章を簡単に改行する方法をご紹介していきます。

改行する方法

改行する方法は実はすごく簡単です。

改行したい位置に「<br>」を入れるだけ!

こちらは入力している文章の例です。これをそのまま「英語表示テキスト」部分に入力すると、下の画像のように改行されます。

例で入力している大きな文字の文章
どこにでもいるOL<br>目指せ月収100万円
例で入力している小さな文字の文章
WEB・ゲーム・旅行・読書(漫画を含む)が大好き。<br>取り得は『あきらめないこと』だけ。の<br>どこにでもいるOL「うめ」が月収100万円を目指すお話
改行した状態

これで改行は完成です。左上の「公開」ボタンを押したら公開されます。

この部分がこの「<br>」が効くように対応されているテーマって、あまり多くないので、STORKを作った方の細かな心配りを感じますね~♪

ただ、「英語表示テキスト(大テキスト)」とあるように、この部分は本来英語をかっこよく表示できるようになっています。

なので、日本語を書くと、ちょっとバランスが悪く見えてしまうんですよね…。なので、私は文字の大きさ、太さと行間を変更しています。

その方法もご紹介しますね♪

文字の大きさなどを変える方法

文字の大きさを変える方法は、テキスト入力部分に書いたテキストに「style」の直書きと強調の<strong>タグで文字を囲むことで可能です。

設定するstyleは、<span>タグに書きます。

指定しているのは、行間を指定する「line-height」と、文字サイズを指定する「font-size」。

そして太文字にしたい部分を<strong>タグで囲むと、画像のようになります。

例で入力してある内容
<span style=”line-height:1.5em; font-size:0.85em;”><strong>どこにでもいるOL<br>目指せ月収100万円</strong></span>
文字の大きさ、太さ、行間を指定した状態

書いてあるのは、
行間:1.5em
文字の大きさ:0.85em
と書かれていて、<strong>~</strong>で文章を囲ってあります。

これで公開をクリックすれば完成です!

完成見本↓↓

完成見本

いかがでしたでしょうか。WordPressテーマ「ストーク」 をご利用されている方は是非試してみてください。