2019.02.13スポンサーリンクこんにちは、しろうめず@ShiroUmezです。先日、WordPress4.4にしたけどブログカードがちゃんと表示されない件という記事を書きました。タイトル通り、Wordpressを4.4にバージョンアップしたはいいけど、新機能であるブログカード(はてなブログ風のリンク埋め込みカード)が正しく表示されなかったというお話。ブログとTwitterにて助けを求めたところ、フォロワーの方々の拡散のお陰で無事解決でき、ブログカードを正しく表示させることが出来ました!この場をお借りして(?)御礼申し上げます。本当にありがとうございましたm(__)mでは早速いってみましょう。【まとめ】餅は餅屋に追記/新verにて修正予定とのことstinger(5・6)系特有の問題かも・・・おっとその前に。この記事に書いておりますが、僕のWordpressのテーマはstinger5です。この症状はstinger系テーマ(stinger6も試しました)特有の問題っぽいです。stinger系テーマ使用時にWordpressを4.4にバージョンアップすると、上記リンク先のようなブログカードの不具合(というか表示崩れ)が発生してしまうということ。stinger系を使用されている全ての方が同じ症状になるかどうか・・・までは、僕にはちょっとわかりません。この辺り後で詳しく書きますね。あ、勿論stingerは素晴らしいテーマです。stingerを否定したりdisったりするつもりはこれっぽっちもありませんのであしからず。今後もずっとお世話になるつもりでいますので、ここでキチッと修正しておこうと思います。ブログカードを正しく表示させるためのphpコードそれでは改めましていってみましょう。簡単ですよ!functions.phpを書き換えまずはFTPソフトなどで使用しているブログテーマのディレクトリを開きます。(例・・・ドメイン/public_html/wp-content/themes/stinger○)その中にあるfunctions.phpを、pc上の解りやすいどこかにバックアップ。経験ある方は多いと思いますが、functions.phpを書き換えたりする場合、一歩間違うとブログが真っ白になってしまうので、こうして必ずバックアップをしてから作業を行いましょう。バックアップが出来ましたらfunctions.phpの次の部分を探します。*?>/i','</iframe></div>',$the_content);}return$the_content;}add_filter('the_content','wrap_iframe_in_div');ここを、以下のコードに書き換えてください。add_filter('the_content','wrap_iframe_in_div');1234567891011//iframeのレスポンシブ対応functionwrap_iframe_in_div($the_content){if(is_singular()){//YouTube$the_content=preg_replace('/<iframe[^>]+?youtube\.com[^<]+?<\/iframe>/is','<divclass="youtube-container">${0}</div>',$the_content);}return$the_content;}add_filter('the_content','wrap_iframe_in_div');コピペでOK。コレでうまく表示されるようになるはずです。style.cssに一行追記あと、style.cssに一行だけ追記します。上でも書きましたが、これはスマホ表示でブログカードがはみ出さないようにするため。タブレットサイズ----------------------------------------------------*/@mediaonlyscreenand(max-width:780px){の真上辺りに追記してください。これで解決するはずです。そうそう、それでも表示が崩れたままだぞって方は、ブラウザのキャッシュをクリアしてみてくださいね。沢山の方々に助けていただきました拡散ありがとうございましたm(__)m今回の件は、沢山の方にTwitter上でシェア(拡散)して頂いたお陰で解決出来ました。重ねて御礼申し上げます。ありがとうございました。この記事が参考になれば。14わたしもスティンガーなので、もうちょっと更新待っとこ。解決するといいですね。14ブログカード機能が付いたことすら知らなかった。15(※エゴサーチが不調のようです。シェアして頂いたのに検索に引っかからず、ご紹介できてない方がいらっしゃいましたら誠に申し訳ありません。15おお!エローラさんだ!ありがてぇ!だけどド素人の自分は、何言ってんのか全然わかんねー。15このような優しい対応をして頂けました。いい人!つまり今回の記事はこのエローラさんに頂いたメールからの(ほぼ)丸パクリです(キリッ)。丸パクリついでにもう少しメール内容を引用致します(まずかったらご連絡くださいね。以下、エローラさんから頂いたメール内容からの引用です。ブログカードの表示崩れが発生した原因を詳しく教えていただけました。ブログカードの件ですが、Stinger5ではYouTubeなどの動画を貼ったときにスマホで枠から飛び出ないよう自動的に処理されています。YouTube動画の埋め込みタグは、こんな感じです。class=”youtube-container”>で囲むようになっています。class=”youtube-container”><iframe>YouTubeタグ</iframe></div>ほうほう。ブログカードにも、<iframe>がついています。<iframe>ブログカードタグ</iframe>そうすると、YouTubeと同じく<div>が自動的についてしまいます。CSSで動画用のスタイルが指定されています。hidden;}この余白が原因で、ブログカードの下に変な余白がついたりしてしまったり、スマホで見切れてしまったり、という現象が起きます。ー!!というわけでやはり、stingerのレスポンシブ対策からきた表示崩れだったわけですね!?優秀なテーマであるが故の結果!この後解決策をご教授頂いたわけです。改めましてエローラさん、この度は本当にありがとうございました!また宜しくお願いしますね☆(ゝω・)vキュピッ(チラッ【まとめ】餅は餅屋にいやぁ、Twitterって素晴らしいですね。拡散して頂いた事もそうなんですが、その道のプロに直接教えていただけるという・・・。今回の件は完全に、エローラさんのご好意によるものですが。プロの美容師さんオススメの櫛で娘の髪をといたらサラサラになった件こんにちは、しろうめず@ShiroUmezです。先日こんな記事を書きました。毎晩お風呂上がりに、4歳と2歳の娘たちの髪をとく、あるオヤジの胸のうちを綴ったお話。記事をTwitter上で公開したところ、友人から...www.kangaeruoyaji.net2015.12.13↑の記事も、その道のプロフェッショナルに助けていただいたという内容です。餅は餅屋にとは本当によく言ったものです。プロってすげぇ!ということで以上です。しろうめず@ShiroUmezでした。追記/新verにて修正予定とのことstinger作者様より当記事を取り上げて頂いております。外部リンクSTINGER、AFFINGERでFacebookプラグイン(及びブログカード)が上手く表示されない件これによりますと、ブログカードの件はSTINGER6の新バージョンにて修正して頂けるそうなので、phpファイル等をいじるのがどうしてもイヤだという方はそちらをお待ち頂いたほうがよろしいかと思います。Wordpressスポンサーリンクこの記事が気に入ったら最新ニュース情報を、いいねしてチェックしよう!シェアするTwitterFacebook0はてブ2Google+Pocket0LINEしろうめずをフォローするしろうめず考えるオヤジ関連記事WordpressGoogleアナリティクスで自分のアクセスを完全に除外する方法(スマホ対応)ブログを始めてからもうすぐ4か月、未だに色々と理解できないまま・使いこなせないままのしろうめず@ShiroUmezです。Googleアナリティクスもそのひとつ。Googleアナリティクスといえば、ブログやサイトを所有...Wordpressブログ初心者でもphpの知識は必要?WordPressカスタマイズ無料のseesaaブログからレンタルサーバーへブログを引越してから結構経ちましたが、実は最近なかなか記事更新ができないでいます。理由は、Wordpress(ワードプレス)のカスタマイズに追われ、管理人の頭が一杯一杯であるから...WordpressWordPress4.4にしたけどブログカードがちゃんと表示されない件(解決済・追記有)こんにちは、しろうめず@ShiroUmezです。先日リリースされたWordpress4.4、特に考え無しでアップデートしたらなにやらめんどくさいことになってしまいました。ブログカードがきちんと表示されない...WordpressFeedly風のFacebookボタンを自作してサイドバーに設置してみたジメジメした梅雨ももうじき終わり、そろそろ夏も近くなってきましたね!夏大好きおっさんしろうめず@ShiroUmezです。遅ればせながらワタクシも一ブロガーとしてFacebookページなるものを始めてみました。当初は旧無料ブログ(seesaaブログ)で書いた記事をコチラのサーバーにリダイレクトさせ、全て移してくるつもりでした。・・・が、いざやり始めてみる...WordpressGoogleアドセンス広告の位置と種類をPCとスマホで使い分ける方法このブログはWordpressの大人気テーマであるstinger5を使わせてもらっております。stinger5はその素晴らしいデザイン性もさる事ながら、Googleアドセンスなどの広告を貼る場合、簡単に貼る事ができるよう特化...スポンサーリンクWordPress4.4にしたけどブログカードがちゃんと表示されない件(解決済・追記有)夫婦の選択は間違っていなかった!この保育園で良かった3つの理由ホームブログ運営Wordpressこの記事を書いた人しろうめず日本一の田舎県で会社員を続ける二児の父、しろうめずです。このブログは、7歳長女と5歳次女の子育てについて、仕事に対する考えや出来事、趣味やふと思ったことなど幅広く(言い換えれば統一感無くグダグダと)書いてます。いわゆるオッサンの雑記です。考えるオヤジ.ホーム検索トップサイドバーこの記事を書いた人しろうめず日本一の田舎県で会社員を続ける二児の父、しろうめずです。このブログは、7歳長女と5歳次女の子育てについて、仕事に対する考えや出来事、趣味やふと思ったことなど幅広く(言い換えれば統一感無くグダグダと)書いてます。いわゆるオッサンの雑記です。#stinger5ブログを一から始め直すつもりだったのに結局無料ブログから引越しさせた。