トップ一覧表示でタイトルが一行で納まらない場合は省略する

トップページの一覧表示で長いタイトル名が数行で表示されると、図が切れてしまう。

タイトル名よりも図で識別性・視認性を保ちたいので、1行に納めて省略することにした。

https://gyazo.com/f939bd95db52430c8d29221d45305231

code:style.css

.grid li.page-list-item a .header .title {

/*　フォントはお好みで　*/

font-family: "M PLUS Rounded 1c", sans-serif !important;

letter-spacing: -0.05em;

font-size: 13px;

padding: 0;

width: 105%;

display: inline-block;

margin-left: -0.3em;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

/* 下線付けるのもありかな？ */

box-shadow: 0 2px 0 rgba(0,0,0,.13);

}

/* ホバーしたら省略せずにタイトルを全部表示する　 */

.grid li.page-list-item a:hover .header .title{

white-space: normal;

overflow: visible;

font-size: 14px;

box-shadow: none;

}

hover アクションを追加した。

タイトルのアンダーラインが消えて

省略無しで全部表示されて

ちょっと字が大きくなって

ピクッとする

ランチャーのスタンバイっぽくて良いのでは？

UserCSS.icon