Google

YouTubeの角丸を四角にする方法

YouTubeのデザイン変更によって、再生される動画が角丸になりました。
(著作権などの注意は必要ですが…)動画をキャプチャする際、
角丸の背景が映り込んでしまい変なキャプチャになってしまいます。

都度、デベロッパーツールからCSSの調整なども可能かもしれませんが…
それを防止する方法があります。

Chromeの拡張機能で半永久的に四角にすることができます。

https://chromewebstore.google.com/detail/youtube-unrounded-thumbna/lkklpbhnojokmlapmkpkpphbhakmeifo

参考:https://hatsumeihakken.com/ytkadomaru/

reCaptcha認証が通らない場合の動作検証(エラー画面の表示確認)

reCaptchaをフォームなどに実装すると正常な場合の動作検証は可能ですが
認証を通らない場合の動作検証はなかなか難しかったりします。

reCaptcha認証が通らない場合にエラー画面が正しく表示されるかを検証するには、以下の手順を実施します。

無効なトークンをシミュレートすることで、認証失敗時の動作をテストします。

フォーム内に以下のタグを設置します。

<input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response" value="invalid-token">

reCaptchaのVer.2の場合、ロボット認証をチェックするとvalue部分が正常なトークン値に書き換えられてしまうので、ブラウザのデベロッパーツールなどで適当な値に書き直します。

送信をして、エラー画面が表示されれば動作検証完了です。

reCaptchaの実装方法は以下の記事にも書いていますが、
https://www.uki213.com/memo/google-form-static-html-recaptcha/
Googleフォームへの送信とエラー画面の表示を切り分けるPHPは以下のような記述となります。

<?php
  $recaptcha_secret_key = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
  $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$recaptcha_secret_key."&response=".$_POST['g-recaptcha-response']);
  $response = json_decode($response, true);
  if ($response["success"] === true) {
    // reCAPTCHA認証が成功した場合、Googleフォームに値を送信する処理をここに記述
$redirect_url = 'https://docs.google.com/forms/u/0/d/e/zzzzzzzzzzzzzzzzzzzzzzzzzzzz/formResponse';
    //307 (Temporary Redirect)でリダイレクトして通常のフォーム投稿の処理
    header('Location: '.$redirect_url, true, 307);
  } else {
    // reCAPTCHA認証が失敗した場合、エラーメッセージを表示する処理をここに記述
    $error_url = 'https://sample.jp/test/error.html';
    header('Location: '.$error_url, true, 307);
  }
?>

【Google】GASを使って営業時間外のメールに自動返信する方法

グループ展で「終わり」をテーマに作品を作るために、仕事が終わったあと(営業時間外)のメールでのコミュニケーション方法を考えていましたが…

GメールにはGAS(Google Apps Script)というJavaScriptライクなコードを使って簡単な処理を自動化することが可能です。

コードなどに馴染みがないと少し難しい設定にはなりますが、こんなことも出来るんだ…と見ていただければと思います。

設定方法

以下普段使っているGメールにログインしている状態で

1. https://script.google.com/?hl=jaにアクセス

2. 画面左上の「+新しいプロジェクト」ボタンをクリック

3. Apps Scriptのコード記述画面が表示されたら以下のコードを赤枠にコピペ(元々記述されているコードは削除)

function ResponseMail() {
  const subject = '';
  const sendMailSubject = 'ご連絡ありがとうございます';
  const sendMailName = 'Mail O-clock';
  const sendMailBody = 'お世話になっております。ご連絡ありがとうございます。\n\n本日はお先に失礼させていただいており自動返信にて失礼いたします。\n正式なお返事は翌営業日にさせていただきます。\n\n今日一日もお忙しい日をお過ごしのことと思います。\nお身体を癒し、明日へのエネルギーを蓄える時間をお過ごしください。\n\n何かご不明点やご質問がございましたら、どうぞお気軽にお知らせください。\n何かお手伝いできることがあれば、明日、喜んでお手伝いさせていただきます。\n\nどうぞ良い夜をお過ごしください。\n\n引き続き、よろしくお願いいたします。';

  // 現在の日時を取得
  var currentDate = new Date();
  
  // タイムゾーンを設定(例: GMT+9 は日本時間)
  var timeZone = 'GMT+9';
  
  // 現在の時間を取得し、時刻が18時から9時の間であるか確認
  var currentHour = Utilities.formatDate(currentDate, timeZone, 'HH');
  
  if (currentHour >= 18 || currentHour < 9) {
    // 未読スレッド一覧を取得
    var unreadMailThreads = GmailApp.search("label:inbox is:unread");
  
    // 未読スレッド一覧をループ処理でスレッドを一つずつ取り出す
    unreadMailThreads.forEach(function(unreadMailThread) {
      // スレッドのメッセージの一つ目の件名を取得する
      var message = unreadMailThread.getMessages()[0];
      var mailSubject = message.getSubject();
  
      // 取得した件名に特定の文字列が入っていないか確認する
      if (mailSubject.indexOf(subject) != -1) {
        // 入っていた場合はメッセージの差出人のメールアドレスを取得する
        var mailFrom = message.getFrom(); 
  
        // 取得したメールアドレスへ返信メールを送信する
        MailApp.sendEmail({to: mailFrom, subject: sendMailSubject, name: sendMailName, body: sendMailBody});
  
        // 処理したスレッドを既読にする
        GmailApp.markThreadRead(unreadMailThread);
      }
    });
  }
}

コードの解説

2行目の「const subject」に文字列を入れると、その文字列を含む特定のメールのみに自動返信します。(空欄だと全ての新着メールが対象)

16行目の「currentHour >= 18 || currentHour < 9」が18時から翌9時を表しているので、適宜時間を変更出来ます。

3~5行目は自動返信メールの表示内容になります。

問題点と改善点

これはGAS自体の問題点ですが、一日に100通までしかメールが送れません。
100通を超える場合、処理できなくなる問題点があります。

現在掲載しているコード自体の問題…改善点としては、メールの見出しの文字列でフィルターをかけることは出来ますが、基本的には全ての新着メールが対象になります。
仕事用のメールとは言え、広告メールや、仕事には直接関係ない、返信も必要ないメールも受信することもあります。
それら全てに自動返信してしまうので、仕事関連の人だけに返信するように、メールアドレスを登録してフィルターする機能も必要になりそうです。

参考:https://developers.google.com/apps-script/guides/projects?hl=ja
https://techblog.hubbit.io/2020/10/05/google-app-store-response-mail/

【Google】ピクチャー・イン・ピクチャー(小窓)で動画を見る方法(Google Chrome拡張機能)

WBC決勝もあり、仕事をしながら配信を見たい人(配信を見ながら仕事をする??)が
多いのではないかと思います。

Google Chrome拡張機能として、Googleが出しているものに
Picture-in-Picture Extensionというものがあり、
こちらをインストールすると、AmazonPrimeでもYouTubeでも様々な動画配信が
ピクチャー・イン・ピクチャー(小窓)で見れるようになります。

使い方

公式ページにアクセスし
Picture-in-Picture Extension
画面右上の「Chromeに追加」をクリック

インストールしただけではブラウザ上に拡張機能のアイコン(下記画像の左)が表示されない場合があるので
その場合は、アメーバのようなアイコン(下記画像の右)をクリックし、ピンアイコンを色付きに変えます。

WBC決勝のページにアクセスし、配信を再生後、Picture-in-Picture Extensionのアイコンをクリックすると、ピクチャー・イン・ピクチャー(小窓)でで見れるようになります。

参考:https://tebikisyo.info/amazon/prime-video/picture-in-picture-2/
https://chrome.google.com/webstore/detail/picture-in-picture-extens/hkgfoiooedgoejojocmhlaklaeopbecg?hl=ja&

【Google】iPhoneで録音したボイスメモを共有する方法(Googleフォーム)

iPhoneで録音したボイスメモを遠方の人と共有(送ってもらう)のに
いろいろ調べたけど、案外環境に依存する(Googleドライブアプリをインストールしてるか…とか)
方法しか紹介されてないなと、試行錯誤、最も環境に依存せず
ITの知識にも左右されない方法かな?と個人的に思ったので他の方にも役立つかもと思いメモ。

まずはGoogleフォームでファイル添付できるものフォームを作ります。
(共有だけならメールアドレスや個人情報は一切不要)

iPhoneで録音したボイスメモを共有する方法(Googleフォーム)

Googleフォームが出来たら以下の手順を相手に伝えます。
URLは先程作ったものをコピペ

Googleフォームの仕様上、ファイルサイズの上限が1GBになってしまうけど、
音声ファイルならそこまで大きくないので大丈夫かな?と。
同様に1GB以内なら動画でも大丈夫です。

■ボイスメモアプリでの操作
・ボイスメモの該当ファイルの○三点ボタンをタップ
 ↓
・「ファイルに保存」で分かりやすい任意の場所に保存(通常そのまま上部の保存タップでOK)
 ↓
■ブラウザでの操作(Googleフォーム)
・以下のURLにアクセス
(GoogleフォームのURL)
 ↓
・「ファイルを追加」をタップ
 ↓
・「BROWSE」→「ファイルを選択」をタップ
 ↓
(・ファイルがすぐ見つからない場合は検索窓から検索)
 ↓
・該当ファイルを選択→アップロードがはじまります(wifi環境推奨)
 ↓
・アップロードが完了したら「送信」ボタンをタップ
 ↓
・完了

【Google】英語でGoogle検索をする方法

Googleで検索するのが一般的になっていますが、
以前は英語サイトも検索対象にするなどの検索設定の変更が出来ましたが
最近では、日本国内から日本語で検索する場合、日本のサイトしか検索結果に引っかからないようになってしまいました。

普段はコレでも大きな問題はありませんが、
英語で調べたいときや、英語の言い回し(固有名詞や固有名詞的な使い方)が正しいかなど調べたいときには
英語のサイトが検索に出てこないのは不便です。

以下のURLにアクセスすると、英語のサイトが検索に出るようになります。

https://www.google.com/?gl=us&hl=en&gws_rd=cr&pws=0

パラメータで設定を強制的に変えています。
この設定は、アメリカ英語で検索と、
リダイレクトの無効化とパーソナライズの無効化をしています。

詳しくは、参考リンクからご確認ください。
アメリカを他の国に変えたり、言語を英語以外の言語にすることも可能です。

参考:https://www.suzukikenichi.com/blog/how-to-search-on-google-com-in-english-from-japan/

【CSS】効率的なコーディング作業04(セレクタの命名)

以前紹介したGoogleスプレッドシートを使ったclassの命名のための英語化の方法
より効率的にするGoogleスプレッドシートの関数の紹介です。

前回は日本語を英語にするだけのものでしたが、
更に、英語をclassに使いやすいように大文字を小文字に、スペースをハイフンにする関数です。

例:最新記事→New article→new-article

=LOWER(SUBSTITUTE(B2, " ", "-"))

「B2」は元のテキストを含むセルを示しています。
「SUBSTITUTE」関数がスペースをハイフンに置換し、
「LOWER」関数がテキストを小文字に変換します。

スプレッドシートには以下のように記述します。

   A B C
1 ja en
2 最新記事 =IF($A2<>"", GOOGLETRANSLATE($A2,$A$1,B$1),"") =LOWER(SUBSTITUTE(B2, " ", "-"))

【Google】Googleフォームに柔軟な自動返信機能を導入する

Googleフォームには標準機能として
自動返信をする機能もありますが、カスタマイズなど柔軟性が少ないため
少し導入ハードルは高いですが、GASを使うことで柔軟な自動返信機能を導入することが出来ます。

コードの準備

以下のコードを適宜編集し、GAS画面での設定の下準備をします。

18行目のvar NAME_COL_NAME = '名前';名前をGoogleフォームで設定した項目名に
19行目のvar MAIL_COL_NAME = 'メールアドレス';メールアドレスをGoogleフォームで設定した項目名に設定します。

9行目の自動返信メールの件名を設定し、11行目の本文を設定します。

23行目~27行目のメールの設定をします。
adminは基本的にGoogleフォームを設定したGoogleアカウントのメールになりますが、念のため入れておくのが良いです。
sendernameはそれの表示名になります。

その他必要に応じてccbccreplyなども設定します。
Googleフォームに紐付けたGoogleスプレッドシートで入力内容を確認出来ますが、bccに自分自身のメールを入れておくと新着の確認がしやすくなります。
adminと普段の運用メールが異なる場合はreplyも設定してください。(良くあるnoreply@~など)

function sendMailGoogleForm() {
 Logger.log('sendMailGoogleForm() debug start');

 //------------------------------------------------------------
 // 設定エリアここから
 //------------------------------------------------------------

 // 件名、本文、フッター
 var subject = "【テスト】ご登録ありがとうございます。"; 
 var body
 = "ご登録ありがとうございます。\n株式会社テスト担当でございます。\n\n以下の通り、仮登録を承りました。\n2~3営業日以内に担当より追ってご連絡させていただきます。\n\n"
 + "------------------------------------------------------------\n";
 var footer
 = "------------------------------------------------------------\n"
 + "\n";

 // 入力カラム名の指定
 var NAME_COL_NAME = '名前';
 var MAIL_COL_NAME = 'メールアドレス';


 // メール送信先
 var admin = "●●●@gmail.com"; // 管理者(必須)
 var sendername = "テスト担当";//送信者名(必須)
 var cc = ""; // Cc:
 var bcc = "●●●@gmail.com"; // Bcc:
 var reply = "●●●@gmail.com"; // Reply-To:
 var to = ""; // To: (入力者のアドレスが自動で入ります)


 //------------------------------------------------------------
 // 設定エリアここまで
 //------------------------------------------------------------

 try{
 // スプレッドシートの操作
 var sheet = SpreadsheetApp.getActiveSheet();
 var rows = sheet.getLastRow();
 var cols = sheet.getLastColumn();
 var rg = sheet.getDataRange();
 Logger.log("rows="+rows+" cols="+cols);

 // メール件名・本文作成と送信先メールアドレス取得
 for (var i = 2; i <= cols; i++ ) {
 var col_name = rg.getCell(1, i).getValue(); // カラム名
 var col_value = rg.getCell(rows, i).getValue(); // 入力値
 body += "【"+col_name+"】\n";
 body += col_value + "\n\n";
 if ( col_name === NAME_COL_NAME ) {
 body = col_value+" 様\n\n"+body;
 }
 if ( col_name === MAIL_COL_NAME ) {
 to = col_value;
 }
 }
 body += footer;

 // 送信先オプション
 var options = {from: admin};
 if ( cc ) options.cc = cc;
 if ( bcc ) options.bcc = bcc;
 if ( reply ) options.replyTo = reply;

 // メール送信
 if ( to ) {
 MailApp.sendEmail(to, subject, body, options);
 }else{
 MailApp.sendEmail(admin, "【失敗】Googleフォームにメールアドレスが指定されていません", body);
 }
 }catch(e){
 MailApp.sendEmail(admin, "【失敗】Googleフォームからメール送信中にエラーが発生", e.message);
 } 
}

GAS画面での設定

GoogleフォームからGoogleスプレッドシートの関連付けをし、
Googleスプレッドシートのメニュー拡張機能Apps Scriptと進みます。

拡張機能→Apps Script

コードの貼り付け

以下の赤枠部分に準備したコードを貼り付けます。

コードを貼り付け

保存

保存

承認

承認が必要になるので、作成しているアカウントを選び以下の通り
「詳細」→「(安全でないページ)に移動」→「許可」と進んでいきます。

承認
詳細
(安全でないページ)に移動
許可

動作確認

「実行」を押して動作するか確認します。
このとき、Googleスプレッドシートの一番最後の行を実行するので確実にテスト用のデータ(自分に飛ぶ)ことを事前に確認しておいてください。

実行

トリガー設定

「時計マーク」を押して、「トリガーを追加」をクリックし、トリガー設定をします。
ポップアップ画面の「イベントの種類」を「フォーム送信時」に変更し保存します。

時計マーク トリガーを追加
「フォーム送信時」に変更

再度、承認画面が出てくるので同様に「許可」まで進めていきます。(二回目は多分下記のように英語です。)
許可をクリックしたら設定は全て完了です。

Advanced
Go to (unsafe)
Allow
参考:https://liapoc.com/googelform2.html

【HTML】Googleフォーム連携した静的なHTMLにreCAPTCHAを設置する方法

Googleフォーム連携した静的なHTML
reCAPTCHAを設置する方法です。
※この設定では、よくあるオリジナルの完了画面へのリダイレクトが出来ないかも…

reCAPTCHAのバージョンはV2での実装方法になります。
reCAPTCHA公式サイトよりV2でそれぞれサイトキーとシークレットキーを発行します。

HTML

必要な項目のinputタグを設定し、entry.0000000など該当する値に変えます。
formタグのactionは認証が完了したらPHP内に記述されたURLへ送信するのでhtmlへの直接的な記述は不要です。

<form name="gr_form">
    名前:<input type="text" name="entry.0000000" value="" placeholder="山田太郎"><br>
    メールアドレス:<input type="text" name="entry.0000000" value="" placeholder="メールアドレス"><br>
    <div id="gr_checkbox"></div>
    <input type="button" value="送信" disabled="disabled" id="gr_submit" onclick="trySubmit();" />
</form>

CSS

#gr_checkboxreCAPTCHA自体の表示に関するCSS、#gr_submit:disabledreCAPTCHA認証前の送信ボタン(非活性)のCSSです。

#gr_checkbox {
    display: table;
    margin: 10px auto;
}

#gr_submit:disabled {
    pointer-events: none;
    opacity: 0.5;
}

JS

最初に発行したサイトキーをxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxに記述します。
22行目の./gr_check.phpは設置場所に合わせてパスを修正してください。(同じ階層の場合はこのままで可)

<script src="https://www.google.com/recaptcha/api.js?onload=grOnloadCallback&render=explicit" async defer></script>
<script type="text/javascript">
    var grOnloadCallback = function() {
        grecaptcha.render('gr_checkbox', {
            'sitekey' : 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
            'callback' : grCallback,
            'expired-callback' : grExpiredCallback
        });
    };

    var grCallback = function(response) {
        document.getElementById('gr_submit').removeAttribute('disabled');
    };

    var grExpiredCallback = function(response) {
        document.getElementById('gr_submit').setAttribute('disabled', 'disabled');
    };
    
    var trySubmit = function() {
        if( document.gr_form.reportValidity() ) {
            var xhr = new XMLHttpRequest();
            xhr.open('POST', './gr_check.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onreadystatechange = function() {
                if(xhr.readyState === 4 && xhr.status === 200) {
                    if('' != xhr.responseText) {
                        document.gr_form.action = xhr.responseText;
                        document.gr_form.method = 'POST';
                        document.gr_form.submit();
                    }
                }
            }
            var gr_response = document.getElementById('g-recaptcha-response').value;
            xhr.send('response=' + gr_response);
        }
    }
</script>

PHP

最初に発行したシークレットキーをxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxに記述し、
https://docs.google.com/forms/u/0/d/e/zzzzzzzzzz/formResponseを該当する値に変え、
ファイル名をgr_check.phpにして下記のコードを記述し保存します。

<?php
    $token = $_POST['response'];
    if($token) {
        $url = 'https://www.google.com/recaptcha/api/siteverify';
        $secret_key = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
        $response = file_get_contents("{$url}?secret={$secret_key}&response={$token}");
        $json = json_decode($response, true);
        if($json['success'] == 'true') {
            echo 'https://docs.google.com/forms/u/0/d/e/zzzzzzzzzz/formResponse';
        }
    }
?>

参考:https://migi.me/javascript/google-recaptcha-ajax/

【WordPress】httpをhttpsに運用後に変えた際のGoogleアナリティクスとサーチコンソールの設定変更

運用を始める前にSSLの設定などをして、最初からhttpsでの運用が望ましいですが、
httpで運用をはじめて、途中からhttpsに切り替えることも多いと思います。

httpをhttpsに途中から、運用後に変えた場合の
Googleアナリティクスとサーチコンソールの設定変更の仕方です。

httpからhttpsへのリダイレクト設定はこちらをご確認ください。
https://www.uki213.com/memo/wordpress-redirect-setting/

Googleアナリティクスの設定変更

httpのままでも特に問題なく計測出来るようですが、
httpsで運用する場合、httpsに修正しておいたほうが良いでしょう。

画面サイドの「歯車マーク」→「データストリーム」とクリック。
Googleアナリティクスの設定変更

Googleアナリティクスの設定変更

「鉛筆マーク」をクリック。
Googleアナリティクスの設定変更

httpをhttpsに変更し「ストリームの更新」ボタンをクリックします。
Googleアナリティクスの設定変更

サーチコンソールの設定変更

サーチコンソールは既存の登録の変更はないため、httpsで新たに登録し直し適宜httpの古い登録を削除します。

参考:https://dadadaweb.com/wordpress-really-simple-ssl/

【WordPress】最速で検索エンジンにインデックス登録させる方法(たぶん)

2023.01現在でたぶん…
Googleサーチコンソールで1ページずつURLを登録するのが一番確実で一番早く検索エンジンにインデックス登録させる方法かもしれません。

Googleサーチコンソールの一番上部の検索窓(赤枠)に各ページのURLを入力し、
インデックス登録をリクエスト(赤枠)」をクリックします。

最速で検索エンジンにインデックス登録させる方法

これで通常、24時間以内にインデックスされます。
WordPressの最低限のSEO対策をしておくとインデックスの効果を最大限に活かせるかもしれません。

検索順位を調べるなら、検索順位チェックツールGRC



集客できるウェブ担当者になろう!【SEO検定】

【WordPress】Google公式のreCAPTCHAの非表示方法

WordPressに設置したreCAPTCHAのバージョン3はGoogleが公式に非表示にする方法を紹介しています。(WordPress以外も同様)

https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed

以下のように説明されています。

I’d like to hide the reCAPTCHA badge. What is allowed?
reCAPTCHA バッジを非表示にしたいです。何が許可されていますか?

You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow. Please include the following text:
ユーザー フローに reCAPTCHA ブランディングを目に見えるように含める限り、バッジを非表示にすることができます。次のテキストを含めてください。

以下のテキストを該当の箇所に挿入し

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

以下のCSSを追加します。

.grecaptcha-badge { visibility: hidden; }

これでバッジは非表示になります。
このページにも設置しているので確認してみてください。
必要に応じてCSSなどでデザインを整えてください。


WEBサイトの改ざん監視なら【SiteLock(サイトロック)】

参考:https://jikorich.com/recaptcha-hidden

【WordPress】ログイン画面をreCAPTCHAで保護(Invisible reCaptcha for WordPress)

ログイン画面にreCAPTCHA(リキャプチャ)を設置し、セキュリティをアップさせます。

Invisible reCaptcha for WordPress

Invisible reCaptcha for WordPress

「プラグイン」→「新規追加」から
Invisible reCaptcha for WordPressを検索し
インストール→有効化します。

「設定」に「Invisible reCaptcha」が追加されるので
設定をしていきます。

Googleのサイトでの操作

Googleのサイトにアクセスしキーを発行していきます。(Googleアカウントが必須です)
https://www.google.com/recaptcha/admin?hl=ja

「ラベル」に分かりやすい名称をつけ(ドメインで良いと思います。)
「reCAPTCHA タイプ」で「reCAPTCHA v3:スコアに基づいてリクエストを検証します」を選択します。
「ドメイン」に設置するサイトのドメインを追加し、最後に同意して送信します。

「サイトキー」と「シークレット キー」が発行されるので、メモをしてWordPressの管理画面に戻り設定を行います。

WordPress管理画面での操作

「設定」→「Invisible reCaptcha」から
「サイト鍵」に「サイトキー」のコードを、
「秘密鍵」に「シークレット キー」のコードを入力します。

その他の設定は、
言語:Japaneses
バッジ位置:インライン
とすると良いと思います。

「変更を保存」し、設定タブ下のWordPressタブに移動します。

全ての項目にチェックすると、ログイン画面などにreCAPTCHA(リキャプチャ)が設置されバッジが表示されるようになります。(このサイトではバッジをCSSで非表示にしています。)




WEBサイトの改ざん監視なら【SiteLock(サイトロック)】

参考:https://highneeds.jp/wordpress/95/

【CSS】効率的なコーディング作業03(セレクタ用の英語化)

CSSを書く際、セレクタの命名に時間がかかってしまう場合が
多くあります。

その原因のひとつに、セレクタに日本語が使えないからということもあるかと思います。
(日本語をローマ字に置き換えて…ということは可能ですが。)

そんなときはGoogleスプレッドシート
自動翻訳機能で英語化すると便利です。

一行目にそれぞれ訳したい言語を記入します。
今回は「日本語を英語に翻訳」なので、それぞれjaenを記入します。

二行目以降は…
各要素をdivで囲ったBOXの内容を要約し
A列に日本語を記入していきます。

英語を表示したいセル(B列)に下記のように
=IF($A2<>"", GOOGLETRANSLATE($A2,$A$1,B$1),"")を記述します。

   A B
1 ja en
2 最新ニュース =IF($A2<>"", GOOGLETRANSLATE($A2,$A$1,B$1),"")

if文の最後のほう$A$1ja$B$1enを指していて、
A2(最新ニュース)をja(日本語)からen(英語)に
訳しなさい…という指定になっています。

一行作成しておけば、2行目3行目はコピペで日本語の部分だけ
変更していけば、自動で英語に翻訳していってくれます。