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

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

NewImage

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

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

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

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

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

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

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

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

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

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

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

ShereHtmlとは

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

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

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

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

ShareHtmlのサイト

任意の設定を作ります

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

ShareHtmlメーカー

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

ShareHtmlメーカー

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

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

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

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

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

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

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

こんな感じ

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

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

ShareHtmlメーカー

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

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

ShareHtmlメーカー

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

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

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

プロとして恥ずかしくないスタイルシートの大原則
MdN 2006-01 売り上げランキング : 557744

by ヨメレバ
スラスラわかるHTML&CSSのきほん
狩野 祐東 SBクリエイティブ 2013-05-28 売り上げランキング : 3367

by ヨメレバ
HTML5&CSS3標準デザイン講座
草野 あけみ 翔泳社 2015-11-06 売り上げランキング : 5737

by ヨメレバ
広告

ABOUTこの記事をかいた人

三重県ブロガーでガジェッター 毎日をワクワクの出来事でいっぱいに! 気になったガジェットの紹介から始まり ダイコクが購入したガジェットのレビューをメインに更新中。 日々の生活の中での「ワクワク」を文章にしてお届け。 二児のパパでもあり、イクメン活動中。 本も年間100冊くらい読んでます。 自分の中の気づきも定期的にエントリとして綴っています。