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

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

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

App Store Insertのアイコン画像が表示されない問題の対処 | がべのWP練習帳

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

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

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

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

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

てな感じで。