すたすた式

ホーム
暮らし
DIY
Blogger
QooQ

ホーム » Blogger »

カエレバ・ヨメレバのデザインを変更しました。ver.2

2022年02月13日更新

2020年07月12日公開

当サイトはアフィリエイト広告を使用しています

前の記事で作ったものの修正版ですリンクボタンの文字数が多かったり文字が大きめだと、iPad Pro(1024×1366）くらいの幅のときに改行がおきる不具合を修正しました。iPad Pro(1024×1366）相当の幅のとき用に、やや余裕をもって1200pxにブレイクポイントをもう１つ設けて、ボタンの配置を縦にしました。これである程度までは文字を大きくしても大丈夫なはず。

修正前

カエレバ修正前

修正後

カエレバ修正後

CSS記事公開時のものから少し変更しました。（2020年7月31日）!/* 枠内側の空間を作る */ .booklink-box, .kaerebalink-box padding .5em 0; から padding 1em; -/* 削除 */ .booklink-image img:nth-child(1), .kaerebalink-image img:nth-child(1) { vertical-align: text-top; 削除 @media (min-width: 768px) .booklink-box, .kaerebalink-box justify-content: space-around; 削除 .booklink-link2 div, .kaerebalink-link1 div padding: .5em; 削除 !/* タブレットのとき、リンクボタンの横幅を狭く */ @media (min-width: 768px) .booklink-info, .kaerebalink-info flex-basis: 75%; から flex-basis: 70%; !/* タブレット以上のとき、リンクボタンの縦幅を広く（ボタンを大きく） */ @media (min-width: 768px) .booklink-link2 div, .kaerebalink-link1 div もしくは .booklink-link2 a, .kaerebalink-link1 a padding: .1em; 削除 !/* その他 */ 枠線の色変更など下記CSSは変更済みのものです

クリックすると開きます。

/* ヨメレバ、カエレバデザイン スマートフォン-display:block タブレット-display:flex-column PC-display:flex-row */
.booklink-box, .kaerebalink-box {
	display: block;
	margin: 1em auto;
	padding: 1em;
	border: 1px solid #575757;
	box-sizing: border-box;
	border-radius: 5px;
	text-align: center;
}
.booklink-image, .kaerebalink-image {
	width: 60%;
	margin: 0 auto;
}
.booklink-image img:nth-child(2), .kaerebalink-image img:nth-child(2) {
	display: none;
}
.booklink-powered-date, .kaerebalink-powered-date {
	font-size: .7em;
	margin-bottom: 1em;
}
.booklink-detail, .kaerebalink-detail {
	margin-bottom: 1em;
	font-size: .9em;
}
.booklink-link2, .kaerebalink-link1 {
	width: 95%;
	margin: 0 auto;
}
.booklink-link2 img, .kaerebalink-link1 img {
	display:none;
}
.booklink-link2 div, .kaerebalink-link1 div {
	margin-bottom: 1.5em;
	border-radius: 2px;
}
.booklink-link2 a, .kaerebalink-link1 a {
	color: #fff !important;
	display: block;
	padding: .5em 0;
	text-decoration: none !important;
	transition: all .5s;
}
@media (min-width: 768px){
.booklink-box, .kaerebalink-box {
	display: flex;
}
.booklink-image, .kaerebalink-image {
	flex-basis: 25%;
}
.booklink-info, .kaerebalink-info {
	flex-basis: 70%;
}
.booklink-detail, .kaerebalink-detail {
	margin-bottom: initial;
}
.booklink-link2, .kaerebalink-link1 {
	display: flex;
	flex-direction: column;
}
.booklink-link2 div, .kaerebalink-link1 div {
	margin-bottom: .8em;
	font-size: .9em;
}
}
@media (min-width: 1200px){
.booklink-link2, .kaerebalink-link1 {
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}
.booklink-link2 div, .kaerebalink-link1 div {
	flex-basis: 48%;
}
}
.shoplinkrakuten  {
	background: #BF0000;
	border: 1px solid #BF0000;
	box-shadow: 2px 2px 2px #555;
}
.shoplinkrakuten a:hover {
	color: #BF0000 !important;
	background: #fff;
}
.shoplinkamazon  {
	background: #A86500;
	border: 1px solid #A86500;
	box-shadow: 2px 2px 2px #555;
}
.shoplinkamazon a:hover {
	color: #A86500 !important;
	background: #fff;
}
.shoplinkyahoo  {
	background: #EB002F;
	border: 1px solid #EB002F;
	box-shadow: 2px 2px 2px #555;
}
.shoplinkyahoo a:hover {
	color: #EB002F !important;
	background: #fff;
}
.shoplinkseven  {
	background: #3275C8;
	border: 1px solid #3275C8;
	box-shadow:2px 2px 2px #555;
}
.shoplinkseven a:hover {
	color: #3275C8 !important;
	background: #fff;
}
.shoplinkkindle  {
	background: #008571;
	border: 1px solid #008571;
	box-shadow:2px 2px 2px #555;
}
.shoplinkkindle a:hover {
	color: #008571 !important;
	background: #fff;
}
.shoplinkrakukobo  {
	background: #8A0000;
	border: 1px solid #8A0000;
	box-shadow:2px 2px 2px #555;
}
.shoplinkrakukobo a:hover {
	color: #8A0000 !important;
	background: #fff;
}

aタグのバージョン。クリックすると開きます。

/* ヨメレバ、カエレバデザイン スマートフォン-display:block タブレット-display:flex-column PC-display:flex-row */
.booklink-box, .kaerebalink-box {
	display: block;
	margin: 1em auto;
	padding: 1em;
	border: 1px solid #575757;
	box-sizing: border-box;
	border-radius: 5px;
	text-align: center;
}
.booklink-image, .kaerebalink-image {
	width: 60%;
	margin: 0 auto;
}
.booklink-image img:nth-child(1), .kaerebalink-image img:nth-child(1) {
	vertical-align: text-top;
}
.booklink-image img:nth-child(2), .kaerebalink-image img:nth-child(2) {
	display: none;
}
.booklink-powered-date, .kaerebalink-powered-date {
	font-size: .7em;
	margin-bottom: 1em;
}
.booklink-detail, .kaerebalink-detail {
	margin-bottom: 1em;
	font-size: .9em;
}
.booklink-link2, .kaerebalink-link1 {
	width: 95%;
	margin: 0 auto;
}
.booklink-link2 img, .kaerebalink-link1 img {
	display:none;
}
.booklink-link2 div, .kaerebalink-link1 div {
	margin-bottom: 1.5em;
}
.booklink-link2 a, .kaerebalink-link1 a {
	color: #fff !important;
	display: block;
	padding: .5em 0;
	border-radius: 2px;
	transition: all .5s;
	text-decoration: none !important;
}
@media (min-width: 768px){
.booklink-box, .kaerebalink-box {
	display: flex;
}
.booklink-image, .kaerebalink-image {
	flex-basis: 25%;
}
.booklink-info, .kaerebalink-info {
	flex-basis: 70%;
}
.booklink-detail, .kaerebalink-detail {
	margin-bottom: initial;
}
.booklink-link2, .kaerebalink-link1 {
	display: flex;
	flex-direction: column;
}
.booklink-link2 div, .kaerebalink-link1 div {
	margin-bottom: .8em;
}
.booklink-link2 a, .kaerebalink-link1 a {
	font-size: .9em;
}
}
@media (min-width: 1200px){
.booklink-link2, .kaerebalink-link1 {
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}
.booklink-link2 div, .kaerebalink-link1 div {
	flex-basis: 48%;
}
}
.shoplinkrakuten a {
	background: #BF0000;
	border: 1px solid #BF0000;
	box-shadow: 2px 2px 2px #555;
}
.shoplinkrakuten a:hover {
	color: #BF0000 !important;
	background: #fff;
}
.shoplinkamazon a {
	background: #A86500;
	border: 1px solid #A86500;
	box-shadow: 2px 2px 2px #555;
}
.shoplinkamazon a:hover {
	color: #A86500 !important;
	background: #fff;
}
.shoplinkyahoo a {
	background: #EB002F;
	border: 1px solid #EB002F;
	box-shadow: 2px 2px 2px #555;
}
.shoplinkyahoo a:hover {
	color: #EB002F !important;
	background: #fff;
}
.shoplinkseven a {
	background: #3275C8;
	border: 1px solid #3275C8;
	box-shadow:2px 2px 2px #555;
}
.shoplinkseven a:hover {
	color: #3275C8 !important;
	background: #fff;
}
.shoplinkkindle a {
	background: #008571;
	border: 1px solid #008571;
	box-shadow:2px 2px 2px #555;
}
.shoplinkkindle a:hover {
	color: #008571 !important;
	background: #fff;
}
.shoplinkrakukobo a {
	background: #8A0000;
	border: 1px solid #8A0000;
	box-shadow:2px 2px 2px #555;
}
.shoplinkrakukobo a:hover {
	color: #8A0000 !important;
	background: #fff;
}

リンクボタンの並べ替えバージョンを修正したものはこちら

クリックすると開きます。

/* ヨメレバ、カエレバデザイン スマートフォン-display:block タブレット-display:flex-column PC-display:flex-row リンクボタンの順番変更 */
.booklink-box, .kaerebalink-box {
	display: block;
	margin: 1em auto;
	padding: 1em;
	border: 1px solid #575757;
	box-sizing: border-box;
	border-radius: 5px;
	text-align: center;
}
.booklink-image, .kaerebalink-image {
	width: 60%;
	margin: 0 auto;
}
.booklink-image img:nth-child(2), .kaerebalink-image img:nth-child(2) {
	display: none;
}
.booklink-powered-date, .kaerebalink-powered-date {
	font-size: .7em;
	margin-bottom: 1em;
}
.booklink-detail, .kaerebalink-detail {
	margin-bottom: 1em;
	font-size: .9em;
}
.booklink-link2, .kaerebalink-link1 {
	width: 95%;
	margin: 0 auto;
}
.booklink-link2 img, .kaerebalink-link1 img {
	display:none;
}
.booklink-link2 div, .kaerebalink-link1 div {
	margin-bottom: 1.5em;
	border-radius: 2px;
}
.booklink-link2 a, .kaerebalink-link1 a {
	color: #fff !important;
	display: block;
	padding: .5em 0;
	text-decoration: none !important;
	transition: all .5s;
}
@media (min-width: 768px){
.booklink-box, .kaerebalink-box {
	display: flex;
}
.booklink-image, .kaerebalink-image {
	flex-basis: 25%;
}
.booklink-info, .kaerebalink-info {
	flex-basis: 70%;
}
.booklink-detail, .kaerebalink-detail {
	margin-bottom: initial;
}
.booklink-link2, .kaerebalink-link1 {
	display: flex;
	flex-direction: column;
}
.booklink-link2 div, .kaerebalink-link1 div {
	margin-bottom: .8em;
	font-size: .9em;
}
}
@media (min-width: 1200px){
.booklink-link2, .kaerebalink-link1 {
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}
.booklink-link2 div, .kaerebalink-link1 div {
	flex-basis: 48%;
}
}
.shoplinkrakuten  {
	background: #BF0000;
	border: 1px solid #BF0000;
	box-shadow: 2px 2px 2px #555;
}
.shoplinkrakuten a:hover {
	color: #BF0000 !important;
	background: #fff;
}
.shoplinkamazon  {
	background: #A86500;
	border: 1px solid #A86500;
	box-shadow: 2px 2px 2px #555;
}
.shoplinkamazon a:hover {
	color: #A86500 !important;
	background: #fff;
}
.shoplinkyahoo  {
	background: #EB002F;
	border: 1px solid #EB002F;
	box-shadow: 2px 2px 2px #555;
}
.shoplinkyahoo a:hover {
	color: #EB002F !important;
	background: #fff;
}
.shoplinkseven  {
	background: #3275C8;
	border: 1px solid #3275C8;
	box-shadow:2px 2px 2px #555;
}
.shoplinkseven a:hover {
	color: #3275C8 !important;
	background: #fff;
}
.shoplinkkindle  {
	background: #008571;
	border: 1px solid #008571;
	box-shadow:2px 2px 2px #555;
}
.shoplinkkindle a:hover {
	color: #008571 !important;
	background: #fff;
}
.shoplinkrakukobo  {
	background: #8A0000;
	border: 1px solid #8A0000;
	box-shadow:2px 2px 2px #555;
}
.shoplinkrakukobo a:hover {
	color: #8A0000 !important;
	background: #fff;
}
/* リンクボタンの順番変更 */

/* カエレバ */
.kaerebalink-link1 .shoplinkrakuten {order:3;}
.kaerebalink-link1 .shoplinkamazon {order:1;}
.kaerebalink-link1 .shoplinkyahoo {order:2;}
.kaerebalink-link1 .shoplinkseven {order:3;}

/* ヨメレバ */
.booklink-link2 .shoplinkrakuten {order:5;}
.booklink-link2 .shoplinkamazon {order:2;}
.booklink-link2 .shoplinkseven {order:4;}
.booklink-link2 .shoplinkkindle {order:1;}
.booklink-link2 .shoplinkrakukobo {order:3;}

aタグのバージョン。クリックすると開きます。

/* ヨメレバ、カエレバデザイン スマートフォン-display:block タブレット-display:flex-column PC-display:flex-row リンクボタンの順番変更 */
.booklink-box, .kaerebalink-box {
	display: block;
	margin: 1em auto;
	padding: 1em;
	border: 1px solid #575757;
	box-sizing: border-box;
	border-radius: 5px;
	text-align: center;
}
.booklink-image, .kaerebalink-image {
	width: 60%;
	margin: 0 auto;
}
.booklink-image img:nth-child(1), .kaerebalink-image img:nth-child(1) {
	vertical-align: text-top;
}
.booklink-image img:nth-child(2), .kaerebalink-image img:nth-child(2) {
	display: none;
}
.booklink-powered-date, .kaerebalink-powered-date {
	font-size: .7em;
	margin-bottom: 1em;
}
.booklink-detail, .kaerebalink-detail {
	margin-bottom: 1em;
	font-size: .9em;
}
.booklink-link2, .kaerebalink-link1 {
	width: 95%;
	margin: 0 auto;
}
.booklink-link2 img, .kaerebalink-link1 img {
	display:none;
}
.booklink-link2 div, .kaerebalink-link1 div {
	margin-bottom: 1.5em;
}
.booklink-link2 a, .kaerebalink-link1 a {
	color: #fff !important;
	display: block;
	padding: .5em 0;
	border-radius: 2px;
	transition: all .5s;
	text-decoration: none !important;
}
@media (min-width: 768px){
.booklink-box, .kaerebalink-box {
	display: flex;
}
.booklink-image, .kaerebalink-image {
	flex-basis: 25%;
}
.booklink-info, .kaerebalink-info {
	flex-basis: 70%;
}
.booklink-detail, .kaerebalink-detail {
	margin-bottom: initial;
}
.booklink-link2, .kaerebalink-link1 {
	display: flex;
	flex-direction: column;
}
.booklink-link2 div, .kaerebalink-link1 div {
	margin-bottom: .8em;
}
.booklink-link2 a, .kaerebalink-link1 a {
	font-size: .9em;
}
}
@media (min-width: 1200px){
.booklink-link2, .kaerebalink-link1 {
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}
.booklink-link2 div, .kaerebalink-link1 div {
	flex-basis: 48%;
}
}
.shoplinkrakuten a {
	background: #BF0000;
	border: 1px solid #BF0000;
	box-shadow: 2px 2px 2px #555;
}
.shoplinkrakuten a:hover {
	color: #BF0000 !important;
	background: #fff;
}
.shoplinkamazon a {
	background: #A86500;
	border: 1px solid #A86500;
	box-shadow: 2px 2px 2px #555;
}
.shoplinkamazon a:hover {
	color: #A86500 !important;
	background: #fff;
}
.shoplinkyahoo a {
	background: #EB002F;
	border: 1px solid #EB002F;
	box-shadow: 2px 2px 2px #555;
}
.shoplinkyahoo a:hover {
	color: #EB002F !important;
	background: #fff;
}
.shoplinkseven a {
	background: #3275C8;
	border: 1px solid #3275C8;
	box-shadow:2px 2px 2px #555;
}
.shoplinkseven a:hover {
	color: #3275C8 !important;
	background: #fff;
}
.shoplinkkindle a {
	background: #008571;
	border: 1px solid #008571;
	box-shadow:2px 2px 2px #555;
}
.shoplinkkindle a:hover {
	color: #008571 !important;
	background: #fff;
}
.shoplinkrakukobo a {
	background: #8A0000;
	border: 1px solid #8A0000;
	box-shadow:2px 2px 2px #555;
}
.shoplinkrakukobo a:hover {
	color: #8A0000 !important;
	background: #fff;
}
/* リンクボタンの順番変更 */

/* カエレバ */
.kaerebalink-link1 .shoplinkrakuten {order:3;}
.kaerebalink-link1 .shoplinkamazon {order:1;}
.kaerebalink-link1 .shoplinkyahoo {order:2;}
.kaerebalink-link1 .shoplinkseven {order:3;}

/* ヨメレバ */
.booklink-link2 .shoplinkrakuten {order:5;}
.booklink-link2 .shoplinkamazon {order:2;}
.booklink-link2 .shoplinkseven {order:4;}
.booklink-link2 .shoplinkkindle {order:1;}
.booklink-link2 .shoplinkrakukobo {order:3;}

新しい投稿前の投稿

Bloggerカテゴリ

関連記事

コメントなし:

コメントを投稿

検索

サイト内検索に使ってください 🐤

最近の注目記事

【業務スーパー】2023年12月塩数の子300g入り購入お値段￥1425（税込）
📺[ Windows10 64bit ] LT-DT306BKでワンセグ視聴
Windows 10で突然VS Codeが起動しなくなったときの対処法・備忘録
【業務スーパー】だし用に昆布を3種類買ってみました。
【Firefox 106】左下に表示されるURLなどを右下に移動

カテゴリー

暮らし (170)
Blogger (112)
Windows10 (51)
Vaster2 (47)
QooQ (42)
業務スーパー (40)
書籍 (28)
Firefox (24)
DIY (15)
Vaster1.9 (15)
赤ワイン (9)
web (8)
SearchConsole (6)
GoogleAnalytics (3)
ノート (3)
白ワイン (3)
Android (2)
OCN (2)
オレンジワイン (1)

Random Picks

よく読まれている記事

【節電】安い養生プラダン・養生パネルで微妙に成功二重窓・内窓をDIY
📺[ Windows10 64bit ] LT-DT306BKでワンセグ視聴
🧄【業務スーパー】2021年5月おろしにんにく 1kg 購入お値段税別￥498 （税込￥537）
こんなに簡単😄初心者が自分で修理シューグーを使って靴、スニーカーのかかとを修理補修使い方
【業務スーパー】2023年12月塩数の子300g入り購入お値段￥1425（税込）

Author

sutajp

プライバシーポリシー

@sutajpOnTw
Feedly

😀

Powered by Blogger

すたすた式

© 2015 すたすた式

Enjoy!👍