iOS/Macアプリ紹介のAppHtmlが大幅リニューアル♬ | 普通のサラリーマンのiPhone日記 にて紹介されていたBookmarkletを早速試してみました。自分はiPhoneやiPadでブログエントリのドラフトを作ることが多いので、MobileSafariから利用できるBookmarkletは非常にありがたい存在です。
ただ、残念なことにわたしのブログでは、WordPressで設定しているテーマのstyle.cssが優先されるためレイアウトが崩れてしまうことが判明し、 AppHtmlメーカーのフリーエリアを使ってBookmarkletを微調整しました。それでも全ては修正しきれず、最終的にはBookmarkletで生成したHTMLコードに修正を加えました。
AppHtml(中アイコン表示) – AppHtmlメーカーからそのままBookmarkletを生成
ブログテーマのstyle.cssが適用されてしまうのでレイアウトが崩れてしまっています。
- 画像余白と枠線が設定されており、画像の縦方向のアラインメントが揃っていません。
- アプリタイトルの強調文字が無効化されています。
- 行間が狭くなっています。
AppHtml(中アイコン表示) – zBenchテーマに合わせてBookmarkletをカスタマイズ
Bookmarkletを生成する直前にフリーエリアでタグを修正し、生成後にブックマークに登録します。そのままだとstyle.cssが適用されてしまうので、style.cssで使用している同じプロパティに違う値を設定（上書き）してます。
<a href=”${linkshareurl}” target=”_blank” rel=”nofollow”><img width=”100″ class=”alignleft” align=”left” src=”${icon100url}” style=”border-radius: 20px 20px 20px 20px;-moz-border-radius: 20px 20px 20px 20px;-webkit-border-radius: 20px 20px 20px 20px;box-shadow: 1px 4px 6px 1px #999999;-moz-box-shadow: 1px 4px 6px 1px #999999;-webkit-box-shadow: 1px 4px 6px 1px #999999;margin: -5px 15px 1px 5px;padding:0px;border:none“></a><div style=”line-height:20px”><span style=”font-weight:bold;font-size:110%”> ${title}</span><a href=”${linkshareurl}” target=”_blank” rel=”nofollow”><img src=”https://s.mzstatic.com/htmlResources/5BAB/web-storefront/images/viewinitunes_jp.png” style=”vertical-align:bottom;margin:0;padding:0px;border:0px;background:#f7f7f7″ width=”90″ alt=”App”></a><br> カテゴリ: ${category}<br> 販売元: <a href=”${selleritunes}” target=”_blank” rel=”nofollow”>${seller}</a>（サイズ: ${appsize}）<br> 全てのバージョンの評価: ${allverstar}（${allreviewcnt}）<br> ${gamecenter} ${univ}</div><br style=”clear: both;”>
これだけだと、「★」マークと、ユニバーサルアプリ対応「＋」マーク、「GameCenter」対応マークの画像の余白と枠線が残ります。この部分はAppHtmlメーカーのさらに奥にあるjavascriptでアプリ個別に判定して生成しているので、ユーザ側でこれ以上のカスタマイズはできません。
部分的にstyle.cssを無効化できるといいのですが… そのため、一旦Bookmarkletで作成し、生成したHTMLコード（該当の<img>タグ）をエディタに貼りつけて、直接修正を加えます。
AppHtml(中アイコン表示) – さらにHTMLタグを編集
上記のBookmarkletで作成したHTMLコードの★マークなどの<img>に
style=”margin:0;padding:0px;border:0px;background:#f7f7f7″
を追加します。★マークは背景が透過されていないようで、ブログのzBenchテーマの背景色と合わせることはできませんでした。
とは言え、一番上の状態からは見違えるほどよくなりました。直接HTMLコードを修正する必要がありますが、追加styleをブログエディタの定型文登録機能（例：DPadのClip）等を使うとカンタンです。
ブログをWordPressに移行してからテーマ編集について意識していませんでしたが、設定内容と編集箇所を確認するよい機会でしたし、新たな発見でした。