ブログを始める

JIN|画像に影をつける &Twitterの場所を変える・・・

ブログを書いていて、背景の白と、画像の背景の白を区分けしたいときや、写真を浮かせたい時ってありますよね。

そういう時に簡単な方法を見つけましたので、書いておきます。

まぁ、これも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;}

 

仕方がないので、今はコレ⬇︎でごまかします(笑

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です