「ただいま」の挨拶よりも電源スイッチONのが先な、そんな日常を綴る『ぽぽろんのパソコンつれづれ日記(ぽぽづれ)』へようこそ。XP/Vista/7の話題。2015.08.10外部リンクを「はてなブログカード」に置き換えて表示させるWordPressプラグイン「Pz-HatenaBlogCard」を公開したところ、さっそく反応をいただきましたので、もうひとつ修正しました。[2015/08/22追記]公式プラグインディレクトリにて公開しました。ダッシュボードからインストールやバージョンアップが行えます。Pz-HatenaBlogCardhttps://popozure.info/pz-hatenablogcard外部リンクを「はてなブログカード」に置き換えて表示させるWordPressプラグイン「Pz-HatenaBlogCard」を公式プラグインディレクトリにて公開しています。※更新があった場合には投稿記事でお知らせするとともに、このページの使い方を更新していきます。画像がズレる!WordPressテーマをインストールしてみる画像の周りに枠を表示してくれるテーマダウンロードとインストールメモ画像がズレる!「サムネイルを左側にすると、説明文にサムネイルが重なって表示されていまう」という報告をいただきました。URLを教えていただいていたので、確認したところ、画像の周りに太目の「枠」が付いていて、それが原因で表示位置がズレてしまって、結果記事にかぶってしまっているようです。「ファビコン」の周りや、「はてな数」が表示される辺りにも、水色の箱が表示されている状態でした。WordPressテーマをインストールしてみるこちらの方のサイトでは、「DeepJaggy-threeColumn」というWordPressテーマを使用いるようでした。このテーマは「STINGER3」を元にして、サイドバーを追加して3カラムにしたテーマのようです。原因の切り分け/現象確認のために「DeepJaggy-threeColumn」をインストールしてみようと思います。テスト環境にインストールして、サムネイル画像を左側に表示するように設定してみます。うちのサイトでも同じ現象が出ました。うちのサイトのタイトルに「つれづれ(ズレズレ?)」とあるとおり、ズレズレです。(よく分からない宣伝)サムネイル画像、ファビコン、はてな数のところにも枠があります。サムネイルを右側にしても、画像の右側と下側が切れてしまっています。Chromeでファビコンを右クリック、「要素の検証(N)」をしてみます。ファビコンが表示されている領域を見てみると、padding(緑の部分)とmargin(橙の部分)が追加されているようです。画像の周りに枠を表示してくれるテーマ背景が白い画像とか、テキストエディタの画面を貼ったものとかは、そのままだと境界が分かりづらいため、画像に枠を付けてくれるテーマやプラグインがあります。そもそもSTINGER3が太目の枠を付けてくれるので、それに準じてDeepJaggy-threeColumnも画像の周りには太目の枠が付いています。スタイルシートを見てみます。225行目で記事中の画像の下側に20ピクセルのマージンを設けていました。100%!important;}1,476行目で記事中の画像のまわりに10ピクセルの薄い水色の枠を付けていました。#ddd;}とりあえず、実験的に「pz-hatenablogcard-style.css」の先頭に、paddingとかの設定を書いてみます。none;}どうやらさくっと直りました。ファビコンとドメイン名、サイト情報の間はmarginとかで調整していたので、ぴったりくっ付いてしまいました(^-^;お行儀が良いかどうかは別として、ファビコンとドメイン名の間は「&nbsp;」を入れて感覚を調整しました。設定画面に「imgのCSSをリセットする」オプションを付けて、CSSリセットしないようにできるようにしました。初期設定ではチェックが付いた状態になっています。テーマのstyleに合わせた方が見栄えが良い場合にはチェックを外してください。古いバージョンのプラグインをインストールしていた場合、チェックが付いていない状態でCSSファイルが作成されている場合があるので、「変更を保存」を押してCSSファイルの作成を行ってください。ダウンロードとインストールVer1.1.0から、公式プラグインディレクトリからインストールが行えるようになりました。詳しい使い方などはこちらのページから。Pz-HatenaBlogCardhttps://popozure.info/pz-hatenablogcard外部リンクを「はてなブログカード」に置き換えて表示させるWordPressプラグイン「Pz-HatenaBlogCard」を公式プラグインディレクトリにて公開しています。※更新があった場合には投稿記事でお知らせするとともに、このページの使い方を更新していきます。外部リンクの...「最新版だとうまく動かない」など、このときのバージョンが良い場合、こちらからダウンロードしてください。↓ZIPファイルダウンロードサイトからのダウンロードは終了しました。プラグインディレクトリからのインストールをお願いします。メモ反応があるとついつい速攻直したくなる。使ってくれる人がいるのがやっぱり嬉しい。WordPressプラグインディレクトリに登録したい。→苦戦中Twitterとかでバージョンアップ告知してみたくなってくる。コピーぽぽろんをフォローする2この記事を書いた人ぽぽろん「ただいま」の挨拶よりもパソコンの電源を入れる方が先なパソコンおたく。プログラミングもするけど、パソコンを触っていること自体が趣味。ぽぽろんをフォローする2ぽぽろんぽぽづれ。ぽぽろんPHPリンクをカードにするプラグインを作ろう!(3)cURLでサイトの内容を取得するリンク先のタイトルと概要文を取得します。プラグインのひな型を作りました。ショートコードが書かれたときに呼ばれるshortcodeにコードを書いていきます。Archives」を使ってみたサイドバーが長くなってきてしまったので、「アーカイブ(過去記事)」を折りたたみ表示するプラグインを導入してみました。※現在、当ブログでは「アーカイブ」の表示を行っておりません。ぽぽろんPz-LinkCard[Pz-LkC][2.2.5]リンクをカード形式で表示するプラグイン更新。内部リンクのnofollow指定対応など。リンクをカード形式で表示するWordPressプラグイン「Pz-LinkCard」。最新版ver2.2.5を公式プラグインディレクトリで公開しました。ぽぽろんPz-LinkCard[Pz-LkC][1.8.2]リンクをカード形式で表示するプラグイン更新。カード管理画面の整理など。リンクをカード形式で表示するWordPressプラグイン「Pz-LinkCard」。最新版ver1.8.2を公式プラグインディレクトリで公開しました。ぽぽろんPHPリンクをカードにするプラグインを作ろう!(2)クラスの記述をするプラグインのヘッダとクラス、ショートコードのフックまで記述していきます。何をするプラグインを作るかを決めました。ID:IyNDc2MzAぽぽろんさんただいま。いつもありがとうございます。ご指摘頂いた方法(応急処置)を一度確認しようと思います。ID:IyNDc2MzA設定のし直しで直った様で良かったです。試していただいて助かりました、ありがとうございます。次の更新に盛り込む方向で考えます。ID:IyNDc2MzAおかえりなさいさんは、いつも新しいプラグイン等を色々と試されていて密かに「このプラグインいいなぁ」とか思いつつ見させていただいています。それによって色々と現象が出てくるのも実は楽しかったりします。「見出しタグかな」とご自身なりにアタリを付けていただけるのも助かります。ID:IyNDc2MzAありがとうございます。色々なプラグインに挑戦しているとそれなりにトラブルがあったりと、それはそれで勉強になり楽しんでいます。始めはディレクトリとはなんぞやというレベルでしたが、書き換えもやってみましたら出来ました。ID:gxNDI2NzAトラブル発生の瞬間は「困った!」ってなるけど、解決に向かっていくのは気持ちの良いものです。ID:ExMjM5OTUぽぽろんさんおかえりなさいです。プラグインPz-HatenaBlogCard利用させて頂いています。この度、スライダー系のプラグインを導入しましたところ相性の不具合が起きました。新着記事をピックアップするプラグインでして、外部リンクのブログカードの見出しに反応してしまい、記事の上部まで引きずり上げるように誤表示されます。これはPz-HatenaBlogCardだけに限らず、テーマSimplicityのブログカード機能(はてな)を使用しても同様でした。外部リンクのブログカードの時のみ発生します。外部リンクのブログカードで使用する見出しが原因に思うのですが、もし今後のバージョンアップで、見出しのタグの選択できるように変更などいただけませんでしょうか。見出しのタグが原因かと考えたかと言うとブログカードのタイトルのみを右クリックでコピーしてWordPressのエディターで貼り付けたら、外部リンクのカードでは見出しとなり、内部リンクのカードではそうならないからです。因みに今回の現象はスマホの時のみ起こります。今現在次のページでそのような現象が起きています。http://accesstrigger.okaerinasainet.net/?p=12584無理なお願いばかりで恐縮ですが、一度ご検討いただけましたら幸いです。ID:U1NjA3NzMおかえりなさいさん、おかえりなさい。いつもご利用ありがとうございます。現象としては「iframe」という外部サイトを記事内に表示させる方法のものの位置が画面左上に動いてしまっているように見えます。こちらで同じプラグインをインストールして現象を再現してみようと思います。何か分かったらお知らせしようと思います。ID:U1NjA3NzMモバイルのみで起こる現象のため、ちゃんとした原因は掴めませんでしたが、やはりiframeが「浮いてしまっている」のだと思います。!important;と書かれた行を追加して保存。その後、設定画面から「変更を保存」ボタンを押してみたとき、改善されますでしょうか。ID:IyNDc2MzAおはようございます。応急処置の方法にて試しましたが改善せずでした。ID:gwOTI1NjQtmpファイルは正しく直っているようですが、設定が反映されていないようです。Pz-HatenaBlogCardの設定画面で「変更を保存」のボタンを押すことでスタイルシートを作り直すので、設定は変更しないまま、保存を押してみてください。(これで直るといいですが...どうだろう。コメントをキャンセルメールアドレスが公開されることはありません。(44)クリックされた回数:1963最近のコメントぽぽろん2019年12月1日おぼれさん、コメント&ご指摘ありがとうございます。おぼれ2019年11月28日有意義な記事で助かります。ぽぽろん2019年11月17日本日公開のVer2.3.1でビジュアルエディタのボタン機能を改善しました。ユーザーマニュ2019年11月16日Fn+B:Breakキーと同じ機能があります。ぽぽろん2019年11月9日コメントありがとうございます。@popozureSNSフォローボタンぽぽろんをフォローする2ぽぽづれ。(44)クリックされた回数:1963最近のコメントぽぽろん2019年12月1日おぼれさん、コメント&ご指摘ありがとうございます。おぼれ2019年11月28日有意義な記事で助かります。ぽぽろん2019年11月17日本日公開のVer2.3.1でビジュアルエディタのボタン機能を改善しました。ユーザーマニュ2019年11月16日Fn+B:Breakキーと同じ機能があります。ぽぽろん2019年11月9日コメントありがとうございます。etc)74機器構成11タイトルとURLをコピーしました。