ShareHtmlのカスタマイズを実施してみました。

WordPressカスタマイズ！大した事じゃないけど、見た目にはよくなりました。方法をシェアします。

リンク付与の大定番「ShareHtml」

サイトへのリンクが簡単に貼れる「ShareHml」ってご存知ですか？ブログをやってる人の間では結構な定番のようですが、ミズタニ、全く知りませんでした。簡単にリンクが作れる！というので愛用していました。

リンクを生成すると以下のようになるんです。

このサイトのトップページへのリンクです。

超便利で簡単にリンクを作れるので重宝していました。

記事とリンクの区別がつきにくい

使わせてもらっていて思ったのが、「記事なのかリンクなのか？わかりづらい」と思うようになってきたので以下のようにカスタマイズを施してみました。

ワクワクラボ | ワクワク出来る楽しい事を発信。毎日を楽しんで生きたもん勝ち！

今回の変更のポイントとしては

• 記事との区別がつくように枠を設定
• 若干右に寄せる事で文章との差別化を実施
• WordPressのテーマを操作する事なく、対応

CSS等はShereHml内に埋め込む事によってどんな環境でも対応できるようにしました。cssはテーマ内に埋め込む事も出来るのですが、これをするとテーマのバージョンアップや別テーマへの移行時にcssも上書きされて設定が消えてしまい、その頃にはどうやって対応するか？忘れてしまうミズタニなので単体で対応できるようにしています。

ShereHtmlとは

ShereHtmlは超簡単にいうとリンク生成用のJavascriptを作ってしまうWebツールです。ツールによってJavaScriptが生成されます。このJavascriptをブックマークに登録して、リンクしたいページを開き、ブックマークからShereHmlをクリックするとJavascriptが発動、今見ているページのリンク用のhtml文を生成してくれます。

言葉では説明できるけど、これを作成するのはめっちゃ大変だと思います。これを公開していただけるとはありがたや。

ただ、万能ではない模様・・・出来ないページもありますのでそこは割り切りましょう（多分、Javascriptが競合したりするとダメ？）

ShereHtmlカスタマイズでやった事

ShareHtmlのサイトへ

任意の設定を作ります

これはどのように作ってもらってもOK

ここまで設定すると、上記で設定した内容でコードが生成されます。

自動生成された内容にカスタマイズ

ここからがポイント。この自動生成された情報でHTMLリンクを構築するのでここに枠情報を追加します。追加は手動です。

追加するのは今回自動生成された内容を囲むdivタグを作る。今回はわかりやすいようにクラス名として<div class=“sharehtml”>として作ります。

このdivタグ内にスタイル情報を書き込んでおきます。今回追加した内容は以下のとおり。

<div class=”sharehtml” style=”border: double #ccc 2px; width:90%;margin-left:20px;padding:10px;”>

style以降の””内部でcss設定をしています。セミコロンまでが１つの設定です。cssの解説はここでは除外しますね。

この内容を先ほど自動生成された内容に記述します。この最後に</div>タグを記述するもの忘れずに。。。

こんな感じ

<div class=”sharehtml” style=”border: double #ccc 2px; width:90%;margin-left:20px;padding:10px;”>自動生成された内容</div>

※注意点：貼り付ける際、改行してはいけません。改行するとjavascriptが実行されません。自動生成されたもの含めて１行です。

カスタマイズ内容を反映させるよ

記述ができたら、[Bookmarkletを生成する]ボタンをポチッと押してみましょう。Javascriptが生成されます。

これで先に紹介した形のリンクが完成しますよ。

カスタマイズすると他と違った印象にもなる

CSSを理解しているとこのようなリンクのイメージを簡単に変える事が可能です。また、ブックマーク登録するので色々なパターンのリンクを作っておく事も可能です。皆さんも試してみてください。

プロとして恥ずかしくないスタイルシートの大原則

MdN 2006-01 売り上げランキング : 557744 Amazon Kindle 楽天ブックス 7net by ヨメレバ

スラスラわかるHTML&CSSのきほん

狩野 祐東 SBクリエイティブ 2013-05-28 売り上げランキング : 3367 Amazon Kindle 楽天ブックス 7net by ヨメレバ

HTML5&CSS3標準デザイン講座

草野 あけみ 翔泳社 2015-11-06 売り上げランキング : 5737 Amazon Kindle 楽天ブックス 7net by ヨメレバ