Sorairo

photo credit: remysharp via photopin cc

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

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

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

advertisement

ググったら出てきた

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

@saita_ryouheiさんがご自身でカスタマイズされたShareHtmlを公開していました。
ここで思い出したんですが、当ブログで以前にもご紹介していましたね。
当時は「サイトタイトル・サイトURL除去」の意味が全く分かっていませんでしたw

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

設定は超簡単

以下が私が設定した画面のスクショです。

「サイトタイトル(任意)」と「サイト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で表示したのが以下です。

※H30.6.22追記
現在は上記のコードは使用していません。

最後に

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

advertisement

related posts

Webサイト制作時に素人の私が重宝しているオンラインツールまとめ。

新規Webサイト構築の際にとても重宝しているオンラインツールをまとめてみました。素人にはありがたいものばかりです。

CSSの小ネタを5つご紹介します。

CSSの小ネタをいくつかご紹介したいと思います。

CSSで複数の要素を横並びにする方法

複数の要素を横並びにするCSSをまとめてみました。

最近Pocketに保存した気になる記事をご紹介します。

「あとで読む」サービスのPocketに最近保存した、私が気になった記事をご紹介します。

マウスオーバー時に沈みこむ挙動のボタンをCSSで作成する方法

CSSで作るマウスオーバー時に沈むような挙動のボタンをご紹介します。

私が好きなデザインのWebサイトを5つだけご紹介します。

WebサイトのギャラリーサイトCSSManiaの中から個人的に好みのサイトをご紹介します。

TOLOTで2014年の卓上カレンダーを作ってみました!

フォトブックを作ってくれるサービスは数多くありますが、今回は卓上カレンダーを作ってくれるTOLOTを利用してみました。このクオリティで送料込みの500円は安い!

当ブログをご紹介いただきました!

私の大好きなブログ、イロトリドリのこっこさんから当ブログをご紹介いただきました。相思相愛で良かったです(笑)