ガジェニュー

~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 , , , ,

  関連記事

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

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

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

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

sicon_1r_192_010515_055949_PM
【アクセス数報告】2014年12月のPVとアフィリエイトの収益とか

2015年がスタートしましたね。 今年は色々なことを始める予定ですので、去年とは …

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

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

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

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

wpop
WordPress「Popular Posts」で画像が表示されなくなった原因・と修正方法

こちらのブログなのですがWordPressを使用して運用しています。今回は上の画 …

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

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

sum_012415_124615_AM (1)
【WordPress】ロリポップサーバーからエックスサーバーにお引っ越ししました。

今回は、ロリポップ!のコロリポプラン(月額250円)のプランから、エックスサーバ …

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

5月の印象はとしてはとにかく暑い!暑い!やってられません。 という印象でした。 …

sum1015
サムネイル付きで外部サイトを紹介できる「ShareHtmlメーカー」をカスタマイズしました

今回はこのサイトで使用してる、外部サイトをサムネイル付きで綺麗に表示する「Sha …

Loading Facebook Comments ...

Message

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