Simplicityの特徴 › フォーラム › 不具合報告 › pixivのイラスト埋め込み表示につきまして
- このトピックには33件の返信、2人の参加者があり、最後ににより2年、 9ヶ月前に更新されました。
-
投稿者投稿
-
-
haniwaゲスト
素敵なテーマをご提供くださり有難うございます!
Simplicity2.1.4の記事でpixivのイラストをシェアする際、pixiv公式サイトの枠なしタグを貼り付けても、枠ありで表示されてしまいます。
(Simplicity1.9.3では正常に枠なしで表示されます)特に急いではおりませんので、今後のアップデートの際などに、修正いただけると嬉しいです^^
-
Hidekichiゲスト
> pixiv公式サイトの枠なしタグ
とは、どんな感じのものでしょうか?
修正するには、状態を再現できて、それの原因を調べる必要があります。報告の内容だけだと詳細がわからないので、そこらもできるだけ突っ込んで報告してもらう方が、わいひらさんも修正しやすいかと思います。
どんなタグやスクリプトが使用されていて、例えばどこそこのウィジェットに、何なにという方法で入れたとか、編集画面で直接入れたとか。
で、その結果はこうなってますというような既にその状態になっているページがあればだいたい原因がわかるでしょう。修正しなければならない不具合ならすぐに修正が入るかと思いますが、簡単に直るものならcssでスタイルしたりjQueryで書き換えたりで解決できると思いますので、同じような意見が増えればテーマ側でも対処せざるを得ない状態になるかと思います。
少数意見ですぐに実装できない場合でも個人的に修正してもらえればほぼ解決なので、その辺りの見極めにもできるだけ具体的な情報があると良いかと思います。
-
haniwaゲスト
早速のお返事有難うございます! また、説明不足で失礼いたしました。
pixivにログインして、pixivのイラストをシェアする際、いつくかの貼り付け方(イラストのサイズや、枠の有無)を選べます。
以下は枠あり版で、
<script src=”http://source.pixiv.net/source/embed.js” data-id=”イラストのID” data-size=”large” data-border=”on” charset=”utf-8″></script><noscript><p>イラストのタイトル by クリエイターの名前 on pixiv</p></noscript>
以下は枠なし版ですが、
<script src=”http://source.pixiv.net/source/embed.js” data-id=”イラストのID” data-size=”large” data-border=”off” charset=”utf-8″></script><noscript><p>イラストのタイトル by クリエイターの名前 on pixiv</p></noscript>
枠なし版を指定しても、枠ありで表示されてしまいます。
過去に貼り付けた枠なし版も、Simplicity2.1.4では枠ありで表示されています。 -
Hidekichiゲスト
いろいろpixivの埋め込みを利用されている方のサイトを見てみたんですが、ボーダーと思われているのはもしかすると背景色かも知れません。
例えば、
.pixiv-embed-illust { background-color: transparent !important; }
これをボーダーが入ってない方を適用したものに対して試してみて下さい。子テーマstyle.cssなど。
ボーダーがなくなれば思っていたものが正しかったということで、ボーダーありの方は上記cssではボーダーが消えないかと思います。またpadding等も埋め込まれているので、上記方法と同様にpadding: 0 !importantなどとすれば解除できるかと思います。
中身のiframeは下記の内容通り外部からは操作できないかも知れません。なお、ボーダーありの方は試してないのでわかりませんがiframeにてcssを読み込んでいるため外部からは操作できないかも知れません。またボーダーなしの方は上記cssはiframeを囲うタグに対して書いてあるため子テーマ等で操作できますが、これはSimplicityだからとかは関係なくpixivの埋め込みスクリプトがスタイルしているため、Simplicityでできる事とすれば上記cssぐらいではなかろうかと。
-
haniwaゲスト
お教えくださったスタイルをstyle.cssやpage.cssに適用し、新しい記事に、ボーダー(背景色)有りと無しで同じイラストを埋め込んでみましたが、どちらもボーダー(背景色)有りで表示されました。
(ブラウザのキャッシュや履歴を削除しても変わりませんでした)ただ、pixivの以下のソースを埋め込んだ場合は、正常に表示されました。
<iframe src=”http://embed.pixiv.net/code.php?id=イラストのID” width=”380″ height=”168″ style=”background:transparent” frameborder=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no”></iframe>
仰るように、pixivの埋め込みスクリプトがスタイルしているのでしょうか。
フォーラムでの過去のpixiv関連の投稿では、時間を置いたら正常に表示された事例もあるようなので、数日後にまた試してみます。
有難うございました!
-
Hidekichiゲスト
こんな感じですが言われてるのと違いますかね?
-
haniwaゲスト
おお、まさにこれです!
OFFにしたいのですが、私のブログでは今もONのままになっています。
試しにプラグインをひとつひとつ停止してページを再読み込みしましたが、すべてONのままでした。ブログスキンは深紅きなりを使用し、スタイルシートは以下をカスタマイズしています。
カスタマイズ箇所は多くないため、子テーマは使用せず、直接style.css等に手を加えています。■style.cssに以下追加
○文章全体
body {
color:#555;
letter-spacing:0.05em;
}○引用部分
blockquote:before {
content: “”;
}blockquote:after {
content: “”;
}○コメント返信の背景色
.children{
padding-left: 2em;
background-color: #fdf4f4;
}■固定ページのコメント非表示
page.phpの</div><!– .page –>の下に以下挿入
<?php if ( is_page() )://固定ページのときのみ表示 ?>
<section id=”under-entry-body”>
<?php
if ( is_comments_visible() ) {//コメント・コメント欄を表示するか
comments_template(); //コメントテンプレート
}
?>
</section>
<?php endif;//is_page ?>■コメントのメールアドレス欄非表示
style.css、mobile.cssの一番下に以下追加
.comment-notes,.comment-form-email{display:none;}
-
Hidekichiゲスト
Simplicity2の子テーマはおそらく最終出力になるように設定されているかと思いますが、スキンを利用されている場合はどうなるかを確かめてはいないですけれども、もし最終出力になっているのであれば、子テーマを導入して、子テーマで今のスキンを有効にし、子テーマstyle.cssに!important付きで書けば行けそうに思うんですが…。
子テーマは親テーマの機能を利用する別のテーマ扱いなので、ウィジェットやらを再設定する必要があります。
子テーマ手のカスタマイザーでも親テーマのスキンを利用することができると思うので、そのスキンのstyle.cssが変更されているのであれば次のアップデートまではそのまま利用できます。もし、僕の想定通り子テーマstyle.cssが最終出力なら、スキンのカスタマイズしたスタイルを子テーマに書いておけば、アップデート後もカスタマイズはなくなることはありません。pixivのものもそうです。
これを確かめるにはデベロッパーツールを開いて、headタグのcssの読み込み順を確認し、スキンのcssより下に子テーマのstyle.cssが読み込まれていればokということになります。
このあたりのcssファイルの読み込み順を確認してみて、より後で読み込まれるファイルで且つ、親テーマのアップデートに影響されないファイルにカスタマイズされるのがより良いです。
最悪jQueryでもpixivの背景色をoffの場合は取り除けそうです。
-
haniwaゲスト
お早うございます!
Hidekichiさん、いつも迅速丁寧なアドバイスを有難うございます。子テーマを導入し、子テーマのstyle.cssに先日お教えいただいたpixiv-embed-illustスタイルを書き、ブラウザのキャシュをクリアしたうえで表示してみましたが、pixivのボーダーが表示されてしまいます。
その後、Chromeの「検証」でheadのcssを確認し、Simplicity2のcssのなかで一番下に来ていた「sns-twitter-type.css」にpixiv-embed-illustスタイルを書いても解決できませんでした。
子テーマのスキンを選択しない状態でも、ボーダーは表示されました。
jQueryの知識はまったくありません;;
私の能力ではそろそろお手上げになってきてしまいましたので、お手数をお掛けしますが、そして趣味丸出しのブログで恥ずかしいですが、もし宜しければ、以下のページをご覧いただけましたら助かります。
http://chemibo.jp/haniwa_game/mhx/mhx-kikou/160407.html記事上部のpixivイラストはボーダー無し、記事下部のはボーダー有りに設定しています。
-
Hidekichiゲスト
/*画像効果ボーダー*/が入ってるので、カスタマイザーにて、画像→画像効果をボーダーから「なし(デフォルト)」にすれば良いのではないでしょうか?
画像自体は、アイキャッチの設定のせいか、本来のpixivの構造ではなくただのimgっぽくなっているようです。
カスタマイザーの設定を「なし(デフォルト)」にしてから2枚目以降の画像にボーダー無しを設定し子テーマstyle.cssにpixiv-embed-illustを入れ、そのスタイルが効いているかを確認する必要がありそうです。
-
haniwaゲスト
ご確認いただき、有難うございます。
カスタマイザーで画像効果を「なし(デフォルト)」にして、2つのpixiv画像を両方ともボーダー無しにしていますが、ボーダー・背景色ともに表示されたままです。
「アイキャッチを自動設定」「Lazy Loadを有効(画像の遅延読み込み)」「Lazy Loadのエフェクトを有効」のチェックも全て外し、他のpixivイラストでもテストしてみましたが、結果は変わりません。
他のテーマ(Simplicity1.9.3や、さらに前に使っておりましたDelicacy)のライブプレビューでは、ボーダー・背景色ともに表示されず、正常に表示されます。
-
Hidekichiゲスト
> カスタマイザーで画像効果を「なし(デフォルト)」にして、
> 2つのpixiv画像を両方ともボーダー無しにしていますが、
> ボーダー・背景色ともに表示されたままです。#39305のリンク先にある1つ目の画像はボーダー無くなってます。2つ目以降はボーダーonの設定なので正しい状態です。
このリンク先以外で何か試されたページがあれば、そのリンクを書いてもらえると見に行けます。
単純にキャッシュが残ってるだけとかではないですかね?
キャッシュの削除方法等は「初めにお読みください」等から調べられます。 -
haniwaゲスト
紛らわしくて済みません!
1つ目の画像は、pixivの画像ではなく、自らアップロードした画像です。
pixivのロゴやリンクが付いております2つ目と3つ目の画像が、pixivのイラストになります。pixivのイラストは、2つとも data-border=”off” にしていますが、青い枠線と背景が表示されています。
キャッシュは http://nelog.jp/clear-chrome-browser-cache を参考にクリアして、さらに念のため数時間おいて確認しましたが、まだ表示されています。スマホで確認してみても同じでした。
もう少し時間をおいてみますね!
-
わいひらキーマスター
とりあえず、手元のファイルは申請したので、次のバージョンで改善されるかと思います。
-
haniwaゲスト
わいひらさん、次のバージョンで改善いただけるのですね。助かります!
Hidekichiさんも、色々アドバイスくださり、有難うございます^^この度は大変お世話になりました。
引き続き、Simplicity2を愛用してまいります。 -
Hidekichiゲスト
ボーダーoffにされているということですが、実際は以下の画像のようにonです。
こうなるのはhtmlがキャッシュされているからかと思うんですが、おそらくプラグインかサーバーのキャッシュかと思うんですけれども、どうでしょう?
1枚目の画像にボーダーが入っていたのはカスタマイザーの設定ですが、そのままだと例えばボーダーなしのoixivを貼り付けても1pxのボーダーが入っていたので、これで問題ないということです。
2枚目以降は上記理由によりボーダーonになっているので、手元の編集がボーダーoffでもボーダーが出るのは正常な状態です。むしろ、キャッシュのない新しいテストページを作って、そこでどうなるかを検証されてみてはどうでしょう?
サーバーキャッシュがhtaccessで設定してあるとすると数日から1週間ぐらいはキャッシュしてませんかね? -
haniwaゲスト
お早うございます!
プラグインやサーバーのキャッシュの可能性もあるのですね。「新規投稿を追加」で新しい記事(下書き)を作り、ボーダー無しのスクリプトを埋め込んでプレビュー表示してみましたが、ボーダーが表示されてしまいます。
また、今回の操作で新たに気づいたのですが、今回は、いくつかのpixivスクリプトのなかから、data-size=”small” 版の小さな画像も貼りつけてみましたが、プレビュー表示はlarge版の大きな画像になるようです。(いつもはlarge版で貼りつけており、気づけませんでした)
htaccessの設定はよく分かっていませんが、数日おいてテストしてみますね。
-
haniwaゲスト
テストとしてアップいたしました。
http://chemibo.jp/haniwa_game/mhx/mhx-syukaijyo/pixiv_test.html -
Hidekichiゲスト
そのテストの最後に、jsFiddleのhtml欄をまんまコピーして貼り付けてもらえますか?
-
haniwaゲスト
コピー&ペーストしてみました!
こちらの表示では、変わらないようです;; -
Hidekichiゲスト
念の為、再度試して欲しいのですが、何かしら違う画像をテキストモードで、ボーダーoffのを貼り付けてもらって良いですか?
既にテキストモードで貼り付けてられるようでしたら、見当違いなので貼り付けなくても良いです。 -
haniwaゲスト
返信遅くなりました!
既にテキストモードで貼り付けています。 -
Hidekichiゲスト
うーむ、そうなるとやはり、何かしらがdata-borderの値を書き換えているかと思うんですけれども、なんでしょうねぇ。
data属性はキャッシュされるんで、pixivのスクリプトの方がオカシイとも言えるのかも知れませんが、ここらはpixivのスクリプトなのでなんとも(笑)
スクリプト内で、
なんちゃら.dataset.data-border = "on"
なんて感じになってれば問題はないと思うんですけど。つまりは生のjavascriptで書いてあるかjQueryで書いてあるかです。生のjavascriptで正しく取得してあればキャッシュは発生しないんですが、jQuery.dataで取得してある場合はjQueryの仕様でキャッシュされてしまうんです。で、気になる点としてはjQueryのMigrateプラグインが入ってますよね?
これは、バージョン1.9以前に作られたスクリプトに対して、非推奨になったコマンドも使えるように互換性を保つためのものですが、古いスクリプトを利用しているわけでないなら要らないと思うんですよね。codepenのサンプルではjQuery2.2.2を利用しています。もしかするとここらにも問題があるのかなぁとか思ったりも何とか。
-
haniwaゲスト
こんばんわ~! ご説明を有難うございます^^
pixivのスクリプトに原因があるのなら、対応も難しそうですね;;
(さらに私はjQueryが全く分かりません><)この度は、色々と丁寧なご検討・アドバイスを有難うございました!
またお世話になるかもしれませんが、宜しくお願いいたします。 -
Hidekichiゲスト
> pixivのスクリプトに原因があるのなら、対応も難しそうですね
今の所、50/50ぐらいなんです。pixiv側に問題があるのかも知れないし、haniwaさんのwordpressの環境かも知れないし何とも言えない所です。
で、codepenのサンプルでは、ボーダーありとなしを並べていてきちんと表示され、cssはsimplicity公式を流用ですし、違いは何かというとプラグインとjQueryとキャッシュだけなんですよね。
なので今回はjQueryを疑ってみたんですけども、これでどうかなるという保証はありません。Simplicityを少し改造してみた 番外編 part17 jQueryをGoogleCDNで読み込む 2016-3月バージョン
こちらを参考に…といってもウチのサイトですが、jQueryの最新バージョンを入れてみてはどうかと思うんです。現在jQueryの2系の最新版は2.2.2かと思います。
古いブラウザをサポートする必要があれば、1.12.2が最新版ぽいです。今時は2.2.2で良いかと思います。最新のjQueryを読み込んで、Migrateが残ってる場合は、Migrateを解除してみて欲しいところですが、ウチのサイトでは特に読み込んでないのと、消した覚えがないのでおそらく解除されるんじゃないかなぁと思うんですがやってみないとわかりません。
-
haniwaゲスト
Hidekichiさん、こんばんわ! さらなる情報を有難うございます^^
お教えいただいた情報を、子テーマのfunction.phpに貼り付け、バージョンの数字も2.2.2にしてみましたが、今のところ変化ありません。
また、Migrateというプラグインは使っておらず、ググってもサイトお引越しプラグインばかりがヒットするばかりで、よく分かりませんでした。
もしかしたら、URL転送プラグインの「リディレクション」かと思い、停止したうえで(プラグインを使わなくても支障ありませんでした)、新しいテストページを作ってみましたが、表示に変化はないようです。
Pixivテスト2
http://chemibo.jp/haniwa_game/mhx/mhx-syukaijyo/pixiv_test_2.htmlp.s.
Hidekichiさんは、htmlのコードも、ギターのコードも操れるのですね! 多彩で羨ましいです^^ -
Hidekichiゲスト
jQuery Collapse-O-Maticプラグインを更新するか、問題なければ停止してみて下さい。
古いjQueryのコマンドが利用されていてjQuery最新版ではエラーがでています。 -
haniwaゲスト
こんにちわ!
このプラグインだったのですね、有難うございます。jQuery Collapse-O-Maticを停止してみました。
Pixivイラストには今のところ変化無いようです。 -
Hidekichiゲスト
こっちかな?
Collapsing Categories Plugin -
haniwaゲスト
有難うございます。
止めてみましたが、変わらないようです;; -
Hidekichiゲスト
今見た所、jQueryに関してはエラーはでていません。
また、pixivのスクリプトをちょいと見た所、きちんとdata属性は生のjavascriptで取得設定しているようでした。
で、ウチのサイトで例に枠あり、無しを1つずつ(サンプルと同じ画像の物)をテキストモードで連続で貼り付けてプレビューしてみましたが問題なく表示されました。
pixivの貼り付けサンプルのスクリプトをまんま、連続で入れても正しく表示されるので、pixiv側には問題ないと思われます。またjQueryに関しても問題なしと思います。
サイトのhtmlソースを見ると、
このように、全てがボーダーonになってます。これらは何かしらが書き換えているのか、それとも単純にコピペをミスっているのかどうかがわかりません。このdata属性をoffにするだけで普通は良いはずなのです。
offになった状態が正しく反映されたら、最初の方にレスしたcssも反映されるはずです。貼り付けたソースのdata属性の値がどうなっているのかの確認を再度行ってみて下さい。
編集画面ではきちんとoffになっていると言うことであれば、何かしらが書き換えているかキャッシュの影響と思われますが、プライベートウィンドウ及び、キャッシュをしない状態で見てみましたが変わらずなのでブラウザ側の影響とも思えません。
そうなると、何かしらのキャッシュプラグインを利用されているようであれば、そこらが悪さをしているように思います。確認方法としては、まず親テーマを有効にして、テストページを見てみて下さい。問題がまだある場合は、プラグインの全停止をして、問題がないと思われるものから順番に有効にしてその都度ページを確認して下さい。どこかで問題が発生すれば、その時に有効にしたプラグインが原因です。
原因が分かれば、そのプラグインなりを停止して子テーマを有効にして確認します。特別子テーマに何かしら書き換えるようなカスタマイズをしていないのであれば親テーマにする必要もないかも知れません。
いずれにしてもキャッシュプラグインが有効になっている場合は、真っ先にキャッシュをクリアして、停止して下さい。ひとまずこんな感じでしょうか。
-
haniwaゲスト
こんにちわ~!
記事編集画面を確認してみましたが、枠なしで埋め込んだイラストは、data-border=”off”になっています。
全てのプラグインを停止してみましたが、枠はいまだに表示されています。この状態で、いくつかのテーマを反映してみました。
Simplicity2では、親テーマ・子テーマいずれも表示(data-border=”on”に上書き?)されますが、Simplicity1.9.3やDelicacyではdata-border=”off”が正常に読み込まれて、枠も消えます。プラグインを停止するとスパムが沢山来てしまうようですので(汗)、今は有効にしています。
-
Hidekichiゲスト
わかりました。
どういう経緯かは全く覚えてませんが(笑)、functions.phpの中にpixivに関する関数があってこれが書き換えていたみたいです。
子テーマfunctions.phpに
remove_filter('the_content','Simplicity_pixiv_embed_changer');
これを追記すれば、フィルターされていたものを解除して、これまでのSimplicity(1系)と同様の表示になるはずです。
該当の関数Simplicity_pixiv_embed_changer()にて、こう書き換えていた経緯が分かれば、解除せずとも何かしら修復する方法があるかも知れません。
仮に、わいひらさんに何かしら修復していただいた場合、子テーマに追加したremove_filter()を外せば良いだけなので、ひとまずわいひらさんの動向を待って、現状としては上記通り子テーマfunctions.phpに追記するという方法で乗り切って下さい。 -
haniwaゲスト
おお、有難うございます! お陰さまで、無事直りました~^^!
子テーマへの記述では直りませんでしたが、親テーマの一番最後に書いたら、無事に表示できました。
スマホでも正常に表示されました。この度は、約1週間もの長きにわたり、親身にご対応くださり有難うございました!
お陰で、クリエイターさん達の素敵なイラストを紹介しやすくなり、Simplicityにも愛着が湧きました^^またお世話になることもあるかもしれませんが、宜しくお願いいたします。
-
-
投稿者投稿