ブログ運営

「Stinger3」でスマホのサムネイルを角丸にする&影を付ける方法

本日もhebinumaをご覧いただき、ありがとうございます。

今日は時間ができたので、サイトのカスタマイズばかりやってます。。いやーワードプレスって奥が深いし、やりたいと思えることなんでもできそうだけど、スキルがまだ追いついてない。地道に勉強するしなかないな。

 

角丸&影でこうなった

いまや(というか立ち上げてからずっとですが)、hebinumaを見てくださる方の大半がスマホからです。なので、スマホももうちょいイジらなきゃと思ってたんです。ずっと。

で、角丸&影付けるとこうなります!
2014-08-07 21.37.31

ほんのちょっとの角丸とほんのちょっとの影がオシャレだと勘違いして思い込んでるので、こんな具合にしてみました。

smart.cssをカスタマイズ

「外観」→「テーマ編集」→「smart.css」と進んでください。

すると中段くらいに


#container #wrap #wrap-in #main .post .entry .sumbox .attachment-150x150.wp-post-image


という箇所があります。

ここに


border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);


を追加して下さい。

つまり、完成形はこのようになります(↓)。あ、僕の場合、デフォルトにある、サムネイルのまわりの枠線は消してます。消えてもいいや!って方は、以下を丸ごとコピペすれば、上記の画像のようになります。


#container #wrap #wrap-in #main .post .entry .sumbox .attachment-150x150.wp-post-image { 
      border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        border: 1px solid #999;
        padding: 0px;
}


ちなみに、『border-radius: 10px』の数字部分を変更すると、角丸具合が変わります。数字を大きくするとより丸型に、小さくするとより四角に近づきます。

 

SPONSORED

-ブログ運営

Copyright© hebinuma , 2024 All Rights Reserved.