えむしてっく

主にはてなブログのカスタマイズやapple製品関連の記事など。

スポンサーリンク

【CSS】コピペするだけ!シンプルなデザインのヨメレバ・カエレバ・トマレバ *2017年6月10日更新

\フォロー!/
\シェア!/

f:id:mshitech:20161028204559j:plain

ヨメレバ・カエレバ・トマレバをメディアクエリ無しでスマホにも対応できるようにflexboxを使って作ってみました。「続きを読む」にあるような動きのあるエフェクトはつけていません。

動作は大丈夫だと思いますが、不要な指定などが入っているかもしれませんのでご了承ください。

もしも表示崩れなどございましたら、コメント欄にて指摘していただけるとありがたいです。

ボタンにエフェクトがついているヨメレバカエレバトマレバはこちら

mshitech.hatenablog.com

修正

・10月29日 wordpressで表示されない問題を一部ではありますが解決しました。引き続き改良をして行きます。
・2016年11月2日 yahooのフォントサイズを10pxから9pxに変更しました。
・2017年6月10日 影などの要素を取り、シンプルになるようにデザインを変更しました。

はじめに

以前のバージョン(http://blog.mshimfujin.net/で公開していたもの)との違いは

  • 枠を薄くしました
  • flexboxを導入して、画像をボックスの中心に持ってくるようにしました
  • posted with~の背景部分に色をつけました
  • メディアクエリを廃止してボタンの並びを固定に
以上です。
メディアクエリを廃止したのは少しでもコードを短くしてみようと思ったからです。
メディアクエリを使ったボタンが縦に並ぶバージョンはまた今度作ろうと思います。

なお、トマレバはホテル紹介版のヨメレバカエレバです。

Flexboxについてはこちらをご参考に。

liginc.co.jp

モバイルデバイスの動作確認は、bliskで行っています。

blisk.io

完成図

f:id:mshimfujin:20170610215455p:plain

スマホだとこんな感じになります。

f:id:mshimfujin:20170610215715p:plain

このように表示の幅が狭まった場合、従来なら商品画像が上に詰められて、画像の下に余白が出来ていたのですが、構造にflexboxを採用した事により、縦の並びで見たときに丁度中心に持ってくる事が出来るようになりました。

コピペする場所

まずはコピペ場所を開きます。 場所は「デザイン」→「カスタマイズ」→「デザインCSS」です。 ここをクリックして

https://cdn-ak.f.st-hatena.com/images/fotolife/m/mshimfujin/20160925/20160925202616.png

作りとしては、スマホ版で使っても大丈夫なようになっていると思います。
スマホ版のコードの張り方は目次から飛んで該当する部分を見てください。下の方にあります。

注意点

作業の前には必ずバックアップを取りましょう。 f:id:mshimfujin:20161003192056p:plain ここ、重要です。必ず出力を「amazlet風-2(cssカスタマイズ用)」でデータを出力してください。これ以外で出力されたデータですと、表示が崩れる場合があります。

CSS

だいぶ長いですが、こちらを先ほどの欄の一番下にペーストしてください。また、すでにカスタマイズ版を導入されている方は、それを消去してからコピペしてください。

/*--------------------------------------
  ヨメレバ・カエレバ・トマレバ
--------------------------------------*/
.booklink-box, .kaerebalink-box, .tomarebalink-box{
 box-sizing: border-box;
 border: solid 1px #ccc;
 border-radius: 2px;
 padding: 10px;
 margin-bottom: 10px;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
}
.booklink-image, .kaerebalink-image, .tomarebalink-image{
 margin:0 15px 0 0;
 width: 160px;
 text-align: center;
 -webkit-flex: 0.6;
 flex: 0.6;
}
.cstmreba img{
 margin: 0 auto;
 text-align: center;
}
.booklink-info, .kaerebalink-info, .tomarebalink-info{
 -webkit-flex: 2;
 flex: 2;
 margin:0;
 line-height: 1.2em;
 overflow: hidden;
}
.booklink-name, .kaerebalink-name, .tomarebalink-name{
 line-height:1.3em;
}
.booklink-name a, .kaerebalink-name a, .tomarebalink-name a{
 text-decoration: none;
 font-weight: bold;
}
.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date{
 background-color: #DDD;
 padding: 2px;
 font-size: .6em;
 text-align: right;
 line-height: 1.2em;
 margin-bottom: 3px;
}

.booklink-powered-date a, .kaerebalink-powered-date a, .tomarebalink-powered-date a {
 text-decoration: none;
}
.booklink-detail, .kaerebalink-detail, .tomarebalink-address {
 font-size: .7em;
}
.booklink-link2, .kaerebalink-link1, .tomarebalink-link1{
 flex-wrap: wrap;
 display: -webkit-flex;
 display: flex;
}
.booklink-link2 a,
.kaerebalink-link1 a,
.tomarebalink-link1 a {
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 display: inline-block;
 margin: 3px 3px 0 0;
 padding: 10px 0px;
 text-align: center;
 text-decoration: none;
 font-weight: bold;
 font-size: 12px;
}
.booklink-link2 a:hover, .kaerebalink-link1 a:hover, .tomarebalink-link1 a:hover{
 color: #fff;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkkakakucom, .shoplinkrakukobo, .shoplinkyahoo, .shoplinkseven, .shoplinkjtb, .shoplinkjalan {
 width: 48%;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 justify-content: center;
}
.shoplinkamazon a, .shoplinkrakuten a, .shoplinkkindle a, .shoplinkkakakucom a, .shoplinkrakukobo a, .shoplinkyahoo a, .shoplinkseven a, .shoplinkjtb a, .shoplinkjalan a {
 width: 100%;
}
/* amazon */
.shoplinkamazon a {
 color: #FF9901 ; /* 文字の色 */
 border: solid 1px #FF9901 ; /* ボーダー色 */
}
.shoplinkamazon a:hover {
 background-color: #ff9901; /* カーソルを重ねた時の背景色 */
}
/* 楽天 */
.shoplinkrakuten a {
 color: #c20004 ; /* 文字の色 */
 border: solid 1px #c20004 ; /* ボーダー色 */
}
.shoplinkrakuten a:hover {
 background-color: #c20004; /* カーソルを重ねた時の背景色 */
}
/* kindle */
.shoplinkkindle a {
 color: #007dcd; /* 文字の色 */
 border: solid 1px #007dcd ; /* ボーダー色 */
}
.shoplinkkindle a:hover {
 background-color: #007dcd; /* カーソルを重ねた時の背景色 */
}
/* 価格 */
.shoplinkkakakucom a {
 color: #314995; /* 文字の色 */
 border: solid 1px #314995 ; /* ボーダー色 */
}
.shoplinkkakakucom a:hover {
 background-color: #314995; /* カーソルを重ねた時の背景色 */
}
/* kobo */
.shoplinkrakukobo a {
 color: #990000; /* 文字の色 */
 border: solid 1px #990000 ; /* ボーダー色 */
}
.shoplinkrakukobo a:hover {
 background-color: #990000; /* カーソルを重ねた時の背景色 */
}
/* yahoo */
.shoplinkyahoo a {
 color: #7b0099; /* 文字の色 */
 border: solid 1px #7b0099 ; /* ボーダー色 */
}
.shoplinkyahoo a:hover {
 background-color: #7b0099; /* カーソルを重ねた時の背景色 */
}
.shoplinkyahoo img {
 display: none;
}
.shoplinkyahoo a {
 font-size: 10px;
}
/* 7net */
.shoplinkseven a {
 color: #82c36f ; /* 文字の色 */
 border: solid 1px #82c36f ; /* ボーダー色 */
}
.shoplinkseven a:hover {
 background-color: #82c36f; /* カーソルを重ねた時の背景色 */
}
/* jtb */
.shoplinkjtb a {
 color: #990000 ; /* 文字の色 */
 border: solid 1px #990000 ; /* ボーダー色 */
}
.shoplinkjtb a:hover {
 background-color: #990000; /* カーソルを重ねた時の背景色 */
}
/* jalan */
.shoplinkjalan a {
 color: #FF9901 ; /* 文字の色 */
 border: solid 1px #FF9901 ; /* ボーダー色 */
}
.shoplinkjalan a:hover {
 background-color: #FF9901; /* カーソルを重ねた時の背景色 */
}
.booklink-footer{display: none;}

スマートフォン用の設定

スマートフォンを用のページを設定している方は、proの方限定ですが以下の位置の方法でコードを貼り付けてください。 場所は「デザイン」→「カスタマイズ」→「スマートフォン」→「ヘッダ」→「タイトル下」です。

f:id:mshimfujin:20161003182026p:plain

f:id:mshimfujin:20161003182148p:plain

コードを貼りつける前には、下記のコードを事前にコピペしておいてください。

<style type="text/css"> 
/* ここの真下にCSSをペースト */

</style>

ここの真下にCSSをペースト、とかいてある部分にCSSをペーストしてください。<style type="text/css"> 〜</style>の間にCSSを挟み込む感じです。
以下は例ですよ

<style type="text/css"> 
/* ここの真下にCSSをペースト */
/*--------------------------------------
  ヨメレバ・カエレバ・トマレバ
--------------------------------------*/
.booklink-box, .kaerebalink-box, .tomarebalink-box{
 box-sizing: border-box;
 border: solid 1px #ccc;
 border-radius: 2px;
 padding: 10px;
 margin-bottom: 10px;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
}
中略
}
.booklink-footer{display: none;}
</style>

こんな感じです。伝わりましたでしょうか・・・?

ではでは、また次の記事で