[Wordress]一定の文字数をオーバーしたら、文字のサイズを変更するようにカスタムしてみたよ。

Tweet
トップへ

Hello World with a Big Smile (^^) @conchikuwaです。

ブログのデザインをリニューアルしてからというもの、カスタムしたり、崩れを直したりするのが楽しくて仕方ありません。元々花屋の前はSEさんをやっていたので、こういう作業は好きなのかもしれないです(^^♪

僕の記事タイトルがちょっと長いって事もあって、ブログのレイアウトと崩れた部分があったので、ちょこっと修正してみました。今回はその方法を備忘録がてら纏めてみようと思います。

ブログのリニューアルでインデックスページ、いわゆるトップページのデザインをBOX型の一覧タイプに変更しました。BOX型の一覧タイプはBOXの幅や高さが揃っていれば綺麗なんですが、ちょっとでもずれていると違和感がでてきます。

BOXにはアイキャッチ画像、記事タイトル、更新日付、カテゴリを表示させているんですが、記事タイトルが長いと、下にBOXが伸びてカッコ悪くなってしまいます。

▼ こんな感じで。

まぁ記事タイトルを長くしなけりゃいいんですが、そこに気を使うのも面倒なので、記事タイトルが一定の文字数をオーバーしたら、文字サイズを小さくする事で対処してみました。

やり方は簡単で、↓のようにmb_strlenを使って文字数をカウントして、CSSを切り替えるようにカスタムしました。

&lt;!-- タイトルも文字数が多い場合、フォントサイズを90%に変更 start --&gt;
&lt;?php
if(mb_strlen($post-&gt;post_title)&gt;73) { echo '&lt;h1 class=&quot;entry-title&quot; style=&quot;font-size:90%;&quot;&gt;' ;
} else {echo '&lt;h1 class=&quot;entry-title&quot;&gt;';}?&gt;
&lt;!-- タイトルも文字数が多い場合、フォントサイズを90%に変更 end --&gt;