Seesaa BLOG で Pocket Button を設置する方法

当 BLOG の運営元である Seesaa BLOG に Pocket Button を設置する手順を簡単に説明させていただきます。

Pocket Button を設置する手順を Seesaa に特化した形で説明しています。
他のBLOGへ応用は可能だと思いますが、管理画面(コントロールパネル)内の位置や文言などが違っていたり、無かったりする事も考えられます。
従いまして、全てのBLOGで共通する設定ではありません。
その旨ご承知置き下さい。

Pocketの使い方については、Pocketを導入しました！のページに簡単な使い方と、各機種ごとのPocket入手先を記載しましたのでご覧下さい。

Pocketの公式ページで設置コードを取得

1-1. まず、Pocket 公式ページへアクセスします。
1-2. ボタンスタイルを右側にあるプレビューを見ながら選びます。
1-3. 好みのボタンスタイルが決まりましたら、下部にある Copy Code 欄の内容を全てメモ帳などに保存しておきます。


1-4. これで、Pocket の公式ページは閉じてしまって構いません。

Seesaa BLOG 側の設定(取得コードの挿入)

2-1. BLOGの管理画面に行き、[デザイン] → [コンテンツ] の順にクリックし [記事アイコン] をクリックします。


2-2. 新しい窓が開きますので、開いた窓の右上にある [コンテンツHTML編集] をクリックします。


2-3. 先ほど保存したソースのうち上側だけを貼り付けます。保存ソースの��<a data-pocket...�≠ｩら��</a>�≠ﾜでを、コンテンツHTMLの80行目付近にある <% if:blog.bookmark_service %>〜<% /if %> の直後に貼り付けます。

今回、私が貼り付けたコードの始点と終点には、Pocket側より提供されたコード以外にコードが付け足されています。
　<!-- /Pocket Button START -->　← この部分と
　※ Pocket側より提供されたコード
　<!-- /Pocket Button END -->　← この部分

この上下２つのコードはコメントと言いまして、後にBLOGのコンテンツHTMLを管理する際に自分が分かり易いように付けた物で、付けなくても何ら問題はありません。

2-4. 保存ボタンを押下して窓を閉じます。


2-5. [コンテンツ] 横の [HTML] をクリックし、現在適用にマークされているタイトル名(例の場合は��ヘッダータグ�＝A今まで一度も弄ってない方は��デフォルトＨＴＭＬ��)をクリックし開きます。


2-6. 文末の方(但し、��</body>�＜^グの前)に、上記で貼り付けなかった残りのコード全てを貼り付けます。

上記同様、 <!-- /Pocket Button START --> の部分と <!-- /Pocket Button END --> はコメントです。付けても付けなくても構いません。

2-7. 保存をクリックし、ご自分の BLOG で確認しＯＫなら完了です。


今回は Pocket Button のコードを分解して貼り付けましたが、これは、自分のBLOG表示速度を少しでも早くするためです。
多分、コンテンツHTMLの一箇所にPocket Button のコードを全てを貼っても動く(未確認)とは思います。


「役に立ったよ」って方は、↓ボタンをポチッて下さいまし。

にほんブログ村

スポンサードリンク


もし宜しければ、最後にこの記事をソーシャルメディアで共有して下さい！