前にこんな記事を書きました。
複数のサイトのフィードを取得して、まとめて日付順に並べることができて、おまけにサムネイル付きで表示できる方法です。
それで、ちょっと加工が必要だな～と思ったのが「記事タイトルの長さ」についてです。記事タイトルは、長いものがあったり、短いものがあったりと、バラバラですね。記事のタイトルが長いと、下の画像のようにサムネイルが隠れて見えなくなってしまいます。
記事タイトルが長いと、サムネイルが隠れてしまいます。これは美しくない
ですので、「記事タイトルを表示させる文字数を調節」しようと思います。機会がありましたら、ご覧ください。
試しに、こうします
例えば変数「title」に、「金持ち喧嘩せず、ってどういう意味ですか？」と、文字が格納されているとします。最近、意味を調べてました。
コードを書くと、
let title = "金持ち喧嘩せず、ってどういう意味ですか？";
って感じです。この文字数を調節しましょう。JavaScriptを使って、特定の文字列の長さを指定して取得する「substr」を使って好きな場所で文字数を取得することができます。説明がヘタなので、下にいくつか例を書きます～。
サンプル
今ほど挙げた「title」に「金持ち喧嘩せず、ってどういう意味ですか？」が格納されているとします。
1．先頭から10文字
文字の先頭から、10文字分を取得します。
title.substr(0, 10);
結果
金持ち喧嘩せず、って
2．6文字目から10文字
6文字目からスタートして、そこから10文字分を取得します。
title.substr(5, 10); //先頭位置は「0」になっていることに注意
結果
せず、ってどういう意
4．6文字目から30文字
6文字目からスタートして、そこから30文字分を取得します。
title.substr(5, 30); //先頭位置は「0」になっていることに注意
結果
せず、ってどういう意味ですか？
ここで、「金持ち喧嘩せず、ってどういう意味ですか？」
は、文字数が全部で20文字ですが、30文字分指定しても大丈夫です。（表示させる文字数を大きく設定しても、結果には影響しないってことです）
まとめ
というわけで、長いタイトルをわざわざ全て表示する必要はない場合もありますので、「substr」を使って文字数を調節することで、意図した表示エリアにピッタリと文字を埋めることができるので、僕は結構使います。
参考リンク
substrについて、もっと詳細に理解をされたい方は、こちらで勉強できます。
PHPなど他の言語でも、この文字の長さを調節する方法はありますが、今回はJavaScriptでやりました。
何かのご参考となれば幸いです。
おまけ：金持ち喧嘩せずってどういう意味ですか？
例文として使いましたけども、気になる方は！
金持ちは損得に敏感で、喧嘩をすれば損をするので、他人と争うことはしない。
また、有利な立場にある者は、細かいことにこだわらず、ゆったり構えているということ。
「喧嘩して勝っても負けても何もいい事はないって金持ちは知っているから、そもそも喧嘩をしない」っていう解釈をするほうが自分的にはシックリきます。
なるほどですねぇ～。
このページを共有する