Subscribed unsubscribe Subscribe Subscribe

B!KUMAテーマの画像にリボンをつけて、かわいいわたしを演出する。…ことができなくなった…けどちょっと何とかした

Web CSS

f:id:kudakurage:20130228192821j:plain

はてなブログに公式テーマとしてB!KUMAテーマが追加されました。
もともとのiPhone & Androidアプリの雰囲気を再現したテーマに作ったつもりです。
上の画像にあるように、写真にリボンが付くようなアレンジも加えようかと思ったのですが、あまり汎用的でないという理由からやめました。
けれど「もっともっとかわいく演出したい!」という人のために、上の画像のようなリボンを表示する方法を書いてみようと思います。

※場合によっては上手く画像が配置されない場合もあります。注意事項を読んでご利用ください

リボンの使用方法

今回紹介するのは、あくまでB!KUMAテーマでの使用方法です。なのでまずはブログの管理画面・デザインでB!KUMAテーマに変更しましょう。
別のテーマで使用したい場合は適宜変更して使ってください。

管理画面・デザインにある「カスタマイズ」の中の「デザインCSS」に下のコードをコピペで追加すればOKです。

/* @Ribbon
====================================== */
.entry-content object,
.entry-content iframe,
.entry-content span img.hatena-fotolife,
.entry-content .hatena-fotolife img,
.entry-content span[itemtype] img,
.entry-content .http-image img {
  border: 6px solid #fff !important;
  -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  -moz-box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  -ms-box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  -o-box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.entry-content img.http-bookmark {
  border: 0 !important;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.entry-content span[itemtype],
.entry-content a.hatena-fotolife,
.entry-content a.http-image {
  position: relative;
  display: inline-block;
  overflow: visible;
}
.entry-content span img.hatena-fotolife,
.entry-content a.hatena-fotolife {
  display: block;
}
.entry-content span[itemtype]::before,
.entry-content a.http-image::before,
.entry-content a.hatena-fotolife::before {
  content: url(http://cdn-ak.f.st-hatena.com/images/fotolife/k/kudakurage/20130215/20130215134825.png);/* 好きなリボン画像のURLをurl( ... )の中に入れよう */
  position: absolute;
  top: -6px;
  left: -6px;
}

リボンの種類

リボンは色と文字で数種類用意してあります。
使いたいリボン画像を右クリックして「画像のURL」をコピーして、上のコードの入力箇所「content: url(...)」の括弧の中の...を置き換えるようにペーストしてください。

- Like! Love♥ Good おいしい。 大好き♥
Red
Yellow
Green
Blue
Black

注意事項

  • スタイルには画像などにフレームや影を付けるコードも含まれています
  • 右回り込みの画像や中央揃えの画像には上手く適用できません
  • ご利用は自己責任でお願いします

ダメだった〜

マークアップ変わってダメになった〜(´・(エ)・`)
しかし、その後なんとか対応させて編集しましたが、だいぶ環境が限られるだろうなぁ〜(´(ェ)`)