ShareHtmlの使い方とカスタマイズ方法

今回はブロガーにとってはは欠かせないブックマークレット「ShareHtml」の設定の方法や使い方を紹介していきます。

このブックマークレット「ShareHtml」は自分が開いているページの「画像」「タイトル」「URL」それと「選択した文字の抜粋文」「自分のメモ」等を表示できるブックマークレットです。

自分の過去記事を紹介したり、他のサイトを紹介するときに使えます。例えばこんな感じ。

このようなリンクが一発で出来上がるので生成されたコードをブログに貼り付けるだけ。非常に早いし便利。それでは設定方法を紹介していきましょう。

ShareHtmlの設定と使い方

まずはShareHtmlのページへ移動して設定をやっていきます。
ShareHtmlメーカー

移動できたらShareHtmlの設定画面になります。とりあえず今回は基本的な部分の解説なので設定する場所は「書式テンプレートを選択して下さい」という部分だけにしておきます。

書式テンプレートを「左サムネイル大-align-left」を選択しておきます。

sharehtml-1

「書式テンプレート」を選択したら下にある「ブックマークレットを生成する」をクリック。

sharehtml-2

すると下にブックマークレットが出来上がり。「shareHtml」というリンクボタンをブックマークバーにドラッグして追加。

sharehtml-3

ブラウザにブックマークバーが表示されていないという場合にはこの記事を参考に。
ブックマークバーを表示させる方法

ブックマークバーに追加できたら設定は完了。それでは使い方の簡単な紹介をしておきます。

ShareHtmlの基本的な使い方

えっと、使い方の説明をする前にこのshareHtmlの説明なんだけど基本的に4つの部分があります。ちょっと番号をつけたので画像を見てもらうと分かりやすいかな。

sharehtml-4

  1. サイトの画像
  2. サイト(記事)のタイトル
  3. 抜粋文(自分で選択する)これは任意
  4. コメントやメモ(自分で入力する)これも任意

つまり、上記の設定ではサイトの画像とサイトのタイトルが最低でも表示されます。プラス自分で選択した抜粋文を一緒に表示させたり(なくてもOK)自分でコメントやメモを一緒に表示させる事(これもなくてもOK)もできます。

という4つの機能をまず覚えておきましょう。

では実際に好きなページへ移動し、適当に文章を選択して(選択した文が抜粋文になる)ブックマークバーに追加した「shareHtml」をクリックします。抜粋文が必要ない場合は選択しないでクリック。

sharehtml-5

すると今度は上記4番で説明したコメント、メモを入力するウィンドウが開くので必要であればコメントを入力。必要なければそのまま「OK」をクリック。

sharehtml-6

するとページ一番上にソースコードが表示されるのでこれをブログに貼り付ければ完成。

sharehtml-7

もちろん画像とタイトルだけでいいなら文章の選択やメモの記述なしでもできるので試してみて下さい。

ShareHtmlのカスタマイズ方法

さて、このShareHtmlで作成したリンクに枠線をつけたり背景色を変更したり、文字色を変えたりしたい場合もあると思うのでCSSでカスタマイズしてみる事にしました。

ShareHtmlをカスタマイズしたいという場合は一度ブックマークバーにある「ShareHtml」は邪魔にならない場所に移動するか、削除をしておく事をおすすめします。「カスタマイズしたShareHtml」と「カスタマイズしていないShareHtml」がゴッチャになり分かりにくくなります。

ShareHtmlをカスタマイズできるようにコードを変更する

詳しい説明は後回しにしてまずは再度「ShareHtml」のページへ移動します。

移動できたらまず「選択テキストを囲むHTMLタグを入力して下さい(任意)」という部分に書かれているコードを削除して次のコードを入れます。

■左の入力部分

<br><span class="share-select">

■右の入力部分(変更なし)

</span>

こんな感じになるよね。

sharehtmlカスタマイズ-1

それでその下の「コメントを囲むHTMLタグを入力して下さい(任意)」という部分も元のコードを削除して次のコードに書き換え。

■左の入力部分

<br><span class="share-memo">

■右の入力部分

</span>

今の部分までを変更するとこんな感じになります。

sharehtmlカスタマイズ-2

それができたら下の項目の「以下を直接カスタマイズすることもできます(但し ‘ は禁止文字)」というテキスト入力部分に次のコードを入れます。

改行を入れると上手く作動しないのでかなり横長のコードになりましたが、スクロールしながら最後までコピーします。

<div class="share-box"><span class="share-thumb"><a href="${posturl}" target="_blank"><img class="share-img" src="http://capture.heartrails.com/150x130/shadow?${posturl}" width="150" height="130" border="0" style="float:left;" alt="" /></a></span><span class="share-title"><a href="${posturl}" target="_blank">${posttitle}</a></span><span class="share-hatena"><a href="http://b.hatena.ne.jp/entry/${posturl}" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/${posturl}" alt="" /></a></span>${postselect}${memo}<br style="clear:both;" /><br></div>

ここは改行があると上手く作動しないのでこのままコピペで大丈夫です(最後に部分に改行やスペースが入らないようにコピペ)。

貼り付けたら「Bookmarkletを生成する」をクリック。書式などの設定部分は変更しなくてもOK。

sharehtmlカスタマイズ-3

するとブックマークレットが出来上がるのでそれを改めてブックマークバーにドラッグして追加します。

sharehtmlカスタマイズ-4

とりあえずこれで自分でカスタマイズできるようにクラス名を付ける事(マークアップ)ができました。

それと元々コード自体に付属していたCSSも必要な物だけ残して全部外してみました。

ShareHtmlにつけたクラス名と場所を解説

さて、カスタマイズの前に今ここまでやってきた事をちょっと解説しておきます。

普通の「ShareHtml」でリンクを作成すると「サイトの画像」「サイト(記事)のタイトル」「はてなブックマーク」「選択した文章(任意)」「コメントやメモ(任意)」が表示されます。

sharehtml-4

こんな感じ。これの各部分にクラス名を付けておく事でそれぞれの文字の大きさや文字の色、リンクの色等色々な部分がスタイルシート(CSS)で変更できるようになります。

ここまでやった作業でこれらの部分にクラス名が付けました。具体的にはこれ。

  • 生成されたリンク全体:share-box
  • サイトの画像:share-img
  • タイトル部分:share-title
  • はてなブックマークの部分:share-hatena
  • 抜粋文(選択した文章):share-select
  • コメントやメモの部分:share-memo

このクラス名を元にCSSで色々やっていきましょう。

ShareHtmlのカスタマイズ

ようやく本題。先ほど作成した全部のクラス名を書いたので後は簡単。まず、WordPress利用している場合は大事なコードをCSSに付けておきます。これをCSSにまず追加しておく事。

.share-box:after {
  content: "";
  display: block;
  clear: both;
}

ShareHtmlではサイトの画像を左寄せに配置していますが、最後にこれを解除してやらないといけません。これはShareHtmlで生成されるコードの最後に解除のコードが入ってます。

<br style="clear:both;" />

ところがWordPressには自動整形機能があるので余計な改行タグが勝手に削除される場合があります。

ビジュアルエディタとテキストエディタとか切り替えた時とか。つまりこれを削除されるとレイアウトが崩れるのでCSSで画像の左寄せを解除するコードを入れておくと安心です。

さて、カスタマイズしていきます。クラス名が分かっていれば楽勝。

ブログのスタイルシート(CSS)の一番下に以下のコードを追加して行って下さい。

生成されたリンク全体の背景色を変えて周りに枠線を付けたいというのであればこれ。

/* 全体 */
.share-box {
background-color: #f3f3f3; /* 背景色 */
border:2px solid #CCC; /* 周りに枠線 */
padding: 5px; /* 全体的に周りに余白(中央にちょっと寄せる) */
margin-bottom: 20px;  /* 下のコンテンツとの距離 */
}

数値はお好みで変更して下さい。

サイト(記事)タイトル部分を変更するならコレ。

/* タイトル部分 */
.share-title {
  font-size: 14px;  /* 文字の大きさ */
  font-weight: bold;  /* 太字に(太字要らないなら削除) */
}
/* タイトルリンク部分 */
.share-title a {
  color: #0066cc;  /* 文字の色 */
  text-decoration: none;  /* アンダーライン無し */
}
.share-title a:visited {color:#0066cc;}  /* 訪問済みのリンクの色 */
.share-title a:hover {color:#7a8285;}  /* カーソルが乗った時のリンクの色 */

もし画像のサイズを変更したい場合はこれ。

/* 画像のサイズ */
.share-img {
  width: 150px;  /* 画像の幅 */
  height: 130px;  /* 画像の高さ */
  overflow: hidden;  /* はみ出した部分は隠す */
}

「選択した文章(抜粋文)」や「コメント・メモ」部分の文字の大きさや色を変えるならこれ。

/* 選択した文章(抜粋文の部分) */
.share-select {
  font-color: #000;  /* 文字の色 */
  font-size: 90%;  /* 文字の大きさ */
}
/* コメントやメモの部分 */
.share-memo {
  font-color: #000;  /* 文字の色 */
  font-size:90%  /* 文字の大きさ */
}

最後にスマートフォンでの表示も確認しておきましょう。特に問題なければこれでカスタマイズは終了です。

無料ブログ等でスマートフォン用のCSSが別にある場合には上記のカスタマイズコードを色々変更してスマートフォン用のCSSに追加したらいいですし、WordPressであればほとんどの場合レスポンシブデザインなので、次のコードで条件分岐(子テーマのCSSでね)。

@media screen and (max-width:599px){
 
/* スマートフォンで適応したいCSSの記述 */
 
}

これはブラウザのサイズが599px以下ならという条件分岐で、この中にスマートフォン用の処理を書きます。

一般的な7インチタブレットのブラウザのサイズが600pxなのでそれよりも小さいという条件分岐です。

参考までにこの条件分岐でちょっとコードを書いてみます。WordPressの場合ね。

@media screen and (max-width:599px){
  .share-select {display:none;}
  .share-memo {display:none;} 
}

「ShareHtml」では「選択した文字(抜粋文)」や「コメント・メモ」が一緒に表示されて便利ですが、これはスマートフォンで見ると縦長になってしまうので、この2つ(抜粋分とメモ)はスマートフォンでは非表示というコードです。

つまり「サイトの画像」と「サイト(記事)のタイトル」「はてなブックマーク」だけ表示されるようにするというコード。個人的にはあまり非表示って好きではないですが一応参考までに。
おすすめの便利なブックマークレットまとめ

ShareHtmlの使い方とカスタマイズ方法”に2件のコメントがあります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    カラス様

    コメントありがとうございます。WordPressのバックアップファイルって結構容量が大きいのでDropboxとかだとすぐにいっぱいになります。プラグインなどを使ってバックアップする場合にはDropboxに保存するバックアップ数を設定する事ができますので、2つとか3つに設定しておけばそれ以上保存する事はありません(最新のバックアップが残っていきます)。ただ、問題はカラス様の言われるようにサイトが多くなった場合ですね。

    私の場合ですが、継続して更新するサイトってほとんどなくて、半年とか1年とかかけてほぼ完成させて後は放置するスタイルなんです。なので、完成したサイトはその状態でバックアップを取って放置します。このバックアップはDropBoxではなくて、普通にパソコンのフォルダに入れてます(フォルダに入れると自動で同期してクラウドで保存される)。

    また、今はエックスサーバーをメインで使っているのですが、エックスサーバーだとバックアップがスゴく簡単で、データベースもファイルもそれぞれボタン1つでバックアップできます。なのでプラグインも必要ない感じです。こちらも先程と同じく、自動で同期するパソコンのバックアップフォルダに入れてます。

    Dropboxでなくてもバックアップファイルはとれます。エックスサーバーでなくても大丈夫です。心配であればWordPressバックアップの有料プランもいいかもしれませんね。ロリポップとかでも月額300円くらいであったような気がします。

    という訳でDropBoxも無料版です。他に使っているクラウドも今の所無料みたいです。パソコン新しく買ったら結構な容量が無料で使えるやつでした、もしかしたら無料なのは1年だけかも?よく分かってなくて使ってます(笑)

  2. カラス

    しげぞう様

    お世話になります。カラスです。

    Dropboxのことでアドバイスをお願いします。
    私は、ワードプレスで2サイトくらいしか主宰していないのですが、なぜかわからないですが、いつもDropboxが満杯になり、バックアップできないことがあります。

    しげぞう様のように数百サイトを運営しているかただと、やはりDropboxは有料版ですか?

    もし、ほかで無料のバックアップ方法があればアドバイスを下さると、とても嬉しく思います。
    以上です。