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;"　が含まれていたので、それに合わせただけだったりします。