外部リンクを「はてなブログカード」に置き換えて表示させるWordPressプラグイン「Pz-HatenaBlogCard」を公開したところ、さっそく反応をいただきましたので、もうひとつ修正しました。
[2015/08/22追記]公式プラグインディレクトリにて公開しました。ダッシュボードからインストールやバージョンアップが行えます。
画像がズレる！
「サムネイルを左側にすると、説明文にサムネイルが重なって表示されていまう」という報告をいただきました。
URLを教えていただいていたので、確認したところ、画像の周りに太目の「枠」が付いていて、それが原因で表示位置がズレてしまって、結果記事にかぶってしまっているようです。
「ファビコン」の周りや、「はてな数」が表示される辺りにも、水色の箱が表示されている状態でした。
WordPressテーマをインストールしてみる
こちらの方のサイトでは、「DeepJaggy-threeColumn」というWordPressテーマを使用いるようでした。
このテーマは「STINGER3」を元にして、サイドバーを追加して3カラムにしたテーマのようです。
まずは原因の切り分け／現象確認のために「DeepJaggy-threeColumn」をインストールしてみようと思います。
テスト環境にインストールして、サムネイル画像を左側に表示するように設定してみます。
うちのサイトでも同じ現象が出ました。ズレズレです。
うちのサイトのタイトルに「つれづれ（ズレズレ？）」とあるとおり、ズレズレです。（よく分からない宣伝）
サムネイル画像、ファビコン、はてな数のところにも枠があります。
サムネイルを右側にしても、画像の右側と下側が切れてしまっています。
Chromeでファビコンを右クリック、「要素の検証(N)」をしてみます。
ファビコンが表示されている領域を見てみると、padding（緑の部分）とmargin（橙の部分）が追加されているようです。
画像の周りに枠を表示してくれるテーマ
背景が白い画像とか、テキストエディタの画面を貼ったものとかは、そのままだと境界が分かりづらいため、画像に枠を付けてくれるテーマやプラグインがあります。
そもそもSTINGER3が太目の枠を付けてくれるので、それに準じてDeepJaggy-threeColumnも画像の周りには太目の枠が付いています。
さて、スタイルシートを見てみます。
225行目で記事中の画像の下側に20ピクセルのマージンを設けていました。
.kizi img, .kizi .wp-caption, textarea {
margin-bottom: 20px;
height: auto;
max-width: 100%!important;
}
1,476行目で記事中の画像のまわりに10ピクセルの薄い水色の枠を付けていました。
.kizi img{padding:10px; background-color: #EDF2FA; border: 1px solid #ddd;}
とりあえず、実験的に「pz-hatenablogcard-style.css」の先頭に、paddingとかの設定を書いてみます。
.linkcard img {
margin: 0;
padding: 0;
border: none;
}
どうやらさくっと直りました。
ファビコンとドメイン名、サイト情報の間はmarginとかで調整していたので、ぴったりくっ付いてしまいました(^-^;
お行儀が良いかどうかは別として、ファビコンとドメイン名の間は「 」を入れて感覚を調整しました。
設定画面に「imgのCSSをリセットする」オプションを付けて、CSSリセットしないようにできるようにしました。
初期設定ではチェックが付いた状態になっています。テーマのstyleに合わせた方が見栄えが良い場合にはチェックを外してください。
古いバージョンのプラグインをインストールしていた場合、チェックが付いていない状態でCSSファイルが作成されている場合があるので、「変更を保存」を押してCSSファイルの作成を行ってください。
ダウンロードとインストール
詳しい使い方などはこちらのページから。
「最新版だとうまく動かない」など、このときのバージョンが良い場合、こちらからダウンロードしてください。
↓ZIPファイルダウンロード
サイトからのダウンロードは終了しました。プラグインディレクトリからのインストールをお願いします。
メモ
- 反応があるとついつい速攻直したくなる。
- 使ってくれる人がいるのがやっぱり嬉しい。
- WordPressプラグインディレクトリに登録したい。→苦戦中
- Twitterとかでバージョンアップ告知してみたくなってくる。（つぶやいたこと無いと、いつつぶやいていいやら！Σ(ﾟロﾟ)oﾞ）
コメント
[…] ぽぽづれ。 1 tweet[Pz-HBC][1.0.2]画像の周りに枠が付く→改善しましたhttp://poporon.poponet.jp/20150810/8065前→ver1.0.1 次→ver1.0.3 外部リンクを「はてなブログカード」に置き換えて表 […]
ぽぽろんさんただいま。
いつもありがとうございます。
使用したというプラグインは、Dbox Slider Liteです。
ご指摘頂いた方法(応急処置)を一度確認しようと思います。
設定のし直しで直った様で良かったです。
色々と試していただいて助かりました、ありがとうございます。
次の更新に盛り込む方向で考えます。
おかえりなさいさんは、いつも新しいプラグイン等を色々と試されていて密かに「このプラグインいいなぁ」とか思いつつ見させていただいています。
それによって色々と現象が出てくるのも実は楽しかったりします。
「見出しタグかな」とご自身なりにアタリを付けていただけるのも助かります。
では、またお気軽にどうぞ！
ありがとうございます。
色々なプラグインに挑戦しているとそれなりにトラブルがあったりと、それはそれで勉強になり楽しんでいます。
始めはディレクトリとはなんぞやというレベルでしたが、書き換えもやってみましたら出来ました。
ぽぽろんさんのおかげ様です＼(^o^)／
今後ともよろしくお願いしますね！
トラブル発生の瞬間は「困った！」ってなるけど、解決に向かっていくのは気持ちの良いものです。
では、また！(^-^)o
ぽぽろんさんおかえりなさいです。
プラグインPz-HatenaBlogCard利用させて頂いています。
この度、スライダー系のプラグインを導入しましたところ相性の不具合が起きました。
新着記事をピックアップするプラグインでして、外部リンクのブログカードの見出しに反応してしまい、記事の上部まで引きずり上げるように誤表示されます。
これはPz-HatenaBlogCardだけに限らず、テーマSimplicityのブログカード機能(はてな)を使用しても同様でした。
外部リンクのブログカードの時のみ発生します。
外部リンクのブログカードで使用する見出しが原因に思うのですが、もし今後のバージョンアップで、見出しのタグの選択できるように変更などいただけませんでしょうか。
なぜ見出しのタグが原因かと考えたかと言うとブログカードのタイトルのみを右クリックでコピーしてWordPressのエディターで貼り付けたら、外部リンクのカードでは見出しとなり、内部リンクのカードではそうならないからです。
因みに今回の現象はスマホの時のみ起こります。
今現在次のページでそのような現象が起きています。http://accesstrigger.okaerinasainet.net/?p=12584
無理なお願いばかりで恐縮ですが、一度ご検討いただけましたら幸いです。
おかえりなさいさん、おかえりなさい。
いつもご利用ありがとうございます。
さて、現象としては「iframe」という外部サイトを記事内に表示させる方法のものの位置が画面左上に動いてしまっているように見えます。
こちらで同じプラグインをインストールして現象を再現してみようと思います。また何か分かったらお知らせしようと思います。
モバイルのみで起こる現象のため、ちゃんとした原因は掴めませんでしたが、やはりiframeが「浮いてしまっている」のだと思います。
応急処置としてプラグインディレクトリにある「pz-hatenablogcard-style.tmp」の141行目の「.hatena-webcard-iframe {」と142行目の「/*BORDER*/」の間に1行挿入して、
position: static !important;
と書かれた行を追加して保存。
その後、設定画面から「変更を保存」ボタンを押してみたとき、改善されますでしょうか。
おはようございます。
応急処置の方法にて試しましたが改善せずでした。
tmpファイルは正しく直っているようですが、設定が反映されていないようです。
Pz-HatenaBlogCardの設定画面で「変更を保存」のボタンを押すことでスタイルシートを作り直すので、設定は変更しないまま、保存を押してみてください。（これで直るといいですが…どうだろう。どきどき。）
治りましたよぽぽろんさん！
ありがとうございます＼(^o^)／
これで安心しました！
いつもご丁寧にありがとうございます♪