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

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

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

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

1回答

4818閲覧

【WordPress】Safariだけdiv要素同士が重なって表示されてしまう

moemaaaaaaaru

総合スコア13

WordPress

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2015/06/12 09:08

お世話になっております。

サイトの個別記事の上部にソーシャルボタンを挿入しています。
プラグインを使うのではなく以下のコードで実装しています。

lang

1<!-- fb --> 2 <div class="social-content"> 3 <div class="fb-like" data-href="<?php the_permalink(); ?>" data-layout="box_count" data-action="like" data-show-faces="true" data-share="false"></div> 4 </div> 5 <!-- tw --> 6 <div class="social-content"> 7 <a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink() ?>" data-via="bb_intern" data-lang="en" data-related="anywhereTheJavascriptAPI" date-counturl="<?php the_permalink() ?>" data-count="vertical">Tweet</a> 8 </div> 9 <!-- hatebu --> 10 <div class="social-content"> 11 <a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="タイトル" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></div> 12 <!-- pocket --> 13 <div class="social-content"><a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a></div>

ChromeやFirefox、Androidの標準ブラウザでは正常に表示されます。
Safariでだけ、どうしてもTwitterボタンとはてなブックマークボタンが重なって表示されてしまいます。

CSSでは以下の記述があります。

.social-content{margin: 0 10px 16px 0;float: left;}

どうしたら直りますでしょうか。
ご教示いただけますと幸いです。
よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

safariがPC、iPhoneのいずれか、両方か分かりませんが、手元にないので外していたらすいません。

若干属性の値が気になるところもありますが、特に問題があるようにお見受けいたしません。

ご参考サイト:Tweet Button | Twitter Developers
https://dev.twitter.com/web/tweet-button

表示されないのではなく、表示されているが重なるのであれば、何らかの原因でtwitterボタンのiframeの幅がブラウザにうまく理解されていないと推察いたします。

応急処置として、親のdivに幅を持たせてはいかがでしょうか。
1:divにクラスを追加(例:snsbtn-twitter)

lang

1<!-- tw --> 2<div class="social-content snsbtn-twitter"> 3 <a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink() ?>" data-via="bb_intern" data-lang="en" data-related="anywhereTheJavascriptAPI" date-counturl="<?php the_permalink() ?>" data-count="vertical">Tweet</a> 4</div>

2:追加したクラスにCSSを付与

lang

1div.snsbtn-twitter { 2 height: 61px; 3 width: 58px; 4}

試していないので申し訳ありませんが、より良い回答が出るまでのつなぎにでもなれば幸いです。

投稿2015/06/13 02:21

noise

総合スコア256

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

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

moemaaaaaaaru

2015/06/13 06:02

ご回答ありがとうございます。 こちらで、Macで見たときのSafariの表示は直りました。 しかし、レスポンシブにしていて、iPhoneでの表示はできたのですが、iPadで崩れてしまいます。 CSSでは、 div.snsbtn-twitter { width: 17%; } にしてあります。 どうしたらiPadでも崩れないでしょうか。 質問の趣旨と外れてしまいますが、教えていただけますと幸いです。 よろしくお願いいたします。
noise

2015/06/13 07:13

レスポンシブになさっておられるのですね。 お使いのtwitterの公式ソーシャルボタンは対応していなかったように存じます。 なので、ボタン画像の相対幅は困難かと。 その大きさであることを前提としてデザインする、あるいは、レスポンシブな自作ボタンに変更されることをご検討されてはいかがでしょうか。 「SNS ボタン レスポンシブ」などで検索いただけますと、様々なアプローチがあるかと存じます >iPhoneでの表示はできたのですが、iPadで崩れてしまいます とのことですと、幅の広いほうで崩れていますので、的を外している可能性が高く、粗雑なコメントですいません。。。
noise

2015/06/13 07:35

追記失礼いたします。 幅の相対値と一緒に、最小幅を指定するとか… div.snsbtn-twitter { width: 17%; min-width: 58px; } …では、崩れの解決にはならないですね。。。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問