エキサイトブログで表示される画像に装飾を加える

このブログでもちょこっと装飾をしているんですが、今回は↓このように本文の画像の装飾をしていきたいと思います。

スクリーンショットだとだいぶ味気ないですが、いい感じの写真だとよりよく見えるような気がしますね。
エキサイトブログでは、画像を貼り付けた時(中央配置の場合)に「.IMAGE_MID」という名前のクラス名が自動で付くようです。
なので、「.IMAGE_MID」にCSSを追加しましょう。

写真風のdesign

まずは定番の写真風。

.IMAGE_MID {    
   box-shadow: rgba(221, 221, 221, 0.9) 5px 5px 12px -2px;
   padding: 10px;
   border: 1px solid #ddd;
}

シンプルボーダーdesign

一番簡単にアクセントがつけられます。好きな色で装飾してみましょう。

.IMAGE_MID {    
   border: 10px solid #eee;
   box-sizing: border-box;
}

斜めストライプのカフェ風のdesign

新しいCSSでは、とうとう斜線も描けるようになったんですね、本当にすごい。
簡単にかけるのでわざわざ画像を作る手間が省けますね。

.IMAGE_MID {    
  -webkit-background-size: 10px 10px;
  background-size: 10px 10px;
  background-color: #fff;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0,
            color-stop(.25, #ddd), color-stop(.25, transparent),
            color-stop(.5, transparent), color-stop(.5, #ddd),
            color-stop(.75, #ddd), color-stop(.75, transparent),
            to(transparent));
  background-image: -webkit-linear-gradient(45deg, #ddd 25%, transparent 25%,
          transparent 50%, #ddd 50%, #ddd 75%,          
          transparent 75%, transparent);
  background-image: linear-gradient(45deg, #ddd 25%, transparent 25%,
          transparent 50%, #ddd 50%, #ddd 75%,
          transparent 75%, transparent);
  padding: 0 10px 10px 0;
}

こんな感じでアレンジは多種多様。様々なパターンを公開しているサイトさんもたくさんあるので探してみてください。

Box Shadowのエフェクトサンプル & 便利な素材まとめ

[PR]
名前
URL
画像認証
削除用パスワード
by exblog-tips | 2016-01-07 14:29 | 本文周り | Comments(0)

エキサイトブログをとことん使い倒すブログです。こんなことできないかな?をゆるっと募集中!


by エキブ