表示の崩れない文字の背景の設定方法

案外大掛かりな改造となりますが、イケルでしょうか…ちょっと心配な点もあるのでそこらを解説してみたいと思います。さほどでもないのですが、慣れていない人にとってはちょっと聞き慣れない言葉も出てくると思いますが色々調べてみて下さい。

簡単な方法で言うとh2に幅をもたせればよいのですけれども、あまりレスポンシブではないんですよね。またメディアクエリでそれぞれのブレイクポイントごとに設定が必要になったりして、それはそれで大変です。

まず、注意すべきこととして、親テーマのアップデートでカスタマイズした内容が消えてしまわないように注意して下さい。

親テーマentry-card.phpのclass=”entry-content”の下にある「h2〜閉じh2」までをid=”post”なんちゃらとclass=”entry-thumb”の間に持っていきます。元に戻せるように、「h2〜閉じh2」はコメントアウトしておいてコピっても良いかも知れません。コメントアウトは以下みたいな感じで。

<php /* <h2>なんちゃら</h2> */ ?>

次に、閉じh2をclass=”entry-content”の手前に持ってきます。これで構造的には、

<h2>
  <div class="entry-thumb"></div>
  <a href="">h2の元々のテキスト</a>
</h2>

こんな感じになり、実際には、

このような感じになります。

これで準備はできました。後はcssだけです。

.entry h2 {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.entry h2 .entry-thumb {
  float: none;
  flex: none;
}

.entry h2 a {
  background-color: #f00; /*好きな背景色*/
  flex: 1 auto;
  word-wrap: break-word;
  /*その他諸々*/
}

これを適用させます(※)。

※ ベンダープレフィックスはつけてません。これだとおそらくPC版ChromeとFirefoxぐらいしか対応できないと思います(最近のスマホはいけるかも)。Androidやsafari向けに-webkit-等のベンダープレフィックスも追加するようにして下さい。
例) display:flex -> display: -webkit-flex;
flex: 1 auto -> -webkit-flex: 1 auto等

これらの部分はnarrow.cssやmobile.cssが効いている箇所なので、マージンやパディング等重複したスタイルが飛び交っています。なので、子テーマstyle.cssに、

@media screen and (max-width: 440px){
  /*ここに上記のcss*/
}

こういうのを入れて(追加して)最大幅が440px以下はプロパティを適用するなどの工夫が必要です。また必要のないプロパティはそれを打ち消す書き方をしないといけないかも知れません。最悪、適用したくないcssのスタイルをコメントアウトとか（笑）

ちなみに.entry h2で flex-flowにて、row nowrapを指定しているので、幅が狭くなった時.entry h2 aのテキストがaからはみ出るのを防ぐため、.entry h2 aでword-wrap: break-word;を設定しています。狭くなった時と言っても200px以下とかなのでまぁ大丈夫かと。
flex-flow: row nowrapは、横並びでコンテナの要素に収まるように中の要素の幅を自動で設定するのですが、中の要素が並びきらなかった場合ははみ出ます(折り返しません)。

また、.entry h2 aにalign-self: flex-start;を入れれば、きっとイメージされているものに近づくのではないかと思います。
更に、メディアクエリで、max-width: 440pxと指定した場合はその幅までなので、タブレットなどのそれ以上の場合はまた設定が必要になるかも知れません。@media screen and(max-width: 1024px){…}とか。

注意点として、flex-boxは多くの新しいブラウザが対応しているとは言え、まだ確定された仕様ではないのでベンダープレフィックスをつけなくてはいけません。
仕様や詳細は、 コリス: 最新のドラフトに準じた CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説で確認しておいて下さい。

くれぐれも親テーマのアップデート等で泣かないように、バックアップは取るようにして下さい。