【スタイル】コクーンのヨメレバ・カエレバ・トマレバ・タベレバの画像を大きくする

ワードプレス
この記事は約28分で読めます。
スポンサーリンク

WordPress(ワードプレス)のテーマ「Cocoon(コクーン)」を使用すると、ヨメレバカエレバトマレバタベレバというブログパーツのスタイルが、すでに定義されています。

表示される画像が小さくて目立たないので、大きめの画像が表示されるようにスタイル定義(CSS)を作ってみました。

大画面スクリーン

テーマ「Cocoon」のスタイル定義(CSS)に変更があると、表示が崩れるおそれがあります。

ブロックエディターの場合、ブロックの操作をうまく行わないと、HTMLコードの中に空白や空行を挿入されて、表示が崩れることがあります。

スタイル定義(CSS)の中には、たくさんの「!important」が入っています。
テーマ「Cocoon」のスタイル定義(CSS)で使われているため、仕方なく入れています。

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

表示される画像を大きくするため、たとえばカエレバでは、つぎのような選択肢を選んで、ブログパーツのコードを生成しています。

  1. デザイン:「amazlet風-2(cssカスタマイズ用)」
  2. 画像サイズ:「画像大」
  3. rel=「nofollow」

画像サイズは、最大サイズを指定する必要はなく、ある程度大きければいいです。

ブランドカラー派手バージョン

Cocoon の中では、「ブランドカラー」とよばれるボタンのスタイルです。
ボタンにマウスカーソルを乗せると、色が半透明になります。

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

イメージ

スタイル定義(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 .booklink-box,
.cstmreba .kaerebalink-box,
.cstmreba .tomarebalink-box,
.cstmreba .taberebalink-box {
  position: relative;
  box-sizing: border-box;
  margin: 1.6em auto;
  padding: 4%;
  width: 100%;
  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 {
    display: flex;
    padding: 12px;
  }
}

/*
 * 画像の枠
 */

.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image,
.cstmreba .taberebalink-image {
  float: none !important;
  box-sizing: border-box;
  margin: 0 0 4% !important;
  width: auto;
  height: 240px !important;
}
@media screen and (min-width: 576px) {
  .cstmreba .booklink-image,
  .cstmreba .kaerebalink-image,
  .cstmreba .tomarebalink-image,
  .cstmreba .taberebalink-image {
    float: left !important;
    margin: 0 12px 0 0 !important;
    width: 30%;
    height: auto !important;
    line-height: 0;
  }
}

.cstmreba .booklink-image a,
.cstmreba .kaerebalink-image a,
.cstmreba .tomarebalink-image a,
.cstmreba .taberebalink-image a {
  display: inline;
}

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

/*
 * 情報枠
 */

.cstmreba .booklink-info,
.cstmreba .kaerebalink-info,
.cstmreba .tomarebalink-info,
.cstmreba .taberebalink-info {
  overflow: hidden;
  margin-bottom: 2em;
  padding-left: 0;
  text-align: left !important;
  line-height: inherit;
}
@media screen and (min-width: 576px) {
  .cstmreba .booklink-info,
  .cstmreba .kaerebalink-info,
  .cstmreba .tomarebalink-info,
  .cstmreba .taberebalink-info {
    width: 70%;
  }
}

/* 名前 */
.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 {
  display: flex;
  margin: 1em 0 0;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (min-width: 576px) {
  .cstmreba .booklink-link2,
  .cstmreba .kaerebalink-link1,
  .cstmreba .tomarebalink-link1,
  .cstmreba .taberebalink-link1 {
    margin-left: 0;
  }
}

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

/* ボタンのアイコン */
.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;
  margin-bottom: 0;
  padding: 8px 0;
  border-radius: 4px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: medium;
  transition: all .3s;
}

.cstmreba .booklink-link2 a:hover,
.cstmreba .kaerebalink-link1 a:hover,
.cstmreba .tomarebalink-link1 a:hover,
.cstmreba .taberebalink-link1 a:hover {
  opacity: .6;
}

/*
 * レバ共通
 */

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

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

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

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

/*
 * ヨメレバ
 */

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

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

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

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

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

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

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

/*
 * カエレバ
 */

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

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

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

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

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

/*
 * トマレバ
 */

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

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

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

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

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

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

/*
 * タベレバ
 */

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

ブランドカラー地味バージョン

Cocoon の中では、「ブランドカラー(白抜き)」とよばれるスタイルです。
ボタンにマウスカーソルを乗せると、色が反転します。

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

イメージ

スタイル定義(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 .booklink-box,
.cstmreba .kaerebalink-box,
.cstmreba .tomarebalink-box,
.cstmreba .taberebalink-box {
  position: relative;
  box-sizing: border-box;
  margin: 1.6em auto;
  padding: 4%;
  width: 100%;
  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 {
    display: flex;
    padding: 12px;
  }
}

/*
 * 画像の枠
 */

.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image,
.cstmreba .taberebalink-image {
  float: none !important;
  box-sizing: border-box;
  margin: 0 0 4% !important;
  width: auto;
  height: 240px !important;
}
@media screen and (min-width: 576px) {
  .cstmreba .booklink-image,
  .cstmreba .kaerebalink-image,
  .cstmreba .tomarebalink-image,
  .cstmreba .taberebalink-image {
    float: left !important;
    margin: 0 12px 0 0 !important;
    width: 30%;
    height: auto !important;
    line-height: 0;
  }
}

.cstmreba .booklink-image a,
.cstmreba .kaerebalink-image a,
.cstmreba .tomarebalink-image a,
.cstmreba .taberebalink-image a {
  display: inline;
}

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

/*
 * 情報枠
 */

.cstmreba .booklink-info,
.cstmreba .kaerebalink-info,
.cstmreba .tomarebalink-info,
.cstmreba .taberebalink-info {
  overflow: hidden;
  margin-bottom: 2em;
  padding-left: 0;
  text-align: left !important;
  line-height: inherit;
}
@media screen and (min-width: 576px) {
  .cstmreba .booklink-info,
  .cstmreba .kaerebalink-info,
  .cstmreba .tomarebalink-info,
  .cstmreba .taberebalink-info {
    width: 70%;
  }
}

/* 名前 */
.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 {
  display: flex;
  margin: 1em 0 0;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (min-width: 576px) {
  .cstmreba .booklink-link2,
  .cstmreba .kaerebalink-link1,
  .cstmreba .tomarebalink-link1,
  .cstmreba .taberebalink-link1 {
    margin-left: 0;
  }
}

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

/* ボタンのアイコン */
.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;
  margin-bottom: 0;
  padding: 6px 0;
  border: solid 2px;
  border-radius: 4px;
  background-color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: medium;
  transition: all .3s;
}

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

/*
 * レバ共通
 */

/* 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;
}

あとがき

ゴールをした人

WordPress のテーマを Cocoon に変えてから、なかなか手が出せなかった ヨメレバ、カエレバ、トマレバ、タベレバのスタイル定義(CSS)がようやく出来ました。

しばらく自分の環境に適用して様子を見ていたのですが、特に問題は無さそうです。
よろしければお使いください。

コメント

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