[Å] iPhoneアプリ紹介で愛用「AppHtml」をSEOに優しく綺麗なデザインにカスタマイズする方法

AppHtml

するぷろーらでAppHtmlが動かないことをきっかけ新たにAppHtmlのデザインや裏のコードをSEOに優しい状態に書き換えてみました。ご興味のある方はカスタマイズの方法を掲載しましたのでご覧ください。

AppHtml

動かない理由などについては前回の記事を参考にしてください。

参考:[Å] iOS8「Safari」や「するぷろーら」でAppHtml(するぷろに出力)が動かない時にチェックしたい対応策まとめ

iPhoneでアプリを紹介するときに便利な「AppHtml」。

AppHtmlブックマークレット・メーカー

このツールを使うことで簡単にiPhoneアプリのリンクを作ることができます。

ちなみに今回、ご紹介する形はこちら↓
AppHtml

アプリを仮に連続で紹介しても綺麗な形で見えるように意識して作りました。ボタンはガイドラインに沿って公式を使用しています。

今回の修正

AppHtmlでするぷろに出力が動かないため、今回は出力先をするぷろからポップアップに変更しました。

今回を機にhtmlに直接書いていたスタイルをやめ、全てCSSで管理することにしました。直書きよりSEOにも優しいソースになるためいつかはやりたいと思っていたことだったので個人的に満足しています。

以下は私が使用しているAppHtmlのコードとスタイルシートです。

ソースコード

<div class="apphtmlBox"><div class="apphtmlImg"><a href="${url}" target="_blank" rel="nofollow"><img width="75" height="75" class="appsImg" src="${icon100url}" /></a></div><div class="apphtmlTextBox"><p class="apphtmlName"><a href="${url}" target="_blank" rel="nofollow">${name}</a></p></div><p class="apphtmlBtn">${badgeL}</p></div>

コードはブックマークレット作成時に改行が不要のため、全て削除した状態で掲載しています。

CSS

.apphtmlBox {
	overflow:hidden;
	margin: 0 0 20px;
	padding:0 0 20px;
	border-bottom:#ccc 1px dotted;
}
.apphtmlImg{
	float: left;
	margin: 0 20px 10px 30px;
	width: 75px;
	height: 75px;
}
.apphtmlName{
	margin: 0 0 5px;
}
.apphtmlName a{
	border-bottom:#000 dotted 1px;
	color:#000;
	font-weight:bold;
}
.appHtmlCate{
	margin: 0 0 5px;
}
.apphtmlBtn{
	clear: both;
	margin:0;
	padding:0;
}

カスタマイズについて

カスタマイズについては、各々の環境により若干見え方が異なる場合があります。上記内容は私の環境で正常に動いているものを掲載しています。

カスタマイズは自由におこなってください。

AppHtml内で検索対象・テンプレート・出力先、必要であればPHGトークンを入力後、「テンプレートは直接カスタマイズできます」に先ほどご紹介した改行のないソースコードをそのまま貼り付け、Bookmarkletを生成ボタンを押します。
ブックマークレット生成

スタイルシートの内容はテーマで使用してるstyle.cssに貼り付けてください。意味がよくわからないという方はなるべく1番下に貼り付けると環境依存による影響が比較的少ないので良いと思います。わかる方はご自由にどうぞ。

※ 作業前は必ずバックアップを取っておこなってください。この作業による不具合などは一切責任を取りません。

あとは、通常通りできたブックマークレットをするぷろーらに登録して完了です。
するぷろーら

さいごに

するぷろーらからはするぷろにスムーズに戻れるのでコピー型にしてもそんなに言うほど手間はかかりません。手間なのはこのコードを作ることの方でした。笑

もし、するぷろーらでAppHtmlが上手く動かない、スタイルの直書きが好きではないという方はお試しください。

おしまい。

ブログ更新に使用したアプリ

この記事はiPhoneから更新しました。
もしiPhoneでブログを更新してみたいという方はチェックしてみてください↓

するぷろの使い方まとめ

■ 同じカテゴリについてもっと読む

ブログ運営者をフォローする!

\ この情報を周りの人にも教える /

slooProImg_20141006063904.jpg
プロフィールあかめの画像
あかめAkame Mizuho
横浜在住。フリーランス。
食べ歩き / 旅行 / カメラ / WEBデザイン 好き。

プロフィール / お問い合わせ

個人アカウント(メイン)▼

ブログ公式アカウント▼