WordPress4.4にてブログカードが正しく表示されない時の対処法 #stinger5 | 考えるオヤジ    

考えるオヤジ

仕事と育児を頑張るオヤジ達が「ほっ」とひと息つけるブログでありたい。父親視点での子育て・ライフハック・趣味など幅広く情報発信。

WordPress4.4にてブログカードが正しく表示されない時の対処法 #stinger5

このエントリーをはてなブックマークに追加

      2015/12/30

Sorry. No data so far.



ブログカード表示されない

こんにちは、しろうめず@ShiroUmezです。

先日、WordPress4.4にしたけどブログカードがちゃんと表示されない件という記事を書きました。タイトル通り、Wordpressを4.4にバージョンアップしたはいいけど、新機能であるブログカード(はてなブログ風のリンク埋め込みカード)が正しく表示されなかったというお話。

ブログとTwitterにて助けを求めたところ、フォロワーの方々の拡散のお陰で無事解決でき、ブログカードを正しく表示させることが出来ました!この場をお借りして(?)御礼申し上げます。本当にありがとうございましたm(__)m

では早速いってみましょう。WordPress4.4にてブログカードが正しく表示されない時の対処法!

 

stinger(5・6)系特有の問題かも・・・

おっとその前に。

この記事に書いておりますが、僕のWordpressのテーマはstinger5です。どうやらこの症状はstinger系テーマ(stinger6も試しました)特有の問題っぽいです。

すなわち、stinger系テーマ使用時にWordpressを4.4にバージョンアップすると、上記リンク先のようなブログカードの不具合(というか表示崩れ)が発生してしまうということ。stinger系を使用されている全ての方が同じ症状になるかどうか・・・までは、僕にはちょっとわかりません。この辺り後で詳しく書きますね。

あ、勿論stingerは素晴らしいテーマです。stingerを否定したりdisったりするつもりはこれっぽっちもありませんのであしからず。今後もずっとお世話になるつもりでいますので、ここでキチッと修正しておこうと思います。

 

 ブログカードを正しく表示させるためのphpコード

それでは改めましていってみましょう。流れとしては、

  • functions.phpを書き換え
  • スマホ表示でブログカードがはみ出さないようにstyle.cssに一行ほど追記

以上です。簡単ですよ!

functions.phpを書き換え

まずはFTPソフトなどで使用しているブログテーマのディレクトリを開きます。(例・・・ドメイン/public_html/wp-content/themes/stinger○)

その中にあるfunctions.phpを、pc上の解りやすいどこかにバックアップ。経験ある方は多いと思いますが、functions.phpを書き換えたりする場合、一歩間違うとブログが真っ白になってしまうので、こうして必ずバックアップをしてから作業を行いましょう。

バックアップが出来ましたらfunctions.phpの次の部分を探します。

ここを、以下のコードに書き換えてください。

コピペでOK。コレでうまく表示されるようになるはずです。

style.cssに一行追記

あと、style.cssに一行だけ追記します。上でも書きましたが、これはスマホ表示でブログカードがはみ出さないようにするため。

↑このコードを、

の真上辺りに追記してください。これで解決するはずです。

そうそう、それでも表示が崩れたままだぞって方は、ブラウザのキャッシュをクリアしてみてくださいね。

 

 沢山の方々に助けていただきました

拡散ありがとうございましたm(__)m

今回の件は、沢山の方にTwitter上でシェア(拡散)して頂いたお陰で解決出来ました。重ねて御礼申し上げます。ありがとうございました。

(※エゴサーチが不調のようです。せっかくシェアして頂いたのに検索に引っかからず、ご紹介できてない方がいらっしゃいましたら誠に申し訳ありません。「俺もシェアしたぞこの野郎!」という方は是非ご連絡下さい!)

 そして・・・大物君臨!

皆さんの拡散のお陰で、なんと、naifix.comを運営されている超有名大物ブロガーエローラさん君臨!

おお!エローラさんだ!ありがてぇ!だけどド素人の自分は、何言ってんのか全然わかんねー。

↑初対面のくせにこんな失礼な態度をとったにも関わらず、

このような優しい対応をして頂けました。なんていい人!

つまり今回の記事はこのエローラさんに頂いたメールからの(ほぼ)丸パクリです(キリッ)。丸パクリついでにもう少しメール内容を引用致します(まずかったらご連絡くださいね。)

ブログカードの表示崩れが発生した原因

以下、エローラさんから頂いたメール内容からの引用です。ブログカードの表示崩れが発生した原因を詳しく教えていただけました。

ブログカードの件ですが、Stinger5では
YouTubeなどの動画を貼ったときにスマホで枠から飛び出ないよう
自動的に処理されています。

ふむふむなるほど。

YouTube動画の埋め込みタグは、こんな感じです。

<iframe>YouTubeタグ</iframe>

Stinger5では、以下のように<iframe>を見つけると
自動的に<div class=”youtube-container”>で囲むようになっています。

<div class=”youtube-container”><iframe>YouTubeタグ</iframe></div>

ほうほう。

ブログカードにも、<iframe>がついています。

<iframe>ブログカードタグ</iframe>

そうすると、YouTubeと同じく<div>が自動的についてしまいます。

<div class=”youtube-container”><iframe>ブログカードタグ</iframe></div>

ほう!するとどうなる?

で、<div class=”youtube-container”> はCSSで動画用のスタイルが指定されています。

.youtube-container {
position: relative;
padding-bottom: 56.25%; /* 下の余白 */
padding-top: 30px; /* 上の余白 */
height: 0px;
overflow: hidden;
}

この余白が原因で、ブログカードの下に変な余白がついたりしてしまったり、
スマホで見切れてしまったり、という現象が起きます。

なるほどー!!というわけでやはり、stingerのレスポンシブ対策からきた表示崩れだったわけですね!?優秀なテーマであるが故の結果!

この後解決策をご教授頂いたわけです。改めましてエローラさん、この度は本当にありがとうございました!

また宜しくお願いしますね☆(ゝω・)vキュピッ(チラッ

 

【まとめ】餅は餅屋に

いやぁ、Twitterって素晴らしいですね。拡散して頂いた事もそうなんですが、その道のプロに直接教えていただけるという・・・。勿論今回の件は完全に、エローラさんのご好意によるものですが。

プロの美容師さんオススメの櫛で娘の髪をといたらサラサラになった件

↑の記事も、その道のプロフェッショナルに助けていただいたという内容です。餅は餅屋にとは本当によく言ったものです。プロってすげぇ!

ということで以上です。しろうめず@ShiroUmezでした。

追記/新verにて修正予定とのこと

stinger作者様より当記事を取り上げて頂いております。

外部リンクSTINGER、AFFINGERでFacebookプラグイン(及びブログカード)が上手く表示されない件

これによりますと、ブログカードの件はSTINGER6の新バージョンにて修正して頂けるそうなので、phpファイル等をいじるのがどうしてもイヤだという方はそちらをお待ち頂いたほうがよろしいかと思います。




この記事がお役に立ちましたらシェアして頂けると嬉しいです。
  • follow us in feedly
  • このエントリーをはてなブックマークに追加

 - Wordpress

  合わせて読みたい【Wordpress】関連記事

ブログカード表示されない
WordPress4.4にしたけどブログカードがちゃんと表示されない件(解決済・追記有)

こんにちは、しろうめず@ShiroUmezです。 先日リリースされたWordpr …

gf01a201502090800
ブログ初心者でもphpの知識は必要?WordPressカスタマイズ

無料のseesaaブログからレンタルサーバーへブログを引越してから結構経ちました …

lgf01a201311131100
Googleアドセンス広告の位置と種類をPCとスマホで使い分ける方法

このブログはWordpressの大人気テーマであるstinger5を使わせてもら …

sidebarsns
Feedly風のFacebookボタンを自作してサイドバーに設置してみた

ジメジメした梅雨ももうじき終わり、そろそろ夏も近くなってきましたね!夏大好きおっ …

gf01a201503230100
ブログを一から始め直すつもりだったのに結局無料ブログから引越しさせた件

レンタルサーバーを借りて独自ドメイン取得後、ワードプレスを設置していざ引越し! …

lgf01a201410011300
Googleアナリティクスで自分のアクセスを完全に除外する方法(スマホ対応)

ブログを始めてからもうすぐ4か月、未だに色々と理解できないまま・使いこなせないま …