Twenty Seventeenの画像の枠を消す方法

Twenty Seventeenで記事などに画像をアップロードすると、黒い枠が付きます。黒い枠が付くと、「トンネル効果」により画像がくっきりしますが、逆にすっきり表示したい場合には、不都合です。そこで、この枠を消す方法です。

枠は普通borderで指定されていますが、Twenty Seventeenではborderではなく、box-shadowになっています。ややこしい話ですね。

Twenty Seventeenでは、テーマの色として「ライト」、「ダーク」、および「カスタム」の三種類が用意されていますが、「ダーク」と「カスタム」ではCSSの上書きが起きるため、「ライト」の設定ではうまくいきません。この点に注意して下さい。

テーマの色がライトの場合に画像の枠を消す方法

style.cssに下記のコードを追加します。

.entry-content a img {
    -webkit-box-shadow: none;
    box-shadow: none;
}

テーマの色が「ダーク」または「カスタム」の場合に画像の枠を消す方法

style.cssに下記のコードを追加します。

.entry-content a img {
    -webkit-box-shadow: none !important;
    box-shadow: none;
}

しかし、こうして枠だけ消しても、まだリンクの下線が残ってしまい、これがかなりうっとうしいです。そこでそれも消してしまいましょう。

テーマの色がライトの場合に画像のリンクの下線を消す方法

style.cssに下記のコードを追加します。

.entry-content a {
        -webkit-box-shadow: none;
        box-shadow: none;
}

テーマの色が「ダーク」または「カスタム」の場合に画像のリンクの下線を消す方法

style.cssに下記のコードを追加します。

.entry-content a {
        -webkit-box-shadow: none !important;
        box-shadow: none;
}

よく見れば、同じコードなので、まとめてやればいいですね。

テーマの色がライトの場合に画像の枠と下線を消す方法

style.cssに下記のコードを追加します。

.entry-content a img, a {
        -webkit-box-shadow: none;
        box-shadow: none;
}

テーマの色が「ダーク」または「カスタム」の場合に画像の枠と下線を消す方法

style.cssに下記のコードを追加します。

.entry-content a img, a {
        -webkit-box-shadow: none !important;
        box-shadow: none;
}

こうしてまとめると、1000分の1秒ぐらい表示が速くなるかもしれません。まあ、そこまでは行かないかもしれませんね(笑)。

お好きな方をお使いいただければいいと思います。わかりやすく分けるか、スピード重視で100万分1秒でも早く表示させるために一つにまとめるか、どちらかに方針を決めればいいです。