ヨメレバを利用しているのですが、ボタンがカスタマイズできません。


テーマはレスポンシブデザインを使用しているのですが、
ヨメレバのボタンをカスタマイズしようとCSSを加えても対応してくれません。
幅を変えると表示されなくなってしまいます。
(つまりPCでは表示されるのにスマホじゃできないとか、その逆もあります)

一体何が原因か初心者の私にはさっぱりわからず、
ここ数日間格闘しています。

どなたか干渉しない方法、何が干渉してるかわかる方法、干渉しないボタンなど
解決策をご存知の方、いらっしゃいませんか。。。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2016/06/02 00:28:24
  • 終了:2016/06/03 00:00:32

ベストアンサー

id:psne No.2

ぽけっとしすてむ回答回数430ベストアンサー獲得回数2302016/06/02 23:46:35

/* 実際のスタイルを決める */
/* 枠や背景などの共通部分 */
.booklink-box {
	border: double #ccc;
	overflow: hidden;
	padding: .3em;
}
.booklink-box .booklink-image {
    float:left;
    margin: 1em;
    text-align: center;
}
.booklink-box .booklink-name {
	margin-top: 1em;
	font-size: 110%;
}

.booklink-box .booklink-powered-date {
	font-size: 50%;
}

.booklink-box .booklink-detail {
	font-size: 70%;
}

.booklink-box .booklink-info {
	overflow: hidden;
}
.booklink-box .booklink-link2 > div {
	display: inline-block;
	width: calc(100%/3);
	font-size: 85%;
}


.booklink-box .booklink-link2 a {
	margin: 0.2em 0.5em;
	padding: 0.3em;
	text-decoration: none;
	border-radius: 5px;
	display: block;
	position: relative;
	text-align: center;
}

/* 各リンクのカラー設定 */
.booklink-box .shoplinkamazon a {
	background: #fff;
	border: 1px solid #ff9901;
	color: #ff9901;
}

.booklink-box .shoplinkkindle a {
	background: #fff;
	border: 1px solid #007dcd;
	color: #007dcd;
}

.booklink-box .shoplinkrakuten a {
	background: #fff;
	border: 1px solid #c20004;
	color: #c20004;
}

@media screen and (max-width: 680px) {
	.booklink-box .booklink-link2 > div {
		display: inline-block;
		width: calc(100%);
		font-size: 85%;
	}
	.booklink-box .booklink-link2 > div img {
		display: flex;
	}
}

類似の雰囲気のものを作成しました。

id:ptkabe

まさに求めていたものです。。。本当に助かりました。
わざわざ作成していただきありがとうございました。
おかげさまでだいぶ形になってきました。勉強してた事はあるのですがどうにも苦手で・・・

本当にいつもありがとうございます。

2016/06/03 00:00:19

その他の回答(1件)

id:psne No.1

ぽけっとしすてむ回答回数430ベストアンサー獲得回数2302016/06/02 08:21:14

現状と、目的とするイメージが掴みにくいので、すぐにできる確認方法の提案となります。
※質問に具体的な要件(このように表示されているものを、このようにしたい。など)を追記する事で、回答が得られやすくなります。

---
回答の追記です。

まずは、構造を確認するために、各要素に色を付けてみます。

.booklink-box .booklink-info {
	background: #99F; /*debug */
}

.booklink-box .booklink-link2 a {
	background: #F0F; /*debug */
	padding: 0.2em;
}

.booklink-box .shoplinkamazon {
	background: #0ff; /*debug */
}

.booklink-box .shoplinkkindle {
	background: #0f9; /*debug */
}
.booklink-box .shoplinkrakuten {
	background: #0f4; /*debug */
}

既にあるメディアクエリ内に追記しないよう、デザイン設定に貼り付けます。

f:id:psne:20160602202125p:image

.booklink-box .booklink-info {
	background: #99F; /*debug */
}

.booklink-box .booklink-link2 a {
	background: #F0F; /*debug */
}

.booklink-box .shoplinkamazon {
	background: #0ff; /*debug */
]}

.booklink-box .shoplinkkindle {
	background: #0f9; /*debug */
}
.booklink-box .shoplinkrakuten {
	background: #0f4; /*debug */
}

/* 実際のスタイルを決める */
/* 枠や背景などの共通部分 */
.booklink-box .booklink-link2 a {
	padding: .2em .5em;
	text-decoration: none;
	border-radius: 5px;
}

/* 各リンクのカラー設定 */
.booklink-box .shoplinkamazon a {
	background: #000;
	color: #ff6000;
}

.booklink-box .shoplinkkindle a {
	background: #232f3e;
	color: #ff6000;
}

.booklink-box .shoplinkrakuten a {
	background: #f00;
	color: #fff;
}

構造が見えてきたので、スタイルを書き足します。
f:id:psne:20160602203815p:image

/* 実際のスタイルを決める */
/* 枠や背景などの共通部分 */
.booklink-box .booklink-link2 a {
	padding: .2em .5em;
	text-decoration: none;
	border-radius: 5px;
}

/* 各リンクのカラー設定 */
.booklink-box .shoplinkamazon a {
	background: #000;
	color: #ff6000;
}

.booklink-box .shoplinkkindle a {
	background: #232f3e;
	color: #ff6000;
}

.booklink-box .shoplinkrakuten a {
	background: #f00;
	color: #fff;
}

f:id:psne:20160602204122p:image
確認部分を消去すると、必要なデザイン設定だけ残ります。
---


多くのブラウザには「開発者ツール」「Developer Tools」といった名前のデバッグツールが搭載されています。

f:id:psne:20160602080331p:image
こちらは、カスタマイズ中のはてなブログにて「Developer Tools」を起動した画像です。
HTMLの構造(左)と、CSS・Styleの適用状況(右)などが表示されています。
左下にはHTMLタグからのタグの深さ(階層)クラス名が表示されています。
Styleの適用状況は、上の枠に行くほど優先度が高く、同じ設定がある場合は、下の枠が打消となります。
一覧となっているものを確認しながら、目的の表示になるように設定します。

他1件のコメントを見る
id:psne

回答に追記しました。

2016/06/02 20:43:29
id:ptkabe

本当にありがとうございます。
上記のCSSを元に、組み込みたいデザインのCSSをコピペしてみました。
無事スマホでも表示されるようになりました。

一つ最後に問題が出てきてしまったのですが、
(下記の補足に画像があります)
綺麗にボックスが横並びになりません。
どうやら他のCSSは干渉してなさそうなんですが、

display:inline-block;

この指定でもまっすぐ横に並んでくれません。
どうしてもガタついてしまいます。

この場合どういった記述をするのが適正なのでしょうか・・・

2016/06/02 22:27:35
id:psne No.2

ぽけっとしすてむ回答回数430ベストアンサー獲得回数2302016/06/02 23:46:35ここでベストアンサー

/* 実際のスタイルを決める */
/* 枠や背景などの共通部分 */
.booklink-box {
	border: double #ccc;
	overflow: hidden;
	padding: .3em;
}
.booklink-box .booklink-image {
    float:left;
    margin: 1em;
    text-align: center;
}
.booklink-box .booklink-name {
	margin-top: 1em;
	font-size: 110%;
}

.booklink-box .booklink-powered-date {
	font-size: 50%;
}

.booklink-box .booklink-detail {
	font-size: 70%;
}

.booklink-box .booklink-info {
	overflow: hidden;
}
.booklink-box .booklink-link2 > div {
	display: inline-block;
	width: calc(100%/3);
	font-size: 85%;
}


.booklink-box .booklink-link2 a {
	margin: 0.2em 0.5em;
	padding: 0.3em;
	text-decoration: none;
	border-radius: 5px;
	display: block;
	position: relative;
	text-align: center;
}

/* 各リンクのカラー設定 */
.booklink-box .shoplinkamazon a {
	background: #fff;
	border: 1px solid #ff9901;
	color: #ff9901;
}

.booklink-box .shoplinkkindle a {
	background: #fff;
	border: 1px solid #007dcd;
	color: #007dcd;
}

.booklink-box .shoplinkrakuten a {
	background: #fff;
	border: 1px solid #c20004;
	color: #c20004;
}

@media screen and (max-width: 680px) {
	.booklink-box .booklink-link2 > div {
		display: inline-block;
		width: calc(100%);
		font-size: 85%;
	}
	.booklink-box .booklink-link2 > div img {
		display: flex;
	}
}

類似の雰囲気のものを作成しました。

id:ptkabe

まさに求めていたものです。。。本当に助かりました。
わざわざ作成していただきありがとうございました。
おかげさまでだいぶ形になってきました。勉強してた事はあるのですがどうにも苦手で・・・

本当にいつもありがとうございます。

2016/06/03 00:00:19

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません