Google Blogger に関する質問・情報・意見など

Google Blogger ブログで、記事一覧の表示数が「設定」より少ない場合は…　（ブログフィードのテキスト量も解説）
➡️
https://twitter.com/Ataruchi/status/1542744422890086401?s=20&t=eWNsNugVimayXuIMqXuF4g

スマホ [モバイルアクセス ] 以外は 外部リンクを 別タブか 別ウィンドウで セキュリティ対策込みで開く‼️
（Google Blogger の場合、携帯電話だと　URL末尾に　?m=1　が付加されるため）

<script>
//-----------------------------------------------------------------------------------
// 2021-04-27 add by Ataruchi
// アフィリエイトツール をふまえた セキュリティ対策
// スマホ [モバイルアクセス ] 以外は 外部リンクを 別タブか 別ウィンドウで 開く
// JavaScript RegExp （正規表現）オブジェクトを利用
//-----------------------------------------------------------------------------------

// <![CDATA[
if (!/(\?|&)m=1/.test(location.search)) {
var rex = new RegExp('^(https?:)?\\/\\/(?!' + location.hostname + ')');
[].forEach.call(document.getElementsByTagName('a'), function(elm) {
if (rex.test(elm.href)) {
elm.target = '_blank';
elm.rel = 'noopener'; // elm.rel='noopener noreferrer' アフィリエイト対策
}
});
}
// ]]>
</script>

>>2

スマホもメモリが大きくなり、もはや『複数タブ』を考慮しなくても良いかも…

JavaScript　の『正規表現』詳細に関しては、以下を参照ください。
（言語によって、多少　方言があるようですので…）

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions

『JavaScript　正規表現チェック』は、以下のサイトが解りやすいのでオススメです‼️
https://okumocchi.jp/php/re.php

「文字列」に、テストしたい文字列

「正規表現」には、以下サンプルのように入力してください（　/〜/　後に、正規表現オプション記述可能）

①「指定文字リスト」に一致
/[-\wａ-ｚＡ-Ｚ０-９\u30a0-\u30ff\u3040-\u309f\u3005-\u3006\u30e0-\u9fcf]/g

②「指定文字リスト以外」に一致
/[^-\wａ-ｚＡ-Ｚ０-９\u30a0-\u30ff\u3040-\u309f\u3005-\u3006\u30e0-\u9fcf]/g

（注意）　^　の有無に関わらず、リスト先頭の　-　は範囲指定のメタ文字ではなく、そのまま　-　文字として認識されます

モダンな CSS に興味がある方は、「コリス🍡🍭（ https://twitter.com/colisscom ）」さんのサイトやツイートがオススメですよ👍
　そろそろ、『新しい擬似クラス :is()　:has()　:where() 』に書き換えないと…😖

（一部）初心者向けではないので、興味のあるカテゴリだけでも…

2022年、Web制作・デザインに役立つ記事の総まとめ
https://coliss.com/articles/digress/coliss-best-in-2022.html

『defer.js』を利用した「遅延読み込み」を初めて利用される方は、
リモスキさんの以下の記事をまず読んでくださいね！

https://www.limosuki.com/2022/06/twitter-lazyload-deferjs.html

ブログに「SNS＋Googleマップ」を埋め込んだ際の　CSS利用の『センタリング』方法‼️

「Google Blogger」限定ではありませんが…　TikTok はデフォルトでセンタリング状態。
（Twitterはblockquoteのclassに『tw-align-center』追加、あるいはblockquoteタグに data-align="center" 追加でも可能）

埋め込みコードにデフォルトで付与される class を利用します。
（ !important を外すと、CSSが反映されない SNS を確認済み）

.twitter-tweet, .twitter-timeline, .instagram-media, .video-container {
max-width: 605px !important;
margin: 0 auto !important; /* 20230125 by Ataruchi センタリング for Twitter, Instagram, YouTube */
}

『Googleマップ』埋め込み方法❗️

①インライン指定の場合
<div style="text-align:center;">
〜　Googleマップ埋め込みコード（iframeタグ）　〜
</div>

②class＋CSS利用の場合
<div class="google-map">　で囲んでおき、

.google-map {
text-align:center;
}

>>8

YouTube 埋め込みが多ければ、max-width: 640px !important; の方が良いかもしれません‼️

実は、TikTok の埋め込みコードに　style="max-width: 605px;min-width: 325px;"　が含まれていたので、それに合わせただけだったりします。

JavaScript/CSSファイルのプリロード方法

ファイルを読み込むだけで実行はしないため、PageSpeed Insights に悪影響はありません。
実行前にファイルを読み込んでメモリキャッシュに入れておくようなイメージのため、実行完了までの時間を短縮できます。

headタグに記述するだけです！
JetThemeなどの「Version3のテーマ（テンプレート）」用サンプルは、以下。

<b:if cond='data:view.isPost'>
<link as='style' href='https://www.xxx.net/css/prism.css' rel='preload'/>
<link as='script' href='https://www.xxx.net/js/prism.js' rel='preload'/>
</b:if>
<b:if cond='data:view.isHomepage'>
<link as='style' href='https://www.xxx.net/css/jt_home_min.css' rel='preload'/>
</b:if>
<link as='script' href='https://cdn.jsdelivr.net/gh/jettheme/js@0.5.5/main.js' rel='preload'/>

（注）投稿、投稿一覧、ページ、アーカイブ、サーチなどの判別は　フランス語ですが
https://bloggercode-blogconnexion.blogspot.com/1978/10/data-view-isPost.html
を、参照してくださいませ！

Google Blogger とは直接関係ありませんが… Apple開発の「Safari」ブラウザ情報です❗️

2023年3月27日リリースの Safari16.4 で、ついに iframe 要素もデフォルトで「ネイティブLazy-Load」対応に‼️

2022年リリースの Safari15.4 で「ネイティブLazy-Load」対応しましたが、img 要素のみデフォルトで、iframe要素はオプション設定が必要でした。

https://www.gadgets-geek.net/2021/12/safari-lazyload.html

2023/05/18　IFTTT 無料版のアップデートについて

2023年5月23日から、すべての無料ユーザーは2つのアプレットに制限され、Twitterアプレットを使用することができなくなります。

ProおよびPro+ユーザーの方は、引き続きTwitterアプレットを使用・作成することが可能です。

この変更は、コミュニティをより良くサポートし、IFTTTをこれまで以上に良くすることに注力し続けるためのものであることをご理解いただければ幸いです。

アプレット管理

2つ以上のアプレットをお持ちの無料ユーザーの方は、追加のアプレットやご自身の階層外のアプレットが無効化されます。つまり、Twitterのアプレットは無料ユーザーの場合、この日以降に切断され、実行が停止されることになります。

お気に入りのオートメーションが中断されるのを避けるため、事前にアクティブなアプレットを管理することができます。アクティブなアプレットを管理するには、「マイ・アプレット」から、不要になったアプレットをアーカイブまたは削除してください。

www.DeepL.com/Translator（無料版）で翻訳しました。

以前から、ずっとPageSpeed Insightsで、使用していない CSS の削除→bootstrap.min.css(cdn.jsdelivr.net)が表示され続けているのですが対処法など何かありましたらご教授いただけますと幸いです。

https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css

>>13

『Bootstrap』フロントエンドライブラリ（CSSの省略記述みたいなもの）を全く使用していなければ削除してもかまいませんが、「JetTheme」テンプレートは同『Bootstrap』を利用していますので削除できません。

　ユーザーも、通常CSS指定に加え、『Bootstrap』指定も可能です。

詳細は、以下のサイトを参照ください。
https://getbootstrap.jp

>>14
やはりJetThemeテンプレートでBootstrap使ってるからあれですよね…
ありがとうございますm(_ _)m