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

Wordpress

こんにちは、しろうめず@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です。 先日こんな記事を書きました。 毎晩お風呂上がりに、4歳と2歳の娘たちの髪をとく、あるオヤジの胸のうちを綴ったお話。 記事をTwitter上で公開したところ、友人から...

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

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

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

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

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

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

Wordpress
スポンサーリンク
この記事が気に入ったら最新ニュース情報を、
いいねしてチェックしよう!
しろうめずをフォローする
考えるオヤジ