スーパーセントウです！

 

本記事はWordPressの実験用です。

馬とは関係ありません。

 

注意事項

本記事の方法はWordPressのテーマのCSSを直接編集します。

テーマのバージョンアップ時はCSSが初期化されることがあるので、

そのたびに対応が必要です。

 

はじめに

今使っているWordPressのテーマで写真をのせるとこうなります。

写真のまわりが枠取りされていますね。

 

まぁ写真はこれでいいのですが、

デザイン的なものをのせても一緒です。

この通りです。

 

 

画像のタグ

上のイメージをテキストモードで見ると以下のように記載されています。

<a href=”http://mi＊＊＊><img class=”alignn＊＊＊/></a>

aタグとimgタグが使われてますね。

aはハイパーリンク用なので、imgタグを加工してみたいと思います。

 

 

指定の１画像だけ反映させる方法

「WordPress 画像 影 削除」でググると、テーマのCSSをいじって、

全画像を対象に影を消す記事が多いです。

 

今回は指定の１画像だけに反映させたい！

 

①テーマのスタイルシートを開きます。

 

②スタイルシートの最下部にimgのclassを追記します。

今回は”shadownone”というclass名にしました。

ここは好きな名前を指定してください。

追記したら「ファイルの更新」ボタンをクリックしましょう！

スタイルシートの設定はこれで完了。

 

③記事にメディアを追加してみる。

貼り付けた画像をテキストモードで見ると以下のように記載されています。

赤線で引いたようなクラス名になっていますね。

 

④さっき作ったクラス名を追記する。

書き換えて見ましょう！

作ったクラス名を追記する。（2020/5/7 よりよい手順に更新）

 

作業はこれだけ！！

 

加工後はこんな感じ！

＜加工後＞

 

 

設定後反映されない場合

あれ？変わってないぞ！って意見もあると思います。

ここからは大事な大事な注意点です。

・ビジュアルモードで見ても反映されていないように見えます。

これはこういう設定なんでしょう。

プレビューで確認してください。

・公開後も設定が変わってないように見えるぞ！って人が多数でしょう。

ブラウザのキャッシュが更新されるまで反映されません。

即反映させるにはキャッシュをクリアしてください。

 

やりたかったことができたので、

固定ページを中心に反映させていってみます！

[ad#co-1]