人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

●質問者: ぱつこ(ptk)
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● ぽけっとしすてむ

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

---
回答の追記です。

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

.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の適用状況は、上の枠に行くほど優先度が高く、同じ設定がある場合は、下の枠が打消となります。
一覧となっているものを確認しながら、目的の表示になるように設定します。


ぱつこ(ptk)さんのコメント
現状、 画像 タイトル posted with ヨメレバ 作者名 2009-11-28 Amazon Kindle 楽天ブックス と表示されているのですが(スミマセン画像の貼り方がわからず文章で失礼します)、 Amazon Kindle 楽天ブックス ↑この表記をテキストではなくボタン式にしたいのです。 しかし、ボタンのデザインにするCSSを打ち込んでも反映されなかったり、ボタンの並びがめちゃめちゃになったり、 表示されてるのに横幅を変えると上記にある元々の表記に戻ってしまうのです。(レスポンシブデザインを使用しているため、 この場合スマホでは表示されるのにPCでは表示されなかったり、その逆だったりっていう状況です) コピペ一発!みたいなのを何種類も試しましたが全部うまくいかず、CSSを書き換えてもうまくいかず・・・。 何が原因かさっぱりわからないのです。 現在出先なので、帰宅してから回答して頂いた方法も試してみたいと思います。 ありがとうございます。 p.s.前回タイトル画像が可変しないという内容の質問に回答して頂いてとても助かりました。おかげさまで綺麗に可変するようになりました。ありがとうございました。

ぽけっとしすてむさんのコメント
回答に追記しました。

ぱつこ(ptk)さんのコメント
本当にありがとうございます。 上記のCSSを元に、組み込みたいデザインのCSSをコピペしてみました。 無事スマホでも表示されるようになりました。 一つ最後に問題が出てきてしまったのですが、 (下記の補足に画像があります) 綺麗にボックスが横並びになりません。 どうやら他のCSSは干渉してなさそうなんですが、 display:inline-block; この指定でもまっすぐ横に並んでくれません。 どうしてもガタついてしまいます。 この場合どういった記述をするのが適正なのでしょうか・・・

質問者から


f:id:ptkabe:20160602222309p:image


2 ● ぽけっとしすてむ
ベストアンサー
/* 実際のスタイルを決める */
/* 枠や背景などの共通部分 */
.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;
}
}

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


ぱつこ(ptk)さんのコメント
まさに求めていたものです。。。本当に助かりました。 わざわざ作成していただきありがとうございました。 おかげさまでだいぶ形になってきました。勉強してた事はあるのですがどうにも苦手で・・・ 本当にいつもありがとうございます。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ