アメブロのコメント投稿ボタンをCSS3で立体的にカスタマイズする方法

アメブロカスタマイズのわざめーばです。

こんにちは。

アメブロでは、コメント投稿ボタン(「コメントする」ボタン)をカスタマイズして画像にしているブログをよく見かけますね。

その中には、陰影のある立体的な画像を使ってクリックできることをアピールしたものもありますが、実は、ちょっとした立体的なボタンなら画像を使わなくても「CSS3」を利用することで表現することが可能です。

今回は、アメブロのカスタマイズ向けデザイン(CSS編集用デザイン)のブログのコメント投稿ボタンを、「CSS3」を利用して立体的に表現する方法をご紹介したいと思います。

作成するコメント投稿ボタンは、次のような見た目になります。


通常時


オンマウス時(マウスオーバー時)

では、やり方です。

ユーザーCSSの末尾に、以下のようなコードを追加してください。

/* コメント投稿ボタン 通常時 */
.commentBtn:before {
  content: "この記事に";
}
.commentBtn {
  width: 260px; /* ボタン幅 */
  height: 30px; /* 文字部分の高さ(全体) */
  line-height: 30px; /* 文字部分の高さ(一行) */
  padding: 30px 0; /* 文字周りの余白 上下 左右 */
  font-size: 20px; /* 文字サイズ */
  font-weight: bold; /* 太字 */
  color: #fff !important; /* 文字の色 */
  background-color: #0099ff; /* 背景の色 */
  border-color: #0077dd; /* 縁取り線の色 */
  border-radius: 20px; /* 角丸半径 */
  box-shadow/* 影(立体効果) */
    4px 4px 6px #cceeff inset, /* 内側左上ハイライト */
    -4px -4px 6px #0077dd inset, /* 内側右下シャドー */
    -2px -2px 3px #cceeff, /* 外側左上ぼかし */
    2px 2px 3px #66ccff; /* 外側右下ぼかし */
  background-image: none;
}

/* コメント投稿ボタン マウスオーバー時 */
.commentBtn:hover:before {
  display: block;
  text-align: center;
  content: "ありがとうございます♪";
  margin-bottom: 9999px;
}
.commentBtn:hover {
  color: #fff !important; /* 文字の色 */
  background-color: #ff9900; /* 背景の色 */
  border-color: #dd7700; /* 縁取りの色 */
  box-shadow:  /* 影(立体効果) */
    3px 3px 5px #dd7700 inset, /* 内側左上シャドー */
    -3px -3px 5px #ffeecc inset, /* 内側右下ハイライト */
    -2px -2px 3px #ffeecc, /* 外側左上ぼかし */
    2px 2px 3px #ffcc66; /* 外側右下ぼかし */
}

コード中の、『border-radius』『box-shadow』がCSS3で使えるようになったプロパティです。

なお、本記事では、コードの意味の詳細な説明は割愛させていただきますが、コード中の注釈を参考に、色々と試行錯誤しながら変化を楽しんでみてください。

ところで、本記事の方法は、CSS3を利用していますので、CSS3未対応のブラウザ(IE8以下など)ではちゃんと立体t機に見えません。

実際、IE8では次のような、まったく立体には見えない四角形になります。

なので、もし訪問者にIE8以下などCSS3未対応のブラウザのユーザーが多い場合は、やはり画像を使った方法のほうがいいと思います。

つまり本記事の方法は、訪問者のほとんどが、IE9以上、Firefox、Google Chrome、SafariなどのCSS3対応ブラウザのユーザーである方にお勧めします。

(ちなみに、本ブログの訪問者は本記事作成時点で約90%がCSS3対応ブラウザの利用者でした)

よかったら参考にしてください。

アメブロカスタマイズ目次
アメブロカスタマイズで成功するブログを作ろう トップページ