このブログでAndroidアプリを紹介するときはAndroidHTMLというブックマークレットを使わせていただいているんですが、少し前に使ったとき、表示のされ方が変わっていました。
どうやらバージョンアップ(v2.3→v3)されたようなんですね。
v2.3のときもそうだったんですが、WordPressテーマ:Simplicityとの相性なのか、どうも表示が崩れてしまいます。
v2.3のときはSimplicity作者のわいひらさんがAndroidHTML用にCSS調整のコードを入れてくれていたり(右寄せされてしまう問題の修正)、自分でも子テーマcssを使って見た目を微調整してたんですが今回はちょっと難易度が高そう…。
2015.5.8追記
AndroidHTML作者さまの記事でversion3更新のお知らせが掲載されています。
現在はv3.1となっており、上記の画像崩れも起こらないことを確認しました。
参考記事 AndroidHTML ブックマークレットを更新・改善して version 3 にしたのでお知らせ。
ってことで、他にアプリを紹介するツールがないか探してみたところ、すごく良いのを見つけたのでご紹介です。
アプリーチでiPhoneとAndroidのアプリをまとめて紹介
なんと、AndroidアプリだけでなくiPhoneアプリもまとめて紹介できる、アプリーチというWebサービスです。
例えば、ATOKのアプリを紹介する場合はこんな感じ。
これは便利!
このブログで紹介するのは基本的にAndroidアプリですが、同じものがiPhoneアプリにもある場合は一緒にリンク貼れるので、iPhoneユーザーの方にも参考にしていただけるかなと。
この素晴らしいWebサービスをどこで知ったかというと、月間50万PVの人気ブログ「ままはっく」を運営されているまなしばさんの記事です。
超便利!iPhoneアプリもAndroidアプリも両方紹介できるブログツール、アプリーチ
@Manamiです。 今日はブロガー必見のツールを紹介したいと思います。 photo credit: Frau…・・・
mama-hack.com
しかもなんと、 このアプリーチを開発されたのはまなしばさんのご主人なんだって。
ご夫婦揃って多才です。
アプリーチの詳しい使い方は、ぜひぜひ上の記事をご覧ください。
Simplicityでプリーチの表示が崩れたら
ところが、さっそく使ってみようとアプリーチで出力したHTMLコードを貼ってみたところ、ストアのリンクバナーが妙に大きく表示されてしまいます。
詳しいことは分からないけど、WordPressテーマとの相性なのかなと思います。
ということで、試行錯誤すること小一時間、子テーマのsytle.cssにコードを追加することでバランスよく表示できるようになりました。(ついでにアプリ名も少し大きく表示するようにしてます)
追加したcssはこちら。
appreach-image(アプリのサムネイル) のmargin指定はアプリーチで出力したコードに元々ありますが、何故かスマホ表示のときだけ適用されなかったので!importantで強制的に適用させるようにしています。
もしテーマにsimplicityを使ってて同じようにアプリーチの表示が崩れてしまったなんて場合は、上記コードを参考にどうぞ。
上記の対応では問題解決できなかった例があるようです。
解決策も含め以下ブログ記事で紹介されていますのでそちらもご参照ください。
アプリーチをsimplicityで使ったら画像が大きくなりすぎる時の解決方法 | おっさんの放課後
まとめ
一昔前と違って最近はios用、Android用それぞれアプリが用意されていることが多くなってきてますから、両方まとめてリンクが作れるのは嬉しいですね。
リンクの作成時に、価格の表示非表示やタイトル名/画像をiTunes StoreとGooglePlayストアのどちらから持ってくるか選べたり、使い勝手も抜群です。
こんな便利なツールを提供してくださっている開発者さまに感謝。
また、 奥さまのまなしばさんもご自身のブログとは別に、子育て世代に向けたブログメディア「IKU+(イクタス)」を起ち上げられています。
日々を仕事と子育てに追われる身としては、こういった同じ子育て世代のリアルな声が聞ける(というか読める)のはスゴく参考になります。これからが楽しみですね。
コメント