*Essence

HP用フリー素材とFC2共有テンプレートを作成・配布しています。

重要!ページネーションの不具合について[修正のお願い]

重要!ページネーションの不具合について[修正のお願い]

実はFC2運営に問い合わせていた件だったのですが、結論が出ましたので記事に致します。…というか、下記の記事を読んでいたので「うわっ!ひょっとして!?」と検証してみたら、うちのページネーションも該当していたという。ご迷惑をお掛けして申し訳ございません。ページ送りに不具合か【FC2独自変数】独自変数に不具合が生じているのではないか、という仮定のもとに書いています。具体的な内容としては リスト型ページ送りで1ペ...

... 続きを読む

実はFC2運営に問い合わせていた件だったのですが、結論が出ましたので記事に致します。
…というか、下記の記事を読んでいたので「うわっ!ひょっとして!?」と検証してみたら、うちのページネーションも該当していたという。
ご迷惑をお掛けして申し訳ございません。

ページ送りに不具合か【FC2独自変数】

独自変数に不具合が生じているのではないか、という仮定のもとに書いています。具体的な内容としては リスト型ページ送りで1ページ目に戻った際に正しいページが表示されない、あるいは404 not foundになる というものです。どちらになるかは エイリアス機能を利用しているかどうか で分かれます。また、不具合ではなく仕様変更の可能性もあります。...

詳しく書かれている上記を読むと分かるのですが、カテゴリーのページでのみ発生し、且つページ送りが2ページ割りの時に、1ページ目を選択すると該当カテゴリーを外れて「カテゴリー0(初期値:未分類)」の1ページ目に移動してしまう不具合が有りました。
この現象は、FC2ブログのエイリアス機能(カスタムURL)の実装に伴い『カテゴリーURLの変更』が有ったためで、ページネーション等JSの修正猶予についてのアナウンスも行われておりました。(が、どういうことなのかよく分かってなかったため見落としておりました。m(__)m)


当方のテンプレートで利用しているのは、下記ブログのページネーション JavaScript を許可頂いて使用させて頂いております。

FC2ブログ用の軽量なページネーションを作ったよ

今まで使っていたページネーションの仕様に少し不満があったので自作のものに置き換えました。割りと満足できるものになったのでスクリプトを公開します。
難易度:...

そして、問題なのがJavaScript作者様は(記事は残していらっしゃいますが)既にFC2ブログから引っ越しされていらっしゃる、という事。
私にはJSを修正する知識がございません。書けませんのでほぼ『他力本願』でテンプレート作っています。
さあ、どうしたら良いのやら…困った…。(-_-;)
何とかならないかと(期待を込めて)FC2運営に宛ててメールを送っておりましたが、その返答が参りまして「不具合では無くて仕様です。」との事…。益々困った。


カテゴリページクエリの件は不具合ではなく仕様

えーと。まぁタイトルの通りです(笑)
「カテゴリページのみ最初の1ページ目にクエリが付かないのは不具合ではないか」という件ですが、結論としては 仕様 ということで確定です。...

この不具合案件について記事にされていた [ The other way round ]のAkira氏が、FC2の『仕様』について昨日記事にされ、その中でページネーションの修正案を掲示してくれておりました。
本日利用の了解を頂いたので、記事掲載・テンプレートの修正をしようと思います。
詳しい記事は↑上記ブログカードをご参照下さいませ。m(__)m

この度の『カテゴリーURLの変更』により、現在出ていなくても設定によって発生し得る不具合が有りますので、大変お手数ですが 弊テンプレートをご利用の方は、下記方法の通りに修正作業を行うか、テンプレートの再ダウンロードをお願い致します。

【 修正方法 】
テンプレートのHTML編集枠内下段の方にJavaScriptがまとめて記述されておりますので、その中から下記のような文言を探して下さい。
(文字検索は、キーボードの「ctrlキー」と「Fキー」を一緒に押して表示された窓に下記を入れて下さい。)
<a href="'+s+0+p+'">1</a>

すると、1つだけ該当箇所が有りますので、その部分に以下内容を貼り換えて下さい。(コピペ可)
<a href="<!--not_category_area-->'+s+0+p+'<!--/not_category_area--><!--category_area--><!--page_area--><%firstpage_url><!--/page_area--><!--/category_area-->">1</a>
後は更新ボタンを押して頂ければ修正は完了です。

'20/05/30 共有化しているテンプレートの修正・更新致しました。
何もカスタマイズをされていないテンプレートをご利用の場合は、更新済みのテンプレートを再DLして適用する事も出来ますので、方法をご検討下さいませ。
ご利用の皆様には、大変ご迷惑とお手数をお掛けして申し訳ございません。m(__)m

この度の記事及び修正案の掲示と使用について、The other way round のAkira様、ご快諾頂き有難うございました。m(__)m

No Subject * by 徳川たぬこ
こんばんは✩°。⋆⸜(*˙꒳˙* )⸝
記事upお疲れ様です
いつもありがとうございます
カテゴリという概念のないわたくしのブログですが
念の為に修正しておきました
|・`ω・)ノ

マスク&大人のガリグッズ、来た♪

マスク&大人のガリグッズ、来た♪

マスクが届きました。今更感は有るけど、危険が去った訳では無いので「有るに越した事は無し」有難く使います。(^-^)自力で作ったのも有るしね。[ Stay Home です。]…そうそう。『大人のガリグッズ』も届いた♪牛革です。なんてったって『大人』ですから。旦那さん、早速週明けに使うって。マスクもペンケースも。ネタにピッタリ♪って、え?ネタなんですか?(^_^;)ちゃんと使いましょうよぅ。…一応 届いたご報告でした。...

... 続きを読む

マスクが届きました。
今更感は有るけど、危険が去った訳では無いので「有るに越した事は無し」有難く使います。(^-^)
自力で作ったのも有るしね。[ Stay Home です。]
abeno-mask

…そうそう。『大人のガリグッズ』も届いた♪牛革です。なんてったって『大人』ですから。

大人のガリガリ君来た!

大人のガリガリ君来た2!

旦那さん、早速週明けに使うって。マスクもペンケースも。
ネタにピッタリ♪って、え?ネタなんですか?(^_^;)ちゃんと使いましょうよぅ。
…一応 届いたご報告でした。

あっ(笑) * by ぼっちん
akiさん、おはようございます ^^

届いたんですね「アベノマスク」(笑)
当地、静岡県某市(笑)では、学校の一部に届いたとの話はニュース等で知ったんですけど、一般家庭にはまったく配布されていないようです。
まぁ「いつかは届くでしょう」とは思っておりますが、使うかは?です(笑)
私の場合は重症花粉症持ち30年選手ですから、いつもカップ型N95マスクの個人分在庫はいっぱいあるものですから(笑)

それと、特別定額給付金もまだ振り込まれてなくて(マイナポータルからの申請済み)、年金生活者(笑)である私は、首を長~くして待っている次第なんですけどね (^_^; アハハ…

もうね「アベノマスク氏」の発する言葉には「もう本気にはしない」と誓う日々ですけどね (≧ω≦。)プププ

Re: ぼっちん 様へ * by aki
ぼっちん様こんにちは。コメント有難うございます。m(__)m

マスクのサイズは…今は丁度良い位だと思いますが、洗濯してみたら縮むのでしょうね~。
旦那さんにはちょっと小さくなっちゃうかもなと。そしたら私が2つとも使います。^^;

マスク届いた~とFBに画像付きで投稿したら、新潟に居る親戚の所には「マスクは来ないけど10万円の申請書は来た」との返事。
えぇ?そうなの?マスクよりそっちの方が先に欲しかった…。10万円はいつ来るんでしょうね…。
既に旦那さんは「次は有機ELテレビだぁ~!PS5だぁ~!」と騒いでおりますが、どちらにしても私分の10万円も見込まれているようです。(・_・;)
…経済を回すのに大変有意義な使い方だと思います。はい。

管理人のみ閲覧できます * by -

渋いですね( ´꒳`)牛革˖✧ * by 徳川たぬこ
艶めいていますね˖✧さすが大人の製品です˖✧ガリガリくんの景品とはパッと見わかりませんね笑

マスクは洗ったら縮みそうですが
小顔のご婦人やお子さんのいるご家庭には重宝しますね˖✧ありがたや˖✧
(私は最近【大顔面】になってきたので無理そうな気が😂)

Re: h 様へ * by aki
こんばんは。コメント有難うございます。
お返事は後程、そちらへお伺い致しますね。(^_^)

Re: 徳川たぬこ 様へ * by aki
徳川たぬこ 様、こんばんは。コメント有難うございます。

ガリガリ君の景品…見えませんよね。私もそう思います。^^;
でもよく見ると GARIGARIKUN のプレス文字、しかもアイスのシルエットがさり気なく右下に…
牛革の、照りも触り心地もブランド品と見紛う高級感!です。『ガリガリ君』ですが。

最近思うに、温かくなって参りましたのでマスクの中が蒸し暑くサウナのようになり、ひょっとしたら顔痩せ…で小顔が見込めるのではないかと。
甘い考えですかね。(^^ゞ
でも、湿度が高くてしっとり肌に…は叶いそうだと思うのですが。如何でしょう?(;´∀`)

お待ちしておりました(^▽^) * by やぴこ
akiさん、こんばんは☆

『大人のガリグッズ』届いたんですね。
カッコいいです。ロゴは文字だけですか?ガリガリくんがいないのがちょっと残念…

あ、アイスのシルエットは見えました!これはこれでいい感じですよー*ଘ(੭*ˊᵕˋ)੭* ੈ✩

ウチ(長崎)は給付金の書類が先週きまして、マスクは来週から順次配送のようです。

今日も30度超えてましたが、ずっとマスクしてたら具合悪くなりそうで気を付けないと!と思いました。

Re: やぴこ 様へ * by aki
やぴこ様、こんばんは。コメント有難うございます。(^_^)

ガリガリ君が居ない…って、『大人』なので無いんですよ~。(有ったらもっとウケそうだけど。^^;)
ただ、キャンペーンは随時幾つかやっていて、アイスを食べる楽しみが有って良いですよね♪
https://www.akagi.com/campaign/index.html
30度を超える日は、是非『ガリガリ君』を食べて暑さを凌ぎましょう!←回し者

皆様『給付金(の申請書)』来てるんですね~うちも週明けに来るのかな?
まだ申請書すら来ないのに欲しいものだけは決まっている我が家です。(^_^;)(ほぼ旦那の要望。)

管理人のみ閲覧できます * by -

Re: h 様へ * by aki
こんにちは。コメント有難うございます。
そちらにお返事しましたのでご参照下さいね。(^_^)

寝不足です。(・_・;)

寝不足です。(・_・;)

Stay Home中です。皆さま如何お過ごしでしょうか?元々うちはインドア夫婦なので、家に居る事もさほど苦痛に感じないのですが、流石に先週は体調崩しました。…って、自分が悪いのですけどね。^^;旦那さんはず~っとPS4で『仁王2』ばっかりやってるし(たま~に熱くなり過ぎた自分をリセットするために『パタポン2』をやってます(^-^;)、私は無料のウェブ漫画とTSUTAYAから20冊1,200円×2(計40冊!)で借りてきた漫画を延々と読...

... 続きを読む

Stay Home中です。皆さま如何お過ごしでしょうか?
元々うちはインドア夫婦なので、家に居る事もさほど苦痛に感じないのですが、流石に先週は体調崩しました。
…って、自分が悪いのですけどね。^^;

旦那さんはず~っとPS4で『仁王2』ばっかりやってるし(たま~に熱くなり過ぎた自分をリセットするために『パタポン2』をやってます(^-^;)、私は無料のウェブ漫画とTSUTAYAから20冊1,200円×2(計40冊!)で借りてきた漫画を延々と読み続けるという。
本当に、非生産的な時間を過ごしております。
しかしながらそれが良くなかったのか、首や肩は凝るし目は疲れて文字が辿れなくなって来るし、ストーリーが気になって夜中まで読んでいて夜更かししたためか目の下にクマ出来るし。
オマケに夜中暑かったり寒かったりで風邪引いたみたいだし、猫'sも起きてるから運動会でやっぱり寝れないし。
…まぁ、体調不良の言い訳なんですが…寝不足です。(・_・;)

この度のレンタル漫画は、高校の箏曲部が廃部危機を脱して全国大会を目指すという『この音とまれ!(既刊22巻2020年5月現在)』と、主人公の千早が競技かるたのクイーンを目指すという『ちはやふる(既刊44巻2020年5月現在)』。
主人公と取り巻く人々の放熱度合いから、どちらもある意味「熱血スポーツ(根性)漫画」と評されるものだと思います。(^-^;

この音とまれ! 作中オリジナル楽曲「龍星群」

どうも私の好きな漫画って、学生・音楽・部活・動物…とかが絡むと有りっぽい。
『のだめカンタービレ』(ピアノ)
『ピアノの森』(ピアノ)
『3月のライオン』(将棋)
『四月は君の嘘』(ピアノ&ヴァイオリン)
『動物のお医者さん』(獣医学部)
なんかも好きだなぁ~。

ただ、最近単行本を読むのが…キツイ。凝視し過ぎて目が疲れるし、それ以上に字が見えない(小さ過ぎて読めない)~~~っ!
老眼鏡とハ〇キルーペ、買わなきゃかな?(・_・;)


因みに、和楽器大好きです♪こんなのも聴きます♪
和楽器バンド「千本桜」←私のカラオケ十八番でもある。^^;


同じく * by 徳川たぬこ
寝不足ですꉂ😂原因もかぶっております笑
老眼を酷使してしまい若干後悔しております笑
(ちなみに鬼滅の刃でした)

スマホの漫画アプリもよく使うのですが、それこそ字が小さくて😂
iPadが欲しい今日この頃です
(なんならハ〇キルーペも笑)

akiさんの美声、ぜひ聴いてみたいです♡

Re: 徳川たぬこ 様へ * by aki
そおいや『鬼滅の刃』、終わっちゃいましたね。
ダラダラ続けるより良いのかなぁ~…残念だけど潔い気もする。
『鋼の錬金術師』の時のように、女性の作家さんだったという事で色々言われているようですが、良いものならば性別関係無いのにねぇ。(^-^;

電子書籍の場合は、PCならブラウザで画面をズームしたりSPならピンチアウトして大きく表示出来るけど、紙媒体はそうもいかない。
…ってところで色んな衰えを突き付けられてる気がします。
や~抗えない現実は仕方ないですね。(ハ〇キルーペの類似品も安く出てますし。^^;)

十八番の歌はともかく…(;´∀`)、当方、両手の小指が(隣に有る薬指の第一関節部までしかない)『短指症』で、ピアノもギターも指が届かず勝手に諦めてました。
故に学生時分の文系活動は『合唱部』だったりします。音楽自体は好きなので。(^-^)
音程は外しません!Butビブラートは苦手です。。

私も同じくです…w * by やぴこ
akiさん、こんにちは。

夫はゲーム、私は漫画or動画でゴザイマス。
目、肩、腰にきてますが、やめられない、とまらない^^;

ちはやふる、3月のライオン、四月は君の嘘はコミック、アニメ両方みました!実写化されたのはみないようにしてます(イメージが違うこと多々なので…💦)四月は君の嘘が特に大好きで何度みてもウルウル。

ストーリーだけでなくスポーツや音楽、部活を通して成長していく様が好きなのかもしれません。
ハイキュー、弱虫ペダル、ダイヤのAあたり、少年コミックもハマると抜け出せません(笑)

akiさんの歌声は、是非YouTubeで♪


ちょっと気になっているのですが…
YouTubeを貼るときは、今までずっと「中(560×315)」を選択してきたのに、最近明らかに表示が大きくなるのことに、もやぁっとしております。

スマホから見ると縦に長ーくなってしまうのです(>_<)
何故でしょう?

Re: やぴこ 様へ * by aki
やぴこ様こんばんは。コメント有難うございます。

若人が頑張っている姿って、いじらしいやら応援したいやらでドンドン話に引き込まれますよね。
『四月は君の嘘』はプラス有限な命が描かれているので、尚更泣ける要素が増えるというか…切な過ぎで涙が止まりません。
> ハイキュー、弱虫ペダル、ダイヤのAあたり、少年コミックもハマると抜け出せません(笑)
…ここら辺はちょっと興味が有ったので、今度機会が有ったら読んでみたいな~。

> YouTubeを貼るときは、今までずっと「中(560×315)」を選択~~
…について、テンプレートのCSSに記述して有るのですが、

@media only screen and (max-width: 960px) {

/* 動画サイズレスポンシブ用(iframeをdiv class="player"で括る) */
/* 960pxまでは埋め込みコード560×315で表示 */
.player{
position:relative;
height:0;
padding-bottom:56.25%; /* アスペクト比16:9の場合 */
overflow: hidden;
}
.player iframe{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}
}

閲覧されている媒体は何をご利用ですか?
960px未満の幅では横幅100%で表示されます。PC画面で2カラム3カラム時には560×315で表示されていると思いますよ。
それと、
> スマホから見ると縦に長ーくなってしまうのです(>_<)
…これについては、<div class="player">Youtubeのタグ</div> にしていないため、縦横比が保たれずに左右の横幅が見切れてしまっているためだと思います。
Youtubeをレスポンシブ掲載する時は、<div class="player">Youtubeのタグ</div> にして下さいね。

p.s. ブログ、拝見致しました。悲しくて掛ける言葉が見つかりません…
家族になった時から、チョコちゃんはきっと幸せだったと思います。
そう思うのは人間の傲慢かもしれません。でも、沢山の愛情と美味しい御飯をもらっていたのですもの。
きっときっと、皆が幸せだったようにチョコちゃんも幸せだったに違いありません。
この悲しみは時間でしか癒せないでしょうが、早く皆様の心が平穏になりますように…

ありがとうございます * by やぴこ
akiさん、毎度お手数おかけします^^;
<div class="player">Youtubeのタグ</div>
で修正し解決いたしました。

いつも 新投稿画面で投稿しているのですが、今後はHTML表示させるようにしてみます。


ブログ、読んでくださりありがとうございました。少し時間が経って、気持ちの整理もついてきたように思います。
akiさんの優しいお言葉がとても嬉しいです。チョコも喜んでいると思いますꕤ*゚

Re: やぴこ 様へ * by aki
Youtube、無事に可変表示になりましたね。良かったです。(^_^)
普段使いは新投稿画面で問題無いと思いますが、記事に動画を掲載する際は、面倒でもHTML表示して作業して下さいね。(^^ゞ

p.s. 色んな意味で、心身共に御自愛下さいませ。m(__)m

大人なガリグッズ (^^♪

大人なガリグッズ (^^♪

最近とても暑いので、食後のデザート(?)に『ガリガリ君』を食べています。^^;⇒ AKAGI 赤城乳業株式会社様氷菓って、あんまり好きじゃなかったんですよね。キンと来る尖った冷たさやアイスよりもチープなイメージで…。(^^ゞでもでも、それを覆してくれたのが『大人のガリガリ君』や『ガリガリ君リッチ』というシリーズ!大人やリッチと有るように、フルーティーやら濃厚やらで贅沢な感じ!まぁ、その分(箱入りの場合)普通のガ...

... 続きを読む

最近とても暑いので、食後のデザート(?)に『ガリガリ君』を食べています。^^;
AKAGI 赤城乳業株式会社
氷菓って、あんまり好きじゃなかったんですよね。キンと来る尖った冷たさやアイスよりもチープなイメージで…。(^^ゞ
でもでも、それを覆してくれたのが『大人のガリガリ君』や『ガリガリ君リッチ』というシリーズ!大人やリッチと有るように、フルーティーやら濃厚やらで贅沢な感じ!
まぁ、その分(箱入りの場合)普通のガリガリ君より本数が少ないとか1本売りはちょっとお高いとか有りますが、とにかく美味しいんです♪

…で、ここ数ヶ月箱入りのガリガリ君ばかりを食べているのですが…
当たりましたよ!『大人なガリグッズ』♪
大人なガリグッズ
送ると↓こんなものが貰えます。(^-^)
大人なガリグッズ2

私、使う場が無いんだけど…旦那さん、使うかな。。
いやいや、当たった事に意義が有る!「もう一本当たり~」では無いからね。
何だかとっても嬉しかったので記事書いちゃったわ。(;´∀`)
(暫く分の幸運をここで使ってしまったかも?)


(-´∀`-) * by 徳川たぬこ
おめでとうございます🎊
当たり付きアイスはロマンがありますね~
そして大人のガリガリ君というだけに景品も渋いです笑👍
そういえば一時期コーンポタージュ味にハマっておりました
最近の気温上昇に心配になりますが、アイスは美味しく食べられますね

Re: 徳川たぬこ 様へ * by aki
こんばんは♪コメント有難うございます♪

> 当たり付きアイスはロマンがありますね~
…嬉しいですよね~子供の頃のホームランバー、当り付きガム、ヨーグルによっちゃんイカ!
歳バレますね。(;^_^A 駄菓子屋さんは子供の夢の国♪でした。

> そういえば一時期コーンポタージュ味にハマっておりました
…赤城乳業さんのサイトを見ると、歴代のガリガリ君が掲載されててビックリしました。
へぇ~こんなに沢山有ったのか、と。
コーンポタージュ味、気になります…。(^▽^;)

アイスクリームより氷菓の方がカロリー少ない!とか言って2本位食べちゃいますけど、食べ過ぎは本末転倒。
糖分取り過ぎに気を付けましょう。。

Re: aki 様へ * by 呑兵衛あな
別件ですみません。
教えてください。
この記事へのakiさんのコメントで、Subjectの左側円形部には印章的な画像が入っていますが、どのようにしたら入るのでしょうか?
私の場合、円形の中にテキスト文が入るだけで画像は表示されません

Re: 呑兵衛あな 様へ * by aki
呑兵衛あな様、こんにちは。コメント有難うございます。(^-^)

> 私の場合、円形の中にテキスト文が入るだけで画像は表示されません
…ご自身のプロフィール画像は設定されていらっしゃいますか?設定が無い場合画像は表示されません。
FC2ブログの左側にあるメニューの環境設定→プロフィール(上段に有る横並びメニュー)のプロフィール画像を設定
これでご自身のコメントにプロフィール画像が表示されます。
(但し、コメント時にログインしている必要が有ります。ログインしていない状態で打ったコメントには、画像が表示されません。)

ブログ、拝見させて頂きました。
livedoorのhttps移行もまだ少し時間が有りますし、その間FC2で遊んでみるのも良いですね。
また何かございましたらお声掛け下さいませ。m(__)m

Re: aki 様へ * by 呑兵衛あな
「プロフィール画像」ですか...という事で、設定し、表示されるようになりました。
御教授いただきありがとうございます。

>ブログ、拝見させて頂きました。

恥ずかしながら、今しばらく遊んでみます。

当たり!おめでとうございます * by やぴこ
akiさん、こんにちは

ガリガリくん 味に関しては、かなりチャレンジャーのようですね(笑)

私もじゃりじゃりしたアイスはあまり好みではないのですが、もうオトナなので食してみようかと思っております(੭˙꒳​˙)੭

子供の頃、カップアイスが50円で買えていた記憶が…、確か 赤と青のパッケージだったような…?

大人なガリグッズ、ほしい(*´艸`*)

Re: 呑兵衛あな 様へ * by aki
表示、確認致しました。

> 恥ずかしながら、今しばらく遊んでみます。
…コメントいつでも歓迎致します。是非お寄り下さいませ。(^_^)

Re: やぴこ 様へ * by aki
やぴこ様いらっしゃいませ。コメント有難うございます。(^-^)

> 私もじゃりじゃりしたアイスはあまり好みではないのですが、もうオトナなので食してみようかと思っております(੭˙꒳​˙)੭
…ただのシロップとかき氷じゃん、と思ってましたが…今はもっと食べやすいのですね~♪シャーベットとかき氷、みたいな。
他社様でも色んな味が有って『氷菓』侮れません。(メロンや梨やら桃やらと。)

> 子供の頃、カップアイスが50円で買えていた記憶が…、確か 赤と青のパッケージだったような…?
…有りましたね~。毎日10円のお小遣いだった子供の頃、貯めて買った森永のアイスクリームやロッテのイタリアーノとか…バニラアイスは贅沢品でしたよ~って、すごい時代だわ。^^;
でも、色々夢の有るアイスが楽しかったなぁ。メロンの器とかボンボンのやつとか。

> 大人なガリグッズ、ほしい(*´艸`*)
…当選品が届いたらまた記事に上げますね。(ってか望まれてなくても上げます。^^;)

管理人のみ閲覧できます * by -

Re: n 様へ * by aki
こんばんは。コメント有難うございます。(^-^)
そちらでお返事しようと致しましたら、コメント欄がございませんので出来ません。
この状態で問題無いと思うのですが…如何でしょう?^^;
違うお申し出でしたら再度、お手数ですがコメントを頂けますか?

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

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

遅れ馳せながら、最近ブログカードというものを使い始めました。^^;カスタマイズし易くて何より描画が早い…そういうものを探すとこちらの使い勝手が一番です。(個人的に(^o^)丿)【 The other way round - Akira様 - 】詳しくは先ず、↓こちらをお読み下さい。ブログカードのブックマークレットを作成しましたSSL化後の悩ましい作業のひとつ ブログカードこれまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・...

... 続きを読む

遅れ馳せながら、最近ブログカードというものを使い始めました。^^;
カスタマイズし易くて何より描画が早い…そういうものを探すとこちらの使い勝手が一番です。(個人的に(^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)は開発が終了しておりますので、早急に他のブラウザへの移行をお願い致します。


管理人のみ閲覧できます * by -

Re: h 様へ * by aki
こんにちは♪
できましたか!すごいですね(^^♪
後でゆっくり伺います。(*^▽^*)

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

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

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

まっ とにかく新デザインのブログカードの一件が区切りがついたら、何か書こうと(笑)思っております ^^

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

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

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

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

Re: h 様へ * by aki
ブログの方にお返事致しましたのでお読み下さいね♪

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

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

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

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

また『猫相談』が有ったら伺いますので、色々教えて下さいね。(^-^)

管理人のみ閲覧できます * by -

Re: t 様へ * by aki
いらっしゃいませ。コメント有難うございます。m(__)m
後程、そちらに伺ってお返事しますね♪

管理人のみ閲覧できます * by -