Top Page › Template › カスタマイズ › ブログカード概要文の長さを調整する

2020 · 05 · 01 (Fri) 02:27

ブログカード概要文の長さを調整する

遅れ馳せながら、最近ブログカードというものを使い始めました。^^;
カスタマイズし易くて何より描画が早い…そういうものを探すとこちらの使い勝手が一番です。(個人的に(^o^)丿)
The other way round - Akira様 -
詳しくは先ず、↓こちらをお読み下さい。

ブログカードのブックマークレットを作成しました

SSL化後の悩ましい作業のひとつ ブログカード
これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・`)
画像や記事概要など、必ずしもOGPに従っているわけではないもので。かといって はてなブログカード はSSLに対応できてないですし。
* 2018年現在ではSSL対応しています。...


1) CSSが別になっているので、自身でのカスタマイズがし易い。
シンプルなままの見た目も素敵ですが、ブログのテーマに合わせてフォントや色調・サイズ、CSSで動きを付けたり等、独自のカスタマイズが簡単に出来ます。

↓カラフルで動きの有るカスタマイズは是非こちらへ。

Webテク倉庫

FC2ブログのレスポンシブテンプレートで初級Webテクニックを分かり易く解説するブログです。

↓他とは違う、ブログカードのカタチを求める方へ。

弊ブログ提供ブログカードのデザイン提案

デザインカスタマイズについてのご相談がありましたので、いくつか準備してみました。...


2) 使用がFC2ブログだけでは無く広範囲で利用可能。
但し、どのブログカードでも同じですが、OGPの設定は必須です。

3) そして何より記事内スクリプト不使用で描画が早い!
出力されるHTMLで記事の概要文の文字数を調整し易い。

この度のカスタマイズは3)の『概要文の文字数』を調整するものです。
HTMLで出力された文字をエディター上で削除して調整するのが(読み込み・表示、負荷を考えると)一番良いのですが、ページ内に複数表示されるブログカードの高さを揃えたい、多過ぎて作業が大変、等の場合にご利用下さいませ。



↓文字列のデフォルトスタイル(brを削除した場合。背景画像は別。m(__)m)
概要文として抽出された文字列が全て表示されています。

Stay Home です。

GW…、皆さまはお家で何をして過ごしてますか?出掛ける予定の無い私は、過去に遡ってのブログ記事修正と、まだまだ手に入れ難いマスクを手作りしています。↓こんなの。(^-^;ガーゼのハンカチとゴム紐…が無かったので耳が痛く無さそうな毛糸、とコードストッパーで出来ています。意外と可愛い。(*´▽`*) 特にコードストッパーがコロッとしてて色もアクセントとしてGood♪因みに旦那さん、会社に(受け狙いで?)していったら「可愛く...




① スタイルシートで『行数超えたら非表示』
必ずブログカードのデフォルトCSSをスタイルシートに加えてから、最下に追加して下さい。
ブログカードのブックマークレットを作成しました - The other way round -

久し振りの猫通信。(=^・^=)

推定昨年5月生まれ、同12月中旬にうちの子になった益々やんちゃな猫一年生の『千満喜』もドンドンと太ましくなり(^-^;、本日爪切りに動物病院に行った際に測った体重は3.9kg!先月の爪切り時より100gも増えていました。うちに来たばかりの時は3kgだったから…これって太らせ過ぎ?先生にも「これ以上(の増加)は注意しましょう。先ずはおやつの量や回数を減らして下さい。」との指導有り。(-_-;)先住はなちゃん(年齢不明5.6kg)は...

.blogcard-description {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
max-height: calc(12px * 1.55 * 3);
overflow: hidden;
}

値の部分の『 3 』が行数です。これを超える行は非表示になります。
webkit系のブラウザでは文末に三点リーダーが表示されますが、FirefoxやIE等では表示されません。
CSSは【 弊ブログ提供ブログカードのデザイン提案 - The other way round - 】 提案見本の概要文ルールセットを参考に掲載させて頂きました。m(__)m





② JavaScriptを使って『文字数制限』
記事の概要文を100文字表示し、あとは非表示にします。

youth_resp のカスタマイズ(トップ画像変更)

前記事から引き続き、テンプレート youth_resp 2c,3c のトップ画像の変更方法です。お気に入りの画像に変更する事で、他には無い 自分だけのブログになります。(趣味やペットブログ等にも良いですね♪)また、季節やイベント毎に変える等も、訪問される方の目を楽しませてくれる事と思います。(^-^)↑クリックで見本を表示1) トップ画像を変更する。2) 背景色を変更、若しくは背景画像に変更する。1) トップ画像を変更する...

HTML編集枠内最下段に有る</body>の前に入れて下さい。

<!--permanent_area-->
<script>
(function(a){if(a.querySelector(".blogcard-description")){var d=a.getElementsByClassName("blogcard-description").item(0);var e=d.innerHTML;var b=e.substr(0,100);var c=e.substr(100);if(c!=""){d.innerHTML=b+'<span style="display:none;">'+c+"</span><span>...</span>"}}})(document);
</script>
<!--/permanent_area-->

scriptの中の『 100 』という数値が表示文字数です。調整はこの部分を増減して下さい。

jQueryを既に読み込んでいる方は、下記のJavaScriptも使えます。
その場合も、下記をHTML編集枠内最下段に有る</body>の前に入れて下さい。(当方テンプレートではCDNでjQueryを読み込んでいます。)

<!--permanent_area-->
<script>
$(".blogcard-description").each(function(){var a=$(this).text();if(a.length>100){a=a.substr(0,100);$(this).text(a+"...")}});
</script>
<!--/permanent_area-->

JavaScriptの利用は、頻繁に・多数のブログカードを利用される方にとって「簡単に文字数以下を省略し整形する」のにとても楽な方法です。
ただ、時々・少しのブログカードを掲載するためにJavaScriptを常駐させるのは、ページを表示する際のネックになる事が有りますので、デメリットも有るという点をご理解下さい。



【 弊テンプレートご利用の方へ 】
ご利用のブラウザがInternetExplorer(IE)の場合、表示されるサムネイル画像が綺麗に表示されない現象が有ります。
(IEがobject-fit非対応のため、object-fit: cover;が効かない。)
当方のテンプレートにはIE利用者対応のためのJavaScriptを導入しておりますので、追加したブログカード用スタイルシートの中から下記の箇所を探し、オレンジの文字列を追加して頂くと対応させる事が出来ます。

.blogcard-image-wrapper img {
width: 100px; /* 画像の表示サイズ変更は数値をpxで変更 5/6 */
height: 100px; /* 画像の表示サイズ変更は数値をpxで変更 6/6 */
object-fit: cover;
object-position: center center;
font-family: 'object-fit: cover;'; /* IE対策 */
}

不具合無く表示させるためにも、閲覧は出来るだけ新しいバージョンのブラウザをご利用下さい。特に、InternetExplorer(IE)は開発が終了しておりますので、早急に他のブラウザへの移行をお願い致します。


Comments

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-05-01-09:35
[ 返信 * 編集 ]

aki Re: h 様へ

こんにちは♪
できましたか!すごいですね(^^♪
後でゆっくり伺います。(*^▽^*)
2020-05-01-15:54
aki [ 返信 * 編集 ]

お知らせありがとうございました

akiさん、こんにちは ^^
先ほどはわざわざのお知らせをありがとうございました ^^
既にこの記事は何度も読ませて戴いてたんです(笑)が、ブログカード新デザインのCSSで、私がヘマ(笑)をやらかしていて「なんでこうなるの?」と、いろいろと劣化した脳みそが混乱を起こしておりまして……

Akiraさんが指摘してくださって「あっ そうだったぁぁ、やってしまったぁ」と、いろいろと合点がいったところでした (^_^; アハハ…

そうそう、まだ「IE利用者」さんがおられるんですねぇ、困ったものです。
IE使っていると「正しい表示」のものが「崩れてるやん」になってしまう、この理不尽なおバカなブラウザには困ったものです(笑)
セキュリティ的にも「使用は危険」とそのMicrosoftも公言しているのに、まだ知らずに利用している方達がおられるんですねぇ。
一刻もはやく、他のブラウザ「Google Chrome や Edge や Firefox」へと移行するべきなのに……
その方達のPC等に何か起きてからでは、遅いのに……

まっ とにかく新デザインのブログカードの一件が区切りがついたら、何か書こうと(笑)思っております ^^
2020-05-01-16:32
ぼっちん [ 返信 * 編集 ]

aki Re: ぼっちん 様へ

ぼっちん様、こんばんは。(^_^)コメント有難うございます。

早速新しいカードデザイン、弄っているのですか!素晴らしいですね♪
『試行錯誤』は(私の事みたいですが)とっても楽しいですし、出来た時はめちゃくちゃ嬉しいです♪
真剣に楽しめるものが有るって良いですよね。(^o^)丿
ダークモード用と言わずに、暗色ブログのためのダークカラーブログカードCSSとかどうですか?
色んな創作、楽しみにしております♪(^^♪

> そうそう、まだ「IE利用者」さんがおられるんですねぇ、困ったものです。
…解析とか見てても(最近はスマホ閲覧者が増えましたが)まだIE利用の方が少なからずいらっしゃいます。
起動してもブラウジングが出来ない位の強行をしないと、切迫感は伝わらないのでしょうか。

> まっ とにかく新デザインのブログカードの一件が区切りがついたら、何か書こうと(笑)思っております ^^
…読者が多くて層の厚いぼっちんさんの啓蒙記事であれば、きっと心も動きます!宜しくお願い致します。m(__)m
(当方テンプレは、IEユーザーのエスケープゾーン的な立ち位置なので『小さな事からコツコツと』活動をして参りたいと思います。m(__)m)
2020-05-01-21:52
aki [ 返信 * 編集 ]

aki Re: h 様へ

ブログの方にお返事致しましたのでお読み下さいね♪
2020-05-01-22:51
aki [ 返信 * 編集 ]

おぉ〜簡単!

akiさん、こんにちは(^-^)
ブログカードは少し前からウチも使っていて、
表示される文字の長さをプレビューで確認しながら
手作業で削除して調整していました!
このカスタマイズはとっても助かります(^^)v
ありがとう御座います。
2020-05-03-14:43
どなるど [ 返信 * 編集 ]

aki Re: どなるど 様へ

どなるど様、こんばんは♪コメント頂き有難うございます。

そうですか。既にご利用でしたか。私は最近です。^^;
ブログカードにすると参照も引用も見栄えが良くなるので、過去の分も遡って直したいぐらいです。(そのうち直します。。)

> このカスタマイズはとっても助かります(^^)v
…CSSの書き方はAkira氏のルールセットに便乗しましたが、そう言って頂けると嬉しいです。(;^_^A

また『猫相談』が有ったら伺いますので、色々教えて下さいね。(^-^)
2020-05-03-21:45
aki [ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-05-05-17:33
[ 返信 * 編集 ]

aki Re: t 様へ

いらっしゃいませ。コメント有難うございます。m(__)m
後程、そちらに伺ってお返事しますね♪
2020-05-05-19:45
aki [ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-05-06-14:09
[ 返信 * 編集 ]

aki Re: t 様へ

コメント有難うございます♪
後程そちらに伺いますね。(^-^)
2020-05-06-17:26
aki [ 返信 * 編集 ]






非公開コメント