SNS WEB WORDPRESS

【WordPress|twitter埋め込み|はみ出る改善CSS公開!】レスポンシブ|高さ|幅|スマホではみ出るを解決!CSS公開!

投稿日:

twitter埋め込み
サイドウィジットに、twitterを埋め込みましたがはみ出てます。
せっかく埋め込んだのにモッタイナイ!
まさか・・・はみ出るなんて・・・

 

この記事を読むメリット

  • WordPressでtwitterを埋め込んだらはみ出た!を解決!
  • レスポンシブにしたい!
  • 高さも幅もスマホでもきっちり見えるようにしたい!
  • プラグインなしで埋め込みたい!

 

 

それではさっそく頑張りましょう!

 

仕様メモ

  • テーマ|WING|Affinger5
  • サイドウィジットにhtmlテキストとしてコード埋め込み
  • twitter上でのカスタムなし(後ほど高さ指定)

 

 

 

まずはtwitterを埋め込む

すでに埋め込んでる方は飛ばしてください!

 

サイトにtwitter埋め込みを使って常に最新情報を届けよう!

 

twitterを埋め込むためのhtmlを作るサイトはこちら

 

空欄に埋め込みたいタイムラインのURLを入れる

 

打ち込んだら右にある「→」をクリック!

 

すると埋め込みコードが出力されましたね!

 

埋め込みコードをコピー

最後の項目で記載していますが、
タイムラインの高さを指定したい方はcustomization optionsからカスタマイズ!

後述してますが、出来ればココで高さ指定したほうがラク!
分からない方は後述参照!

 

とりあえず進みたい方はCopy Code!

 

 

出力された埋め込みコード

<a class="twitter-timeline" href="https://twitter.com/_nyurina?ref_src=twsrc%5Etfw">Tweets by _nyurina</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

 

わりとシンプルなコードでした!

 

コピーしたコードをウィジットor 貼り付けたい部分にコピペ

Affinger5ならウィジットにカスタムhtmlを入れ込めます!

他のテーマでも同様のサービスがあるはず!

外観→ウィジット

 

カスタムHTMLを選択→コードコピペ

 

埋め込み後|どうなったか確認

パソコン=OK!ばっちりウィジットに収まってる!

 

モバイル・・・

何これ・・・超はみ出てる・・・

 

はみ出てるけれど、とりあえずtwitterは埋め込めた!

 

ついに本題!

モバイルのtwitter埋め込めのはみ出てる!を修正

何回みても悲しい。

 

はみ出てしまった原因

iosはiframeをうまく処理出来ないんだって!

これはどうやら、ios特有のバグらしい。

メモ

私はiphone7ユーザーです。

 

はみ出しを直すCSSを記載

仕様メモ

  • テーマ|WING|Affinger5
  • サイドウィジットにhtmlテキストとしてコード埋め込み
  • twitter上でのカスタムなし(後で高さ指定)

 

仕様が違う場合は適したclass名を記入してください!

.twitter-timeline-rendered←これを適した.class名に変更。まずはこれで。

 

場所はどこに記載してもコピペすればOKですよ。
CSSは下記

/*-------------------------------------------------サイドウィジットへのtwetter埋め込み修正*/

@media screen and (max-width: 768px) and (min-width: 480px) {
iframe .twitter-timeline-rendered{
width: 490px !important;
}
}

@media screen and (max-width: 480px) {
iframe.twitter-timeline-rendered {
width: 450px !important;
margin:0 auto;/*これを入れないとめっちゃ細く200pxくらいで表示されます。以下イメージあり!*/
}
}

.timeline-Widget {
max-width: 300px!important;
width:200px !important; }
/*サイドウィジットへのtwetter埋め込み修正終わり*/

 

はみ出し消滅!TWITTERタイムライン!ひゃっほう!

出来たかなー・・・緊張の瞬間。

ぴったり!

 

CSS上に注意書きしましたが、
margin:0 auto;を記載してください。
しないと埋め込みが細くなっちゃう!

 

細くなっちゃったバージョン

 

きちんと記載しましょう!

 

ここで問題が!!!!

ツィートのタイムライン長すぎ!!!!!!!!!

幅ばかり気にしていたぜ。
俺は長くていいぜ!って人は以上で終了です!

 

twitter埋め込みコードにheightを指定!

この一文が必要だった!

heightを指定するコード

data-height="500"

 

追加する場所

<a class="twitter-timeline" data-height="500" href="https://twitter.com/_nyurina?ref_src=twsrc%5Etfw">Tweets by _nyurina</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

 

 

出来れば初めから!

twitter埋め込みコードを貰う時に、heightを指定しておくべき!

こちらから!

 

私は高さを500pxにしました!

再作業が面倒臭い人や、分からない人はdata-height="500" を追記すればOK!

 

ツィート埋め込みの高さ(長さ)を変えたい時

いちいち埋め込みコード出力まで戻らなくてOK!

各等箇所の数字を変えれば大丈夫。

 

もっと長くしたい!1000に変更したい時。

data-height="1000"

 

もっと短くしたい!300に変更したい時。

data-height="300"

 

 

思った高さ(長さ)になりました!

 

まとめ

はみ出しに関して

CSSを記載すればOK。margin指定忘れずに!

メモ

100%を修正する方法なども試したが効果なし。
この方法でのみぴったりに!

 

高さがビョーンと長すぎだよー!について

始めから、高さ指定してコードを書き出したほうがいい。

思ったような高さじゃなかったら数字を書き換えればいいだけ。

 

無事に、全ての作業が終了〜!

 

間違えた事こそ覚える!勉強勉強!

 

おつかされまでした〜!

 

Copyright© うふふ.TOKYO , 2019 All Rights Reserved.