ガジェニュー

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

  関連記事

screenshot (1)
「Google+」と「WordPress」を活用して2時間でサーバの容量を圧迫しないフリー写真素材サイトを作ったよ!

2年ほど前にミラーレス一眼を買って色々写真を楽しんだりしていた私なのですが、実は …

simages_121114_030748_PM
【STINGER5カスタマイズ】日付・更新日の横にPoketの後で読むボタンを追加

今回も、STINGER5のカスタマイズ記事です。 普段スマホでネットサーフィンを …

sum2
Gush2カスタマイズ~h2タグをカスタマイズします~

今回は「Gush2」のカスタマイズ第2弾です。 自由度が高いサービスだけに結構苦 …

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

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

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

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

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

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

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

4月も終わり今日から5月ですね。GW前にこの暑さはもはややってられないです。 ま …

images_112014_115155_AM
【STINGER5カスタマイズ】このブログにしたカスタマイズまとめ

STINGER3からSTINGER5に乗り換えたのが、2014年10月1日。もと …

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

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

sum1014
【STINGER5カスタマイズ】サイドバーにプロフィール設置

今回はSTINGER5のカスタマイズのお話です。サイドバーにプロフィールを追加し …

Loading Facebook Comments ...

Message

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