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

公開日: : ブログ運営

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

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

SPONSORED LINK

 

角丸&影でこうなった

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

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

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

smart.cssをカスタマイズ

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

すると中段くらいに


#container #wrap #wrap-in #main .post .entry .sumbox .attachment-150×150.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-150×150.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 LINK
  • このエントリーをはてなブックマークに追加

■今週よく読まれている記事たち
hebinuma人気記事ランキングへ

■HEDGEHOG STUDIO公式サイトへ

■当サイトについて
なぜhebinumaを立ち上げたのか

◆こちらの記事もどうぞ

関連記事

流行りの「Spot.IM」というコミュニティ機能を追加。このブログ内でチャットができるようになった!…ということです。

no image

「Stinger3」の追尾型SNSボックスを消す方法

釣りもネット系も。僕が『ほぼ毎日チェックしているメディアたち』 。

ブログやってる皆さん、アクセスアップしたいならここ登録しておくといいですよ。

これ考えた人天才すぎ!後で読むことのできる「Pocket」が超ウルトラ便利!!

実家でもモリモリ仕事できるように、PC環境をレベル上げしてみた!やっぱデュアルディスプレイはめちゃ効率アップ!!

no image

YouTube動画をgif化してブログ内に埋め込む方法(Chrome編)

WordPressのサイト名が勝手に大文字になっていた原因と解決策

「Stinger3」で記事下にレクタングルを2つ並べて表示させる方法。

【大量画像】今でも存在する「蛇沼公園」、ここが当サイト hebinuma の由来です

「Pocket」をTwitter(ツイッター)でも使えるようにする方法

「Pocket」をiPhoneのsafari(サファリ)でも使えるようにする方法

「Stinger3」のフォントをメイリオに変更する方法

Windows Live Writer(WLW)で「テーマ更新」する方法

コミュニティ機能「Spot.IM」は外します。いつの日か復活させる時が来るかも。