ガジェニュー

~iPhone・格安スマホとか~

App Store Insertでアイコン画像が表示されない問題を解決!【ブログカスタマイズ】

       後で読む

当サイトでもかなりお世話になっている「App Store Insert」ですが、いつの日からかアイコンの画像が表示されなくなってしまいました。そして、今日になってその修正の方法が書いてあるサイトを見つけたのでプラグインの修正を行いました。

基本的には下記のサイトで書いてあることをそのままやれば問題自体は解決します。

サイトの運営者様に感謝です。

自分で上記のサイトをみて修正をしたのですがちょっとだけやり方が違う点と、見た目の追加カスタマイズをしたのでログとして書いておきます。

関連記事
【STINGER5カスタマイズ】 App Store Insert の導入とCSSカスタマイズ”

SPONSORED LINKS

App Store Insertでアイコン画像が表示されない問題を解決!

そもそも、App Store Insertでアイコン画像が表示されない問題の原因は単純にサムネイル画像を参照できなくなったからみたいです。

過去に作成したものであれば現在でもアイコンの画像はそのまま表示されているので、新しく作る際に参照する画像URLの表記のルールが変わってしまいアイコンの画像が表示されなくなった感じみたいですね。

なので今回の修正に関してはアイコンのイメージとして利用していた画像の参照先を下記のように変更するものです。

今まで使っていた参照していたサムネイル画像

123456.100×100-75.jpg

こんな感じの100*100のサムネイルを使用していましたが、

修正後参照する画像

123456.jpg

こんな感じで大元の画像を参照するようにします。

App Store InsertのPHP修正

修正に関しては、プラグインのphpを直接書き換える必要があります。この部分に関しては、上記のサイト様のやり方通りです。

該当のファイルは「app-store-insert/app-store-insert-iframe.php」です。

書き換える部分は下記の部分です。

変更前

$replacement = '$1.100x100-75.$2';
// macSoftware を検索した場合に、.512x512-75 が邪魔なので除去する
$subject = str_replace(".512x512-75", "", $result->{'artworkUrl512'});

 

変更後

$subject = str_replace(".512x512-75", "", $result->{'artworkUrl512'});
if(preg_match("/thumb/",$subject)){
$replacement = '$1.$2';
}else{
$replacement = '$1.100x100-75.$2';
}

これで参照するファイル名の書き換えはOKです。

サイトのCSSを編集

上記のサイトでは、挿入されるイメージ自体の幅を制御するためにwidthを直接書き込んでいましたが自分の場合はその必要はありませんでした。

このサイトではCSSを下記のようにしています。

/*Appleインサートのカスタマイズ用 
  application_box  */
.application_box {
	width: 90%;
	margin: 1em 5%;
	padding: 2% 2%;
	background-color: #fff4f8;
	border-radius:10px;
	overflow: hidden;
	margin: 0 auto;
	display: block;
	font-size: 14px;
	color: #333;
}

.application_box img {
	width: 80px;
	height: 80px;
	margin: 0 6px 0 0;
	float: left;
}
.application_box a {
  color: #1e7eb8;
}
.application_box a:hover {
  color: #e84888;
}

CSSで「application_box」内の「img」については「width」の制御をしているため自動的にサイズ調整は行なわれてそのままのサイズの画像が表示されることはありませんでした。そのためPHPの調整をしたのは上記の部分だけでOKでした。App Store InsertのCSS自体もサイズの指定の記載があるのでデフォルトの人も上記のPHPの修正だけでOKな気がしますがどうなんでしょ?

また、今まで参照していた画像については画像自体がアイコンのサムネイル画像になっていたようで画像の四隅が丸くなっていました。しかし、今回参照する画像については四角のままになっています。これはアプリっぽくないってことで

上記のCSSの「img」部分に「border-radius」を1文追加することによってアイコンの画像の様に見た目を調整しています。

.application_box img {
	width: 80px;
	height: 80px;
	margin: 0 6px 0 0;
	float: left;
     border-radius:10px;
}

これで以前とほとんど一緒ですね。

まとめ

App Store Insert自体は素晴らしいプラグインなのですが、更新が止まっているようなので使っているツールの仕様変更等があれば自分で修正しなくてはなりません。

今回に関しては先人の知恵を借りつつ、自分のサイトに合わせてアレンジする用な感じだったので記録として残してみました。

今回も過去のサイトカスタマイズの記事がかなり役に立ったのですが、サイトカスタマイズ履歴を残していくと後々振り返らなければいけない時にすごく便利だなぁと改めて思いました。みなさんもログに残すといいと思いますよ。

てな感じで。

 - WordPress , , , ,

  関連記事

sicon_1r_192_120214_095619_AM
【アクセス数報告】2014年11月のPVとアフィリエイトの収益を公開します

さて、12月ということで、いつもの報告をやっていきます。前回までの結果は下記から …

chatlike-css-tb
レスポンシブ+スマホ最適化のチャット風の会話を導入したよ。【WordPressカスタマイズ】

今回はCSSを利用してチャット風の会話レイアウトを導入したので備忘録として書いて …

access201503
【アクセス数報告】2015年3月のPVとアフィリエイトの収益とか

3月も終わり今日から4月に突入。新年度ということで色々とイベントがある方いるかも …

icon_1r_192
【アクセス数報告】2015年7月のPVとアフィリエイトの収益とか

7月も終わってとうとう8月に突入です! 個人的には夏は嫌いです!みなさんは「暑い …

images
WordPressのセキュリティ強化!2段階認証を設定しよう!

つい最近の出来事ですが、年金基金から色々と情報の流出が問題となりましたね。担当者 …

sum-wpp
【STINGER5カスタマイズ】WordPress Popular Postの表示をSTINGER5と同じにする

「STINGER5」への移行にともなって、使用していたプラグインでもポロポロと修 …

sum
Gush2カスタマイズ~背景色がPCだけ反映されない~

いつもはstingerを使用しているのですが、運営しているサイトが全部「STIN …

simages_120314_110122_AM
【STINGER5カスタマイズ】スマホでの拡大操作に対応させる方法

今回はSTINGER5でちょっと気になっていたスマホ表示でのピンチイン・アウトに …

sicon_1r_192_020215_080729_PM
【アクセス数報告】2015年1月のPVとアフィリエイトの収益とか

早いもので2015年も2月に突入ということで、1年の12分の1がすでに消費されて …

sum
【STINGER5カスタマイズ】iPhoneでAdSenseの表示がはみ出す問題の解決方法

今回は「で発生した問題の解消のエントリーになっています。何度やってもうまく行かな …

Loading Facebook Comments ...

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です