WordPressでTumblrボタンを実装してみた(記事下、サイドバーへの設置、その他シェア方法など)

くつキッチュ!アイコン wordpressカテゴリへ くつキッチュ!SCRAPス アイコン2 creator-help創作支援)カテゴリへ

Tumblrボタン(フォロー、共有)設置方法 記事下設置やプロフィールへの設置、その他シェア方法など イチパン!サンプル
Share on Tumblr

こちら、昨日作ったくつキッチュの姉妹サイト『イチパン!日々一パントリー』のTumblrページです。

作って一年ほど放置していたのですが、素敵なテーマに出会ったのをキッカケに昨日復活させてみました。

というわけで前回は、同人イベント告知にピッタリ!素敵すぎるTumblrテーマ『Tokusetsu2』の使い方でしたが、今回は作成したTumblrブログをシェアしてもらうためのツール「Tumblrボタン」の設置方法の記事となります。

Tumblrボタン設置方法:基本

 

A. tumblrボタンには、記事をシェアしてもらうための「共有ボタン」
B.Tumblrブログをフォローしてもらうための「フォローボタン」

の二種類があります。

Tumblrボタン(フォロー、共有)設置方法 記事下やプロフィールへの設置、その他シェア方法など Tumblrボタンの種類 共有ボタン フォローボタン

それではそれぞれの設定、設置方法を説明します。

 

A.共有ボタン編

1.まずはTumblrボタン配布ページへ行ってみましょう。

Tumblrボタン(フォロー、共有)設置方法 記事下やプロフィールへの設置、その他シェア方法など Tumblrボタン配布ページ

2.ページ上部のコードをコピーします。

Tumblrボタン(フォロー、共有)設置方法 記事下やプロフィールへの設置、その他シェア方法など1 ページ上部のコードをコピーします。

 

3.色を選択して下さい。※色を選択肢ないと、コードが表示されません。

4.表示されたコードをコピーします。

Tumblrボタン(フォロー、共有)設置方法 記事下やプロフィールへの設置、その他シェア方法など 色を選択した後⇒コードをコピーします。

 

5.Wordpressの場合は、テキスト編集画面に切り替えます。※その他ブログの場合は、HTML編集画面。

Tumblrボタン(フォロー、共有)設置方法 記事下やプロフィールへの設置、その他シェア方法など A-5.Wordpressの場合、テキスト編集画面に切り替えます。

 

6.任意の場所に先ほどのコードを貼り付けます。

Tumblrボタン(フォロー、共有)設置方法 記事下やプロフィールへの設置、その他シェア方法など A-5.コードを任意の場所に貼り付けます。

 

完成です。
子供の落書きを簡単にオシャレアートにする方法♪ 画像にテクスチャなどを入れた場合Share on Tumblr

↑Tumblrボタン

 

シェア方法

※Tumblrにログインしておく必要があります。

1.Tumblrボタンをクリックすると、Tumblrのシェアウィンドウが開きます。

Tumblrボタン(フォロー、共有)設置方法 記事下やプロフィールへの設置、その他シェア方法など ウィンドウが開きます。

 

2.シェアの種類を選択します。

サンプルでは画像を選択しました。※画像を選択した場合、記事内のどの画像をシェア(リブログ)するかも選択します。

Tumblrボタン(フォロー、共有)設置方法 記事下やプロフィールへの設置、その他シェア方法など 公開後は画像が選択できます。
3.リブログしたいブログを選択し、[保存・公開]をクリック。

以上です。

注意点

記事下書き中のプレビューでもシェアウィンドウは開きますが、画像は選択できません。また、[保存・公開]も可能ですが、他の人からそのリンクは見られませんのでご注意。

Tumblrボタン(フォロー、共有)設置方法 記事下やプロフィールへの設置、その他シェア方法など ウィンドウが開きます。

こうなります↓Tumblrボタン(フォロー、共有)設置方法 記事下設置やプロフィールへの設置、その他シェア方法など 下書き中のプレビューからのりブログは404エラーとなります。

これは、自分の記事を自分のTumblrブログにリブログする際の注意点ですので、あまりない事とは思いますが。

 

2.フォローボタン編

Tumblrボタン配布ページでの設定は同じですが、フォローボタン設定の場合Tumblrにログインしておく必要があります。

1.フォローしてもらいたいブログを選択⇒カラーを選択⇒コードをコピー

Tumblrボタン(フォロー、共有)設置方法 記事下やプロフィールへの設置、その他シェア方法など フォローしてもらいたいブログを選択⇒カラーを選択⇒コードをコピー

記事下への設置方法

※くつきの使用しているテーマはStinger3です。各テーマごとに設定するファイルや追記場所など方法は微妙に違ってくるかと思いますが、「任意の場所にコードを貼り付ける」という基本的なやり方は同じです。

外観⇒テーマ編集⇒SNS(sns.php)⇒(Stingerの場合)はてなボタンコード以下にTumblrフォローボタンのコードを貼り付けます。

Tumblrボタン(フォロー、共有)設置方法 記事下設置やプロフィールへの設置、その他シェア方法など 記事下サンプル

他SNSのような吹き出しのあるデザインがないのが残念……(´∀`;)

Stingerの場合は、はてなブックマークボタンまでがデフォルトだと思いますので、はてな以下に追記します。

私の場合はPocketボタンも追記済みですので、その下に入れてみました。

<div id="snsbox03">
<div class="sns03">
<ul class="snsb clearfix">
<li>
ツイッター
</li>
<li>
<li>
フェイスブック
</li>
<li>
Google+
<li>
はてなブックマーク
</li>
<li>
Pocket
</li>
<li>
Tumblrフォローボタンのコード
</li>
</ul>
</div>
</div>

 ※場所がわかりやすいように示したサンプルですので、コピーして使用しないで下さい!!SNSボタンが表示されなくなります!

 

サイドバー(プロフィールなど)への設置方法

外観⇒テーマ編集⇒サイドバー(sidebar.php)⇒ twibox以下にTumblrフォローボタンのコードを貼り付ける。

Tumblrボタン(フォロー、共有)設置方法 記事下設置やプロフィールへの設置、その他シェア方法など プロフィール(サイドバー)設置サンプル

 ※場所がわかりやすいように示したサンプルですので、コピーして使用しないで下さい!!SNSボタンが表示されなくなります!


<div class="twibox">
<h4 class="menu_underh2">管理人プロフィール</h4>
<div class="textwidget">

<p>
プロフ画像
</p>

<ul>

<li>
プロフィール文
</li>

<li>
ツイッターフォローボタン
</li>

<li>
Feedlyフォローボタン
</li>

<li>
Tumblrフォローボタンのコード
</li>

</ul></div></div>

こんな感じです。

 

Tumblrブログサンプル

こちらは前回記事でもご紹介致しました、佐野章核さん作のTumblrテーマ SANOGRAPHIX.NET 「Illustfolio 2」を使わせて頂きました。

Tumblrボタン(フォロー、共有)設置方法 記事下設置やプロフィールへの設置、その他シェア方法などくつキッチュ/スクラップス!サンプル

どちらかと言えば、姉妹サイト『イチパン!日々一素材パントリー』の方がテーマの使用目的にあっているかなーと。

こちらは、 海外の方にも使っていただけるよう、英語でリブログ頑張ってみたいと思います。(英語でリブログの前に英語の規約の方が先ですけど……(´∀`;))

Tumblrボタン(フォロー、共有)設置方法 記事下設置やプロフィールへの設置、その他シェア方法など イチパン!サンプル

 

まとめ

Tumblrを使い慣れていない方はTumblrボタンと言われてもピンと来ないかもしれませんが、Tumblrが好きになると、自然にTumblrから情報を得る機会も多くなってきます。

SNSボタンを増設しすぎてもうるさくなってしまいますが、そのブログの管理人がよく使用するサービスというのはそのブログの性質にもマッチし易いのではないかと。

Tumblrがお好きな方はぜひブログにボタンを設置してみてくださいませ。
Share on Tumblr

でっは~(*´∀`*)ノシ ♪

ブログランキング・にほんブログ村へ
にほんブログ村

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr

関連記事

【一次創作】防御と開放のバランスを取るには?|著作者とユーザー両方を守る御札(おふだ)その2

  イラスト:佐藤利音 デザイン:くつきちよこ 無名一次創作者が大手にパクられたら

記事を読む

創作家さんにオススメ!電子書籍が埋め込める電書ちゃんのtumblrテーマ  自己出版者さん向けtumblrテーマA Tumblr theme for self-publishersサンプルサイト

創作家さんに朗報!電子書籍の試し読みも出来る電書ちゃんのtumblr無料テーマがなまらスゴイ!

  激烈なまら素敵なtumblrテーマ『A Tumblr theme for self-pub

記事を読む

写真を加工して漫画の背景にする小技が流行っているので、試してみました♪ 空も含めてカットアウトしてみたサンプル

写真を加工して漫画の背景にする小技が流行っているので、試してみました♪

写真撮影・加工:くつきちよこ 登場人物:くつきちよこ ※管理人   佐藤 ※ゲスト

記事を読む

世界一トリップ出来るエラーページ tumblr-404-kizi-1

世界一トリップできる少し不思議なtumblr 404展

tumblrのエラーページにはちょっとした秘密があります… Title:design_ta

記事を読む

ワードプレスの不具合騒動、利用中のレンサバ統合されるってよ、など。 恐怖のエラー画面

「ワードプレスの不具合騒動(未解決)」と、「利用中のレンサバ統合されるってよ」など。

  サトウトシオのサイトがバグりました; ホラーなエラー!に驚いたる赤ちゃんのアイコ

記事を読む

Photo by Flickr CJ'sフォトストリーム

Stingerの『Page Top↑』を可愛くカスタマイズしてみた♪

    Stingerで『Page Top↑』を可愛くカスタマイズしてみた♪ WordPressブ

記事を読む

「忍者サンドボックス」の「忍者文庫」で、縦書き電子書籍を作ってみたよ♪ 忍者ツールズが機能満載過ぎてよくわからないので図にしてみた図

「忍者サンドボックス」の「忍者文庫」で、縦書き電子書籍を作ってみたよ♪

  忍者ツールズイメージ図 くつきちよこ   登場人物:くつきちよこ ※管理

記事を読む

WpBlog(ワードプレス)のトラブルで万策尽きて「しかたない削除するか……」と思っている方、待って!奥の手! 【アプリケーションの初期化】を試す価値あり!※自己責任でお願いします。

WpBlog(ワードプレス)のトラブルで万策尽きて「しかたない削除するか……」と思っている方、待って!

くつきちよこ年末のご挨拶バージョン   登場人物:くつきちよこ ※管理人 

記事を読む

「要求されたアクションを実行するには、WordPress が Web サーバーにアクセスする必要があります。 次に進むには FTP の接続情報を入力してください。」とWPに怒られた件 その上「サイトの状況が赤点です」とGoogle様にも怒られました(/_;) アイキャッチ画像 IconDesign by くつきちよこ

「要求されたアクションを実行するには、WordPress が Web サーバーにアクセスする必要があります。 次に進むには FTP の接続情報を入力してください。」とWPに怒られた件 ※解決済み

    Upload出来ない(/_;) ファイルの

記事を読む

Town Block by Matija Grguric, on Flickr Some rights reserved  アイキャッチ画像:創作において、制約なく表現できる「創作ステージ@まちペディア」を建設中

創作において制約なく表現できる「創作ステージ@まちペディア」を建設中

Town Block by Matija Grguric, on Flickr Some rig

記事を読む

  • 創作クラスタ応援し隊のくつきちよこ(崛起智世子)です。 このブログは、「ネット著 作権」、「セルフプロモーション」、「ワードプレス運用」、「電子書籍サービス」、 「自己出版(セルフパブリッシング)」、「創作」等に関する情報をお届けしておりま す。 ※Wiki『創作ステージ@まちペディア』(ちょっと押してますが)作成中です♪
  • follow us in feedly
  • くつキッチュ/スクラップス! on Tumblr

  • 「表現の自由を守る党」自作応援バナー くつきちよこ

  • マウスコンピューター/G-Tune