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

photo credit: remysharp via photopin cc
スポンサーリンク

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

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

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

ググったら出てきた

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

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

神ブックマークレット「ShareHtml」がパワーアップしました。

2013.05.13

当時は「サイトタイトル・サイト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(記事掲載時)

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

最後に

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

スポンサーリンク

この記事をシェアする

5 件のコメント

  • いつもお世話になっております。
    AppHTMLのソースをAppHTMLブックマークレットメーカーに貼り付けて生成を押し、生成されたソースコードをこーピーしてブックマークレットにしたのですが、実行されなくてコメント残します。
    IEでもやってみたのにできないんです。TT

  • sensyoさん>
    返信が遅くなりました。
    記事中のソースは見やすくするために改行を入れていますが、ブックマークレットメーカーに貼り付ける際には改行を全部削除しないといけないんですよ。
    注意書きしておくべきでした。
    記事中のソースをテキストエディタなどにコピペして改行部分を削除したもの(全部を一行にすると言えばお分かりでしょうか。)をブックマークレットメーカーに貼り付けてください。
    これで動くと思います。

  • http://www.cars-blogi.com.pl/dzialanie-typowego-automatycznego-urzadzenia-zabezpieczajacego
    Looking for a new or used car can be a challenging process should you not know what you are undertaking. By educating yourself about automobile shopping before you decide to head to the car dealership, you possibly can make points less difficult yourself. The following tips might help your following purchasing journey be pleasant.

    Usually take a auto technician coupled when searching for a whole new car. Vehicle dealers are popular for selling lemons and you do not need to be their after that patient. If you can not get yourself a auto mechanic to check out autos with you, no less than make certain you have him look at your last choice before buying it.

    Know your boundaries. Before you begin buying for your vehicle or truck, determine how much you can afford to pay out, and follow it. Don’t neglect to incorporate fascination with your calculations. You can expect to pay all around 20 % as an advance payment too, so be well prepared.

    Before visiting a dealer, know what type of car you would like. Investigation most of you possibilities ahead of buying in order to decide what works the best for your financial allowance and loved ones requirements. Shop around to find out just how much you need to pay to get a prospective automobile.

    Before signing any commitment make time to study every single range, such as the fine print. When there is anything detailed that you simply do not comprehend, usually do not signal until you purchase an response that you recognize. Unsavory salesmen can use a contract to insert many costs which were not mentioned.

    Should you maintain the preceding guidance in your mind the very next time that you simply go buying a car, you will certainly be prone to get a good offer. Getting a car does not have to become a headaches. Just use the tips using this post and you may get the automobile you would like in a very good cost.

  • コメントを残す

    メールアドレスが公開されることはありません。