トップページ記事一覧のタイトル幅を統一してみた。【QooQ】｜Bloggerカスタマイズ【備忘録】

　テーマ（テンプレート）QooQはトップページが2種類あり、ダウンロード時にリスト表示と大きなサムネイルのエントリ毎で表示が出来るものとが選べます。自分の使いたいタイプのテーマをダウンロードして使用するのですがtonbori堂はエントリ毎に表示されるタイプを利用しています。

ソース｜シンプルで速い日本語bloggerテンプレート「QooQ」の紹介！

そのエントリ毎に表示される場合タイトルの長さによってそれぞれタイトルボックスが可変するので、デフォルトは一行表示なのですが長いタイトルだと2行から3行になってしまいます。どうにもすわりがよくないのでのでどうにかしたいなという事でQooQのカスタマイズ記事を検索してみました。

画像はイメージです｜100万点以上の高品質なフリー画像素材 - Pixabay

でこちらのエントリを発見しました。

【Blogger/QooQ】トップページの一覧に表示される記事のタイトルの長さを固定値とする-勉強でもするか

プゥ二郎さんのブログ「勉強でもするか」のカスタマイズについてのエントリです。早速やってみると…変わらない。な訳でテストブログで延々と弄ってやっと原因が分かりました…。無茶苦茶簡単な事だったんですがまったく気が付かずここまでくるのに2カ月もかかってしまったのです。まあ素人のトライ&エラーとしてお聞きください。

タイトルボックスの長さを変更する

　QooQのデフォルト状態ではこのような感じになっています。

QooQデフォルト時のスクリーンショット。（テストブログ）

　作業はプゥ二郎さんのエントリの記載どおりにHTMLの編集からCSSの数値と記述の変更でタイトルボックスの長さを固定し変更する事が出来ます。ダッシュボード画面からテーマ→HTML編集、そしてctrl+Fで『.list-item-title』を検索し以下のコードを記述し保存します。当然バックアップその前にはお願い致します。HTML編集に入る前に右上にあるバックアップ/復元ボタンから現在のテーマをダウンロードです。それが済めばHTMLをクリックして編集画面へ進んでください。

コードは以下の通り

.list-item-title{
 margin-top: .5em;
 font-weight: bold;
 line-height : 20px;<====追加
 height : 60px;<====追加
 overflow:hidden;<====追加
}

追加部分がタイトルボックスの固定のための数値です。そして、そこでtonbori堂大きな間違いをしてしまったのです。

コピペ

　このコードを普通にコピペしてしまったのが間違いの始まりでした。エントリではCSSのスタイルコード表示に日本語で「<====追加」の注釈が入っていたんですがそのままコピペして貼り付けたのです。ウェブ側では<====が意味のない文字列して判定し、そのCSSを受け付けないのでその表示はされないとなって、そんな簡単な事なのに気が付くまで全然そこを直すという事が思いつきませんでした😅

理由その１、

　QooQは日本語対応でHTMLやCSSの各アイテム箇所にカスタマイズしやすいように日本語表示があります。これはHTMLやCSSのスタイルシートの変更箇所が分かりやすいように日本語で項目を制作者様の好意で入ってるのですが、それを見て日本語が入っていてもコードは動くと勘違いしていた事。実際には日本語入ってても問題はないけれど矢印部分が半角英数字のため無意味な文字列として判定されていたようです。

理由その２、

　コピペ時に文字ぞろえがガタガタになるのでそこが問題ではないかと思ったこと。そのままコピペすると列が崩れるので一列になるように揃えてみたのです。当然追加の文字列が残ったままなのでそのスタイルシートが効くはずもなく頭をかしげるばかりになりました。

　これで詰まってしまって😅素人の思い込みと、あと深夜にしか作業できないから結構遠回りをしてしまいました。そのあとCSSのトラブルシューティングのブログエントリを読みまくりましたが、それでも原因特定に至らない日々が続きましたが、別件で探していた事で見つけたエントリでCSSの説明でHTMLの記述はコードの文字の大文字小文字を間違えないようにとあった事から、急にコードの追加という所はいらない部分じゃないかと。そのままコードとして判断され意味の無い文字列として処理されているんじゃと急に思いつきました。まあよくも関係ない記事からそこに気が付いたなと我ながら思いましたけど、てかもっと早く気が付け自分😓

で削除して見ると…あっさり意図したとおりの表示になったという

変更後のスクリーンショット（テストブログ）

　結構手間がかかりましたが殆ど自分の思い込みだけでの失敗でございました(^^;それでテストブログで成功したのですが、いざ自分のブログで変更したものを見てみると3行固定ではちょっと長すぎるので、2行固定に数値を変更して保存しました。これでスッキリした感じになったと思います。

 height : 40px;　<=====変更前は60px;

このタイトル固定は好みで1行も出来ますしタイトルの長さの平均を見て決めても良いのではないかなと思います。タイトルボックス固定は　height :の数値で変更できます。

40pxで固定変更後のスクリーンショット。グレーのラインは分かりやすくするために入れたもの。（本来は入っていません）

最後に

　私の場合は自己解決出来たんで事なきを得ましたがそうでない場合もありますよね。その場合は例えば参考にしたブログさんのコメント欄が開放されているなら質問するとかも有りだと思います。また暫く放置しておいて原因を一つ一つ潰していくというのも。自分にあった方法でトラブルを解決してみてください。