どうも。
最近PLAYERUNKNOWN'S BATTLE GRUNDS
っていうオンラインゲームが流行っています。
オンラインフィールド内で、最大100人のプレイヤーが島内にある武器や防具などを駆使して最後の1人になるまで戦い抜くバトルロワイヤル的なPC向けゲームです。
参戦したいのですが、PCのスペックがかなり高めでないと操作性が悪いそうで、現在使用しているPCのスペックでは物足り無く、プレイ出来ません。
グラボぐらい買い換えようかなと思っていますが、グラボに高額¥を払うなら、XBOXの新しいモデル(SCORPIO)を待つとして、今は実況動画を見て我慢しましょう。
さて、VASTER2ですが、もう少しいじってみましょう。
目立つ所では、トップページの記事一覧スニペット（本文要約）とサイドバーの人気記事のスニペット（本文要約）が表示行数の制限を超えて表示しまうようです。
✱当ブログはサイドバー人気記事のスニペットは表示無しにしています。
この表示の部分、Vaster2ではline-clampと言うプロパティを使いコントロールしています。
このプロパティは文字サイズ、表示文字数がPC、スマホなど表示する端末によって変わってしまう場合にでも指定した行数で表示して続きがある場合、3点リーダー'…'を入れることが可能な簡単便利なプロパティです。
line-clampプロパティを使用する場合は、box-orientを一緒に使う必要がありますが、コレらプロパティは'-webkit-'系のブラウザのみとなっています。
つまりms系やFirefox等のブラウザには対応する事が出来ません。
なので、PCで使うMS系やFirefoxでの表示を考えるとfont-size☓行数=heightとして記述する必要があります。
ただし、その場合line-clampで指定した桁数とheightで指定した桁数が同じにする必要があります。
line-clampで指定した桁数以上にheightの領域がある場合、line-clampの指定行数で'…'が表示され残りの領域ぶんテキストが続きます。
最近PLAYERUNKNOWN'S BATTLE GRUNDS
っていうオンラインゲームが流行っています。
オンラインフィールド内で、最大100人のプレイヤーが島内にある武器や防具などを駆使して最後の1人になるまで戦い抜くバトルロワイヤル的なPC向けゲームです。
参戦したいのですが、PCのスペックがかなり高めでないと操作性が悪いそうで、現在使用しているPCのスペックでは物足り無く、プレイ出来ません。
グラボぐらい買い換えようかなと思っていますが、グラボに高額¥を払うなら、XBOXの新しいモデル(SCORPIO)を待つとして、今は実況動画を見て我慢しましょう。
さて、VASTER2ですが、もう少しいじってみましょう。
IE 、Edge、Firefoxで上手く表示されない箇所の原因
Vaster2はchromeやSafari、スマホ等のブラウザでは申し分の無い表示なのですが、マイクロソフト系PCブラウザのInternetExplorer、Edgeは対応していないCSSプロパティを使っている為、表示に多少バラツキが出てます。目立つ所では、トップページの記事一覧スニペット（本文要約）とサイドバーの人気記事のスニペット（本文要約）が表示行数の制限を超えて表示しまうようです。
✱当ブログはサイドバー人気記事のスニペットは表示無しにしています。
 |
| Edgeでの表示。赤枠内がはみ出た部分です。 |
このプロパティは文字サイズ、表示文字数がPC、スマホなど表示する端末によって変わってしまう場合にでも指定した行数で表示して続きがある場合、3点リーダー'…'を入れることが可能な簡単便利なプロパティです。
line-clampはwebkit 系ブラウザのみ
line-clampプロパティは指定行数でtextを省略をして最後に3点リーダー'…'を表示させていますが、ブラウザによってはこのプロパティが対応していないのです。line-clampプロパティを使用する場合は、box-orientを一緒に使う必要がありますが、コレらプロパティは'-webkit-'系のブラウザのみとなっています。
つまりms系やFirefox等のブラウザには対応する事が出来ません。
なので、PCで使うMS系やFirefoxでの表示を考えるとfont-size☓行数=heightとして記述する必要があります。
line-clampとheightの同時使用
同時に使用すればMS系やFirefoxでも桁数を制御する事が出来るようです。ただし、その場合line-clampで指定した桁数とheightで指定した桁数が同じにする必要があります。
line-clampで指定した桁数以上にheightの領域がある場合、line-clampの指定行数で'…'が表示され残りの領域ぶんテキストが続きます。
変更箇所
.snippetがトップページの記事一覧のスニペット（本文要約）部分になります。- Bloggerの左側メニュー＞＞テーマ＞＞HTMLの編集と進み、CSS内の.snippetの部分を探します。（HTML編集画面でCtrl＋fで.snippetを検索。）
- 以下の通り height : 5.6em; を追加します。
.snippet{
overflow: hidden;
font-size:14px;
padding:0 !important;
color:#888;
margin-top:7px !important;
margin-bottom: 5px;
line-height:1.4em !important;
word-break:break-all;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
height : 5.6em; <===追加 1.4em×4行数
}
overflow: hidden;
font-size:14px;
padding:0 !important;
color:#888;
margin-top:7px !important;
margin-bottom: 5px;
line-height:1.4em !important;
word-break:break-all;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
height : 5.6em; <===追加 1.4em×4行数
}
- 保存してEdgeで表示すると以下の通り、4行で表示となりました。
が、3点リーダーは表示されない様です…
 |
どうしてもMS系やfoxにも対応させる必要があるのであれば変更しますが、今回は適用するかわかりません…
Edge,IE userって減少傾向の様ですし。
また、以前変更したトップページの画像につあても潰れたままですし。（object-fitが効いて無い）
今回は一応対応出来なくもないレベルの覚え書き程度としましょう。もっと違うやり方もあるかも知れませんし。
簡単に行数が指定出来るプロパティline-clampですが、まだ制限があるので今後の改定に期待される機能かもしれませんね。
いや、MS系が対応すればいいだけなんですけど。
