[Đ] たぶん日本一スクショの多い、iPhoneでのShareHTMLの基本的な使い方解説

公開日: : iPhone, ブログネタ


スポンサーリンク

ども、残業ってある意味一種のパーティーだと思ってます。社畜まつだい(@matsudai23)です。


スポンサーリンク

ShareHTMLとは?

簡単に言うと、ブログやWebサイトを記事内で紹介するのに凄く便利なブックマークレットです!
とりあえず「ブックマークレット?何それ美味しいの?」って人は全力で置いて行きますw

こちらがShareHTMLの作者さんのサイトです!↓
ShareHtmlとFocusHtmlもリニューアルしました♪ | 普通のサラリーマンのiPhone日記

↑こんな感じのカッコイイ紹介リンクが簡単に作れちゃう便利なブックマークレットです。

ShareHTMLメーカーで下準備。

ん?メーカー?
ちょっとややこしいのですが、ShareHTMLにはブックマークレットを自分好みに簡単にカスタマイズして作ることができる「ShareHTMLメーカー」という全くの別物が存在します。
(オレもここがややこしくて始め混乱したwww)

つまり、ShareHTMLメーカーで自分好みにカスタマイズしたShareHTMLというブックマークレットを使って記事内に紹介リンクを簡単に貼れるよ!
ってのが今回の内容です。

今回はオレのようにiPhoneでブログを書いている人向けに、主にiPhoneでの操作方法を中心に、iPhoneのスクリーンショットを見ながら解説しますが、PCでも見え方が違うだけで使い方はほぼ同じなので、是非最後までお付き合いください。

ShareHTMLメーカーでブックマークレットを生成する

ShareHTMLブックマークレットはこちらのサイトから生成しますので↓のリンクをタップしてShareHTMLメーカーにアクセスしましょう。

ShareHtmlメーカー

アクセスすると↓のスクリーンショットのように、設定項目がいろいろ有りますが…

↑のように「書式テンプレート」以外はデフォルトの設定のままいじらなくて大丈夫です。
※オレは普段ブログを「するぷろ」で書いてますので「出力方法」で「するぷろに連携」を設定していますが、今回はデフォルトの「プレビュー表示」のまま解説していきます。


書式テンプレートをどれにするか迷ったらとりあえずオレと同じ「左サムネイル大-alignleft」を選んどけばOKです!
書式テンプレートを選んだら「Bookmarkを生成する」をタップします。
すると、その下にブックマークレットが2パターン生成されます。

生成されるブックマークレットはPC用とiPhone用の2パターン


↑のようにブックマークレットが生成されたらPCで使用する人はPC用、iPhoneで使う場合はiPhone用をSafariに登録しましょう。

iPhoneのSafariにブックマークレットを登録する

ついでなんで、iPhoneのSafariにブックマークレットを登録する方法も解説していきます。
「そのくらい知っとるわい!」という人は読み飛ばしてもらって構いません。

iPhoneのブックマークレットの登録の仕方は少し複雑ですが、今回はできるだけわかりやすく説明するために大量のスクリーンショットを撮ったので、順を追ってゆっくりやれば大丈夫だと思います。


まず、さっき生成したiPhone用のブックマークレットをタップすると、↑のようなShareHTMLの作者様のサイトに飛ぶと思いますので、この画面で下のメニューバー真ん中のボタンをタップします。
すると次のようなメニューが出てきます。


ここでまずこのページをブックマークします。「ブックマーク」をタップしてください。


すると、ブックマークの名前の編集や登録場所を指定する画面になりますので、ブックマークの名前を、わかりやすい名前に、ここでは「ShareHTML」と変更して、好きな登録場所を指定します。

オレは良く使うブックマークレットは「お気に入り」に登録しています。

名前を付けて、登録場所を指定し終わったら「保存」をタップします。

ここまで大丈夫ですか?着いてきてますか?(;・∀・)

続いて、今登録したブックマークを編集してブックマークレットを完成させます。


ブックマーク画面を開き、右下の「編集」をタップして、さっき登録したブックマークをタップして編集画面にします。


ここでやりたいのは、↑の先頭部分の「http://iphone-diary.com/?」を削除する、という作業なのですが…

この部分をタップすると、カーソルがこのテキストボックスの末尾に移動してしまい、長〜い文章の先頭付近までカーソルを移動して「http://iphone-diary.com/?」を削除するのは大変なんです…(´・ω・`)

なのでちょっと小ワザを使います。


↑のようにこの文章を全選択してコピーします。


そしてそれを↑のように「メモ帳」などのテキストエディタにペーストすると編集しやすいです。
それでは先頭の「http://iphone-diary.com/?」を削除して、↓のようにまた全選択してコピーします。

また「ShareHTML」ブックマークの編集画面に戻って…


↑のようにテキストボックス内を全選択するか、全削除して、さっきコピーした文章をペーストして「完了」をタップしてください。


続いて、この画面も「完了」をタップ

祝!ShareHTMLブックマークレット完成!!


お疲れ様でした♪
これでShareHTMLブックマークレットが完成しました!
さっそく使ってみましょう!

ShareHTMLブックマークレットの使い方

まず、自分のサイトに紹介リンクを貼りたいサイトを開き、下のメニューバーにあるブックマークボタンから、ブックマーク画面に移動します。

そして先ほど登録した「ShareHTML」をタップして実行します。

すると、メモやコメントを入力するポップアップが出てくるので任意で入力して「OK」をタップします。
何も入力しなくてもいいです。

紹介リンクのプレビューと、ソースが表示されるので、あとはソースを全選択、コピーして自分のサイトの、紹介リンクを表示させたい場所にペーストしましょう。

できた紹介リンクがこちら

[Đ] WordPressテーマ「Stinger3」のスクロール追尾型SNSボタンを縦並びにする方法。
最後まで読んだらシェアして下さい!

できましたか(・∀・)?

慌てず騒がす、最初から順を追ってやっていけば必ずできると思います!
作るまでが少し面倒ですが、このShareHTMLブックマークレットを一度作ってしまえば、気に入ったサイトを紹介し放題ですw

是非、この記事もあなたのサイトで紹介して欲しいなぁ〜なんて淡い期待を抱きつつ一生懸命書いてます。

まとめ

ちょっとこの記事はスクリーンショットを多用しすぎたので見た目長くなってしまいましたが、お手元のiPhoneの画面と見比べながら一つ一つ進めていって欲しいと思います!

余談ですが記事の途中で、オレはShareHTMLの「出力方法」に「するぷろに連携」を設定していると言いましたが、この設定でブックマークレットを実行すると、するぷろが自動で起動して、紹介リンクがより手間無く貼れるので、「するぷろ」を使ってる人は是非一度設定してみてください!

それではオレの書いたこの記事が、きっとどこかの誰かの役に立てる事を願って、まつだい(@matsudai23)でした。


スポンサーリンク

【関連タグ】iPhone, ブログネタ

ブログを書くのに使ってるアプリたち

暮らしをおトクにかえていく|ポイントインカム
  • まつだい
    (@matsudai23)

    へっぽこモブロガー

    熊本県在住。1984年(昭和59年)生まれ。
    妻子持ち(男1人、女2人、妻1人)の親バカへっぽこモブロガー。
    Apple、Mac、iPhone厨。
    MacやiPhone、嫁と子供が好きな、嫁バカ&親バカのおっさんが暇な時書いてると思って貰えばだいたい合ってます。
    僕についてもっと詳しく知りたいという方は居ないとは思いますが一応自己紹介ページをご用意してますので御覧ください。