ブログを書いていて、背景の白と、画像の背景の白を区分けしたいときや、写真を浮かせたい時ってありますよね。
そういう時に簡単な方法を見つけましたので、書いておきます。
まぁ、これもJINの説明をちゃんと読めば書いてあるのですが、実際にやりたいことができないと読み込まないものですよね。
例えば
何もしないで写真を貼ると⬇︎こうなりますよね。
で、影をつけると、こんな風に⬇︎なります。
どうするかというと、とても簡単。投稿編集ページの上部にある「ショートコード」から「画像加工」→「影だけをつける」を選ぶと、ショートコード([jin-img-xxxx]みたいなヤツです)と共に、ここに画像を貼り付けてくださいという文字が出てきますので、そこに写真を貼り付けるだけ。
敢えて、わかりやすい画像を使っていますが、もし、写真に影をつけたい場合はこれでOKです!(無い方がいい場合もありますので、お好みで♪)
・・・そして、Twitterを見やすくする方法。Twitterを埋め込んだだけだと、PCで見た時に、左寄りになるし、境がわからなくて、あまりかっこよくないですよね。
なので、本当はTwitterをセンターに持ってきて、影をつけたかったのですができない・・
丁寧に書いてあるサイト(https://ryokan1123.comさん、https://yurupura.comさん)があったので、その通りにやってみたのですがダメでした。もう少し勉強して、簡単な方法を見つけたら、またご紹介します。
ただ、出来る方もきっといらっしゃると思うので、記載しておきますね!
CSS部分を触ることになるので、必ずバックアップを取ってから作業してください。カスタマイズは何が起きても自己責任で何卒よろしくお願いします。
方法は、「外観」→「カスタマイズ」→「追加 CSS」に続けて、下記を丸々コピーして貼り付けるだけ。CSSを触るので、上記の注意点は守ってくださいね!
/*埋め込みツイートを中央表示&ぼかし影を付けるCSSコード*/
.twitter-tweet {
margin: 0 auto !important;
box-shadow: 0 0 5px gray;
border-radius: 6px!important;}
/*埋め込んだツイートを中央表示させて外枠に影を付けるコード*/
.twitter-tweet {
margin: 0 auto !important;
box-shadow: 0 0 5px #42424230;
border-radius: 6px!important;}
仕方がないので、今はコレ⬇︎でごまかします(笑