【HTML】SNSシェアボタンの設置(Twitter、Facebook、LINE、note)

SNSシェアボタンの設置方法です。
Twitter、Facebook、LINE、noteのシェア方法の紹介になります。

SNSシェアボタンは、URLのコピーボタンも一緒に並べると利便性が高くなるのでこちらのページも併せて確認しておくと良いでしょう。

Twitterシェアボタン

Twitterシェアボタンを設置する方法は
以下のコードを設置してください。

<a href="https://twitter.com/share?url=【シェアするURL】" target="_blank">Twitterでシェアする</a>

【シェアするURL】をシェアしたいサイトのURLにしてください。

TwitterにはURL以外にも、以下のようなパラメータもあります。

パラメータ 説明
text デフォルトで入れておくテキストの設定です。
ページのタイトルを入れるのが良いでしょう。
via 「@◯◯さんから」という表示を追加できる項目です。
公式アカウントがあれば、そのidを設定しましょう。
related ツイート後に、フォローを促したいアカウントがある場合に設定する項目です。
公式アカウントがあれば、そのidを設定しましょう。
hashtags ハッシュタグを付けられる項目です。カンマ区切りで複数設定できます。

パラメータを追加すると以下のようになります。
全部のパラメータを追加しても良いですし、一部の追加でも良いです。

<a href="https://twitter.com/share?url=【シェアするURL】&text=【ツイートしたいテキスト】&via=【ツイート内に含むユーザ名】&related=【ツイート後に表示されるユーザー】&hashtags=【ハッシュタグ】" target="_blank">Twitterでシェアする</a>

Facebookシェアボタン

Facebookシェアボタンを設置する方法は
以下のコードを設置してください。

<a href="https://www.facebook.com/share.php?u=【シェアするURL】" target="_blank">Facebookでシェアする</a>

【シェアするURL】をシェアしたいサイトのURLにしてください。

LINEシェアボタン

LINEシェアボタンを設置する方法は
以下のコードを設置してください。

<a href="https://social-plugins.line.me/lineit/share?url=【シェアするURL】" target="_blank">LINEでシェアする</a>

【シェアするURL】をシェアしたいサイトのURLにしてください。

「noteで書く」ボタン

「noteで書く」ボタンを設置する方法は
以下のコードを設置してください。

<a href="https://note.com/intent/post?url=【シェアするURL】" target="_blank">noteで書く</a>

【シェアするURL】をシェアしたいサイトのURLにしてください。

参考:https://www.help-note.com/hc/ja/articles/360000272622–noteで書く-ボタン
https://www.gaji.jp/blog/2022/06/10/10057/
https://webdesign-trends.net/entry/3632

【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, " ", "-"))

【Food】常温保存のできる豆腐

Amazonで常温保存のできる豆腐を買ってみてとても便利だったので
今後リピート買いしようと思います。
常温保存できる牛乳もリピート中

森永 常温 絹とうふ 250g×12個

森永 常温 絹とうふ 250g×12個

豆腐だけだと味気ないので
ツナ缶とマヨネーズを載せてヘルシーなご飯にして食べると
美味しいだけでなく、保存が効くので自宅にストックしておいて
忙しい時や外出できないときのご飯にとても良いです。

はごろも オイル不使用シーチキンマイルド 70g (0272) ×24個

はごろも オイル不使用シーチキンマイルド 70g (0272) ×24個

豆乳マヨ

豆乳マヨ

豆腐の健康効果

豆腐は、低カロリー・高たんぱくで、
100gあたりのカロリーは、絹ごし豆腐で56Kcalとお茶碗1/3杯程度で、
糖質も低いため、ダイエットの強い味方になります。

また、イソフラボンやマグネシウムなどの栄養素も多く含まれており、
全体的な栄養素も高く、しっかりと栄養をとりたい方にもオススメです。

成分 木綿豆腐 絹ごし豆腐
エネルギー(kcal) 72 56
水分(g) 86.8 89.4
たんぱく質(g) 6.6 4.9
脂質(g) 4.2 3
炭水化物(g) 1.6 2
カルシウム(mg) 120 43

たんぱく質・リノール酸

豆腐は豊富なタンパク質を含み、コレステロールの減少や血圧の上昇の抑制に有効です。また、豆腐には多くのリノール酸が含まれており、コレステロールに効果的で、善玉コレステロールの増加に寄与します。高血圧やコレステロール値の不正な状態の改善に効果的で、動脈の硬化を防ぎ、脳出血や心筋梗塞などを予防することがメリットです。

レシチン・βコングリシニン

レシチンは不飽和脂肪酸からなる成分で、血管に付着したコレステロールを溶かすことや付着を防ぐことができ、動脈硬化の予防に役立つと期待されます。大豆に含まれるβコングリシニンは内臓脂肪を減らす効果があり、レシチンと一緒に作用して肝臓に多くの脂肪が溜まらないように防ぐこともできます。

レシチン・コリン

レシチンには、脳を活性化する役割を果たす成分であるコリンも含まれています。レシチンは神経細胞の材料になり、コリンはレシチンから分解されて情報を伝達する物質に変化します。この2つの成分によって、記憶力や集中力が高まるという特徴があります。

サポニン

サポニンは、豆腐の食感や風味を作り出す成分です。この成分には様々な健康効果があり、脂肪蓄積を防ぐこと、便通を改善すること、血栓を防ぐことなどがあります。サポニンは、成人病や老化を防ぐ栄養として注目されています。まだ多くのことがわかっていませんが一部の報告によると、がん発生やエイズの発症を抑制する効果もあると言われています。

イソフラボン

大豆から作られる豆腐に含まれる成分であるイソフラボンは女性ホルモンに似た作用をすると言われています。これにより、骨粗しょう症や更年期障害などの原因とされる女性ホルモンの減少を防ぐことができます。また、乳がんや前立腺がん、胃がんの予防にも効果があると考えられています。

オリゴ糖

豆腐の甘味をつかさどるオリゴ糖は、腸内の悪玉菌を減らし、免疫力を上げる「ビフィズス菌」のための栄養源となります。腸の働きを活発にし、発がん物質を分解する働きもあるので、排便を改善し、がん予防にも効果的です。

カルシウム

カルシウムは、骨や歯を作る栄養素です。カルシウム不足は、気分をコントロールするのにも重要です。豆腐はカルシウムが豊富で、他の食材と一緒に食べやすく、ビタミンDを含むものと一緒に食べることで、カルシウムの吸収をサポートできます。

ビタミン

豆腐には美容にいいビタミン類が多く含まれています。肌の調子を整えるビタミンE、皮膚や粘膜に働きかけるビタミンBなどが含まれています。肌を綺麗にするサポートをします。

参考:https://sharedine.me/categories/生活習慣病/article/effect-of-eating-tofu-every-day
https://prezo.jp/column/1282
https://www.ssnp.co.jp/soy/317040/

【Tools】Windowsの右クリック新規作成でutf-8の新規テキストファイルを作る設定に挑戦(失敗)

Windowsの右クリック新規作成でutf-8(BOMナシ)の新規テキストファイルを作る設定に挑戦します。
結論から言うと出来ませんでした…苦笑

以下のフォルダに
C:\Users\ユーザ名\AppData\Roaming\Microsoft\Windows\Templates
テンプレートになる新規テキストファイルをutf-8(BOMナシ)で保存します。

ファイル名は任意で良いですが仮にutf-8.txtとします。

regeditなどでレジストリエディターを起動し、
HKEY_CLASSES_ROOT\.txt\ShellNewを探します。

変更を加えるので、バックアップに保存をします。
右ペインにある「NullFile」を右クリック→削除します。
右ペインの空いている空間で右クリック→新規→「文字列値」とたどります。
新しく出来たエントリを「FileName」という名前に変更し、名前をダブルクリックして、「値のデータ」にファイル名「utf-8.txt」を指定します。
(フルパスを記述する必要はありません。)

原因

テンプレートファイルに全角文字が含まれていないため、
文字コードを認識できず、通常通りShift-JISで作成されてしまいます。

BOM付きや全角スペースなどをテンプレートに入れておけば可能かもしれませんが
BOM付きは当初のBOMナシではなくなってしまうため他の方法を見つけだら追記させていただきます。

参考:http://menushowdelay.blog.fc2.com/blog-entry-3168.html
http://tecopark.blogspot.com/2012/05/andoroidiphonewindows-cpphutf8.html

【jQuery】jQueryプラグインでのスライドショー・スライダーの実装(slick)

スライドショーをjQueryのプラグインを使って実装する場合、オプションの種類が豊富で、レスポンシブにも対応しているなど機能豊富なslickが使いやすいです。

slick

slickの準備

slick公式サイトの「get it now」からダウンロードします。

最低限必要なものはslick.js(もしくはslick.min.js)、slick.cssslick-theme.css、その他必要に応じてfontsフォルダajax-loader.gifも用意してください。

slickの読み込み

<!-- css -->
<link rel="stylesheet" href="./js/slick/slick.css">
<link rel="stylesheet" href="./js/slick/slick-theme.css">

<!-- js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="./js/slick/slick.min.js"></script>

HTML

 <ul class="slide">
   <li><img src="dummy1.png"></li>
   <li><img src="dummy2.jpg"></li>
   <li><img src="dummy3.jpg"></li>
 </ul>

JS

slickに簡単なオプションを付与した書式は下記となります。

$(".slide").slick({
  autoplay: true,
  autoplaySpeed: 4000,
  infinite: true,
});

レスポンシブ

レスポンシブでの書式は下記となります。

$('.slide').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  dots: true,

  responsive: [{
   breakpoint: 768, // ブレイクポイントを指定
    settings: {
     slidesToShow: 2,
     speed: 600,
    },
   },
  {
   breakpoint: 480,
    settings: {
     slidesToShow: 1,
     centerMode: true,
     centerPadding: '20%',
   },
  },
 ]
});

参考:https://zero-plus.io/media/jquery-slick/
https://releases.jquery.com/

【jQuery参考書】
■初級・入門向け
10日でおぼえるjQuery入門教室 第2版

■中級・実務向け
jQueryポケットリファレンス (POCKET REFERENCE)

■上級・開発向け
jQueryクックブック(オライリー)

【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/

【Tools】効率的な本の読み方(Kindleと読み上げソフト)

本を読むのが苦手で、
本を買っても後回しにして、なかなか読めなかったりします。

最近、Kindle for PCと読み上げソフトの「詠太」を使って
効率的に本を読むようにしています。

黙読だと難しい漢字が出てきて読めないとモヤモヤした状態のまま読み進めることになり、
集中力が途切れがちになり、本を読むことを中断してしまったりと、どうしても本を読むことを後回しにしてしまいます。

読み上げソフトの「音読」と、目で文章を追う「黙読」とを組み合わせることで、
読めない漢字が軽減するのと同時に、目と耳ふたつ同時に情報がインプットされることで
本の内容がアタマに入りやすくなります。

ただ、Kindle for PCにはコピー制限があり、
本をまるまるコピーすることはできません。

一手間かかってしまいますが、

Kindle上で読み上げたい文章を選択→(右クリック)→「ウェブを検索する」→ブラウザの検索窓からコピー

で、1000字以上の文字数でもコピーできるので通常の1ページ分であればコピーできます。

個人的に「詠太」は使いやすいと思いますが、
有償のソフトウェアであることや、単体購入できないなど入手のしづらさなどもあるので、
パソコンの標準機能や、フリーソフト、Webサービスなど様々読み上げツールはあるので
自分に適したものを探すのも良いかもしれません。

参考までに…「吾輩は猫である」を「詠太」で読むと、読みが怪しい部分もありますが大体問題ないレベルではないかと思います。

私はMISAKIという女性の声の設定にしています。
この声質が一番聞きやすかな?と思います。

参考:https://localhost8888.net/amazon/304/

【English】NHKラジオ英会話2023年2月号

NHKのラジオ講座「ラジオ英会話」が1月に続き、2月も放送されます。大西先生が担当しています。

講座は4月から始まりますが、新年に続いて2月も頑張って学習することで、英語力をアップすることができるでしょう。

NHKラジオ英会話2023年2月号

NHKラジオ英会話2023年2月号

音声をダウンロードするためのツールは、
https://wiki3.jp/NHK_hta
で入手できます。

今月のテーマ

接続詞 発言の流れ(フロー)を作る

Week1

1月30日 Lesson201 主要接続詞⑤:when
1月31日 Lesson202 主要接続詞⑥:while
2月 1日 Lesson203 主要接続詞⑦:though、although
2月 2日 Lesson204 主要接続詞⑧:thoughの軽さ
2月 3日 Lesson205 今週のReview

Week2

2月 6日 Lesson206 主要接続詞⑨:if──基本
2月 7日 Lesson207 主要接続詞⑩:if──二択
2月 8日 Lesson208 主要接続詞⑪:ifを用いたさまざまな表現
2月 9日 Lesson209 主要接続詞⑫:as──同時性
2月10日 Lesson210 今週のReview

Week3

2月13日 Lesson211 主要接続詞⑬:as──「=」に基づくそのほかの使い方
2月14日 Lesson212 時のフロー①
2月15日 Lesson213 時のフロー②
2月16日 Lesson214 理由・原因のフロー①
2月17日 Lesson215 今週のReview

Week4

2月20日 Lesson216 理由・原因のフロー②
2月21日 Lesson217 理由・原因のフロー③
2月22日 Lesson218 結果のフロー①
2月23日 Lesson219 結果のフロー②
2月24日 Lesson220 今週のReview

【WordPress】VisualStudioCode風の配色(Highlighting Code Blockのカスタマイズ)

以前の記事で紹介しているように
普段のテキストエディタはEmEditorを使っているで
VisualStudioCodeは使っていないのですが、
コードの配色が落ち着いていて玄人っぽさが出るかな?と
このサイトのHighlighting Code Blockでコード表示しているものをVScode風に変えてみました。

以下のCSSを適用テンプレートのCSSなどに追記すると変更されます。
/* VSCode */
.hcb_wrap.hcb_wrap code, .hcb_wrap.hcb_wrap pre { color: #9cdcfe!important; background: #1e1e1e!important;}/* 全体 */
.token.keyword { color: #c586c0!important;}/* 予約語 */
.token.keyword.def { color: #569cd6!important; font-style: initial!important;}/* 予約語def */
.token.string { color: #ce9178!important;}/* 文字列 */
.token.comment { color: #7ba85f!important;}/* コメント */
.token.class-name {color: #38cdae!important;}/* クラス名 */
.token.function { color: #dcdcaa!important;}/* 関数 */
.token.operator, .token.punctuation { color: #c8c8c8!important;}/* 演算子・記号(句読点) */
.token.number { color: #bcd2b0!important;}/* 数字 */
.token.boolean { color: #569cd6!important;}/* ブール */
.token.interpolation .token.punctuation { color: #569cd6!important;}/* リテラル内の記号(句読点) */
.token.builtin { color: #e3e3e3!important; font-style: initial!important;}/* 組み込み */

参考:https://youonly.net/wordpress-highlighting-code-block-vscode/

【HTML】AMPのcanonicalタグ

AMPページのcanonicalタグは
本体ページと対になるように以下のように記述します。

canonicalタグのURLは必ず絶対パスで記述します。

本体ページ

// 本体のページ
<head>
  <link rel="canonical" href="https://uki213.com/sample/">
  <link rel="amphtml" href="https://uki213.com/sample/amp/">
</head>

AMPページ

// AMPページ
<head>
  <link rel="canonical" href="https://uki213.com/sample/">
</head>
参考:https://www.e-webseisaku.com/column/marketing/1883/

【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】外部リンクにアイコンを付ける(画像にはアイコンを付けない)

WordPressで自動的に外部リンクにアイコンを付け、
画像にはアイコンを付けないような設定をしてみます。

プラグインでも出来ますが、今回はfunctions.phpへのコードの追記と
CSSの設定だけで実現できるもの。

WordPressのテーマ内のfunctions.phpに以下のコードを追加します。

// 外部リンクにアイコンを付ける
add_filter( 'the_content', 'add_external_content', 12 );
function add_external_content( $content ) {
$add_img = 0; // img(画像での外部リンク)にもアイコン付ける場合は 1 付けない場合は 0
preg_match_all( "/<a[^>]+?href[^>]+?>/i", $content, $link_array );

$my_url = preg_quote( rtrim( get_bloginfo("url"), "/" ) . "/", "/" );

foreach( array_unique( $link_array[0] ) as $link ) {
$replaced = $link;

if( !preg_match( "/href=['|\"]?\s*?${my_url}[^>]+?['|\"]/i", $link ) ) {
$replaced = str_replace( ">", " class=\"external ext_icon\">", $replaced );
$content = str_replace( $link, $replaced, $content );
if( !$add_img ) {
// img の時はアイコン消す(class="external" は残す)
$content = preg_replace(
"/(<a[^>]+?href[^>]+?external) ext_icon([^>]+?>\s*?<\s*?img[^>]+?src[^>]+?>\s*?<\/a>)/is",
"$1$2",
$content
);
}
}
}
return $content;
}

CSSには以下を追加し、CSSと同階層にlink-icon.svgをアップロードします。
※ファイル名や設置場所は適宜変更してください。

a.ext_icon[target="_blank"] {
background: url(./link-icon.svg) 100% 50% no-repeat;
padding-right: 15px;
margin-right: 2px;
}

aタグのあとに改行が入るとテキストと認識してしまうため、アイコンの付与にCSSには.ext_iconだけではなく、[target="_blank"]も判断基準に付け加えています。

参考:https://www.iscle.com/web-it/wp/external-link-icon.html
http://thk.kanzae.net/net/wordpress/t1316/
https://fukuro-press.com/wp-way-to-add-icon-to-ext-link/

【WordPress】WordPressでのSEO対策

WordPressでのSEO対策として
最低限やったほうが良いものをまとめていきます。

サーチコンソールがパンくずやAMPも登録されるため、
パンくずやAMPを設定後、サーチコンソールに登録するのが良いと思います。

SSL設定(サーバー・htaccess)
・(Really Simple SSLプラグインのインストール)・・・htaccessなどで設定している場合は不要
 ↓
Googleアナリティクスの設置
 ↓
All in One SEOプラグインのインストール
・(サイトマップ系プラグイン(XML Sitemaps)のインストール)・・・All in One SEOでも生成できるので、All in One SEOを入れている場合は不要
 ↓
・(パンくず系プラグイン(Breadcrumb NavXT)のインストール)・・・テンプレートにパンくずがある場合は不要。カテゴリーが複雑な場合など使用すると良い。
 ↓
・(AMPプラグイン(AMP for WP)のインストール)・・・更新頻度の高い場合はキャッシュに注意
 ↓
サーチコンソールへのサイトマップXMLの登録
・(サーチコンソールへの個別ページURLの登録
 ↓
WebSubプラグインのインストール
 ↓
PageSpeed Insightsでの最適化

場合によっては、キャッシュ系のWP Super CacheプラグインをインストールするとHTMLベースのページになり表示も軽くなり、PageSpeed Insightsの点数も上がります。

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





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






【WordPress】インデックス登録を早める方法(WebSub)

検索エンジンに認識され検索出来るようになる状態を「インデックス登録」と言います。

WebSubよりもサーチコンソールに1ページずつURLを登録するのが(もしかしたら)一番確実で一番早くインデックスされるかも。。。(2023.01現在調べ)

通常はGoogleサーチコンソール(通称:サチコ)の「サイトマップの送信」などをしてGoogleに登録します。

WordPressには、これ以外にもサイトの更新をいち早くGoogleの検索エンジン伝えてくれるプラグインがあります。

WebSub (FKA. PubSubHubbub)
WebSub (FKA. PubSubHubbub)
※FKA.とは、formerly known asの略で「以前は…として知られていた」という訳で「旧名称」や「旧」という意味です。

インストール方法

管理画面の「プラグイン」→「新規追加」から
「WebSub」で検索します。
インストール→有効化したら完了です。

WebSubの仕組み

WebSub(旧:PubSubHubbub)は、WordPressの新しい記事を検索エンジンに対して瞬時に通知する仕組みです。
Googleは近年、ロボットによるクローリングに頼らない、WebSubを利用したインデックスに取り組んでいます。

通常、GoogleのクローラーがサイトマップXMLなどを定期的に巡回し更新情報を取得します。
この仕組みではGoogleのクローラーが巡回に来るまで新しい記事は検索エンジンにインデックスされないことになってしまいます。

WebSubを利用することで、新しい記事の公開と同時に通知され、検索エンジンにインデックスされるようになります。

参考:https://the-simple.jp/wordpress-websubpubsubhubbub
https://netaone.com/wp/pubsubhubbub/
https://ja.wikipedia.org/wiki/WebSub

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





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

【WordPress】httpsへのリダイレクト設定

初期状態だとhttpでのアクセスになるので、
サーバーのSSL設定などを済ませたら、WordPressの設定をhttps用に変更していきます。

管理画面の設定

管理画面から「設定」→「一般」へ進みます。
「WordPress アドレス(URL)」と「サイトアドレス(URL)」のURLを、httpからhttpsに変更します。
変更したら「変更を保存」をクリックします。

.htaccessの設定

WordPressがインストールされているディレクトリに.htaccessというファイルがあるので、こちらを編集していきます。

このサイトの場合、ダウンロードした状態は下記のようになっていました。

# BEGIN WordPress
# "BEGIN WordPress" から "END WordPress" までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /memo/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /memo/index.php [L]
</IfModule>

# END WordPress

これにhttpsへのリダイレクト設定を追加していきますが、
記述する順序が重要になってきます。

もともと記述されているコードのに以下のコードを追記します。

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

httpのURLにアクセスしてみてhttpsにリダイレクトすることを確認して
リダイレクトされていれば設定完了です。

参考:https://recooord.org/wordpress-redirect-setting/

【Food】仕事中の飲み物(コーヒー)

仕事のお供は定番のコーヒー
こだわりがあるように見せかけて(苦笑)
手軽さが一番と考えて、Amazonで安いものをまとめ買いしています。

購入するタイミングでどちらか安いほうを買っています。(どちらも大体一本100円以下)

コーヒー
コーヒー

コーヒーの効能

コーヒーには以下のような効能があると言われています。
・リラックス効果
・疲労回復
・消化促進
・脂肪の分解
・コレステロール値を下げる
・善玉コレステロールの増加
・ぜんそくを抑える

「リラックス効果」「疲労回復」など仕事中の飲み物としても良いですが、
スポーツ後に飲むと「疲労回復」だけでなく、脂肪も効率的に燃焼できるとも言われています。

コーヒーの注意点

他方、注意点としては…
主にカフェインによって以下のような作用もあるので、適量を心がけるなど注意も必要かもしれません。
・利尿作用
・覚醒作用
・胃酸分泌
・血圧上昇

参考:https://www.ncc.go.jp/jp/cis/divisions/info/project/pub-pt-lib/20161204/20161204_01.pdf

【Food】定番の朝食(リンゴジュースといちじくのドライフルーツ)

定番の朝食として
リンゴジュースとドライフルーツ(いちじく)が最近のお気に入り。

リンゴジュースは以下のものをAmazonでまとめ買いしています。

リンゴジュース

一緒に食べるドライフルーツ(いちじく)はAmazonではなく近所のスーパーで購入していますが(そのほうが安いので)
こちらのものが安くて美味しいので気に入っています。

ドライフルーツといっても完全に乾燥している固いものではなく、半生のソフトなものです。

ドライフルーツ(いちじく)

いちじくに含まれる栄養素と効能

ペクチン(食物繊維)

便秘改善に効果があり腸内環境を整えます。血糖値の上昇を緩やかにし糖尿病を予防する効果もあると言われています。

腸内環境が良くなると、老廃物をため込みにくくなり肌荒れが起きにくくなります。その他にも、腸内の善玉菌が増え免疫力がアップしたり、大腸がんを予防する効果もあると言われています。

鉄分

貧血を予防する効果があります。

葉酸

「造血のビタミン」とも言われ、赤血球を作るのに重要な栄養素と言われています。鉄分とともに貧血予防の効果があります。

葉酸は、細胞の分裂や成熟にも必要と言われており、妊娠初期に摂取することで胎児の先天異常である神経管閉鎖障害のリスクを減らすという効果も報告されています。

カリウム

カリウムはミネラルの一種で、ナトリウムを排出する役割もあり、塩分を体外に排出し高血圧予防に効果があります。

カルシウム

カルシウムは、骨や歯を形成するための栄養素で不足すると骨粗鬆症の原因になります。

カルシウムをより効果的にするためにビタミンDも必要になりますが、日光浴をすることで体内で生成されるので、適度な日光浴も併せるとより効果的です。

参考:https://www.kojima-ya.com/blog/about-dried-fruit/dryichijiku-eiyou/

【CSS】IE11でremを使う場合の注意点(疑似要素でのline-heightバグ)

文字サイズにアクセシビリティを求める場合はremを使うという記事を投稿しました。

2022.06時点で既にシェアは1割未満なのでIEに関するバグはほとんど無視しても良いのかもしれませんが…

場合によってはまだ考慮する場面もあるかもしれませんので
メモとして記事化しておきます。

※Windows10のIE11は2022年6月15日(日本時間6月16日)にサポート終了。2023年2月14日に完全無効化予定(EdgeのIEモードは2029年までサポート予定)

※Windows7(ESU)、Windows8.1、Windows10 LTSC、Windows ServerではIE11が引き続き提供される。(Windows7(ESU)は2023年1月10日有償サポート終了Windows8.1は2023年1月10日延長サポート終了

IE11のrem指定で起きるバグ

IE11では疑似要素(:before、:after)に対して行高(line-height)をremで指定しても正しくレイアウトされないようです。

1行のテキストの場合、
要素の高さ(height)と行高(line-height) を同じ値にして
縦方向の中央寄せ(センタリング)をすることがありますが、これが出来ないということになります。

その他のIE11関連のバグもコチラに紹介されています。
https://kiomiru.co.jp/blog/coding/ie11-bugs/

参考:https://www.webmagazine.kakisiti.co.jp/?p=571
https://www.qbook.jp/column/20220720_1391.html
https://kiomiru.co.jp/blog/coding/ie11-bugs/
https://ja.wikipedia.org/wiki/Internet_Explorer_11

【CSS】文字サイズ62.5%問題(px、em、rem何を使うべきか?)

SNS上で文字サイズ62.5%問題が賑わっているので
内容をまとめてみようと思います。

と言っても、コリスの記事がかなりバランス良く情報がまとまっている内容かな?とは思いますが…
https://coliss.com/articles/build-websites/operation/css/about-pixels-and-accessibility.html

論点を絞って、最後に自分的な結論(今後どう制作していくか)をまとめようと思います。

px、em、rem何を使うべきか?

emやremのように相対的なサイズ指定がベストではあるものの、
最近のブラウザではズーム機能なども最適化されてきているので、px指定でもそこまで問題は大きくなく、アクセシビリティにどこまでコストを割くかという部分で決めれば良いのではないかと思います。

ちなみに以前制作を担当した案件では

p {
    font-size: 16px ;
    font-size: 1rem ;
}

というようにrem優先、px補助…というような位置づけで併記した記述をするレギュレーションになっていました。
これなら各要素を見ただけでも1rem=16pxになっているんだな、と分かり他人が保守する際も分かりやすいかもしれません。

文字サイズを62.5%指定するのは辞めるべきなのか?

これは元々remなど相対的なサイズを扱いやすくするための裏技的なハックなので
辞めるべきなのだろうと思いますが…

デフォルトの1rem=16pxを変更してしまうもので、サードパーティー製のフレームワークなど1remを16pxのまま扱っているものと混合して使う場合、不具合が生じる場合があることもあるようですが、使わない場合、影響は限定的なのかもしれません。

視覚障害者の方など、ブラウザの設定で文字のデフォルトサイズ(スケーリング)を変更している場合、基本サイズ(1rem)を32pxにしていても、20pxでの表示になってしまい
2/3のサイズで表示されることになってしまうなどユーザーの意図しない表示結果になってしまいますが、

こちらも以下のように
htmlにフォントサイズ62.5%にして、bodyに1.6remすることでブラウザ設定の文字サイズの問題は回避できそうです。

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
}

先に紹介したpxとremの併記で(他人が見た際の)メンテナンス性を担保することも可能です。

p {
    font-size: 16px ;
    font-size: 1.6rem ;
}

62.5%ハックを使わない方法:CSS変数を使用する

62.5%ハックを使わない方法としては、CSSの問題はCSSで解決したほうがいいと思うので、
CSS変数を使ったコリスの解決方法が最もスマートな方法ではないかと思います。
(もともとSass環境で開発しているなどの場合は、そちらで解決しても良いかも。)

html {
  --10px: 0.625rem;
  --11px: 0.6875rem;
  --12px: 0.75rem;
  --13px: 0.8125rem;
  --14px: 0.875rem;
  --15px: 0.9375rem;
  --16px: 1rem;
  --17px: 1.0625rem;
  --18px: 1.125rem;
  --19px: 1.1875rem;
  --20px: 1.25rem;
  --21px: 1.3125rem;
  --22px: 1.375rem;
  --23px: 1.4375rem;
  --24px: 1.5rem;
}
p {
  font-size: var(--16px);
}

自分的結論

現時点(2023.01)での私個人の結論としては、

・アクセシビリティへの大きな配慮などが必要な場合は62.5%を使ってrem
・デザイン性を優先する場合はpx

サードパーティー製のフレームワークともともと混合して使う場合や、将来的に混合しそう(WordPressベースでサイトを構築しているなど)な場合は、CSS変数を使うなど、適宜使い分けるのが良いかもしれません。

これだとやや結論としては弱いので私個人としては

・基本はpx
・アクセシビリティ対応が必要な場合は62.5%+rem(別途見積として料金を載せる)

で今後制作していこうかな?と思います。(アクセシビリティ対応が必要ということは、簡易的にでもレギュレーションが必要ということかな…と。)

参考:https://coliss.com/articles/build-websites/operation/css/about-pixels-and-accessibility.html
https://zenn.dev/tak_dcxi/articles/26280e7607bcd2

【Tools】無印良品のノートカバー

愛用のノートを紹介しましたが
そのノートもそのままは使わず、無印良品のノートカバーをして使っています。

無印良品のノートカバー

ジーンズのラベル素材で出来ていて、現行販売されているもので二代目になると思います。
初代から愛用していて、初代は紙質が厚くてかなり良かったですが廃盤になって再販を希望していたところ、再販されたものが現行の二代目になります。

紙質が薄くなって少しチャチくなった印象もありますが、その分内ポケットが付いてビジネスシーンでは名刺など入れることが出来、とても便利になりました。

もともと定価で590円だったものが今は在庫処分のための値下げだと思いますが
295円177円に値下げされているので、このタイミングにまとめ買いしておくのが良いかもしれません。
(たぶん定番商品ではないので在庫が売り切れれば再販はあってもかなり先になるかも…初代が2010年、現行品が2020年くらいの発売なので次は2030年??三代目にはペン差しを付けてほしいですね…)
※2023.02現在タイミングによってはネット通販で売り切れになっていることがありますが、店舗在庫があるところもあるようです。最寄りの店舗にあればそちらで購入。最寄りにない場合は、最寄り店舗に行って在庫店舗から取り寄せてもらうなどすると良いと思います。

無印のボールペンについても紹介しているので是非ご一読ください。
https://www.uki213.com/memo/muji-aluminum-ballpoint-pen/

無印良品のノートカバー

【WordPress】管理ツールバーをカスタマイズ(既存のメニューを非表示化)

WordPressにログイン後表示される管理ツールバーをカスタマイズします。
既存のメニューを非表示化し、使いやすくします。
リンクを追加する方法はこちら

function remove_admin_bar_menu_control( $wp_admin_bar ) {
$wp_admin_bar->remove_menu( 'themes' ); // サイト名 → テーマ(ウェブサイト側)
$wp_admin_bar->remove_menu( 'customize' ); // サイト名 → カスタマイズ(ウェブサイト側)
$wp_admin_bar->remove_menu( 'comments' ); // コメント
$wp_admin_bar->remove_menu( 'widgets' ); // ウィジェット
$wp_admin_bar->remove_menu( 'menus' ); // メニュー
$wp_admin_bar->remove_menu( 'updates' ); // 更新
$wp_admin_bar->remove_menu( 'new-media' ); // 新規 → メディア
$wp_admin_bar->remove_menu( 'new-link' ); // 新規 → リンク
$wp_admin_bar->remove_menu( 'new-page' ); // 新規 → 固定ページ
$wp_admin_bar->remove_menu( 'new-user' ); // 新規 → ユーザー
$wp_admin_bar->remove_menu( 'user-info' ); // マイアカウント → プロフィール
$wp_admin_bar->remove_menu( 'edit-profile' ); // マイアカウント → プロフィール編集
$wp_admin_bar->remove_menu( 'search' ); // 検索(ウェブサイト側)
}
add_action('admin_bar_menu', 'remove_admin_bar_menu_control', 111);

参考:https://wp-labo.com/wordpress-admin-bar-menu-hidden-customize/

【IrfanView】画像の加工(枠をつける)

IrfanViewは起動が早くて画像ビューワーとしてとても優秀ですが、
簡単な画像の加工も可能です。

最新のWordPressはブロックエディターで画像の掲載が簡単なので、IrfanViewでの画像加工の簡単さを組み合わせるとかなり便利になります。

まずIrfanViewで画像を開き
メニュー左から二番目「編集」(英語表記の場合「Edit」)をクリック
三番目の「ペイントツールを表示」(英語表記の場合「Show Paint dialog」)をクリック。ショートカット「F12」でも起動可能です。

IrfanView

起動されたペイントツールの真ん中あたりに
「枠」ツールがあります。

「枠」ツール

枠線の太さや色を設定して
開いている画像の任意の場所でカーソルをクリックした状態でドラッグしていくと枠が描画されます。

そのまま保存してもいいですし、
コピーしてWordPressのブロックエディター上にペーストしても良いです。

参考:http://www.oshiete-kun.net/archives/2013/05/irfanview_5.html

【WordPress】管理ツールバーにリンクを追加

WordPressでログイン後に上部に表示される
管理ツールバーにリンクを追加するカスタマイズ方法です。
既存メニューを非表示にする方法はこちら

管理ツールバーにリンクを追加

ツールバーからすぐにアクセスランキングにアクセス出来るように
functions.phpに以下のようにコードを追記することでリンクを追加することができます。

//管理ツールバーにリンク追加
function customize_admin_bar_menu($wp_admin_bar){
//親メニュー
$title = sprintf(
'<span class="ab-label">%s</span>',
'追加リンク'//親メニューラベル
);
$wp_admin_bar->add_menu(array(
'id' => 'dashboard_menu',
'meta' => array(),
'title' => $title
));
//サブメニュー
$wp_admin_bar->add_menu(array(
'parent' => 'dashboard_menu', // 親メニューID
'id' => 'dashboard_menu-plugins', // 子メニューID
'meta' => array(),
'title' => 'WordPress Popular Posts', // 子メニューラベル
'href' => home_url('/wp-admin/options-general.php?page=wordpress-popular-posts') // 子メニューURL
));
}
add_action('admin_bar_menu', 'customize_admin_bar_menu', 9999);

参考:https://nelog.jp/admin-tool-bar-custom


【WordPress】よく見られているページ・アクセスランキング(WordPress Popular Posts)

よく見られているページ・アクセスランキングなどをサイドバーなどに表示しているサイトが多いですが、表示しないまでもWordPressの管理画面上でどのページ・どの記事がよく見られているかアクセス数などが簡単に見られると便利です。

GoogleAnalyticsでも簡単に見ることは出来ますが、
記事の投稿のついでに気軽に見られると、どのような記事が良く見られているのか、今後の記事を書く上でも役に立ちます。

WordPress Popular Posts

WordPress Popular Posts

インストール方法

「プラグイン」→「新規追加」から
WordPress Popular Postsで検索をします。
インストール→有効化すると計測が始まります。(インストール前は計測されません。)

設定方法

有効化だけでも特に問題なく使えますが、
管理画面のサイドバー「設定」→「WordPress Popular Posts」から設定をして、自分のアクセスを除外することが出来ます。(ログインしている場合のみ除外)

メイン画面の「ツール」タブをクリック
「データ」の「閲覧を記録する対象者」を
「全員」から「訪問者のみ」に変更し
適用ボタンをクリックします。

アクセス数の確認方法

サイトのフロントに表示しない場合、
管理画面からアクセス数を確認するだけの場合、
サイドバー「設定」→「WordPress Popular Posts」と遷移するだけで
確認できます。

参考:https://www.itti.jp/web-design/the-best-way-to-display-popular-posts-in-wordpress/
https://lucy.ne.jp/bazubu/how-to-add-popular-posts-23487.html
https://senior-chie.net/skill/2784/

【WordPress】内部リンクによるセルフピンバックを無効化(No Self Pings)

WordPressで内部リンクを記述して投稿をすると自分のサイトから自分のサイトに対してもpingを送信します。

コメントに未承認コメントが溜まっていくため紛らわしく、この挙動を好まない場合もあります。

No Self Pings

No Self Pings

「プラグイン」→「新規追加」から
No Self Pingsで検索し、インストール→有効化します。

以上でブログ内のpingを無効化することが出来ます。
内部・外部全部のピンバック機能を停止する方法

【CSS】テーブルのセルの幅を均等にする(width: 1%;)

テーブルのセルの幅を均等にしたい場合があります。

少し裏技的な設定方法にはなりますが、
tdwidth: 1%;を設定すると横幅が均等になります。

td {
    width: 1 % ;
}

こちらのページの表に適用しています。

均等ではないほうがキレイに表示される場合もあるので、このサイトではtableタグにclass="equality"を付けたときだけ横幅が均等になるように設定しています。

数字など文字列が長くなる場合は、こちらの「URLなど長い半角英数字の折り返し表示」のページを参考に以下のように改行設定を加えても良いかもしれません。

td {
    width: 1 %;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

参考:https://csshtml.work/td-width-equal/

【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/

【WordPress】ブロックエディターの便利な使い方(画像のコピペ)

ブロックエディターを便利に使うメリットもあります。

そのひとつが画像のコピペです。

クラシックエディターでは「メディアを追加」からアップロードして選択して画像を掲載していましたが、
ブロックエディターでは「コピペ」のみで画像掲載可能になりました。

Windowsの場合、画像ソフトにIrfanView
スクリーンキャプチャソフトにLightscreen Portable
インストールしておくと便利です。

IrfanViewの特徴
・ソフトが軽い(起動が早い)
・画像の部分選択が可能
・フリーソフトである

Lightscreen Portableの特徴
・インストール不要
・クリップボードに残る
・画像も保存される

など、画像をコピペで掲載するのに相性の良いソフトになります。

参考:https://keizokuma.com/image-kopipe/

【WordPress】旧エディターに戻すプラグイン(Classic Editor)

WordPress5.0から投稿画面がGutenbergと言われるブロックエディターに変わりました。

昔からのユーザーにとっては、なかなか使いづらい面も多いものです。
旧エディターに戻すことで、投稿の効率化を図ります。

Classic Editor

Classic Editor

「プラグイン」→「新規追加」で
Classic Editorで検索します。
インストールし有効化すると、投稿画面が旧エディターに切り替わります。

有効化しただけだと、全投稿画面が旧エディター(クラシックエディター)に切り替わるだけなので
今後ブロックエディターを完全に使わない場合このままでも良いですが、
ブロックエディターに切り替えながら使いたい場合は、設定変更が必要になります。
(ソースコードをそのまま表示する場合に使うHighlighting Code Blockはブロックエディターのほうが使いやすいです。)

Classic Editorの設定変更

「プラグイン」→「インストール済みプラグイン」から
プラグイン一覧画面に移動します。
Classic Editorの「設定」をクリック。
「ユーザーにエディターの切り替えを許可」を「はい」に変更し、「変更を保存」します。

これで投稿画面でエディターを切り替えられるようになりました。

参考:https://selifelog.com/blog-entry-2291.html

【GSAP】GSAPの実装(導入と基本機能)

導入

GSAPの実装するための導入方法は大きくふたつあり、
・CDNで読み込む
・公式サイトからライブラリをダウンロードし自サーバーに設置する
かになります。

CDNで読み込むのが一行コードを追加するだけなのでまずは簡単に始められます。下記コードをhead内もしくはbody最下部に記述します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

基本機能

GSAPには様々な機能がありますが、
代表的なものはgsap.to()などのメソッドを使うTween機能です。

単純なアニメーションの場合下記のように記述します。

gsap.to(".sample", {rotation: 45, x: 100, duration: 1});

.sampleというクラス名の要素が、45度回転しながら、x方向に100px、1秒間かけて移動するアニメーションになります。

一般的なメソッドは3種類あり、
gsap.to()・・・アニメーション終了時の値を指定
gsap.from()・・・アニメーション開始時の値を指定
gsap.fromTo()・・・アニメーション開始時と終了時の値を指定

//gsap.to()・・・アニメーション終了時の値を指定
gsap.to(".sample", {rotation: 45, x: 100, duration: 1});

//gsap.from()・・・アニメーション開始時の値を指定
gsap.from(".sample", {opacity: 0, x: 100, duration: 1});

//gsap.fromTo()・・・アニメーション開始時と終了時の値を指定
gsap.fromTo(".sample", {opacity: 0}, {opacity: 0.5, duration: 1});

のように記述します。

主なプロパティ

x: x軸方向への移動量
y: y軸方向への移動量
repeat: アニメーションのリピート回数
delay: アニメーションが開始するまでの時間
duration: アニメーションの長さ
ease: アニメーションの変化率
onUpdate: アニメーションがアップデートされる際に呼び出される関数
onComplete: アニメーション終了した際に呼び出される関数

参考:https://greensock.com/docs/v3/Installation
http://mtrad-blog.com/2021/09/21/post-2488/
https://note.com/shift_tech/n/n6f11974bff71

【GSAP】GSAPとは

GSAP (ジーサップ:GreenSock Animation Platform) は、GreenSock社が開発しているWeb上でアニメーションを実装するためのJavaScript製の高機能アニメーションライブラリです。GSAPは、高度なアニメーションを高速でスムーズに実行することができるためよく使われています。

公式サイトに制作事例もたくさん掲載されているので、
こちらを見るのがどのようなことが出来るのか一番イメージしやすいかもしれません。
https://greensock.com/showcase/

GSAPは、HTML、SVG、Canvas、React、Angular、Vueなど、様々なコンテンツを対象にアニメーションを実装することができ、3Dアニメーションも実装することができるため、Webアニメーションを制作する上で強力なツールとして広く使われています。

もともとはTweenLite、TweenMax、TimelineLite、TimelineMaxとライブラリが分割されていました。

TweenLiteとTweenMaxは、単独の要素をアニメーションするためのライブラリで、TweenLiteは基本的なアニメーション機能を提供し、TweenMaxは TweenLiteの機能を強化したものです。TimelineLiteとTimelineMaxは、複数のTweenアニメーションを管理するためのライブラリで、TimelineLiteは基本的なタイムライン管理機能を提供し、TimelineMaxはTimelineLiteの機能を強化したものです。

2019年11月にGSAP2からGSAP3に移行し、軽量化に伴いこれらはひとつに統合されました。

シンプルな記述が可能で、軽量かつ多機能、豊富なプラグインなどが特徴になっています。

公式サイト:
https://greensock.com/gsap/

参考:https://b-risk.jp/blog/2022/05/gsap/
https://ics.media/entry/200805/
https://ics.media/entry/220822/

【CSS】float卒業(flexboxへの移行)

flexboxのCSSをGUIベースで生成できるWebサービス

https://suiq.jp/flex-layout-generator/

最近は、チートシートを見ながら
なるべくfloatは使わないようにし始めたけど
長年floatで組んできたから、まだまだ脳みそがfloat脳になってる…

チートシートは今のところ
Webクリエイターボックスさんのを使っています。
メルマガ登録が必要だけど、コンパクトにまとまっていて分かりやすいかな。

チートシートやWebサービス使いながら
そろそろ卒業しなければ…

参考:https://www.yuukidesign.com/2022/07/139/
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

【Adobe】オンラインスクールのAdobeライセンス

個人事業主やフリーランスだと仕事に使うソフト代など経費で落とせるものの、やっぱり一円でもコストは抑えたいところ。

オンラインスクールの講座にAdobeのライセンス付きのものがあって
そのライセンスはアカデミック版ではあるものの、
商用利用も大丈夫なものなので、これを契約して使っているフリーランスは多いのかな?と思います。

オンラインスクールだから一度講座を受けてしまうと
二年目以降は受講できないのかな?と思ってしまいがちですが、
同じ講座を翌年契約しても問題ないのは意外と知られていないかも。




参考までにAmazonのオンラインコード版(一般ライセンス)はこちら
Amazonの場合は、毎年12月に行われるブラックフライデーが一番割引率が高いからAmazonで買うならその時期かな。

個人的には買い切りタイプのAffinityに乗り換えたいなと思いつつ、
ソフトの操作方法をまたイチから覚え直すコストを考えるとなかなか完全に切り替えられてないけど
部分部分では便利なこともあるので、少しずつ勉強中。

V2リリース記念オファー – 2023年1月25日まですべてのアプリが 40% オフ!

Affinity V2ユニバーサルライセンスなら、macOS、Windows、iPad用全てパックになっていてお得!

通常価格:¥26,800 → ¥24,400 → 今なら¥15,800
https://affinity.serif.com/ja-jp/affinity-pricing/

Adobeソフトと通信講座のセットはこちら!

【WordPress】DDoS攻撃とPingback機能の無効化

WordPressで、DDoS攻撃を防止するには、Pingback機能を無効化することで防げますが、機能を停止するすることになるのでメリット・デメリットなど検討する必要性があります。
不正ログイン攻撃についてはこちら

DoS攻撃

DoS攻撃(Denial of Service attack:サービス不能攻撃)は、昔からある攻撃手法の一種です。
攻撃の目的は、サービスを妨害したり、停止させたりすることにあります。

DoS攻撃にはさまざまな手法がありますが、
対象のサイトやサーバーに対して複数のコンピューターから大量に行うものを「DDoS攻撃(Distributed Denial of Service attack)」(分散型サービス拒否攻撃)と言います。

Pingback機能

WordPressには自分自身のサイトに対する言及を第三者が行った場合、
それを通知する機能として「Pingback」という仕組みがあります。
他のブログから通知 (ピンバック・トラックバック) を受け付ける機能のことです。

この仕組みをDDos攻撃に悪用されることがあります。
この攻撃でサイトの改ざんなどはありませんが、別のサーバーやサイトに対して、知らない間に攻撃の手助けをしてしまうことがあります。

初期状態のWordPressでは、Pingback機能が有効になっているので、
運用上必要でない場合、無効化しておくことでセキュリティ度は増します。

Pingback機能の無効化

WordPressのPingback機能を悪用したDDos攻撃を防ぐには、Pingback機能を無効化することでリスクを防げます。最近はスパムのトラックバックやコメントが多いので、Pingback機能は無効化してしまって問題ない場合が多いと思います。
内部リンクのピンバック機能のみ停止する方法

Pingback機能の無効化
管理画面から「設定」→「ディスカッション」→「投稿のデフォルト設定」と進み、「他のブログからの通知 (ピンバック・トラックバック) を受け付ける」のチェックを外すと無効化されます。

すでに投稿している記事のPingback機能の無効化
管理画面から「投稿」→「投稿一覧」へ進み、
タイトルの横にあるチェックボックスを全てオン→プルダウンの「一括操作を編集」にして「適用」ボタンを押します。

次の画面右に「トラックバック/ピンバック」という欄があるので、プルダウンを「許可しない」にして「更新」ボタンを押すと無効化されます。




未知のウイルスへの対応力が違います。「ESETセキュリティソフト」

参考:https://help.sakura.ad.jp/rs/2162/
https://rgbdesign.jp/必ずやっておきたいwordpressのセキュリティ/
https://asahinablog.com/archives/2990
https://digitalnavi.net/wordpress/6938/

【CSS】URLなど長い半角英数字の折り返し表示

URLなど長い半角英数字があると
コンテンツの表示領域を超えてしまって表示が崩れてしまうことがあります。

特にスマホでの表示ではコンテンツ部分が縮小されてしまったりと
問題も大きいです。

URLなど長い半角英数字を折り返し表示することで
デザインの崩れを防ぎます。

以下のCSSを適用することでデザイン崩れを防げます。

word-wrap: break-word;
overflow-wrap: break-word;

overflow-wrapプロパティはCSS3で定義された新しいプロパティ名です。

word-wrapは従来からあるプロパティ名です。
(もともとIE独自のプロパティで、現在もIE・EdgeやFirefoxはword-wrapのみ認識)

リセットCSSや共通CSSに最初から記述しておくと便利かもしれません。
2023.01.06 リセットCSSに追加

参考:https://allabout.co.jp/gm/gc/463542/
https://accelboon.com/tn/css-半角英数の連続文字が折り返すようにする/

【HTML】カレンダー形式のフォーム入力(type=”datetime-local”)

inputフォームにtype="datetime-local"を設定すると
カレンダー形式で日時を入力出来るようになります。

<input type="datetime-local">

最小値min="YYYY-MM-DDThh:mm:ss"
最大値max="YYYY-MM-DDThh:mm:ss"など指定できる属性もあるので

最小値の指定は過去を選択できないように出来たり、
最大値は来月以降や来年以降など誤って遠い将来の指定してしまう入力ミス防止の為などの指定も出来ます。

2023.01現在だとiOSでも問題なく使える(Mac環境のChrome可・Safari不可)ので、状況を選べば複雑なJSのフレームワークなど使用しなくてもカレンダー形式の入力を実現でき、入力方法を便利にすることが出来ます。

年月日時分まで全て含むtype="datetime-local"以外にも

  • 年月日だけのtype="date"
  • 年月だけのtype="month"
  • 時分だけのtype="time"
  • 年週だけのtype="week"

などもあります。

参考:https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/datetime-local
https://www.tagindex.com/html/form/input_datetime_local.html
https://codeforfun.jp/reference-html-tag-input-type-datetime-local/

【WordPress】SNSシェアボタンの設置(AddToAny Share Buttons)

SNSシェアボタンを設置するプラグイン

AddToAny Share Buttons

AddToAny Share Buttons

このサイトにも使っています。
このページの本文の上下に設置しています。

SNS以外にもGメールへの送信だったり、印刷ボタンやリンクのコピー機能もあったり汎用的に使えます。

参考:https://netaone.com/wp/wordpress-sns-plugin/

【WordPress】セキュリティ対策04(wp-config.phpのアクセス権限変更)

ファイルのアクセス権限(パーミッション)をデフォルトから変更することでセキュリティ対策をします。

wp-config.phpは、データベースにログインするためのIDとパスワードが記載されているため、最も重要な設定ファイルになります。

設定内容を見られると、データベースにアクセス出来るようになり、データを削除されたり盗まれたりする可能性が高まります。

デフォルトのアクセス権限は「644」なので、所有者以外も内容を見ることが可能な状態です。

アクセス権限を「644」から「600」にし、所有者だけが読み書きできる状態に変更します。




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

参考:https://www.mubag.com/blog/wordpress-security-plugin/

【WordPress】不正ログイン攻撃(ブルートフォースアタック/辞書攻撃)

不正ログイン攻撃には、総当たり攻撃やブルートフォースアタック(Brute-force attack)と呼ばれる第3者が想定される認証情報を入力してログインできるか調べる攻撃や、辞書攻撃と言われる良く使われるパスワードを「辞書」的に登録し攻撃に利用するなどがあります。
DDoS攻撃についてはこちら

総当たり攻撃(ブルートフォースアタック)は、試行を繰り返すことでパスワードを特定する攻撃になりますが、最近のパソコンは処理スピードが早いため、パスワードが数字4桁程度の場合、数秒で突破できてしまいます。

使用する文字の種類と文字数での組み合わせパターン数は以下の通りとなります。単純な組み合わせで文字数も少ないとパターン数が意外と少ないことに気付くと思います。

使用する文字の種類 1文字の場合 4文字の場合 6文字の場合
数字のみ(0~9) 10 10,000 1,000,000
英字(大・小文字区別なし) 26 456,976 38,915,776
英字(大小区別なし)+数字 36 1,679,616 2,176,782,336

不正ログイン攻撃の流れ

WordPressの場合、以下の流れで不正ログイン攻撃が行われます。

1.ログイン用URLの特定
変更を加えていない場合、ログインURLは、wp-login.phpとなる。
SiteGuard WP Pluginで変更可能

2.管理者用ユーザIDの特定
WordPressへ特定のリクエストをすることで、存在する管理者用ユーザIDを取得することができる。
Edit Author Slugで対応可能

3.ユーザIDとパスワードを送信する
総当たり攻撃(ブルートフォースアタック)、辞書攻撃、もしくはその両方の組み合わせなどで行われます。
画像認証を追加する

4.返答されるHTTPヘッダを確認する
ユーザIDとパスワードが一致した場合、「Status 302」としてLocationヘッダにダッシュボードのURLを返します。(失敗時は「Status 200」となる。)

5.ダッシュボードへログインする
ログインした後は任意のコードを記述したり、任意のファイルを設置したり、様々な悪意ある改ざんが自由に出来てしまいます。

STEP5も、プラグインなど余分なファイルを削除・整理しておくことで改ざん後の特定が可能になったり、被害を最小限にすることが出来ます。

不正ログイン攻撃を防ぐには

逆に考えると、これらのSTEP4までのどこかのステップを防ぐことで不正ログイン攻撃を未然に防ぐことが可能になります。

複数対策することで、よりセキュリティ度は向上しますが、普段の運用に差し支えないレベルでの対策が望ましいので、各自でどこまで対応するかなど検討が必要かもしれません。

私の個人的な優先順は…

管理者用ユーザID→Edit Author Slugで対応可能
 ↓
ユーザIDとパスワード→画像認証を追加
 ↓
ログイン用URL→SiteGuard WP Pluginで変更

最後のログインURLの変更はAWSでは出来ないため、設定に汎用性を持たせるため優先順位を下げています。




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

参考:https://knowledge.sakura.ad.jp/4248/
https://ja.wikipedia.org/wiki/総当たり攻撃
https://ja.wikipedia.org/wiki/辞書攻撃

【HTML】PageSpeed Insightsでのアラート修正02(リンクに識別可能な名前が指定されていません)

PageSpeed Insightsでチェックをすると
「リンクに識別可能な名前が指定されていません」
というアラートが出ることがあります。

これはaタグ内に画像を使用している場合に出るアラートになりますが、
以下の要素を追加することで解消できます。

1.altを追加
通常、imgタグにaltを設定するのが一番望ましいです。

2.aria-labelを使う
altが何らかの理由で使えない場合は、aタグにaria-labelを使います。

<a href="readmore.html">Read More</a>
 ↓
<a href="readmore.html" aria-label="Read More">Read More</a>

参考:https://dequeuniversity.com/rules/axe/4.4/link-name
https://www.rectus.co.jp/archives/11570

【HTML】PageSpeed Insightsでのアラート修正01(ボタンにユーザー補助機能名が指定されていません)

PageSpeed Insightsでチェックをすると
「ボタンにユーザー補助機能名が指定されていません」
というアラートが出ることがあります。

これはbuttonタグに以下の要素を追加することで解消できます。

<button id="al"></button>
 ↓
<button id="al" aria-label="Name"></button>

ユーザーに知らせる必要のない要素やフォーカスが当たるべきでない要素に、適宜aria-label="Name"の代わりにaria-hidden="true"などを設定しても良いでしょう。

参考:https://dequeuniversity.com/rules/axe/4.4/button-name
https://cam-inc.co.jp/p/techblog/466554823458685993

【WordPress】投稿で定型文を挿入するのに役立つプラグイン(AddQuicktag)

投稿画面などで定型文を挿入するのに便利なプラグイン

AddQuicktag

AddQuicktag

インストール後、有効化し
「設定」→「AddQuicktag」と進み、
「ボタン名」と「ラベル名」を入力
(投稿画面ではボタン化されるので分かりやすい短めの文字が良い)
 ↓
「開始タグ」に挿入したい定型文を登録します。
横のチェックボタンは「post」のみ入れておけば、通常の記事投稿には充分です。

参考:https://wp-sensei.net/2047/

【Affinity】ドキュメントのカラー設定の変更方法

AffinityのPublisherはPDFファイルをページ丸ごと扱える(Designerも同様にページ丸ごと扱える)ので、AdobeのIllustratorより便利な面も大きいです。

AffinityPublisher

ただ、操作方法が微妙に違い設定変更などが分からないこともあります。

今回はドキュメントのカラー設定の変更方法が分からなかったので、そのメモを…

他ソフトなどで作成したPDFファイルを開くと
グレースケールなどになっている場合があります。
この場合、他ファイルからコピペしてもカラー情報が失われ、全てグレースケールになってしまいます。

カラー設定の変更方法は2パターンあります。

1.開く前に変更するパターン
PDFをドラッグ&ドロップで開く
 ↓
「色空間」を「推定」から「RGB」などに変更する。
開く前に変更するパターン

2.開いた後に変更するパターン
画面の上から3段目の「ドキュメント設定」をクリック
 ↓
ポップアップ画面の中段「カラー」タブに切替え、「カラーフォーマット」をRGBやCMYKなどに適宜変更する。
開いた後に変更するパターン
開いた後に変更するパターン

参考:https://taishon.nagoya/affinity-designer-cmyk-rgb/

V2リリース記念オファー – 2023年1月25日まですべてのアプリが 40% オフ!

Affinity V2ユニバーサルライセンスなら、macOS、Windows、iPad用全てパックになっていてお得!

通常価格:¥26,800→今なら¥15,800
https://affinity.serif.com/ja-jp/affinity-pricing/

【WordPress】全角スペースを含んだ検索のバグ修正

これも色々調べていて初めて知ったのでメモも兼ねて…

WordPressの検索で全角スペースを入れて検索すると
検索0件になるバグがあります。(全角は全て文字と認識しているため、全角スペース前後を含む一語と誤認してしまうようです。)

これを防ぐため、下記のコードをテンプレートファイル内にある
functions.phpの一番最後に追記します。

これで全角スペースを半角スペースに置換して検索してくれます。

//全角スペースを含んだ検索のバグ修正
function empty_search( $query ) {
    if ( $query->is_main_query() && $query->is_search && ! $query->is_admin ) {
    $s = $query->get( 's' );
    $s = str_replace(' ',' ', $s );
    $query->set( 's', $s );
    }
}
add_action( 'pre_get_posts', 'empty_search' );

参考:https://sologaku.com/wordpress/site-search-support-emspace/
https://yululy.com/ワードプレスの全角空白で検索結果がおかしい件/

【WordPress】セキュリティ対策03(SiteGuard WP Plugin)

このサイトには現状使っていませんが、
仕事でWordPressのサイトを構築する際に必須で使用しています。

SiteGuard WP Plugin

SiteGuard WP Plugin

サイトへの不正アクセスのほとんどの攻撃は海外からの場合が多いため、
管理画面へのログインの際、日本語の画像認証でログインするようにしています。

SiteGuard WP Plugin

ログイン画面のURLを変更する機能もありますが、
AWSサーバーでは使えないなどもあるので、これは使用しないのを基本にしたほうが汎用的な設定に出来るかもしれません。




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

【WordPress】セキュリティ対策02(プラグインの削除)

WordPressのセキュリティ対策のひとつに「余分なプラグインを削除する」というものがあります。

ただ、最初からインストールされているプラグインはなかなか削除しにくいものです。

Hello Dollyは世界ではじめて作られたWordPressのプラグインとして最初からインストールされていますが、削除してしまっても特に問題ないため削除してしまいましょう。

「プラグイン」→「インストール済みプラグイン」と進み
Hello Dollyの「削除」をクリックします。

これで余分なプラグインをひとつ削除でき、少しだけセキュリティが向上しました。




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

参考:https://sologaku.com/wordpress/hello-dolly/

【WordPress】セキュリティ対策01(Edit Author Slug)

これは初めて知ったのでメモも兼ねて…

WordPressの初期設定では/?author=1にアクセスすると管理者のIDが分かってしまうため、セキュリティ上、弱い部分になります。
(リダイレクトでURLに管理者IDが出てしまう。)

Edit Author Slugというプラグインを使うと簡単にセキュリティをアップ出来ます。

Edit Author Slug

Edit Author Slug

まず、WordPressの管理画面上で
「プラグイン」→「新規追加」と進みEdit Author Slugで検索をします。
インストール→有効化し、次に

「ユーザー」→「ユーザー一覧」に進みます。
「管理者」のIDをクリックし、プロフィールの一番下までスクロールし、
「投稿者スラッグ」を初期設定から変更します。

これだけだとユーザーID=表示名になっている場合が多いので
同じページの中段…「ニックネーム (必須)」と「ブログ上の表示名」も変更すると完璧です。

このサイトの動作を確認してみてください。
https://www.uki213.com/memo/?author=1
(リダイレクトされてもIDではなく設定したスラッグの「1」がURLに出ます。)

設定内容としては、
「投稿者スラッグ」を上から二番目の数字(今回の場合「1」)
「ニックネーム (必須)」と「ブログ上の表示名」もそれに合わせて「1」に変更しています。

管理者を複数設定している場合は同様の設定変更を行っていきます。
(管理者は必要最低限にしたほうがセキュリティ対策としても良いかもしれません。)




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

参考:https://sologaku.com/wordpress/redirect-security/