iPhoneのSafariでShareHtmlメーカーを使う方法【するぷろにも連携可能!】

      2016/03/21

ブログを書いている人であれば多用している人が多い、このWebサービス。

PCでは使っているけど、iPhoneでは使い方がイマイチわからないという人のためにこのエントリーを書きます。

(実際自分もiPhoneでも使えるという事実を最近知りました。。)

実際このエントリーもiPhoneでスクショを撮り、iPadのするぷろで書きました。順を追って説明しますね。

 

Sponsored Links

 

 

ShareHtmlメーカーとは?

 

簡単に言うと、サムネイル、コメント付きのリンクを自動で作成してくれるWebサービスです

ブログの見た目が格段に良くなりますし、何より読者にとっても見やすくなります。

下記のようなリンクを作成することができます。(このブログのトップページのリンクです。)

itkhoshi.com | All you need is Love
サンプル
 

では、順を追って説明しますね。

 

 

 

ShareHtmlメーカーの使い方(iPhone Safariの場合)

 

まずはShareHtmlメーカーのサイトにアクセス

 

ShareHtmlメーカー

 

このページで自分好みのリンクにするためにカスタマイズします。

 基本的にこの部分はそのままで大丈夫です。

DropShadow ~ IMG 1827 1

 

 

下記の部分が大事な項目になります。

DropShadow ~ IMG 1827 2

 

 

 

【出力方法を選択してください】の部分

 

出力方法を下記から選ぶことができます。

  • プレビュー表示 
  • ポップアップのみ
  • Textforceに連携
  • DraftPadに連携
  • するぷろに連携

 

後の3つは各ブログエディタのことです。

このエントリーでは、【プレビュー表示】、【ポップアップのみ】、【するぷろに連携】について書きます。

(実際に僕が使っているのがするぷろなので、、他の2つのブログエディタについては今回は割愛します。)

 

これらの選択により、リンクを取得し、はり付ける方法が変わってきます。

実際の表示については後からスクショを含めて書きます。

 

 

 

【書式テンプレートを選択してください】の部分

 

ここではサムネイルの有り無し、サムネイルの大きさを選択します。

IMG 1831

 

選択できる項目一覧

  • 左サムネイル大 - alignleft
  • 左サムネイル小 - alignleft
  • 左サムネイル小 - table
  • 左サムネイル大 - table
  • サムネイル無し
  • 予約語一覧

 

僕の場合、【左サムネイル大 - alignleft】で統一させています。

【予約語一覧】についてはよくわかりません。。(すんません。知識があまりなくて。。)

 

 

 

iPhoneのSafariからブックマーク登録する

 

上記の選択をしたら、【bookmarkletを生成する】というボタンを選択します。

DropShadow ~ IMG 1830

 

 

生成されたスクリプトをコピーします。

iPhone登録用の部分の【ShareHtml】リンクを選択します。

IMG 1833

 

こんな感じで、全部コピー

IMG 1845

 

 

iPhone登録用の【ShareHtml】リンクを選択すると、下記の画面になります。

普通にブログが表示されますが、このページをブックマークします。

IMG 1834

 

このページをブックマークします。

IMG 1835

 

このままのURLではブックマークレットは動いてくれません。(当然ですが。)

URLの【?】以前を削除する必要があります。

URLはこの画面では編集できません。

一旦このままブックマークとして登録し、後のブックマーク編集画面でURLを編集します。

(ちなみにこれはURLではなく、スクリプトとして登録をし直します。)

IMG 1836

 

ブックマーク編集画面

【編集】ボタンを選択。

IMG 1838

 

先ほどブックマークした項目を選択。

IMG 1840

 

URLを編集します。

ここで、タップで先頭まで戻って【?】以前を削除してもいいのですが、ものすごく時間がかかります。

なので、【全選択】して先ほどコピーしたスクリプトをはり付けます。

IMG 1842

 

これがはり付けた状態。【?】以前がちゃんと消えています。

ブックマーク名も分かりやすいものに変えておきましょう。

右下の【DONE】を選択して登録終わりです。

IMG 1848

 

これで準備はOKです。

 

 

 

実際にリンクを作成してみる

 

では、実際にリンクを作成してみましょう。

ここでは当ブログのトップページでサンプルを作成します。

出力方法によって、画面が異なるのでそれぞれスクショを載せますね。ここでは下記の3パターンについて書きます。

  • プレビュー表示
  • ポップアップのみ
  • するぷろに連携

 

リンクを作成したいページを表示させます。

IMG 1849

 

この画面が表示された状態で、先ほど作成したブックマークを選択します。

IMG 1850

 

メモを入力する画面が出ます。

もちろん空欄でも作成可能です。

ここでは【サンプル】と入力してみました。

IMG 1852

 

ここから表示のされかたが変わりますので、自分が使いやすい【出力方法】を選択してスクリプトを生成してください。

 

■【プレビュー表示】の場合

画面上部に生成されたコードと、プレビュー表示がでます。このコードをコピーして使います。

IMG 1851

 

■【ポップアップのみ】の場合

ポップアップでコードのみ表示されます。

このコードをコピーして使います。

IMG 1853

 

■【するぷろに連携】の場合

自動でするぷろが起動し、コードをはり付ける場所の選択画面になります。

僕はiOSでブログを書くときはするぷろで書いていますので、基本的にこの設定で使っています。

(Safariで使うことはありませんが。。実際のリンク作成はするぷろーらで行っています。)

IMG 1859

 

 

実際にするぷろで書いてみた画面

 

するぷろでプレビュー表示させてみました。

ちゃんとサムネイル付きのリンクができています。

DropShadow ~ IMG 1856

 

ここではiPhoneのSafari上での動作のスクショを載せていますが、するぷろーらを使うとさらに便利になります。

今度詳しくするぷろ、するぷろーらについて詳しく書きますね。

 

 

まとめ

 

このShareHtmlメーカーは本当に重宝しています。ブログを書く上で欠かせないWebサービスです。

本当に毎回お世話になってます。

html言語初心者の僕としては、手書きでこのコードを作成するなんて荒技は到底できません。。

(勉強すればできるかもですが、このShareHtmlメーカーがあるので覚える気がないというのが正直なところ。。)

 

以上でShareHtmlメーカーの使い方(iPhone Safari版)は終わりです。

今するぷろ、するぷろーらの使い方を僕のようなiPhoneでブログ書く初心者向けにまとめているところなので、近々エントリーをアップしますね。

 

 

 

 

 

Sponsored Links

 - Webサービス(WP)
 -