質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1848閲覧

wordpressでシェアボタンのみをレスポンシブさせない方法はありますか?

退会済みユーザー

退会済みユーザー

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/08/12 10:33

編集2017/08/12 10:46

###前提
HTML・CSS・wordpressの初心者です。

###実現したいこと
シェアボタンのみレスポンシブ対応前の状態を維持させたいです。

###発生している問題

現在記事を投稿しているページがレスポンシブに対応しておらず、
スマホで確認をすると、画像が小さく表示されてしまっています。

そこでレスポンシブ対応はできたのですが、
シェアボタンのデザインが変わってしまいました。

シェアボタンのみレスポンシブ対応させる前の状態のままにする場合は

・一部レスポンシブを解除させる
・レスポンシブ対応させたあとにデザインを指定させる

のどちらかは可能でしょうか?

HTML・CSS・wordpressはいずれも初心者で勉強中です。

取り急ぎこの問題を解決しなければならないため
解決方法がわかる方は教えていただけますと幸いです。

よろしくお願い致します。

###【追記】
下記URLのテーマを使用しています。
https://open-cage.com/stork/

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/08/12 10:37

使用されているテーマは自作テーマでしょうか?それとも公開されているテーマでしょうか?後者の場合は入手先をリンクつきで質問文に追記してください。
退会済みユーザー

退会済みユーザー

2017/08/12 10:48

早速の回答ありがとうございます。情報が不足しており申し訳ございません。入手先というのが追記したURLであっているかわかりませんが、どうぞよろしくお願い致します。
kei344

2017/08/12 11:12

「レスポンシブ対応はできたのですが、」とありますが、テーマが元々対応しているのでは?何か特別な対応をされているのでしょうか。
退会済みユーザー

退会済みユーザー

2017/08/12 15:07

勉強不足で大変お恥ずかしい限りです。。現状スマホで閲覧をすると、パソコンで表示されている画像の1/4ほどの大きさになっています。画像サイズは100%になっているのでCSSが問題かといくつかmax-widthが768pxになっていたので、100%に変更したことろ、スマホで画面にぴったりの画像サイズに変更ができました。しかしシェアボタンのところのデザインも変わってしまったので、そこの部分のみレスポンシブ対応させない方法、またはレスポンシブ対応させてCSSで指定する方法があるのではないかと思い質問をさせていただきました。説明がわかりにくくすみません。
退会済みユーザー

退会済みユーザー

2017/08/12 15:08

画像の元のサイズは結構大きいものを使用しています。
kei344

2017/08/12 15:11

有料テーマの場合回答者の手元にはコードがありません。そのため、元々どうなっていて、それをどう編集したかが提示されないと対応できません。テーマ提供元に有料でサポートを受けられるのが早いと思います。
退会済みユーザー

退会済みユーザー

2017/08/13 12:17

そうですね。。回答ありがとうございました!!!
guest

回答1

0

ベストアンサー

まずこのシェアボタンは画像ではなく、フォントアイコン+背景色(background)で構成されています。
PCとスマホでシェアボタンのデザインが変わるのは、/wp-content/themes/jstork/style.cssの下記の記述のとおり、個々のシェアボタンの幅が%指定されていることが原因と思われます。

.share.short .sns li { width: 19%; margin: 0 1% 0 0; }

これをPC・スマホともに同じサイズにするには、widthを60pxなどの絶対指定にするしかありません。

PCでの表示サイズは変更なしで、とにかくスマホのシェアボタンをもっと大きくしたいということであれば、メディアクエリを使ってスマホのみwidthを変更することで対応できます。例えば、100%表示にするならば以下のような形です。

@media only screen and (max-width: 767px) { .share.short .sns li { width: 100%; } }

投稿2017/08/16 13:07

mx3

総合スコア175

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mx3

2017/08/17 02:18

キャプチャ確認しました。 私は、このWordpressテーマのデモサイトを確認して回答しているのですが、 http://demo-stork.open-cage.com/about/ 該当箇所が見当たりません。 上記のURLでもdenden21さんが見ると、キャプチャされているような形になりますか??
mx3

2017/08/17 02:27

もし、テーマのデフォルトHTML/CSSを変更済みであれば、どう変更しているかが分からないと解決方法をお伝えするのが難しいですが、単に「ツイート」「シェア」などのテキストを消したいということでしたら、 @media only screen and (max-width: 767px) { .share.short .sns li a .text { display: none; } } の追記で対応できるかもしれません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問