WordPressテーマSANGOの質問

ヘッダーアイキャッチ画像の上の見出しについて

アバター
かわいち

いつもお世話になっております。
sangoにてヘッダーアイキャッチ画像を設定しております。
ヘッダーアイキャッチ画像上の見出し文が長めになってしまいスマホ表示だと見栄えが悪いため、スマホ表示の場合途中で改行するなどして表示したいと考えております。

下記サルワカの「ゼロからのPhotoshopの使い方」のトップページように、PC表示とスマホ表示でヘッダーアイキャッチ上の見出しの見栄えが変わる様に(スマホ表示の時に任意の位置で改行されるように)したいのですが、方法をご教授いただけますでしょうか?
https://saruwakakun.com/design/photoshop

お手数ですが、ご確認のほど宜しくお願い致します。

ヘッダーアイキャッチを設定する
ヘッダーアイキャッチ画像を設定しよう
コメントへの回答
サルワカくん
サルワカくん
2019/03/12

ヘッダーアイキャッチの見出しにおいて、スマホで任意の位置で改行したいということですね。
以外と簡単に実現することが可能です。

①ヘッダーアイキャッチの見出しテキストにbrタグを忍ばせる
スマホで改行させたい位置に、クラス名を持つbrタグを含めます。

スマホではココと<br class="show-only-mobile">ココの間に改行

②brタグがスマホでのみ有効になるようなCSSを追加

/*500px以上の端末ではbrを無効に*/
@media only screen and (min-width: 500px) {
  .show-only-mobile {
    display: none;
  }
}/*end max 500px*/

CSSの追加後はキャッシュの削除が必要です。よろしくお願いします。

アバター
かわいち
2019/03/13

お世話になっております。
ご確認いただきありがとうございました!
設定してみたのですが、sangoの「外観」→「カスタマイズ」→「ヘッダーアイキャッチ画像」→「見出し」欄に、ご案内いただいたを設定しても適用されずにおります。

通常の投稿ページで本文内にを仕込んだところ無事に適用されたのですが、この「見出し」欄にはタグ自体が効かない仕様になっていて設定できないということでしょうか?

何か方策があればご教授いただけますと幸いです。
たびたび恐れ入りますが、宜しくお願い致します。

サルワカくん
サルワカくん
2019/03/13

たしかver1.7のアップデートでヘッダーアイキャッチの見出しの中でタグを使えるようにしたのですが、
一度バージョンを確認してみていただけますか?
(バージョンをあげたくない場合でも少しカスタマイズすれば対応できます)

アバター
かわいち
2019/03/14

お世話になっております。
ご確認いただきありがとうございました。
バージョンが古かったようで、最新版にアップデートしたところ無事に実現できました!
大変助かりました。ありがとうございます!

サルワカくん
サルワカくん
2019/03/14

ご報告ありがとうございます。
うまくいったようでよかったです!