手作りアクセサリーを売りたい! ブログ運営(WordPress)

紹介・参考ページへの外部リンクをスマートに!ブックマークレット「ShareHtmlメーカー」の使い方

更新日:

ブログの記事を書いていると、調べたいことがどんどんと出てきますよね。

 

そんな時ボクは、自分が知りたい内容を書いている記事を、ウェブから見つけて、それを参考にして自分の記事を書いたりします。

 

そして、参考になった記事などは、自分のブログにも感謝を意を込めて紹介したいなって思うんです。

 

でも、ただリンクテキストをペタッと貼っただけじゃ、何か味気ないんですよね。

 

そんな時に見つけたのが、

サムネイル画像付きの紹介リンクが簡単に作れる

ブックマークレット「ShareHtmlメーカー」です。

今現在、ShareHtmlメーカーのページは使用できなくなっています。
そこでShareHtmlメーカーに代わるものがないか調べていたら、こんなものを見つけました。

開発者さんのブログがこちらです。

スポンサーリンク

ShareHtmlメーカーカスタマイズ

今回は、ShareHtmlメーカーで作ったサムネイル画像付きの紹介リンクを、CSSカスタマイズしてみました。

それが、こちらです。

 

ShareHtmlメーカー発祥のブログです!

ShareHtmlメーカーを作成したhiro45jpさんのブログです。
普通のサラリーマンのiPhone日記 | iPhoneに魅せられた普通のサラリーマンの日々の生活を綴ってます。

 

ボーダーラインのボックス枠の見出しには、好きな文字数でタイトルが入れられ、

PC・スマホ画面に対応したレスポンシブタイプのものです。

 

まずは、ボックス以外のリンク部分であるブックマークレットを、

ShareHtmlメーカーで作っていきます!

 

ShareHtmlメーカーの使い方

ShareHtmlメーカーでは、

ブログ画像、題名、コメント、はてなブックマーク数付きのリンクが作れるブックマークレットです。

以下のリンク先で、ブックマークレットが作れます。

ShareHtmlメーカーのページリンクがこちら

ShareHtml

 

まずは、ShareHtmlメーカーをあなたのPCに導入しよう!

sharehtml1

リンクを開くと、このような画面が表示されます。

やるべき箇所は今回は、2つだけ!

①書式テンプレート(左サムネイル大 – alignleft)を選択して、

②「Bookmarkletを生成する」ボタンを押すだけです。

 

ShareHtmlメーカーに慣れてきたら、

2箇所以外もいろいろとあなた好みにカスタマイズしてみましょう。

 

sharehtml2

「Bookmarkletを生成する」ボタンを押すと、

その下にブックマークレットが生成されます。

登録用リンク「ShareHtml」を、ブックマークバーにドラッグ&ドロップしよう。

 

ShareHtmlでブックマークレットを作ってみよう!

sharehtml3

まず、紹介したいページを開いて、ブックマークバーにある「ShareHtml」ボタンを押します。

すると、コメント欄のポップアップが表示されるので、

コメントを入れる場合は入れて、最後にOKボタンを押します。

 

sharehtml4

すると、このページのブックマークレットのHTMLが表示されるので、

コピーして、あなたが書いているブログに貼り付けてください。

こちらが実際に貼り付けたブックマークレットです。

ビフォー(左サムネイル大 – alignleft)

手作りアクセサリーの知恵袋
お好きなコメントを入れられます。

さて、上記のブックマークレットじゃ、あまりにも味気なさ過ぎなので、

ちょっぴりカスタマイズしてみました。

それが、こちらです。

アフター(ボーダーライン&レスポンシブ対応)

手作りアクセサリーの知恵袋
お好きなコメントを入れられます。

 

 

ShareHtmlメーカーをカスタマイズ

CSSコードはこちら

/* --- ShareHtml用リンクボックス --- */
/* --- ボックス --- */
div.midashi {
width: 99%; /* ボックスの幅 */
margin: 25px 0 0 0; /* 見出しのマージン(上右下左) */
background-color: #ffffff; /* ボックスの背景色 */
border: 3px double #ccc;
font-size: 90%; /* ボックスの文字サイズ */
}

/* --- 見出し --- */
div.midashi h5 {
position: relative; /* IE6用 */
display: inline-block; /* テキストの長さに合わせる */
margin: -1.3em 0 0 5px; /* 見出しのマージン(上右下左) */
padding: 0 3px 5px 5px; /* 見出しのパディング(上右下左) */
background-color: #ffffff; /* 見出しの背景色 */
text-align: left;
vertical-align:middle;
word-wrap: break-word;
}

/* --- ボックス内の段落 --- */
div.midashi p {
margin: 5px 20px; /* 段落のマージン(上下、左右) */
}

WordPressメニューから「外観」⇒「テーマの編集」を選択して、

スタイルシート(style.css)にこちらのCSSコードを貼り付けよう。

ソースコードはこちら

<div class="midashi">
<h5>見出しを入れてください。</h5>
ブックマークレットのHTMLを貼り付けてください。
</div>

 

紹介したいブログ記事にこのソースコードを挿入して、

見出しや作成したブックマークレットのHTMLを入れたら、完了です!

あなたもぜひ、試してみてください。

 

この記事が気に入ったら
いいね ! しよう

スポンサーリンク

手作りアクセサリー作ってみたい

1

アクセサリーは一体どういう風に作られているのでしょか? あなたがもしこれから手作りアクセサリーの作り方を知って、 自分のオリジナルアクセサリーを作ってみたい、 そしてゆくゆくは販売もしていきたいと考え ...

2

本格的な手作りアクセサリーを作るには、彫金、銀粘土、ロストワックスの3つの方法で作ることが出来る。 もし、あなたが彼女や彼氏に手作りアクセサリーをプレゼントしたいと考えているならば、一体、3つのうちど ...

3

スタッドピアスには必ずストレートのピンが付いています。 ピアスピンと言ったり、ピアス棒、ピアスポストとも呼ばれるこのピンはどうやってピアスデザインとくっついているのか知っていますか? 通常、デザイン部 ...

4

手作りアクセサリーを作るといっても、プロはその作ったものを販売するという視点から作り方を考えていきます。 趣味で作る場合との大きな違いが、この考え方だと言っても過言ではありません。 今回はそんな商売と ...

5

アクセサリーを作るには、地金から作り出す彫金技法やワックスから作り出すロストワックス法があります。 あなたがもし、彫金やロストワックスをはじめたいと考えているのであれば、アクセサリーを作るために必要な ...

-手作りアクセサリーを売りたい!, ブログ運営(WordPress)

Copyright© ピアスマップ , 2017 All Rights Reserved.