はてなブログの記事一覧で記事タイトルが途中で切れる場合の対処法

正直需要なさそうだけど、備忘録的なアレとして残すやつ

先日サイレント修正したんですが、うちのブログに不具合がありました

記事一覧の記事タイトルのとこ

最速プじゃねーよ！！舐めプ見たいに言うな！！

実際のタイトルは「【ポケモン剣盾】まだ迷ってるの？バージョン違いを復習、あらかじめDLして最速プレイに備えよう」ってやつ

そう、記事タイトルがぶった切られているのである

ブログは記事タイトルが命！むしろ記事タイトルがすべて！内容破綻してても記事タイトルさえしっかりしてればいいくらいだ！！（クソブログ推進委員会）

これは一大事。早速修正しなくては・・・

余計な話いらんからとりあえず解決法教えてちょって人は目次から飛んでね

お探しのページは見つかりませんでした

ということで、早速Google先生の手を借りることに

「はてなブログ 記事一覧 タイトル 切れる」っと

・・・・・・・・・

あれ・・・・・・・？

ないやんけ！！！！

サイドバーの記事一覧モジュールとか、ヘッダーとか、ブログ自身のタイトルについての対処法はあるけど、記事一覧ページでタイトルが途中で切れる場合の対処法がなーい！！！

そんな・・・じゃあこれからもぐるぽよどっとこむは間抜けな記事タイトルを晒し続けながら生きていくしかないの・・・？

そこでふと思い出した

わしSEだからHTML読めるじゃん！

手がかりを探せ

Google ChromeでF12キーを押すと、右側にこんな感じで今いるページのHTMLソースが表示されます

これはデベロッパーツールって呼ばれてるんだけど、詳しく知りたい方はググればいい感じに教えてくれる記事が見つかると思います

私は仕事で使ってるので参考にした記事とかはとくにないんだ・・・ごめんちゃい

で、ツールの左上のこのボタンを押すと、マウスカーソルで合わせた部分のソースが表示されるようになります

記事タイトルにカーソルを合わせてる状態。このままクリックすると、この状態が固定されるようになります

で、問題の記事タイトルのソースは

h1タグでentry-titleっていうクラスを使ってるってことがわかりました！

今度は自分が使っているブログテンプレートのCSSを確認します

CSSは、はてなブログのダッシュボードから

デザイン→カスタマイズ（スパナのアイコン）→デザインCSSの一番上から確認できます！

/* <system section="theme" selected="17391345971653699552"> */
@import url("https://blog.hatena.ne.jp/-/theme/17391345971653699552.css");
/* </system> */

当ブログのサンプルです

当ブログでは「マテリアルぽっぷ」というテンプレートをお借りしているので、そちらのCSSになります

2行目のカッコ内のURLにアクセスすると、文字しかないページが表示されます

これがCSSです！

さて、この中からさっき見つけたクラス「entry-title」を見つけてみましょう

CSSのページを開いたままCtrl+Fで右上に入力欄が出てきます。ここに検索したい文字を入れると今見てるページの中から入力した文字列を探してくれます！

検索した結果、3か所くらい見つかりましたが、怪しいものを発見

.page-index .enable-top-editarea .page-archive h1.entry-title,.page-archive h1.entry-title {
font-size: 120%;
line-height: 1.2;
max-height:45px;
overflow: hidden;
transform: skewX(-10deg);
padding: 0 5px;
}

max-height:45px;

貴様か・・・俺の邪魔をする奴は・・・

まっくすへいとってなに？

ターゲットにされまくってるって意味？（ゲーム脳）

ではなく、その領域の最大高さを指定したCSSプロパティです

つまり、当ブログの記事タイトル領域の高さはどんなに長い記事タイトルにしても45pxに収まる分しか表示されないというわけです

max-heightを指定しないようにするには、そもそもこのプロパティを書かないのが手っ取り早いのですが

テンプレートのCSS自体を修正することはできないので、はてなの設定から上書きすることにしましょう

max-heightを指定しないようにするには、値をnoneにしてあげれば解決します！

対処法

お　ま　た　せ

はてなブログのダッシュボードで

デザイン→カスタマイズ（スパナのアイコン）→デザインCSS

この中に

/* 一覧タイトル */
.page-archive h1.entry-title {
max-height: none;
}

こいつを追記！

やったーーーー！！！ちゃんと事前に備えられるかしこい人になったーーーーー！！！！

ということで、記事一覧の記事タイトル切れの対処法でした

はてなのデフォルトだとmax-heightの設定はたぶんないので、一部テンプレートを使用してる人しかこれで悩んだことないと思います。だから最初に需要ないだろうって言ったのね

でもブログ運営で自分で試行錯誤した出来事って大事だと思うので、記事にしてみました。同じ悩みを抱えている人の力になれるといいなー！