blogger海外テンプレートを使ったら、サムネイルの文字の省略がうまくいかない時の対応方法

おすすめ記事ピックアップ

bloggerの海外テンプレートを使用すると、サムネイル等の文字の省略がうまく行かないことがあります。全部省略されてしまったり、なぜか省略されなかったり・・・。

英語環境の場合、単語の間に半角スペースが入りますので、それをカウントしたり認識するプログラムで省略されることが多いようです。日本語だと半角が入らないので、うまく省略されなくなります。30文字ぐらいで省略されるべきなのに、まったく省略されなかったりします。

使用するテンプレートにより、プログラムが違いますので原因も異なりますが、解決の参考になれば幸いです。省略する文字数を減らしたり、半角スペースを調整することで解決できることが多いです。

こんな感じに省略されないことも

まずHTMLコードのどこかに、サムネイルで表示される文字を省略するコードがあります。それを見つける必要があります。「length」や「var」に数字が書かれていることが多いです。

実例として問題をあったテンプレートのHTMLがこちらです。「 var summary = 27 」というコードが、26個の半角スペースを認識して、省略を入れるための設定数字になっています。日本語だと26個も半角スペースが入らないので、省略されませんでした。

多くの場合、省略に使われている「...」が、コードの近くにあったりします。略に使われている文字「...」をコピーして検索して、「length」や「var」が書かれている数字をチェックしてみましょう。

「...」で検索、上にスクロールしてゆくと・・・・

それっぽい数字が出てきました。こういった感じで見つけます。

当然、省略するコードは、制作する人によってすべて異なります。例えば、半角スペースだけを単純にカウントするものもあれば、一定文字数を超えた場合で1個目の半角スペースで省略するなど、省略方法が異なります。

それでも多くの場合は、例えば1個めの半角スペースで省略するように設定したり、記事内の丁度良い所に意図的に半角スペースを入れることで解決できたりします。

もしくはエディターにある「more」タグ（紙が切れたようなアイコン）を入れると、そこから省略されるようになることもあります。うまく行かないこともあります。またサムネイルに使用される1枚めの画像よりも前に、「more」タグを入れると、サムネイル画像が表示されなくなります。画像とテキストのバランスを見て、moreする必要があります。

ケースバイケースなので、参考になれば幸いです。お気軽にご相談ください。