【スタイル】ヨメレバ・カエレバ・トマレバ・タベレバを左揃えに その2 (巨大画像+地味ボタン版)

その他 インターネット
この記事は約16分で読めます。

ひとの好みは、十人十色ひとそれぞれです。

ということで、ヨメレバカエレバトマレバタベレバの画像をさらに大きくした CSS を作ってみました。

なお WordPress(ワードプレス)のテーマ「Cocoon(コクーン)」の場合は、自前でスタイル定義(CSS)をしているので、特別な対応が必要です。

スポンサーリンク

今回の主な変更点

モバイル表示では、画像の大きさは前回とほとんど変えてありません。

なお今回は、ボタンの文字色と背景色を反転して、ボタンを控えめにしてみました。
マウスポインターをボタンに合わせると、文字色と背景色が反転します(2018.09.20)。

前回の CSS のボタンデザインをコピぺ(コピー&ペースト)すれば、色使いを元に戻せますし、こちらの CSS のボタンデザインをコピペすれば、前回の色使いを変えられます。

ヨメレバ・カエレバ・トマレバ・タベレバのスタイル

ヨメレバ・カエレバ・トマレバ・タベレバのスタイルは、つぎのようになります。

スタイルは基本的にテーマ「Simplicity2」で、ボタンは SNSシェアボタンの「バイラル白タイプ」に似せています。

ロゴではありませんが、Amazon については「Amazonロゴ ブランドガイドライン」にしたがい、イカ墨色(#333E48)と白色(#FFFFFF)にしています。

スタイルの特徴

スタイル定義(CSS)に記述したおもなスタイルの特徴は、前回と同様につぎの通りです。

  • 今流行りのモバイルファーストで記述(横幅 576px で表示を切り替え)
  • 画像のサイズが、枠の範囲より大きい場合には、縦横比を維持したまま、枠にぴったり収まるように縮小表示(内接)
  • 画像のサイズが、枠の範囲より小さい場合には、そのまま表示(隙間ができます)
  • 文字列は、ぴったり左側で揃える
  • ボタンは、ボタンの領域に隙間なくはめ込む
  • 将来に禍根を残す、ベンダープレフィックスは、使わない
  • posted with は外枠の最後に表示して目立たせる

ブログパーツのコードの生成

たとえばヨメレバでは、つぎの選択肢を選んで、ブログパーツのコードを生成しました。

  1. デザイン:「amazlet風-2(cssカスタマイズ用)」
  2. 画像サイズ:「画像大」
  3. rel=「nofollow」
画像サイズは、最大サイズを指定する必要はなく、ある程度大きければいいです

スタイル定義(CSS)

現在は、つぎのスタイル定義(CSS)を自分の環境に追加しております。

なお、最初の方で定義している背景色、文字色やリンク色などは、コメントアウトして、自分の環境の色が有効になるようにしています。

/******************************
 * カスタム レバ
 * ヨメレバ, カエレバ, トマレバ
 * タベレバ
 *****************************/

.cstmreba {
  background-color: #fff;
  color: #333;
  font-size: 4vw;
  line-height: 1.75;
}
@media screen and (min-width: 576px) {
  .cstmreba {
    font-size: 16px;
  }
}

.cstmreba a {
  color: #1565c0;
  text-decoration: underline;
}

.cstmreba a:visited {
  color: #6a1b9a;
}

.cstmreba a:hover {
  color: #c62828;
  text-decoration: none;
}

.cstmreba a img:hover {
  opacity: .6;
}

.cstmreba p,
.cstmreba img {
  margin: 0;
  padding: 0;
}

.cstmreba {
  margin: 1.5em 0;
}

/*
 * 外枠
 */

.cstmreba .booklink-box,
.cstmreba .kaerebalink-box,
.cstmreba .tomarebalink-box,
.cstmreba .taberebalink-box {
  position: relative;
  padding: 4%;
  border: 1px solid #ddd;
  border-radius: 4px;
}
@media screen and (min-width: 576px) {
  .cstmreba .booklink-box,
  .cstmreba .kaerebalink-box,
  .cstmreba .tomarebalink-box,
  .cstmreba .taberebalink-box {
    padding: 12px;
  }
}

/*
 * 画像の枠
 */

.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image,
.cstmreba .taberebalink-image {
  margin-bottom: 4%;
  height: 260px;
}
@media screen and (min-width: 576px) {
  .cstmreba .booklink-image,
  .cstmreba .kaerebalink-image,
  .cstmreba .tomarebalink-image,
  .cstmreba .taberebalink-image {
    float: left;
    margin: 0 12px 0 0;
    width: 44%;
    height: auto;
    line-height: 0;
  }
}

/* 画像の表示方法 */
.cstmreba .booklink-image a img,
.cstmreba .kaerebalink-image a img,
.cstmreba .tomarebalink-image a img,
.cstmreba .taberebalink-image a img {
  max-width: 100%;
  max-height: 100%;
}

/*
 * 情報枠
 */

.cstmreba .booklink-info,
.cstmreba .kaerebalink-info,
.cstmreba .tomarebalink-info,
.cstmreba .taberebalink-info {
  overflow: hidden;
  margin-bottom: 2em;
}

/* 名前 */
.cstmreba .booklink-name,
.cstmreba .kaerebalink-name,
.cstmreba .tomarebalink-name,
.cstmreba .taberebalink-name {
  overflow: hidden;
  font-weight: bold;
  font-size: large;
}

/* posted with */
.cstmreba .booklink-powered-date,
.cstmreba .kaerebalink-powered-date,
.cstmreba .tomarebalink-powered-date,
.cstmreba .taberebalink-post {
  position: absolute;
  bottom: 12px;
  font-weight: normal;
  font-size: small;
}

/* キャッチコピー */
.cstmreba .taberebalink-catch {
  font-weight: bold;
  font-size: small;
}

/* 詳細情報(名前と年月日または住所) */
.cstmreba .booklink-detail,
.cstmreba .kaerebalink-detail,
.cstmreba .tomarebalink-address,
.cstmreba .taberebalink-address {
  font-size: small;
}

/* ボタン枠 */
.cstmreba .booklink-link2,
.cstmreba .kaerebalink-link1,
.cstmreba .tomarebalink-link1,
.cstmreba .taberebalink-link1 {
  margin: 1em -1% 0;
}

/* ボタン配置 */
.cstmreba .booklink-link2 > div,
.cstmreba .kaerebalink-link1 > div,
.cstmreba .tomarebalink-link1 > div,
.cstmreba .taberebalink-link1 > div {
  float: left;
  margin: 0 1% .5em;
  width: 98%;
}
@media screen and (min-width: 576px) {
  .cstmreba .booklink-link2 > div,
  .cstmreba .kaerebalink-link1 > div,
  .cstmreba .tomarebalink-link1 > div,
  .cstmreba .taberebalink-link1 > div {
    width: 48%;
  }
}

/* ボタンのアイコン */
.cstmreba .booklink-link2 img,
.cstmreba .kaerebalink-link1 img,
.cstmreba .tomarebalink-link1 img {
  display: none;
}

/*
 * フロート解除
 */

.cstmreba .booklink-footer {
  clear: both;
}

/********************
 * ボタンデザイン
 ********************/

.cstmreba .booklink-link2 a,
.cstmreba .kaerebalink-link1 a,
.cstmreba .tomarebalink-link1 a,
.cstmreba .taberebalink-link1 a {
  display: block;
  padding: 6px 0;
  border: 2px solid;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: medium;
}

.cstmreba .booklink-link2 a:hover,
.cstmreba .kaerebalink-link1 a:hover,
.cstmreba .tomarebalink-link1 a:hover,
.cstmreba .taberebalink-link1 a:hover {
  color: #fff;
}

/*
 * レバ共通
 */

/* Amazon, Kindle */
.cstmreba .shoplinkamazon a,
.cstmreba .shoplinkkindle a {
  border-color: #333e48;
  color: #333e48;
}

.cstmreba .shoplinkamazon a:hover,
.cstmreba .shoplinkkindle a:hover {
  background-color: #333e48;
}

/* 楽天市場, 楽天ブックス, 楽天Kobo */
.cstmreba .shoplinkrakuten a,
.cstmreba .shoplinkrakukobo a {
  border-color: #bf0000;
  color: #bf0000;
}

.cstmreba .shoplinkrakuten a:hover,
.cstmreba .shoplinkrakukobo a:hover {
  background-color: #bf0000;
}

/* Yahoo!ショッピング, Yahoo!トラベル */
.cstmreba .shoplinkyahoo a {
  border-color: #f03;
  color: #f03;
}

.cstmreba .shoplinkyahoo a:hover {
  background-color: #f03;
}

/* セブンネット */
.cstmreba .shoplinkseven a {
  border-color: #e89312;
  color: #e89312;
}

.cstmreba .shoplinkseven a:hover {
  background-color: #e89312;
}

/*
 * ヨメレバ
 */

/* honto */
.cstmreba .shoplinkbk1 a {
  border-color: #0085cd;
  color: #0085cd;
}

.cstmreba .shoplinkbk1 a:hover {
  background-color: #0085cd;
}

/* e-hon */
.cstmreba .shoplinkehon a {
  border-color: #1eb2c0;
  color: #1eb2c0;
}

.cstmreba .shoplinkehon a:hover {
  background-color: #1eb2c0;
}

/* 紀伊國屋書店 */
.cstmreba .shoplinkkino a {
  border-color: #004097;
  color: #004097;
}

.cstmreba .shoplinkkino a:hover {
  background-color: #004097;
}

/* ジュン */
.cstmreba .shoplinkjun a {
  border-color: #086f78;
  color: #086f78;
}

.cstmreba .shoplinkjun a:hover {
  background-color: #086f78;
}

/* ebookjapan */
.cstmreba .shoplinkebj a {
  border-color: #f8485e;
  color: #f8485e;
}

.cstmreba .shoplinkebj a:hover {
  background-color: #f8485e;
}

/* 図書館 */
.cstmreba .shoplinktoshokan a {
  border-color: #999;
  color: #999;
}

.cstmreba .shoplinktoshokan a:hover {
  background-color: #999;
}

/* ネットオフ */
.cstmreba .shoplinknetoff a {
  border-color: #6db131;
  color: #6db131;
}

.cstmreba .shoplinknetoff a:hover {
  background-color: #6db131;
}

/*
 * カエレバ
 */

/* Yahoo!オークション(ヤフオク) */
.cstmreba .shoplinkyahooAuc a {
  border-color: #ffcf0f;
  color: #ffcf0f;
}

.cstmreba .shoplinkyahooAuc a:hover {
  background-color: #ffcf0f;
}

/* ベルメゾン */
.cstmreba .shoplinkbellemaison a {
  border-color: #7dbe24;
  color: #7dbe24;
}

.cstmreba .shoplinkbellemaison a:hover {
  background-color: #7dbe24;
}

/* セシール */
.cstmreba .shoplinkcecile a {
  border-color: #8e0848;
  color: #8e0848;
}

.cstmreba .shoplinkcecile a:hover {
  background-color: #8e0848;
}

/* au PAY マーケット */
.cstmreba .shoplinkwowma a {
  border-color: #eb5505;
  color: #eb5505;
}

.cstmreba .shoplinkwowma a:hover {
  background-color: #eb5505;
}

/* 価格コム */
.cstmreba .shoplinkkakakucom a {
  border-color: #023a96;
  color: #023a96;
}

.cstmreba .shoplinkkakakucom a:hover {
  background-color: #023a96;
}

/*
 * トマレバ
 */

/* 楽天トラベル */
.cstmreba .tomarebalink-box .shoplinkrakuten a {
  border-color: #4bcd00;
  color: #4bcd00;
}

.cstmreba .tomarebalink-box .shoplinkrakuten a:hover {
  background-color: #4bcd00;
  color: #fff;
}

/* じゃらんnet */
.cstmreba .shoplinkjalan a {
  border-color: #ff5800;
  color: #ff5800;
}

.cstmreba .shoplinkjalan a:hover {
  background-color: #ff5800;
}

/* JTB */
.cstmreba .shoplinkjtb a {
  border-color: #c71628;
  color: #c71628;
}

.cstmreba .shoplinkjtb a:hover {
  background-color: #c71628;
}

/* 近畿日本ツーリスト */
.cstmreba .shoplinkknt a {
  border-color: #0062b2;
  color: #0062b2;
}

.cstmreba .shoplinkknt a:hover {
  background-color: #0062b2;
}

/* 一休.com */
.cstmreba .shoplinkikyu a {
  border-color: #bf9500;
  color: #bf9500;
}

.cstmreba .shoplinkikyu a:hover {
  background-color: #bf9500;
}

/* るるぶトラベル */
.cstmreba .shoplinkrurubu a {
  border-color: #006;
  color: #006;
}

.cstmreba .shoplinkrurubu a:hover {
  background-color: #006;
}

/*
 * タベレバ
 */

/* ホットペッパーグルメ */
.cstmreba .shoplinkhotpepper a {
  border-color: #d0111b;
  color: #d0111b;
}

.cstmreba .shoplinkhotpepper a:hover {
  background-color: #d0111b;
}

あとがき

最近新たに、タベレバというブログパーツが増えたので、CSS の肥大化が進んでいます。

太ったペットの猫

このまま、ブログパーツが増え続けると、CSS がどんどん大きくなってしまうので、どこかのタイミングで、どうにかならないでしょうかね。

ヨメレバ、カエレバ、トマレバ、タベレバの基本的な構造は同じなので、クラス名が共通になればいいのですけどね。

コメント

タイトルとURLをコピーしました