AndroidHTML v2.3をSimplicityで使うと右に寄る不具合を修正[アプリ紹介ブックマークレット]

このブログではAndroidアプリを少し紹介していて、今後はもっと紹介したいなと思っています。

Androidアプリを紹介するうえで便利なサービスがAndroidHTML v2.3というアプリ紹介ブックマークレットです。

これを使えば、アプリをかっこよくブログで紹介できるのですが、僕のブログをスマホで見ると右に寄って表示されていました

androidhtml for playが右に寄ってる

今回はAndroidHTML v2.3の使い方と不具合の修正までを紹介します。

スポンサーリンク

AndroidHTML v2.3とは?

AndroidHTML v2.3とはアプリを紹介するブックマークレットです。見てもらったほうが早いです。
これを使えば

AndroidHTML v2.3を使うとこんな感じでアプリが表示される

ジャーン

こんな感じでアプリをかっこよく表示してれくるHTMLコードを一瞬で作ってくれますので、あとはブログに貼るだけです。なんて簡単。

AndroidHTML v2.3の使い方

使い方も簡単です。

ウェブブラウザに「お気に入り」とか「ブックマーク」があると思いますが、そこにAndroidHTML v2.3を登録しておいて、Google Play ストアで紹介したいアプリの画面を開いて、お気に入り(ブックマーク)からAndroidHTML v2.3を起動するだけです。そうすればHTMLコードが作成されるので表示したい部分に貼るだけです。

AndroidHTML v2.3の登録の仕方

登録も簡単です。

AndroidHTML ブックマークレットを更新・改善して version 2 にしたのでお知らせ。AndroidHTML ブックマークレットを更新・改善して version 2 にしたのでお知らせ。

↑こちらの記事に「AndroidHTML v2 ブックマークレット登録」というところのリンクをお気に入りにドラッグ&ドロップするだけです。

もう少し具体的に説明します。僕の使っているWindows7で最新のブラウザであるInternet Explorer 11(IE11)で説明すると、右上に星マークでお気に入りを開くアイコンがあるので、そこを開きます。開くと一番上の「お気に入りに追加」の左に「お気に入りセンターをピン留め」があるのでクリックします。

インターネットエクスプローラでお気に入りを開く

そうするとお気に入りが右側から左側にいき、開きっぱなしになります。

次に上の記事のリンクをクリックしたまま、左側のお気に入りのところまで持っていき、そこで離します。

そうすると「AndroidHtml for Play v2」というお気に入りができます。これで登録完了です。
anht001_mini

※クリックで拡大

AndroidHTML v2.3の使い方

上記でも説明しましたが、好きなAndroidアプリのページを開いたまま、「AndroidHtml for Play v2」というお気に入りをクリックします。

そうするとウィンドウが開きHTMLコードが作成されますので、コピーしてブログに貼るだけです。

AndroidHTML v2.3でHTMLコードを作成

不具合なのか?スマホで見ると右に寄ってる

ということで、AndroidHtml for Play v2を見つけてからは、今までのアプリ紹介の記事にHTMLコードを貼りなおしていました。

でもふとスマホで記事を見てみたら、ショックなことが…。

androidhtml for playが右に寄ってる

ガーン。何か右側に寄っている…。

AndroidHtml for Play v2がこういう仕様なのかもしれなかったので、AndroidHtml for Play v2を使っている先人たちのブログを見ましたが、右に寄らず、ちゃんと表示されています。

参考サイト:
AndroidHtml for Play v2 – 日々の観察ブログ – FC2 FC2ブログ
「gPlayHtml」が使えなくなったので「AndroidHtml for Play v2」 WordPress テーマ:STINGER3
「AndroidHTML v2」Androidアプリのブックマークレットのには超おすすめ … WordPress テーマ:STINGER3
GooglePlayのリンクを作成できる「gPlayHTML」が使えなくなっちゃった … WordPress テーマ:STINGER5?

試しにWordPressテーマを「Twenty Fourteen」にしたらちゃんと表示されたので、「Simplicity」に何かあるのか、それとも僕のカスタマイズが下手くそなのか。どうして不具合が起きているかはわかりません。

Simplicityにはずいぶんお世話になっているし、わいひらさん(@MrYhira)にも迷惑はかけられないので、HTMLコードをいじることで何とかならないかやってみました。

HTMLコードを見てみる

AndroidHtml for Play v2で作成されるHTMLコードを見てみます。

<div class="bookmarklet androidhtml" style="margin:0;"><div style="margin-left:159px;" itemscope itemtype="http://schema.org/MobileApplication"><a href="https://play.google.com/store/apps/details?id=com.google.android.googlequicksearchbox" target="_blank" style="text-decoration:none;"><img class="cover-image" src="https://lh4.ggpht.com/DhjQ8DF-bF0azcf2YrOjCN0e1_0zN4cXSgwHuGmDiY97L46M1KTJJ5nDT38N0Pp4KJMM=w300" style="margin-left:-159px;float:left;width:150px;height:150px;border:none;" alt="Google" itemprop="image" /></a><a href="https://play.google.com/store/apps/details?id=com.google.android.googlequicksearchbox" target="_blank" style="text-decoration:none;" itemprop="url"><img src="http://www.android.com/images/icon_play-16.png" alt="Play icon" /> <strong style="font-size:1.2em;" itemprop="name">Google</strong></a><div class="supplier">制作: <span itemscope itemtype="http://schema.org/Organization"><span itemprop="name">Google Inc.</span></span></div><div class="price">価格: <span>無料</span></div><div class="review">平均評価: <span>4.4(合計 1,163,859 件)</span></div><meta itemprop="applicationCategory" content="ツール" /><meta itemprop="operatingSystem" content="端末により異なります" /><meta itemprop="screenshot" content="https://lh4.ggpht.com/3QjZisozU0AGJTuO3U8bTVIHkERkS03_LzU5E85-De0CxdV5tHVEphmdVXhgpY67Sw=h310" /><meta itemprop="softwareVersion" content="端末により異なります" /><small>posted by: <a target="_blank" href="http://hayashikejinan.com/?p=818">AndroidHTML v2.3</a></small></div></div><div style="clear: both"></div>

HTMLコードを見てみると、「margin-left:159px」、「margin-left:-159px」というところがありました。「margin-left」とは左側に隙間を開ける(右に寄せる)という意味です。一つ目は左側に隙間を159ピクセル開けて(右に寄せて)、2つ目は左側に-159ピクセル、つまり逆に右側に159ピクセル隙間を開ける(左に寄せる)、という意味です。

HTMLコードを見てみると、全体的に「margin-left:159px」が作用するようになっていて、画像にだけ「margin-left:-159px」が作用するようになっています。つまり、全体的に右に寄せるけど、画像だけ元の場所に戻す形をとっているようです。

しかし、ここが僕のブログではうまくいかないようです。

HTMLコードの手直し

HTMLコードを貼ったあと、自分で少し手直しする方法を取りました。

最初の「style=”margin-left:159px;”」というところをすべて消して、あとの「margin-left:-159px」を「margin-right:9px」に変えました。

これで、画像を右側に少し隙間を開けて、リンクや文字をその右に表示されます。通常のHTMLコードと同じように表示されるはずです。

Androidhtmlが右に寄らずちゃんと表示できた

ちゃんんと表示されましたー!!やったー!!

まとめ

少しの手直しでどうにかなったので、これからもAndroidHTML v2.3はHTMLコードを貼るたびに手直しながら使っていこうと思います。

にしてもどうして右に寄ってしまうのか?どこかのCSSが反映してしまっているのか、それとも完全レスポンシブ機能がこのようにさせてしまっているのか。僕にはすぐにはわかりません。

SimplicityとAndroidHTML v2.3を使っている方で、同じような現象が起こる方はいらっしゃいませんか?もし原因がわかるようでしたら教えていただけると嬉しいです。

それでは。

コメント

  1. わいひら より:

    つまり、全体的に右に寄せるけど、画像だけ元の場所に戻す形をとっているようです。

    何でこのようにしてあるんだろう?不思議です。

    Twitterで記事を見かけたので、修正する方法を書いてみました。
    僕の環境でも同様の動作をします。
    多分これを子テーマのstyle.cssに貼ればOKではないかと思います。多分。

    .bookmarklet.androidhtml > div {
        margin-left: 0 !important;
    }
    
    .bookmarklet.androidhtml > div img.cover-image {
        margin-left: 0 !important;
    }

    しかし、Simplicityだけで何で症状が出るのかは謎のまま(笑)

  2. えむ氏 より:

    >わいひらさん

    こんにちは。コメントありがとうございます。
    style.cssで「!important」使って強制的にmarginを無効にしちゃうってことですね!
    CSSであらかじめ設定しとけば、いちいちHTMLコードを直さなくていいから、こっちのほうが楽かもですね。ありがとうございます!

    しかし、Simplicityだけで何で症状が出るのかは謎のまま(笑)

    なんでこうなるかはわいひらさんでもわからないのかー。そしたら僕なら絶対わからないや。他のテーマではうまく表示されているので、ほんと謎ですね。

  3. わいひら より:

    原因が判明しました。
    今となっては何で書いたか思い出せないんですけど、僕が不用意に書いたCSSコードが原因でした。
    ですのでSimplicity特有の不具合です。
    次のバージョンアップで多分修正できているのではないかと思います。
    なので、前回僕が書いたコードは、そのとき消したほうがいいかもしれません。
    今回の記事、コードの不具合を見直す良い機会になりました。
    ありがとうございます!

  4. […] AndroidHTMLタグを貼り付けた時の不具合修正(詳細) […]

トップへ戻る
タイトルとURLをコピーしました