スポンサーリンク

WordPressの記事内画像に枠線や影を付ける(iPhoneだけで全部やる)

この記事は約4分で読めます。

コードをネットで拾って追加CSSに貼り付け

これに関しても前回の見出しのデザインと同様に、ネットからコードを拾ってきて、追加CSSに貼り付けます。

また例によって、PCを持ってないので、iPhoneだけで全部やります。(結構苦戦します)

WordPressに挿入した画像に枠線を付ける方法【CSSで簡単設定】

↑このサイトを参考にしました。

枠線でも影でもいいのでコードをコピーして、

追加CSSにshadowクラス作成

↑こんな感じで貼り付けます。(といっても、僕はちょっとクラス名(この場合はshadow)と数値を加工してます)

画像CSSクラスを設定する

投稿一覧まで誘導

WordPressアプリではなく、SafariからWordPress編集画面にログインして、「投稿」→「投稿一覧」を選択します。(WordPressアプリには画像にCSSコードを貼り付ける機能が付いてません)

投稿一覧を開いたら、編集したい記事の「編集」をクリック。

画像編集まで誘導

↑記事の中の画像をクリックするとこんなバーが出てきますので、赤丸で囲った箇所をクリック。

画像CSSクラスにshadowを入力

「画像CSSクラス」という項目があるので、そこにCSSのクラス名を入力します。

先程の画像では「img.shadow」と記載されていた箇所がありましたが、そのうちimg.を除いた「shadow」だけを入力します。

すると、

画像の周りの枠線と影

こんな感じで、画像の周りに枠線と影が表示されます。

すべての画像に一括で枠線や影をつける

しかし上記の方法では、画像一つ一つを選択して設定画面を開いて、画像CSSクラスに入力しなければなりません。

しかも、iPhoneでSafariから編集を行うと、一つの画像を編集する度に一番上まで戻されてしまいます。その度にスクロールして画像編集してまた上まで戻されてスクロールしての繰り返しになります。

とにかくめちゃくちゃ面倒くさいです。

なので一括で加工できる方法はないものかと探していたら、

CSSで記事内の画像にシャドウをつけよう!!一括指定でな!

こういう記事を見つけました。

この記事によると、影を細かく設定してコードを出力できるサイトがあるんですね。これは便利。

さて、

.entry-content img {なんとかかんとか}

みたいにすれば、ブログ内の画像を一括で編集できるそうなのでやってみました。

追加CSSに.entry-contentコードを入力

内容は、上のshadowと同じです。

こんなふうに追加CSSに貼り付けます。

んで、確認してみると…

確かに!すべての画像にきちんと枠線と影がついてました!

これで一つ一つ編集する手間が省けますね。

画像CSSクラス設定と一括適用、どちらが優先される?

一括で編集できるとなると、問題は「この画像には一括編集を適用させたくない」みたいなときに例外設定できるのかが気になります。

個別の画像CSSクラス設定の方が優先されるのであれば、「基本的な画像の枠線と影はこれに設定!でもこの画像には適用させたくない」みたいなことが叶うのか。

やってみましょう。

shadowクラスと.entry-contentコードで差をつける

黄色のマーカーのとこだけ変更しました。shadowを設定した方が優先されるなら影がほぼ出ないはずです。

さて確認してみると、

ダメでした!!

一括編集が優先されるようです。

どうすればいいんでしょう…(;・∀・)

現状、方法がわかりません。

とりあえず、

  • 追加CSSにコードを作って個別に画像に枠や影をつける
  • 一括でブログ内の全ての画像に枠や影をつける

上記二つは可能なようです。

なので、「基本的に全ての画像に枠や影をつけるが、個別に枠や影を取りたい」ということはできないようです(´・ω・`)

そして色々やってみると、例えばリンクカードの中の画像にも枠や影が出てしまうし、ブログランキングのボタンにも影響が出ます…

これらを実現するにはもう少し技術が必要とされるのかな…

もう少し調べてみますね、とりあえず以上です。


追記(2019/08/01 01:31:20):

えっと、とりあえず上記の問題を解決するために、PressSyncを導入すればなんとかなりました。

PressSyncには画像を添付する時に自動的にクラスを設定してくれる機能があるので、画像を追加しては、わざわざ一つ一つクラスを設定する必要がなく、自動的に枠と影がついてくれます。

なので、全ての画像に枠と影をつけるのではなく、枠と影をつけるクラスを用意して、画像投稿のデフォルトでクラスを設定しておけばいいということです。以上!

0
ブログランキング参加中です!クリックしてもらえるとありがたいです!
ブログランキング・にほんブログ村へにほんブログ村
タイトルとURLをコピーしました