夕方のTwitterでその情報が流れてきて、リアルタイムでレモンサワーをちびちび飲みながら近所の友人と鑑賞する予定を秒で立てました。

結局、気分屋の友人は眠気に従いキャンセル（笑）。ぼくはぼくで、今日知人が提出してくれた文章を編集して記事化するのに没頭した結果、スタバを出たのが21時半すぎだったのでコナン観れませんでした（笑）。

でも、約1年ぶりにブログをやってる知人にブログの魅力を語ってもらうインタビュー企画の記事を出せて楽しかったので後悔は無し！お忙しい中、快くそして迅速に対応してくれたあきさんに感謝です。

＞作品レビューブロガーのあきが語るブログの魅力とは？

録画して後で見ようかと一瞬考えましたが、先日電気代節約のために録画機器のコンセントを抜いたので再度設定するのが面倒だなと諦めました。

今月公開予定の灰原ちゃん映画が出たらアマプラかなんかで配信されるんじゃないかという予想。きっとそう。

スタバでキリのいいところまで作業した後は、4/1に2度目の値上げを決行なさった大好きな家系ラーメン屋さんへ。

値上げ幅は70円。780円から850円へ値上げされました。

この投稿をInstagramで見る

ゆうやの日常(@yuyauveronepiece)がシェアした投稿

Twitterアカウントをフォローしたら毎回味付け卵をサービスしてもらえる特典が地味に嬉しいです（笑）。

ちょうど1口目というところで、店内BGMでジャスティン・ビーバーの『Baby』が軽快に流れてきて高揚しました。ジャスティンのおかげでラーメン2割増しで美味しく感じました。

ジャスティン×家系ラーメンをインスタで急いでアップしたら、ジャスティンと書くべきところを「ジャステン」と誤字っちゃいました（笑）。

ストーリーにアップするのに数分かかったのは案外良かったかも。

今まではラーメンが来たら箸を止めずにグワーッと食べちゃってましたが、スマホいじったりしてゆっくり休憩とりながら食べたほうが満腹感でるなと感じました。

2023年4月7日の動画日記

動画日記1029日目！

2023年4月の日記一覧

前回のインタビューからはや１年…！時が経つのはなんと早いことか。

今回は、サンリオのシナモロール好きの作品レビューブロガーのあきさんに、ブログの魅力やブログをやっていて良かったことを聞いてみた。

あきさんのプロフィール

──簡単に自己紹介お願いします！

本や音楽、ファッションが好きです。

本は小説、古典、ビジネス書といろいろ読んでます。
音楽はポップス、ハードロックを聴いたりとジャンルレスな方です。

シナモロールをはじめとしたサンリオのキャラクターや、『夏目友人帳』のニャンコ先生を見て日々癒されてます。

メインは好きなバンドの楽曲レビュー！

──運営しているブログについて教えてください

好きなロックバンドの楽曲レビュー記事が中心の雑記ブログ「Spice of Thoughtful.」を運営しています。

こんな内容の記事を書いてます！

・大好きなバンド「DaizyStripper」のライブレポート
・好きな音源のレビュー記事
・Voicyの好きな放送（アリス九號.ヒロトさん）の内容をまとめた議事録的な記事
・元気がもらえる小説やタメになる実用書の紹介記事

──ブログ名「Spice of Thoughtful.」の由来を教えてください

読んだ人が温かい気持ちや優しい気持ちになるような“Spice of thoughtful.（優しさのスパイス）”を与えられるブログにしたいと思い名付けました。

──ブログの更新頻度はどのくらいですか？

更新頻度は週1ペースが望ましいのですが、本業やブログ以外でも書く仕事をしているので、無理のない範囲で月に何記事か更新できればいいなと思っています。

表現力を鍛えたくてブログはじめました

──ブログを始めたきっかけは？

読書エンターテインメントメディア「ReaJoy」で、月1で小説の書評を書いていたときに、「もう少し表現力をつけたい！」と思い、2年前にLINE BLOGをはじめました。

LINE BLOGをやってるうちに、自分のドメインを取得し、レンタルサーバーを借りてブログ運営している人たちがいることを知り、2022年4月にWordPressで自分のブログを立ち上げました。

ブログで新しい側面の自分に出会えました

──ブログを始めたことで身の回りに起きた変化を教えてください

ReaJoyで書評を書き始めたときからなのですが、私自身マルチタスクができないタイプだとずっと思っていたんですが、仕事しながら別のことも同時並行で両立できるんだって気づいて自分に少し自信が持てました！

あと、ブログを始める前よりは日常の中でスキマ時間を有効活用できないか意識するようになりましたね。

今いろいろ忙しくてドタバタしてますが、ブログのおかげで毎日充実しています！

大好きなあの人から直接褒められる日が来るなんて！

──ブログをやっていて良かったことは何ですか？

大好きなアーティストご本人様からブログの感想を直接聞けたことです！

ソロ・ν[NEU]のボーカルとして活動されているmitsuさんとZoomでお話した際に、

「ブログ書いてくれたんだよね。すごいよね」

と、褒めてもらえたことがすごく嬉しかったです！

ヴィジュアル系ロックバンド「アリス九號.」のギター担当のヒロトさんからは、Twitterのリプやサイン会で、

「楽曲の魅力を伝えてくれるブログだ」
「あきさんのブログを読んで（Voicyで）自分こんなこと話してるんだって整理つく」

と、直接言ってもらえたことも幸せでした。

ブログは無理せず、ぼちぼち更新していけばいい

──ブログを続けるコツは？

私が考えるブログを楽しく続けるコツは、

・無理をしない
・書きたいことを書く

の2つです。

忙しくて余裕がないときに書いた文章ってやっぱり読者に響かないし、自分自身も辛い。

心身の健康を優先した方が自分にとっても読者にとってもいいと思います。

好きなバンドの活動休止前最後のアルバムレビュー記事

──これまで書いた中で、特に思い入れのある記事を教えてください

3月に書いたアリス九號.のアルバム『Grace』のレビュー記事です！

＞『Grace 』アリス九號.ー暗闇から光へ導いてくれるアリス九號.最新傑作アルバムー

2023年9月をもって無期限の活動休止という名の凍結を発表したアリス九號.ですが、『Grace』に収録されている楽曲は、これまで応援してくれたファンへの想いがストレートに伝わってくるものや、過去1でカッコよくて痺れるものばかりだったので、ファンのみんなに伝えたいと思って一生懸命書きました。

ベストアルバム『This is DaizyStripper』を聴きながら執筆する

──音楽を聴きながらブログの作業をすることってありますか？おすすめの曲やBGMがあれば教えてください

音楽レビュー記事を書くときは、記事で紹介する楽曲を何度も聴き返しながら執筆します。

音楽レビュー記事以外を書くときは、いろいろ聴きますね。

特におすすめは、Daizy Stripperというバンドのベストアルバム『This is DaizyStripper』です！

いい曲ばかりで気分よく書き進められますね。初めての人でも聴きやすいアルバムなので、気が向いたらぜひ聴いてみてください〜！

大切な作品の生みの親に幸せになってもらえるレビュー記事を書き続ける！

──今後の活動についての意気込みをお願いします

読んだ人がみんな幸せになれるきっかけになるような記事をこれからもたくさん書いていきたいです！

ブログって「読者の悩み」に応えられる内容がいいとよく耳にしますが、個人的には読者を幸せにするだけでなく、紹介した作品を作った側の人にも幸せになってもらいたい。

私を救ってくださった方々が「これ、あの楽曲で1番伝えたかったことなんだよね」「頑張って作った甲斐があった」と思ってもらえるようなレビュー記事を書けるように頑張ります！

＞あきさんのブログを見に行く

この記事では、

という方のお悩みを解決します！

どんなシチュエーション？

WP Full Stripeで作成したフォームはデフォルトで、

• Card holder’s name
• E-mail address
• Card info

の3つの項目が表示されるようになっています。

Card infoがクレジットカード情報を入力する項目です。

正常に動作していれば、皆さんお馴染みのこんな風に表示されます。

▼▼▼

カード番号・月/年・CVC

普通に手順通りプラグインの設定をしてフォームを作成し、ショートコードを固定ページに貼り付けるだけで上の添付画像のように表示されるものだと思っていたのですが、実際やってみるとぼくはうまくいきませんでした(;_;)

その時の実際の表示
▼▼▼

これ、入力欄をクリックしてもうんともすんとも言わなかったです。

それもそのはず、デベロッパーツールで要素を確認したらinputタグではなく、なんと、divタグになっていたんですから！！

おいおい、マジか。
どうなってるんやこれ。

わけが分からず色々とググってみましたが、日本語の記事が見つからず1時間ほど悩みました。

埒が明かないと思い、公式マニュアルのトラブルシューティングを見てみました。

するとどうでしょう、ピンポイントでぼくの悩みを解決してくれるページがあったのです！！

そのページの説明によると、どうやらjQueryのエラーが問題だったようです。

参考 jQuery error when form is displayedWP Full Stripe

次の段落でその対処法を解説します！

WP Full StripeのjQueryのエラーを直す方法

本題に参ります。

結論。

以下2つのjsファイルの1行目をコメントアウトするだけで解決します！

• wpfs-manage-subscriptions.js
• wpfs.js

びっくり、簡単ですね笑笑

該当のコードはこちら！！

jQuery.noConflict();

上記をこのようにコメントアウトしてあげましょう！！

▼▼▼

// jQuery.noConflict();

コメントアウトしてあげたらFTPソフトでアップロードして表示を確認してみてくださいまし。

ちなみに、2つのjsファイルの場所は、wp-includes/assets/js/配下となります！

上記でない場合は、wp-content/plugins/wp-full-stripe/assets/js配下を確認してみてください。

お疲れ様でしたーー！！

まとめ

以上、プラグイン WP Full Stripeで作成したフォームのクレジットカード入力欄が表示されない問題を解決する方法を紹介しました。

ConsoleにjQueryのエラーが出ているのを発見したらこの記事で解説した方法で対処してみてください〜

「WordPressやWP Full Stripeに関するTipsをもっと知りたい！」

という方は以下の記事も目を通してみてください〜

【エックスサーバー】サーバーパネルからアクセス制限をかける方法とは？コードいじる必要なし！

【WP Full Stripe】日本語に翻訳する方法

この記事では、

という方のお悩みを解決します！

この記事で紹介するコードで作れるフォーム！

コーディングのポイント

お問い合わせフォームをコーディングする時のポイントは以下の5つ！

考えれば考えるほどポイント出てくるので、5つに絞りました（汗）

それではお待ちかね、上記のポイントを頭に入れて実際のサンプルコードをご覧ください〜

＊リセットCSSを適用していることが前提のコードです

お問い合わせフォームのデモ

See the Pen
JjYWmda by 石森裕也 (@yuyaphotograph)
on CodePen.

お問い合わせフォームのHTML

<div class="Form">
  <div class="Form-Item">
    <p class="Form-Item-Label">
      <span class="Form-Item-Label-Required">必須</span>会社名
    </p>
    <input type="text" class="Form-Item-Input" placeholder="例）株式会社令和">
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>氏名</p>
    <input type="text" class="Form-Item-Input" placeholder="例）山田太郎">
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>電話番号</p>
    <input type="text" class="Form-Item-Input" placeholder="例）000-0000-0000">
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>メールアドレス</p>
    <input type="email" class="Form-Item-Input" placeholder="例）example@gmail.com">
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label isMsg"><span class="Form-Item-Label-Required">必須</span>お問い合わせ内容</p>
    <textarea class="Form-Item-Textarea"></textarea>
  </div>
  <input type="submit" class="Form-Btn" value="送信する">
</div>

お問い合わせフォームのCSS

レスポンシブにも対応しているコードです！

スマートフォンの時（max-width:480px）の表示！

.Form {
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
}
@media screen and (max-width: 480px) {
  .Form {
    margin-top: 40px;
  }
}
.Form-Item {
  border-top: 1px solid #ddd;
  padding-top: 24px;
  padding-bottom: 24px;
  width: 100%;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 480px) {
  .Form-Item {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
    flex-wrap: wrap;
  }
}
.Form-Item:nth-child(5) {
  border-bottom: 1px solid #ddd;
}
.Form-Item-Label {
  width: 100%;
  max-width: 248px;
  letter-spacing: 0.05em;
  font-weight: bold;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label {
    max-width: inherit;
    display: flex;
    align-items: center;
    font-size: 15px;
  }
}
.Form-Item-Label.isMsg {
  margin-top: 8px;
  margin-bottom: auto;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label.isMsg {
    margin-top: 0;
  }
}
.Form-Item-Label-Required {
  border-radius: 6px;
  margin-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 48px;
  display: inline-block;
  text-align: center;
  background: #5bc8ac;
  color: #fff;
  font-size: 14px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label-Required {
    border-radius: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 32px;
    font-size: 10px;
  }
}
.Form-Item-Input {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: 48px;
  flex: 1;
  width: 100%;
  max-width: 410px;
  background: #eaedf2;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Input {
    margin-left: 0;
    margin-top: 18px;
    height: 40px;
    flex: inherit;
    font-size: 15px;
  }
}
.Form-Item-Textarea {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: 216px;
  flex: 1;
  width: 100%;
  max-width: 410px;
  background: #eaedf2;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Textarea {
    margin-top: 18px;
    margin-left: 0;
    height: 200px;
    flex: inherit;
    font-size: 15px;
  }
}
.Form-Btn {
  border-radius: 6px;
  margin-top: 32px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 280px;
  display: block;
  letter-spacing: 0.05em;
  background: #5bc8ac;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
}
@media screen and (max-width: 480px) {
  .Form-Btn {
    margin-top: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 160px;
    font-size: 16px;
  }
}

Contact Form 7で使う場合

上記で紹介したHTMLをWordPressのお問い合わせフォームプラグイン「Contact Form 7」で使う場合のコードもおまけで紹介します。

inputとtextarea要素をwcf7独自のタグに変更してあげる形になります。

<div class="Form">
  <div class="Form-Item">
    <p class="Form-Item-Label">
      <span class="Form-Item-Label-Required">必須</span>会社名
    </p>
    [text* your-company class:Form-Item-Input placeholder "例）株式会社令和"]
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>氏名</p>
    [text* your-name class:Form-Item-Input placeholder "例）山田太郎"]
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>電話番号</p>
    [text* your-tel class:Form-Item-Input placeholder "例）000-0000-0000"]
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>メールアドレス</p>
    <input type="email" class="Form-Item-Input" placeholder="例）example@gmail.com">
    [email* your-email class:Form-Item-Input placeholder "例）example@gmail.com"]
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label isMsg"><span class="Form-Item-Label-Required">必須</span>お問い合わせ内容</p>
    [textarea* your-msg class:Form-Item-Textarea]
  </div>
  [submit class:Form-Btn "送信する"]
</div>

まとめ

以上、コピペですぐ使えるお問い合わせフォームのHTML、CSSサンプルコードを紹介しました。

この記事に記載したコードがフォームのコーディングで頭を抱えている方の助けになれば幸いです！

次はこの記事！

Contact Form 7を使うときに役立つ記事まとめ

【CSSコピペ】案件でよく使うセレクトボックスのサンプルコード

ゆうや（@yuyaphotograph）です！

この記事では、

という方のお悩みを解決します！

ショートカットキーを自作する

プレビューボタンと更新ボタンをショートカットキーで押せるようにするには、

以上、2点のカスタマイズが必要となります！

記事を編集する上でプレビューボタンを頻繁に使用する方と更新ボタンを多用する方がいらっしゃると思うのでそれぞれ紹介させていただきます。

なお、ショートカットキー設定のスクリプトを記述するJSファイルを読み込むコードは共通なので以下を参考になさってくださいまし。

function myadmin_shortcut(){
  // 記事編集以外の画面では読み込まないようにする
  global $hook_suffix;
  if ( 'post.php' != $hook_suffix && 'post-new.php' != $hook_suffix ) {
    return;
  }
  wp_enqueue_script('wpmyscript', 'JSファイルのパス URL');
}
add_action('admin_enqueue_scripts', 'myadmin_shortcut');

JSファイルのパスは、例えばお使いのテーマがSANGOの場合、以下のようになるかと思います。

wp_enqueue_script('wpmyscript', 'https://ドメイン名/wp-content/themes/sango-child/JSファイル名');
}

プレビューボタンを押すショートカットキー

「control + Enter」でプレビューボタンを押すようにするスクリプトは以下となります！

＊shortcut-preview.jsのような名前でファイルを作成し、themes/子テーマ名/直下に配置してあげましょう。

function keyDown(e) {
  if(e.ctrlKey && e.key == 'Enter') {
    preview_button = document.getElementById('preview');
    if (preview_button){
      preview_button.click();
    }
  }
}
document.addEventListener("keydown", keyDown);

重要ポイントは、ここ！

e.ctrlKey && e.key == 'Enter'

上記の左辺が「control + Enter」を意味しているのです！

そんでもって、ここも大事なポイント。

preview_button = document.getElementById('preview')

この記述でIDがpreviewの要素を取得して変数に代入！

＊Google Chromeのデベロッパーツールで記事編集画面のプレビューボタンや更新ボタンの要素についているIDを確認することができます。

そして以下で「その要素をクリックさせる」というイベントを発火しています！

preview_button.click();

更新ボタンを押すショートカットキー

「control + Enter」で更新ボタンを押すようにするスクリプトは以下となります！

＊shortcut-update.jsのような名前でファイルを作成し、themes/子テーマ名/直下に配置してあげましょう。

function keyDown(e) {
  if(e.ctrlKey && e.key == 'Enter') {
    publish_button = document.getElementById('publish');
    if (publish_button){
      publish_button.click();
    }
  }
}
document.addEventListener("keydown", keyDown);

上述したプレビューボタンとほぼ一緒です！

異なる点はgetElementByIdで取得する要素が「publish」つまり更新ボタンであることのみ！

お世話になった記事

大変お世話になりやした！！

神記事ありがとうございました(^o^)//

参考 【作業効率化】ワードプレスのプレビューボタン押すのめんどくさくない？つめまるブログ

まとめ

うまくカスタマイズできたでしょうか？

僕と同じ様にブログと毎日向き合っている方は何度も何度もプレビューボタンと更新ボタンを押すと思います。

その毎回繰り返すルーティーンを0.5秒でも縮められたら長い目で見るとものすごい効率化に繋がると思うのでぜひ今回の記事で紹介した方法でオリジナルのショートカットキーを作って快適なWordPressライフを送ってくださいまし〜！

「もっともっとWordPressをカスタマイズして自分色に染め上げたい！」

という方は以下の記事も目を通してみてください〜

【WordPress】管理画面の配色を自分オリジナルにカスタマイズする方法

【SANGOカスタマイズ】highlight.jsでソースコード表示をかっこよくする方法

ゆうや（@yuyaphotograph）です！

本記事では、当ブログがGoogle Adsenseの広告制限を受けた時の体験談をお送りします。

2019年11月から記事の毎日更新をして右肩上がりにPV（ページビュー）も収益も上がっていたまさに絶好調だった時に突然、制限され絶望の淵に追いやられたのです。。。

そんな悲しみの淵から広告制限解除までの道のりを書き綴りました。

同様にAdsenseの広告制限を受けて「なんでおれがこんな目にあわなければならないんだ…!!!」と怒り狂っている方の助けになれば幸いです。

それでは参りましょう。

Google Adsense 広告制限体験談

Googleさんからお達しが届いた

去る2020年1月14日、Google Adsenseの管理画面を開くとこんなメッセージが表示されていました。

「表示できる広告の数が制限されています。詳しくはポリシーセンターをご確認ください。」

最初見た時は特に問題はないだろうとスルーしていたのですが、その日の広告表示回数を見て異変に気づいたのです…!!!

正常に広告が掲載されている場合、１日でだいたい500〜1,000回ほど広告表示回数があるのですが、その日はなんと０だったのです（汗）

これはおかしいぞ…何か大変なことが起きているとさすがに気付きました笑

それで先ほどの「表示できる広告の数が制限されています。」というメッセージを思い出し、その横に「ポリシーセンター」というリンクがありましたのでそちらをクリックして詳細を見にいきました。

広告配信制限は無効なトラフィックが原因

Adsenseアカウントに関する問題ページへアクセスすると、「問題」の欄に「無効なトラフィックの問題」、「適用日」の欄に「2020年1月14日」とそれぞれ記載されていました。

無効なトラフィックという言葉は初耳だったのでググってみました。

ざっくり説明すると、

というような感じです。

純粋なクリックじゃないものでも収益を発生させていたら広告主の広告費の無駄遣いになってしまうというわけですね。

無効なトラフィックの犯人は…

自分で自分の広告をクリックするようなマネは絶対していないので、何が原因だったのか調査しました。

何が原因だったのか真相はGoogleのみぞ知るというやつですが、最も心当たりがあった両親に尋ねてみました。

「広告はクリックすると収益になるけど、あんまりクリックしないようにね」

と広告配信をスタートしてから一応言ってはありましたが、「絶対にしないでね」とは言っていなかったのでまさかとは思いつつ聞いてみると父から驚きの回答がありました…!!!

「忙しくて１０回くらいしかクリックできてないわ〜」

…いやいやいや絶対それが広告制限の原因やないかーーーい！！！！笑

ということで犯人は身内でした笑

どれくらいの期間制限されたか

さて、1月14日に広告制限を受けてから一体どれくらいの期間制限されたのか気になりますよね！

ずばり、、、

１２日間でした！！！

1月14日に制限されて正常な広告表示回数に戻ったのは1月26日。

広告制限のことで頭がいっぱいで夜も眠れませんでした（うそ。爆睡してました）

表示回数は制限前と同じくらいに戻りましたが、管理画面の「表示できる広告の数が制限されています」のメッセージはいまだ残っていますがね笑

まとめ

以上、ゆうやの雑記ブログがGoogle  Adsenseの広告制限を受けた時の体験談をお送りしました。

広告制限をされているみなさん、焦らず落ち着いて制限が解除されるのを待ちましょう。

最後までご高覧いただきありがとうございました！

雑記ブログ運営報告アーカイブ

ゆうや（@yuyaphotograph）です！

本記事では、Webサイトの画像保存を禁止する方法をご紹介します。

とは言っても、「スクリーンショット」があるわけなので完全に画像保存を防止することは現実的ではないかなと今回調べてみて分かりました（汗）

ただ、それでもクライアントに「右クリックでの画像保存をできなくして欲しいんだよね…!!」と言われてしまうと対応せざるを得ませんのでその時に活躍するTipを今回紹介します。

それでは参りましょう！

Webサイトの画像保存を禁止してみよう！

右クリックを禁止する（PC対策）

imgタグにCSSでpointer-eventsプロパティのnoneを指定してあげます。

サイト全体共通のスタイリングを書いたCSSファイルに以下のように記述してあげるといいと思います(^o^)

↓↓↓

img { pointer-events: none; }

このプロパティは「いいねボタン」や「送信ボタン」を指定秒数押せなくする際にも使えますよね！(^o^)

pointer-events:noneについてより深く理解したい方は、以下MDNの説明をご覧になって下さいまし。

値をnoneに設定すると、要素がポインターイベントのターゲットではないことを示すのに加え、ポインターイベントが要素を「通過」して、代わりに要素の「下」をターゲットにすることを指示します。

（MDNより引用）

個人的にはこの方法が最も楽ちんかなと思います笑

なんたって１行コード追加するだけで対応できるんですからね〜

以下、サンプルですので右クリックして確かめてみてくださいまし。

See the Pen
pointer-events by 石森裕也 (@yuyaphotograph)
on CodePen.

ドラッグ＆ドロップを禁止する（PC対策）

今回色々な方法を調べてみていく中で目から鱗だったTipsがこちらです。

まず、「ドラッグ＆ドロップでデスクトップに画像保存することができたんだ！？」という発見がありました笑

そんで本題に戻ると、ドラッグ＆ドロップを禁止するにはimgタグもしくはbodyタグに以下コードを直接追加してあげます。

<img src="画像のURL" onselectstart="return false;" onmousedown="return false;">

こちらもCodePenでサンプル作ったのでドラッグ＆ドロップして保存できないか確認してみてくだされ。

See the Pen
ドラッグ＆ドロップ禁止 by 石森裕也 (@yuyaphotograph)
on CodePen.

長押しを禁止する（スマホ対策）

最後はスマホの長押しで保存対策。

imgタグにCSSでtouch-calloutやuser-selectプロパティのnoneを指定してあげます。

img {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  touch-callout:none;
  user-select:none;
}

最後もサンプルで確認してみてくださいまし。

See the Pen
スマホ長押しで保存対策 by 石森裕也 (@yuyaphotograph)
on CodePen.

参考記事

目から鱗をどうもありがとうございました！

参考 ウェブサイトで画像の保存を禁止する方法Creator Note

まとめ

以上、Webサイトの画像保存を禁止する方法をご紹介しました。

完璧に画像保存を禁止することは難しいなと思いました笑

最後までご高覧いただきありがとうございました！