【SANGOカスタマイズしてみた】画像の上にアイコンを表示させる

画像の上にアイコンを追加してみる

カスタマイズは自己責任でやろう!

「自己責任」の意味がわからない方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。


この記事では
画像の上にアイコンをプラスするカスタマイズを説明。
CUSTOM POINT
画像の上に「◯」「✕」をプラスすることで、イメージをよりわかりやすく表現します。

こんな感じです

適切な表情

素晴らしい表情ですね。見ているだけでこちらまで幸せな気持ちになります。

不適切な表情

負のオーラが漂う表情ですね。見ているだけでこちらまで気が滅入ります。


このサイトの環境

テーマ
子テーマ
プラグイン

使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

サブクライムテキストsublime text

カスタマイズの準備

テキストエディタに書き込むコード

imgタグを囲むように以下のコードをテキストエディタに追加します。

メディア(画像)を追加するとテキストエディタではimgタグで表記されています。

1列目と3列目でimgタグを囲います。

MENくん

後で説明しますが、毎回このコードを手書きするのはめんどくさいので、プラグインを使ってワンクリックで挿入できるようにします。

追加方法難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方

カスタマイズコードの追加

「◯」のコード(CSS)


「✕」のコード(CSS)


確認の手順

  1. カスタマイズコードを保存
  2. カスタマイズしたページを開く
  3. cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

 

 

プラグインでワンクリックで使えるようにする

ワンクリックで適用できるように、このプラグインを使用します。

プラグイン Visual Editor Custom Buttons

visual-editor-custom-buttons
こちらのプラグインは登録したコードをボタンにすることができます。
手順 WordPressプラグイン新規追加「Visual Editor Custom Buttons」で検索インストール有効化

STEP 1

登録するコード

オレンジ色部分をBefore(開始タグ)に、青色部分をAfter(終了タグ)にコピーします。


STEP 2

アイコンは適当に選んでもいいですし、 ←こちらの画像を保存して、アップロードすればボタンアイコンがわかりやすいと思います。

PC側で「vecb」のファイルを作成して、その中に自分で作ったアイコンを入れます。その後にアップロード(アップロード先:…wp-content/uploads/vecbに追加)します。

STEP 3

ビジュアルエディタで適用させたい画像を選択して、追加されたボタンをクリックします。


STEP 4


テキストエディタで確認するとimgタグの前と後ろにコードが追加されています。


これで完了です。

MENくん

ワンクリックで画像にアイコンを追加できるようになりました

まとめ

追加CSSのまとめ

手順をザクッと説明
変更手順
  • テキストエディタでコードを記入。
  • FTPソフトとテキストエディタを開いて準備OK。
  • 追加のコードを書き込んで、保存。アップロード。
  • 更新して確認。
MENくん

写真のイメージが伝わりやすくなりました