ごけたです
私にとってセンシティブ画像は皮膚関連です。
目次
はじめに
今回は「Wordpress」編です。
久ぶりにWordpressをいじっていると画像のリンク設定どうなっているのか
確認すべく、画像に画像のリンク設定を行ってみました。
Google、サーバーの規約内でのセンシティブ対応にもなるかと思います。
ページ構成
画像、その下に説明文の構成になっています。
画像はクリックすると拡大されて表示されます。
WordPress 7.0.1 ブロックエディタ使用
事前準備
実際に表示させたい画像1枚
ここでは「open_001」としています
実際に表示させたい画像にモザイクをかけた画像1枚
ここでは「sample_001」としています
解像度は大きめの1,000×1,000ピクセルにしています。
画像をアップロード 01
投稿画面内をクリックして「ブロックの追加」を表示させます
「ブロックの追加」の検索欄に「画像」アイコンが表示されていれば「画像」アイコンをクリック
※「画像」アイコンの表示がなければ「検索欄」に「画像」と入力
→「検索結果欄」から「画像」アイコンをクリックします。
フォルダから直接アップロード画面に画像をアップロードさせるので
メニュー一覧から「メディアライブラリ」をクリックします
「メディアを選択またはアップロード」画面に表示が切り替わります
→新規に画像をアップロードするので「ファイルをアップロード」タグをクリックします
アップロード画面に表示が切り替わります
→事前準備で用意した画像をフォルダから画面内に「ドラッグ＆ドロップ」させます。
「実際に表示させたい画像にモザイクをかけた画像」からアップロード
「実際に表示させたい画像にモザイクをかけた画像」-「sample_001」を自分が用意・保存したフォルダ内から
WordPressのアップロード画面へ「ドラッグ＆ドロップ」させます
アップロード画面左上に「ドラッグ＆ドロップ」させた「実際に表示させたい画像にモザイクをかけた画像」-「sample_001」が表示されます
アップロートが確認できたらこのままの状態で
アップロード画面右側メニュー右下の「選択」ボタンをクリックします
投稿画面内に実際に表示させたい画像にモザイクをかけた画像」-「sample_001」が表示されます
「実際に表示させたい画像」をアップロード
次に「実際に表示させたい画像」をアップロードします
手順は上記と同じで、投稿画面内をクリックします
→「ブロックを追加」アイコンをクリックします
→検索結果欄から「画像」アイコンをクリックします
→フォルダから直接アップロード画面に画像をアップロードさせるので
メニュー一覧から「メディアライブラリ」をクリックします
「メディアを選択またはアップロード」画面に表示が切り替わります
→新規に画像をアップロードするので「ファイルをアップロード」タグをクリックします
アップロード画面に表示が切り替わります
→事前準備で用意した画像をフォルダから画面内に「ドラッグ＆ドロップ」させます。
「実際に表示させたい画像」-「open_001」を自分が用意・保存したフォルダ内から
WordPressのアップロード画面へ「ドラッグ＆ドロップ」させます
アップロード画面左上に「ドラッグ＆ドロップ」させた「実際に表示させたい画像」-「open_001」が表示されます
アップロートが確認できたらこのままの状態で
アップロード画面右側メニュー内の「ファイルのURL」を探します
→「ファイルのURL」をマウスで選択反転させます
→選択反転させて状態でマウスを右クリックします
→メニュー一覧から「コピー」をクリックします
→コピーした「ファイルのURL」をメモ帳などに一旦ペーストしておきます
画面右上の「X(閉じる)」をクリックして「メディアを選択またはアップロード」画面自体を閉じます
投稿画面に表示が戻ります
→「実際に表示させたい画像」-「open_001」用に使用した
「メディアを選択またはアップロード」画面は不要なので上部メニュー右隅の
「縦3点メニュー」をクリックします
→メニュー一覧から「削除」をクリックします
投稿画面内には「実際に表示させたい画像にモザイクをかけた画像」-「sample_001」だけが表示されます
「ファイルのURL」をペーストして画像のリンク設定を行う
「実際に表示させたい画像にモザイクをかけた画像」-「sample_001」の画像上下どちらからに表示されるメニュー内から「リンク」アイコンをクリックします
→プルダウンメニューから一番上の「URLをペーストまたは入力して検索」欄に
メモ帳などにペーストした「ファイルのURL」をこちらにコピペします
→コピペ後にコーボードの「Enterキー」を押します
→リンクアイコンが反転表示されています
これで「画像に画像のリンク設定」はおわりです。
一旦画面右上の「下書き保存」をクリックします
リンクの動作確認
→右隣の「表示」をクリック→プルダウンメニューから
「新しいタブでプレビュー」をクリック
→「実際に表示させたい画像にモザイクをかけた画像」-「sample_001」をクリック
→「実際に表示させたい画像」-「open_001」が別途枠で表示されれば
設定確認は完了になります。
画像の解像度を変更してリンク設定の確認
今回は既にアップロード済の画像を使用します
→「実際に表示させたい画像にモザイクをかけた画像」-「sample_001」をクリック
投稿画面内に→「実際に表示させたい画像にモザイクをかけた画像」-「sample_001」が表示されます
投稿画面右メニューから「ブロック」をクリック
→「歯車-設定」アイコンをクリックします
「解像度」を「大」から「中」変更設定します
投稿画面内の「実際に表示させたい画像にモザイクをかけた画像」-「sample_001」の「中」サイズで表示されます
あとは上記に書いた「実際に表示させたい画像にモザイクをかけた画像」-「sample_001」の「ファイルのURL」を
メモ帳などにコピペ
→「実際に表示させたい画像にモザイクをかけた画像」-「sample_001」のメニューから
「リンク」アイコンをクリック
→「リンク」アイコン下の「URLをペーストまたは入力して検索」欄に
メモ帳などにペーストした「ファイルのURL」をこちらにコピペします
→コピペ後にコーボードの「Enterキー」を押します
→リンクアイコンが反転表示されています
→投稿画面右上の「表示」アイコンをクリック
→プルダウンメニューから「新しいタブでプレビュー」をクリック
プレビュー画面にも「中サイズ」で「実際に表示させたい画像にモザイクをかけた画像」-「sample_001」が
表示されます
→画像をクリックします
「実際に表示させたい画像」-「open_001」が別途枠で元のフルサイズのまま表示されました。
「実際に表示させたい画像にモザイクをかけた画像」-「sample_001」を「中サイズ」に変更しても
連動して「中サイズ」で表示せることはありませんでし
さいごに
表示させたい画像、表示させたい画像にモザイクをかけた画像を各1枚用意。
「表示させたい画像にモザイクをかけた画像」を先にアップロード
東京画面内に表示
次に「表示させたい画像」をアップロード
こちらは「ファイルのURL」をコピーして
「表示させたい画像にモザイクをかけた画像」に「リンク」させます
新しいタブでプレビュー画面でクリックして「表示させたい画像」が表示されれば設定完了。
「表示させたい画像」にモザイクをかけた画像を500×500
「「表示させたい画像」を700×700くらいで用意すると
表示した時にあまり負荷なく表示できると思います。
最後までお読みいただき有難うございました。