waka8*stakes

〜馬絵+林檎+Wordpress〜

パソコンでもスマホでも崩れない!AppHtmlに使えるiOSアプリ紹介欄のソース

apphtml-bootstrap

Bootstrapを使ってみた

今まではApphtmlを使ったアプリ紹介枠は外部CSSでスタイリングしてたけど、サイトデザイン(WordPressテーマ)を一新したので今までのアプリ紹介枠はスタイルが崩れてしまいました。もう一度マークアップをやり直し、今度はタグにstyle属性を付けてスタイルしてテーマを変えても崩れないようにしました。Bootstrapのレスポンシブグリッドシステムを使っているのでパソコンでもスマホでも崩れずに表示されます。PCもスマホも同じテーマを使うのでレスポンシブな方がいいと思ってグリッドシステムを使ってみました。テーマいじりが趣味の私の事だからまたテーマを1から作り直すだろうと思い、テーマを変えても表示が変わらないようHTMLタグに直接スタイルを記述してます。Bootstrapの色づかいを使用し、記事本文(div.entry-content)のスタイルに左右されないようにタグに直接スタイル付けしてます。

Bootstrap使ってる限りはテーマを変えても表示が崩れる事ないと思います。

AppHtmlメーカーのテキストエリアに入力するソース

<div class="container-fluid"><div class="row alert alert-success"><div class="col-xs-3 col-sm-3 col-md-3"><img src="${icon100url}" width="100" height="100" alt="${name}" class="img-responsive "style="border-radius:15px;"></div><div class="col-xs-9 col-sm-9 col-md-9"><h4 style="font-size:25px;margin:0;padding:0;border-bottom:1px solid #3c763d;line-height:1.2em;">${name}</h4><ul style="list-style-type:none;padding-left:0;margin:0;line-height:2em;"><li class="text-danger" style="display:inline;"><strong>${price}</strong></li><li style="display:inline;margin-left:1.2em">${category}</li></ul><p class="text-warning" style="font-size:12px;margin:0;line-height:1.5em;">値段は掲載当時のものです。現在の値段と異なる場合があります。ご了承ください。</p></div><div class="col-xs-12 col-sm-12 col-md-12" style="text-align:right;"><a href="${url}" class="btn btn-success" style="font-size:25px;margin-top:10px;">アプリをダウンロード</a></div></div></div>

枠とボタンの色もBootstrapのシステムを使ってるので色を変えたい時は<div class="alert alert-xxx...">alert-xxxと、<a ... class="btn btn-xxx ...">btn-xxxのハイフンの右側を書き換えるだけでおk。

表示サンプル

Snapseed

Snapseed

  • 無料
  • 写真/ビデオ, ライフスタイル

値段は掲載当時のものです。現在の値段と異なる場合があります。ご了承ください。

スマホでご覧の方にも表示崩れてないかと思います。PCでご覧の方はブラウザの幅を縮めたり広げたりしてみて♪

枠とボタンの色を変える

色別の枠とボタンのクラス
ボタン
alert-error btn-danger
alert-info btn-primary
水色:btn-info
alert-warning btn-warning
alert-success btn-success

追加

アイキャッチ画像での見た目からソースを変更しました。

思いついたときにはパソコンで見たときに

 アイコン タイトル                    
 
  作者                               
  カテゴリー  ダウンロードリンク  
  値段                                  

の並びで満足してたけど改めて見たらボタン状のダウンロードリンクの位置がイマイチで

 アイコン    タイトル
           ───────────
           値段 カテゴリー

         ダウンロードリンク

の方が見栄えがいいと思って書き直しました。

display:table+インラインCSS版も書いてみた

上の奴は当たり前だけどBootstrapを使ってなかったら表示が崩れます。将来Bootstrapを超える最強のグリッドレイアウトシステムを持つライブラリが現れたらそっちに乗り換えるかもしれませんし、自分でレスポンシブデザインが出来る上級者の方とかBootstrapを使ってないテーマをお使いの方でも使えるdisplay:tableスタイルのも書いてみました。

AppHtmlメーカーのテキストエリアに入力するソース

<div style="background-color:#DFF0D8;border-radius:5px;"><div style="display:table;"><div style="display:table-cell;width:120px;vertical-align:top;text-align:center;padding:10px 0 0 10px;"><img height="100" width="100" src="${icon100url}" style="border-radius:15px;"></div><div style="display:table-cell;vertical-align:middle;padding:1.2em;"><strong style="font-size:1.2em">${name}</strong><ul style="padding-left:0;"><li style="list-style-type:none;line-height:1.5em;">${category}</li><li style="list-style-type:none;line-height:1.5em;">値段:<strong style="color:#ff0000;">${price}</strong><br><span style="font-size:12px;">値段は掲載時のものにつき現在の値段と異なる場合がございます。ご了承ください。</span></div></div><div style="text-align:center;padding:0 20px 15px 20px;"><a style="display:block;text-align:center;padding:0.5em;background-color:#5CB85C;color:#fff;font-size:24px;border-radius:5px;text-decoration:none;" href="${url}" target="itunes_store">アプリをダウンロード</a></div></div>

タグに直接スタイルを指定しているので殆どのサイトでこのソースを登録したAppHtmlを実行しても同じ見た目になります。こちらも画面を狭くしても汚くなりません。

表示サンプル

Instagram
  • カテゴリ: 写真/ビデオ, ソーシャルネットワーキング
  • 値段:無料
    値段は掲載時のものにつき現在の値段と異なる場合がございます。ご了承ください。
AppHtml公式ページはこちら↓

今やブックマークレットを登録しなくてもサイトにアクセスして設定するだけでHTMLを生成してくれるサービスやMac使いのブロガーに人気のMarsEdit用のツールまであります。