Top Page › その他 › Stay Home です。

2020 · 04 · 25 (Sat) 23:09

Stay Home です。

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

過去に遡ってのブログ記事修正…はこちらの記事に触発されて。(;^_^A

ブログにHTMLやCSSのコードを書くにはpreタグを使うと便利なんです

ブログを書いていて、例えば自分なりにテンプレートのカスタマイズした時や、何かの表現を自分なりに作り出した時に、そのHTMLソースやCSSを閲覧者さんに公開したいときってありますよね、弊ブログではいつもよくやってます(笑)

そんな時には、そのソースコードを記事に表現するのに四苦八苦することがあると思います、たとえば pタグ(段落)やbrタグ(改行) を駆使して、そのソースコードをいかに見やすく綺麗に整形して表現...

いつかやろうと先延ばしにしていた自分が悪いのですが、この機会に綺麗なソース表示にしたいなと。
流石に「下記の青文字をオレンジ文字のように~」等と記事内に書いてたりしますので、syntax highlighter的な奴は諦めて(記事修正が面倒なので、と言うのが正直な所)取り敢えず<pre>タグと<code>タグで括って見易いように修正したいと思います。

ErrorもWarningも気付いた時に直しておけば、後々色んな作業を楽にしてくれます。
面倒臭くても^^;、使う方や読まれる方のために。そして何より自分のために。

Comments

可愛いです❣

私は暇すぎてお友達のブログのカスタマイズを勝手にやらせて頂いております笑 
後は愛犬の散歩ですかね(^^;あ、よく考えたら普段とあまり変わらないw

マスクめちゃめちゃ可愛いですね❣˖✧
( ´꒳`)˖✧肌ざわりもとても良さそうです❤ 最近手作りマスクを多々見かけるようになり、自分も挑戦してみようかと
ほんのちょっとだけ(ナノかピコぐらい)思っております笑
2020-04-26-01:43
徳川たぬこ [ 返信 * 編集 ]

私も欲しい(笑)

akiさん、こんにちは~ ^^
カラフルな手作りマスク、私も欲しいですぅ(笑)

弊ブログ記事へブログカード張ってくださってありがとうございます ^^
でも、あまり神経質にならないようにしてくださいね~ (笑)

それと、ついでの知識(笑)なんですけど、ブログカード内の「要約文文字数」が長文になり過ぎると、PC画面ではさほど気にならないんですけど、スマホからですと、閲覧者さんによっては、えらく(笑)冗長的雰囲気に見られてしまうこともありますから、ブログ記事欄に貼り付けたHTMLから「長すぎると感じられる文字列」は、要約文最後の「三点リーダー」を残して、その前側の要約文を削って「詰める」ことを行うと、ブログカードの見映えもスッキリします ^^
私はそれをよくやるんですけどね(笑)
ブックマークレットで抽出された要約文全文を、そのままマジメに掲載する必要はないと思います ^^

参考まで…… ^^
2020-04-26-10:15
ぼっちん [ 返信 * 編集 ]

ページナビ作成の説明頁が欲しい

家に居ましょう
ということで、おねだりです。
以前「全記事一覧(Title list)にコメント数を表示」の付録みたいにコメントで説明して頂いた『トップにエンターページを作る』件で、新規ページを作っていただければ助かります。
埋もれてしまっ、て探してしまいました。
2020-04-26-13:43
呑兵衛あな [ 返信 * 編集 ]

aki Re: 徳川たぬこ 様へ

たぬ子さん、いつもコメント有難うございます♪

私が自分で使う用に作ったら旦那さんが「使いたい。」と。^^;ええええぇ?ですよ。
ほぼカレンダー通りの休みなので、明日は『たい焼き?』柄で出勤するそうです。(^▽^;)
ピコでもお気持ちがお有りなら、針も糸も使わないマスクの作り方がNetに出てますので是非どうぞ~。

> 私は暇すぎてお友達のブログのカスタマイズを勝手にやらせて頂いております笑 
…いつも楽しくて可愛いカスタマイズ、お友達もきっと喜んでいらっしゃるでしょうね~♪
色んな隠しアイテム?私も楽しみに拝見しております。勿論記事も。(^-^)
この季節、お花もいっぱい咲いていますし、何気に雑草シリーズとか好きです♪
2020-04-26-19:49
aki [ 返信 * 編集 ]

aki Re: ぼっちん 様へ

ぼっちん様こんばんは。コメント頂き有難うございます。m(__)m

> カラフルな手作りマスク、私も欲しいですぅ(笑)
…不格好な手作りマスクですが、せめてこういう物で(会社の人達にも)和んでもらえたら良いなぁと思います。

> でも、あまり神経質にならないようにしてくださいね~ (笑)
…preとcodeは、ソースの長い所にのみ使用しました。(過去記事多いので、まだ修正は現在進行形ですが。)
例えば記事内に記述された数個のタグとかCSSのルールセットとかは…ホントは直さなきゃいけないのでしょうがそのまんまです。^^;
最優先は『閲覧される方が見易く、分かり易く。』そして自分にも分かり易く。
これからはもっと気を付けたいと思います。

> ブックマークレットで抽出された要約文全文を、そのままマジメに掲載する必要はないと思います ^^
…取り敢えず-webkit-line-clampで3行目にクランプ文字(FirefoxとIE用にmax-heightを追加+overflow:hidden)を入れて3行表示にしてみました。
後は色んな見栄えのカスタマイズ、そちらで勉強させて頂きます!(^-^)
2020-04-26-20:36
aki [ 返信 * 編集 ]

aki Re: 呑兵衛あな 様へ

呑兵衛あな様、こんばんは。いつもコメント有難うございます。(^-^)

ご要望の件です。

> 以前「全記事一覧(Title list)にコメント数を表示」の付録みたいにコメントで説明して頂いた『トップにエンターページを作る』件で、新規ページを作っていただければ助かります。
…とございます。コメントのタイトルは『ページナビ作成の説明頁が欲しい』なのですが、『トップにエンターページを作る』では無くて『トップにページナビを付ける』という事でしょうか?
当方の作成したJSではございませんが…そうですね、後日先方の記事へリンクして掲載してみても良いかしら、と。
ただ、全テンプレートで適用できるようにするには少し変更箇所が有るので、すぐには難しいかと思います。
折を見て、という事でご理解下さいませ。m(__)m
2020-04-26-21:06
aki [ 返信 * 編集 ]

Re: aki 様へ

『トップにページナビを付ける』という事に関して、コメントでの説明ではなく、単独の記事として立ち上げて欲しいということです。
私自身、livedoorからの引越しが踏ん切りがつかないのでおねだりしにくく、歯切れが悪くて恐縮です

2020-04-26-22:02
呑兵衛あな [ 返信 * 編集 ]

お勉強中ですw

akiさん、こんばんは☆
いつもいつもお世話になります(*'ω'*)

布マスクされてる方、見かけることが増えましたね。形や柄をついついとチラチラ見てしまいます♪
ウチの母もマスク作りにハマりまして、個性的なものがイロイロできました(笑)
材料がないからアイディアを絞り出すのに一苦労…

私もたぬこリン先生に教えていただき、やっとfc2さんでもブログカードが作れました(੭˙꒳​˙)੭
お家の中で、イロイロお勉強させていただく日々を過ごしております。

akiさんヘルプにならないよう心掛けたいと思ってます。せめて、GWくらいは…^^;

2020-04-26-22:42
やぴこ [ 返信 * 編集 ]

aki Re: 呑兵衛あな 様へ

> 『トップにページナビを付ける』
…ですよね。愚問でした。失礼致しました。m(__)m

> 私自身、livedoorからの引越しが踏ん切りがつかないのでおねだりしにくく、歯切れが悪くて恐縮です
…いえ、折角ですからJS自体をコメントしたものに変更して全テンプレートに適用してしまったらどうだろうと。
後で増やしたい方が居たら、その方が楽なのかなぁとも考えます。
記事は近いうちに書きますね。
例えFC2へのお引越しが実現しなくても、他のユーザー様に有益なお話ですからお気になさらずに。(^-^)
2020-04-26-23:44
aki [ 返信 * 編集 ]

aki Re: やぴこ 様へ

やぴこさん、こんばんは♪コメント有難うございます。(^-^)

> 布マスクされてる方、見かけることが増えましたね。形や柄をついついとチラチラ見てしまいます♪
…そうなんです。なので、遠目なら不格好でも分から無いし柄が可愛けりゃOKかなと。(^^;マスクして無くてヒンシュク買うよりはマシですし。
車で巡れる所で探してみても、ゴム紐なんかは幅の太い1.5㎝とか2㎝しか無くって…そんなん耳に掛けれるかっ!
なので、毛糸とコードストッパーで代用です。意外と良いですよ。(^^;

> 私もたぬこリン先生に教えていただき、やっとfc2さんでもブログカードが作れました(੭˙꒳​˙)੭
…見ましたよ~♪使える技が1つ増えましたね。(^o^)丿
そういう私も『Akira風ブログカード』初心者なんですよ。カスタマイズはこれからです。色々これから楽しみましょうね~。
2020-04-27-00:18
aki [ 返信 * 編集 ]

素晴らしいアイデアです♪

akiさん、おはようございます ^^

Akira風ブログカードへの、追加なさった .blogcard-description いま検証させて戴きましたけど、完璧ですねぇ ^^

このCSS お借りしました~(笑)

いままで手動で行ってきた、文字数削減(笑)が自動化されて、もうウハッ♪と喜んじゃってます(笑)
これ、Akira風ブログカードとして、標準化した方が良い気がしますけどね、全ブログカード均一化されて見映え良く表示されますから。

まぁ、私の一存では決められませんが(笑)
少なからず、弊ブログで紹介する記事内では推奨させて戴きます ^^
2020-04-27-08:09
ぼっちん [ 返信 * 編集 ]

No Subject

akiさん
2020-04-27-08:09で
ぼっちん が書いている
>Akira風ブログカードへの、追加なさった .blogcard-description

について、私も付けたいと思うのですが。
どこを探せばあるのでしょうか
2020-04-27-09:27
呑兵衛あな [ 返信 * 編集 ]

|・`ω・)さすがakiさんやで˖✧

すみません
ブログカードのCSS、勝手にいただきましたorz
2020-04-27-10:00
徳川たぬこ [ 返信 * 編集 ]

修正が必要です

akiさん、こんにちは ^^

すみません、視覚的検証ミスがありました。

■追記
すみません、 私のコメントの 追加 blogcard-description についての発言は、全て一旦ペンディングとさせてください。
本来のAkira風ブログカードは、スマホ閲覧では、アイキャッチ画像に対して、要約文が回り込み表示になる設計になっております(開発者さんと私との設計段階での打ち合わせでは)
それが回り込みせず、縮小化表示では……  (^^;; アセ
2020-04-27-13:20
ぼっちん [ 返信 * 編集 ]

aki Re: ぼっちん 様へ

メディアクエリで幅が狭くなったらoverflow:hiddenを解除とか。(^^;
問題有りならそのまま使います。お手数をお掛けしました。m(__)m

追記
文字数でjQueryなら出来るんですけど、JSだとよく分からない…。
(因みに現在100文字で省略、幅が狭くなったら回り込み。jQueryです。)


再追記
JavaScriptで文字数100にして、以降の文字を非表示にしてみました。
これだとどうでしょう?(;^_^A
参考URL:https://teratail.com/questions/13458

(function(a){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;" id="hogehoge">'+c+"</span><span>…</span>"}})(document);
2020-04-27-14:09
aki [ 返信 * 編集 ]

aki Re: 呑兵衛あな 様へ

申し訳ございませんが、そういう事ですので、取り急ぎお詫び申し上げます。m(__)m
2020-04-27-14:11
aki [ 返信 * 編集 ]

aki Re: 徳川たぬこ 様へ

たぬ子さんも申し訳ございません。
下記のような訳ですので、適用を見合わせて下さいませ。m(__)m
2020-04-27-14:13
aki [ 返信 * 編集 ]

|・`ω・)ノ承知いたしました

お手数をおかけしてすみませんでした
いつもありがとうございます˖✧

aki Re: 徳川たぬ子 様へ

コメント投稿者名が…(^^;

取り敢えず、自身のブログではJSを使って100文字表示にしようと思います。
ただ他の方に「使ってね♪」という事は、開発・設計者様がいらっしゃる事なので、申し上げる事は出来ません。
ご理解下さいませ。m(__)m

(只今JS調整中です。)
2020-04-27-19:34
aki [ 返信 * 編集 ]

検証してみました ^^

akiさんって、ほんとにいろいろなアイデアがあふれ出して来るんですねぇ、素晴らしい(笑)

いまちょこちょことあちこち再検証してみましたが、キチンと目的は達しておりますよ ね ^^
この方法なら、ブログカードのデフォルト(HTMLもCSSも)には変更を加えず、JSのみで処理出来ており、私が異議を唱えた「アイキャッチ画像へのテキストの回り込み」も実現出来ておりますから、問題ないと思います。

ただ、JSに2点気になるものがあります。


id="hogehoge" だと、よくネット上で配布される、ある何らかの機能のIDと被る場合がありそうですから、例えば id="a-card" 等とするのがよいかと思います。


トップページやブログカードの呼び出し対象がないページに於いては
Uncaught TypeError: Cannot read property 'innerHTML' of null
のErrorが出てしまいます。

■追記 21:19
つまり、JSを
<!--permanent_area-->
<!--/permanent_area-->
で挟んであげればOKです ^^

他は、問題ないと思います。
私のところでも同JSをセッティングさせて戴いて、暫く様子見させて戴きます ^^

しばし様子見して問題なければ、akiさんアイデアとして「Akira風ブログカード」のカスタマイズとして公開なさったら良いと思います ^^

こんな方法を思いつくなんて、素晴らしいです ^^
2020-04-27-20:28
ぼっちん [ 返信 * 編集 ]

aki Re: ぼっちん 様へ

ぼっちん様こんばんは。検証して頂き有難うございます。

> ただ、JSに2点気になるものがあります。
…これを修正致しました。寄せ集めの継ぎ接ぎですが。(^^;

> ①
> id="hogehoge" だと、よくネット上で配布される、ある何らかの機能のIDと被る場合がありそうですから、例えば id="a-card" 等とするのがよいかと思います。
…この部分は外しました。多分、id値使わないと思ったのと、出来るだけ容量をコンパクトにしたかったので。

> ②
> トップページやブログカードの呼び出し対象がないページに於いては
> Uncaught TypeError: Cannot read property 'innerHTML' of null
> のErrorが出てしまいます。
…先般のJSを下記エリアタグで括っても出てしまっていたので、『要素が有ったら実行』のような形にしてみました。

<!--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-->

(ソースはコメント記述時にエスケープしております。)
もっと綺麗に書けないかとも思うのですが、如何せんJS分からない…
ぼっちん様、何とかなりませんか?^^;
取り敢えずこれでエラーは全て消えてると思うのですが…どうでしょうか?

p.s. おだてると木に登るタイプです。ただ、アイデアは有ってもスキルが無いのが残念です。因みにjQueryだともっと簡単で短いです。

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

参考まで。m(__)m
2020-04-28-02:00
aki [ 返信 * 編集 ]

再検証させて戴きました ^^

akiさん、おはようございます ^^

早速、下記コードにて再検証させて戴きました。
問題点 ①・②ともキチンと解消されて、完璧に当初の目的(要約文の短縮抽出)が達せられていると思います ^^

akiさんの対応力に感服させられました、素晴らしいです。
是非是非皆さんにこのカスタマイズを提供してあげて戴きたく存じます。
これで記事に張るブログカード全部の表示が均一化されるんですから、すごく見映えが良くなります ^^

> もっと綺麗に書けないかとも思うのですが、如何せんJS分からない…
> ぼっちん様、何とかなりませんか?

良いんですってばぁ、これで(笑)

> アイデアは有ってもスキルが無いのが残念です

何言ってんですか、立派にやりきってしまったじゃないですか(笑)
私なんか陰で見てて ヾ(・・;)ォィォィ akiさんってすんごいよねぇ って頼もしく傍観させて戴いてた、ただのヘタレなんですから(笑)

いや、まったく恐れ入りました m(_ _)m

是非是非、記事におこして「Akira風ブログカード」をご利用の皆さんにカスタマイズとして提供してあげて戴きたいものです ^^
ほんとにほんとにありがとうございました。
そして、お疲れさまでした~ ^^

ps. テンプレートにjQueryが組み込まれている方もおられるでしょうから、両方を入手出来るように表示出来たら良いと思います。
当然jQueryの方が「動作は重い」ですが(笑)

因みに、上記JSでの私のブログのトップページのDevTools調査では
DOMContentLoaded: 1.64 s Load: 2.72 s
でして、全く普段と変化なしで満足出来るものでした ^^
前のJSですと
DOMContentLoaded: 1.87 s Load: 3.72 s
なんてDOM構築で「げっ( ̄□ ̄;)!! こりゃ参った」とヒヤヒヤしてたんでした(笑)
2020-04-28-07:32
ぼっちん [ 返信 * 編集 ]

aki Re: ぼっちん 様へ

ぼっちん様こんにちは♪
何度も検証して頂き有難うございます。m(__)m

問題点解消♪と言って頂けてすごく嬉しいです。(^o^)丿
自分でJS書けないなら探すしか無いので…世の中には色んな良い情報が上がっているもんですね。
同じような事を考え悩んでいる人、そして回答をくれる人が居るのですから。
(ブラウザの検索履歴がスゴイ事になってますが。^^;)

> akiさんの対応力に感服させられました、素晴らしいです。
…いえいえとんでもございません。^^;
記事の解説部分は大事ですから、PC3行・SPでも3行…じゃあSPでは内容が分かりませんものね。^^;
流石に文字数制限はCSSで出来ないと思うので、JS1つ追加で載せるのは気が引けますが。
(メディアクエリで超細かく設定すればCSSでも出来そうだけど、テンプレート変える毎にメディアクエリのサイズ見直しでは手間が掛かって大変です。(;^_^A)

> 是非是非皆さんにこのカスタマイズを提供してあげて戴きたく存じます。
…有難うございます。先ずは記事掲載の依頼が有った分から頑張ります。(^-^)

GWはこれからです。家に居なきゃいけない時間も沢山有ります。
Stay Home、やる事が出来たらそれは楽しい時間ですよね。
とっても有意義な時間を過ごせそうです。
色々お手数をお掛け致しました。そして、有難うございました!

p.s.
> なんてDOM構築で「げっ( ̄□ ̄;)!! こりゃ参った」とヒヤヒヤしてたんでした(笑)
…良かった~~ありゃ改悪だわと言われたらどうしようかと。^^;
2020-04-28-13:17
aki [ 返信 * 編集 ]

こんにちは

akiさん、こんにちは。
私も先日マスクの第二弾を作っていました。
いまだに材料が手に入りにくい状態が続いていますね。
私はたまたまボーダー仲間さんから追加で生地購入でき、近所のコメリでも丸ゴムを入手できて作り始めたのですが、今度はミシン糸が切れてしまい買いに走ったら、ミシン糸まで品切れなんですね(泣)

プリーツマスクばかり随分作ったので、今度は立体型に挑戦してみようと思っています。
全部完成したら、またブログネタにします(笑)
2020-04-28-18:29
そふぃあ [ 返信 * 編集 ]

aki Re: そふぃあ 様へ

そふぃあさん、こんばんは♪コメント有難うございます。(^-^)

そうなんですって。ミシン糸が売り切れなんですって。
というか、それ以前に家にはミシンが無いんですけどね。^^;
今回の件で数週間前に小型の安いミシン買ったのですけど、未だに届きません。。
(このまま収束に向かってくれるのが一番ですが。)
空前の手作りマスクブームでミシンが(高いの以外)売り切れだそうです。
なのでうちのガーゼマスクは手縫いです。(雑巾縫うが如く縫い目が粗い)

> プリーツマスクばかり随分作ったので、今度は立体型に挑戦してみようと思っています。
> 全部完成したら、またブログネタにします(笑)
…立体型、Netに作り方出てるので作ってみたいけど、面倒そうだなぁとちょっと敷居が高い感じです。
是非!完成品見せて下さ~い♪
2020-04-28-20:54
aki [ 返信 * 編集 ]

管理人のみ閲覧できます

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

aki Re: h 様へ

h 様、こんばんは。コメント有難うございます。
1つ提案が有りますので、そちらにお返事致しますね。(^-^)
2020-05-12-00:07
aki [ 返信 * 編集 ]

管理人のみ閲覧できます

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

aki Re: h 様へ

そちらにお返事しますね。(^_^)
2020-05-14-13:11
aki [ 返信 * 編集 ]






非公開コメント