ブログに欠かせないShareHtml、AppHtmlの細部をカスタマイズしました。

2016/08/22オンラインツール, WEB

どうも、リョウ(@ryskyshd)です。

ブログを書く上で絶対に欠かせないShareHtmlとAppHtmlの二つのブックマークレットですが、今回ほんとに細かい、重箱の隅を突くような箇所をカスタマイズしましたので自分の防備録も兼ねてエントリーします。
そもそものきっかけは自分のブログエントリーを紹介する際に、自分のブログタイトルが一緒に表示されるのが気になったことからです。
自分のブログで自分の書いたエントリーを紹介するときに自分のブログのブログ名が入ることに少し違和感を感じるようになりました(ブログて言い過ぎw)

気になったら無視できない性格なので、早速改善してみました。

ググったら出てきた

困ったときのGoogle先生。
「sharehtml サイト名 除去」と検索すると一発解決でした。

@saita_ryouheiさんがご自身でカスタマイズされたShareHtmlを公開していました。
ここで思い出したんですが、当ブログで以前にもご紹介していましたね。
[kanren postid=”867″]

当時は「サイトタイトル・サイトURL除去」の意味が全く分かっていませんでしたw

勘の良い方はもう気づかれたかもしれませんが、上で紹介した当ブログのエントリー紹介ではブログタイトルの「Sorairo」が表示されていませんね。
でも、@saita_ryouheiさんのエントリー紹介ではきちんとサイトタイトルが表示されています。
これでスッキリしました。

設定は超簡単

以下が私が設定した画面のスクショです(※クリックで拡大します)。
ShareHtmlメーカー

「サイトタイトル(任意)」と「サイトURL(任意)」の欄に入力します。
サイトタイトルの欄は、ブログの個別記事ページを開いてソースを表示させて該当箇所をコピペしました。
あとは通常通りブックマークレットを生成して登録すれば完了です。

見た目は全部CSSで設定しました

そのほかに、スクリーンショットやアプリアイコンの見た目を全部CSSで整形するようにしました。
細かすぎるのでまずはコードだけ。

ShareHtml

HTMLはこんな感じ。

CSSはこんな感じ。

ポイントは2つ。

  1. スクショのサイズを150×130から150×106に変更。
  2. スクショの影をCSSのbox-shadowで指定。

細かいですねw
スクショのサイズはMetallic Ratioのサイトから白銀比になるように変更しました。

AppHtml

こちらもコードから。
まずはHTML。

そしてCSS。

ShareHtmlとシャドウの単位を揃えたかったのと、divタグをpタグに変更したかったのが大きな改善点です。
自分で言うのも何ですが、細かい!ww
ちなみに新生AppHtmlで表示したのが以下です。

AppIcon

Staccal 2 – 12種類のカレンダーとリマインダー

価格:¥100(記事掲載時)

カテゴリー:仕事効率化, ライフスタイル

最後に

いかがでしたでしょうか。
こんな性格なので自作テーマ作りもなかなか前に進みません。
ネットで公開されているコードも一回全部自分の中で飲み込んで理解した上でさらにカスタマイズしないと気が済まないたちなので。
でもこれでまたひとつ自分の中でモヤモヤしていたことが解決しました。
こんな調子で自作テーマ作りもボチボチ進めていきます。

スポンサーリンク