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

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

つい先日、ヨメレバカエレバトマレバというブログパーツを使いはじめました。

ブログパーツのスタイルを格好良くしたくて、スタイル定義(CSS)をネットでいろいろと探してみたのですが、どれも中央揃えでブログのデザインに合いません。

ということで、左揃えのスタイル定義(CSS)を自分で作ってみました。

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

スポンサーリンク

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

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

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

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

昨日(2018.08.08)ようやく、ホットペッパーグルメから提携承認されましたので、早速タベレバのスタイル定義を追加しました。

スタイルの特徴

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

  • モバイルファーストで記述(横幅 576px で表示を切り替え)
  • 画像のサイズが、枠の範囲より大きい場合には、縦横比を維持したまま、枠に収まるように縮小表示(内接)
  • 画像のサイズが、枠の範囲より小さい場合には、そのまま表示(隙間ができます)
  • 文字列は、ぴったり左揃え
  • ボタンは、きっちり収める
  • ベンダープレフィックスは、使わない
  • posted with は最後に表示(2018.07.09 変更)

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

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

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

スタイル定義(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: 240px;
}
@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: 30%;
    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: 8px 0;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  color: #fff;
  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 {
  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;
}

あとがき

本当は、画像サイズが小さい場合は、縦横比を維持したまま、枠の大きさまで拡大したかったのですが、object-fixプロパティに対応していないブラウザがあるため、止めておきました。

スマホ

また、ポチレバも対応しようかと思いましたが、ポチレバの HTML の構造が他と違うので、今回は止めてしまいました。

そもそもボクは、スマホを持ってないので、ポチレバでおすすめできないのですけどね。

コメント

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