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

関連記事

OZPA_kokoronouchideiine

Twitterのデザインをカスタマイズできるサイト「themeleon」

Twitterのデザインが変更されています。(2014/04/10)この情報は旧デザインでの設定にな

記事を読む

GS

ブログにGoogleカスタム検索エンジンを設置する

ブログの検索をGoogleカスタム検索エンジンにしました。その設置方法や手順のまとめです。 Goo

記事を読む

MangaStoreJapan

毎日新着のオリジナルコミックが読めるWebコミックサービス「comico」 漫画はやっぱりやめられない!

もうそろそろ漫画というものよりもきちんとした?書籍を多く読んでいくべきなんだろうなぁとぼんやりと思っ

記事を読む

background

覚えておきたい!! 継ぎ目のない無料の背景画像とジェネレーター

簡単に背景画像が作れるジェネレーターや無料配布サイトの紹介です。使い方などの説明はなくても大丈夫なも

記事を読む

camera

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

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

記事を読む

コメントを残す

ADVERTISEMENT
nijisan

Written by niji_sansan

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

  • 2017年7月
    « 12月    
     12
    3456789
    10111213141516
    17181920212223
    24252627282930
    31  
電子書籍ストア BookLive!
PAGE TOP ↑