ShareHtmlをカスタマイズする

カテゴリー:Services    |    タグ:

ShareHtmlをカスタマイズする

お友達のブログデザイン変更を頼まれたので、いろいろいじっていたの時、このShareHtmlを教えてあげたあらとっても喜ばれたので、ここに書いておこうと思った次第です。

ShareHtmlをカスタマイズ

ブログを書いていれば『ShareHtml』はたくさんの方が使われているであろうものですね。

設定

使い方ですが、たくさんのブログで書かれているのでここではさっくりと説明します。

まず、上記のリンク先へ。
すると設定画面がでてくると思います。
設定項目は以下

  • Bookmarklet名
  • 選択テキストの最大文字数
  • 選択テキストを囲むHTMLタグ
  • コメントを囲むHTMLタグ
  • 出力方法
  • 書式テンプレート

これらはデフォルトで大丈夫です。ただ、出力方法と書式テンプレートだけお好きなモノを選択してください。

すべての設定が終わると、下にコードが生成されます。

これは、出力方法:プレビュー表示でサムネイル大 左寄せを選択したものです。
今回はこのコードをいじっていきます。

画像の大きさを変更する

表示するサムネイル画像のサイズを、横サイズと縦サイズのピクセル数で指定することができます。 横サイズは 40 ~ 400 の範囲で、縦サイズは横サイズの 0.5 倍 ~ 3.75 倍の範囲で設定が可能です。
HeartRails Capture

デフォルトだと、横150の縦130になっています。
これを変更するには以下

ここの150と130という数値を好きなものへ変更すると画像の大きさがかわります。

他にもあらかじめ用意された既定のサイズというものがありますのでそちらを利用することも出来ます。

  • tiny ・・・・ 60×45 ピクセル
  • small ・・・・ 120×90 ピクセル
  • medium ・・・・ 200×150 ピクセル
  • large ・・・・ 400×300 ピクセル
  • huge ・・・・ 640×480 ピクセル

ただ、以下の影を消すや、角丸にするなどの変更を加えたい場合は、この規定サイズにすると出来ないようですのでご注意ください。

これらのオプションは、フリーサイズの指定時のみ有効です。
HeartRails Capture

画像の影を消す

この2行目の 『 /shadow 』 を消してあげれば画像の影はなくなります。

角丸サムネイル画像にする

画像を角丸にするには、 『 round 』 を付け加えてあげます。

画像まわりに線をつける

画像の縁取りをするには、 『 border 』 を付け加えてあげます。

背景色を変更する

デフォルトでは背景色が白ですが、この色を変更することが出来ます。

背景色をかえるには、 『 "bg=" の後に 6 桁の RGB コード 』 を付け加えてあげます。

これら、影をつけるや角丸、背景色変更は組み合わせてつかうことも出来ます。


参考:HeartRails Capture

ShareHtmlの出力構成

すべてデフォルトの状態で作成すると構成は以下のとおり。

  • サムネイル画像リンク付き
  • リンク付きタイトル
  • はてなブックマーク取得数
  • テキストなど選択したもの(ちょとわかりづらい。。。w)
  • ひとこと

カスタマイズ

これらを踏まえて、独自にカスタマイズをしていきます。そのままインナーで書いてもいいのでしょうが、わたしは外部cssに書くようにしました。そのほうが後々装飾を変更したい場合楽なので。

  • 影なしなにもなしサムネイル画像
  • リンク付きタイトル
  • はてなはなし
  • 選択もなし
  • ひとことなし

この構成で、クラスを振っていきます。
画像の大きさは横250、縦150です。

1行目でクラス:shareHtml追加、3行目画像クラスクラス:sh-imgに変更、5行目タイトルクラスクラス:shareHtml_titleを追加しました。

ポイント
ここで、画像のクラスを変更したとありますが、これはWordPressが生成するクラスとかぶってしまうためです。

ちなみに、上記のコードは見やすくするために改行を加えてあります。実際に作成されるときは改行なしにしてください。

あとはこれを、『Bookmarkletを生成する』ボタンを押して、生成されたリンクをドラッグアンドドロップ!で完了です。
※ cssはおこのみで!


少し長くなりましたが、これからShareHtmlを使われる方に向けて書きました。
少しでも参考になれば幸いです。

ADVERTISEMENT

  • Pocket
  • このエントリーをはてなブックマークに追加

published:2014/12/20    Written by:
カテゴリー:Services,      タグ:

最後まで読んでくれた方へ。

閲覧頂きありがとうございました!
お気に召しましたら是非RSS登録やフォローをお願いします!

Twitter

関連記事

guitar

作業用BGMに最適!ランダムでいろいろな音楽を流してくれるサービス「Tunebow」

ここ数日はこれを利用してブログを書いています。ブログを書く時ってノリノリで書きたいけど、知っている音

記事を読む

迷う

方向音痴な人はこれをみて予習すれば道に迷う回数が減るかもしれない「Google Maps Streetview Player」

毎回、知らないよくわからないところへ行く時はGoogleMapで見てルートを確認してふんわり予習して

記事を読む

twitter1

Twitterのタイムラインを表示するブログパーツ「TweetsWind」

この間のブロガーズハングアウトでお知り合いになったコウノさんのブログで使用されておりとっても可愛いな

記事を読む

shutage

あのアニメのようなロゴが作れるジェネレーターを使って遊んでみました

いつもと違う感じのアイキャッチになってますwおうちにあるシュタゲのゲームを撮影したものなのでサイズが

記事を読む

camera

フリーで利用できる動画素材サイト「Pexels Videos」

前川企画さんでブロガー名刺なるものをつくろうと企んでいたのですが、どうやら出遅れたようでもう定員いっ

記事を読む

コメントを残す

ADVERTISEMENT
nijisan

Written by niji_sansan

生まれ落ちた地は神戸。
鉄成分入ってるものに興味あり!
キイロイトリが好き!
感動すると「ほぅ」と言いますw

  • 2017年5月
    « 12月    
    1234567
    891011121314
    15161718192021
    22232425262728
    293031  
電子書籍ストア BookLive!
PAGE TOP ↑