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

関連記事

Nesting boxes by Guillaume Speurt, on Flickr 創作系クリエイターさん向けWp構造をお試しかっ?!

創作系クリエイターさん向けWp構造をお試しかっ?!

  Nesting boxes by Guillaume Speurt, on Flickr

記事を読む

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

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

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

記事を読む

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

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

記事を読む

トレス自体は合法ですよ!誤解されがな「トレス」「模写」と「トレパク」の違い

トレス自体は合法ですよ!誤解されがちな「トレス」「模写」と「トレパク」の違いについて

Tapping a Pencil by Rennett Stowe, on Flickr

記事を読む

SAI2始動! 3Dパース定規からバケツの隙間調節まで、クリスタ、FireAlpacaとざっくり比較してみたよ♪ 「FireAlpaca」の3Dパースは神!この発想はなかった!!!!2

SAI2始動! 3Dパース定規からバケツの隙間調節まで、クリスタ、FireAlpacaとざっくり比較してみたよ♪

「SAI2」ツールの漏れ出し防止幅は上限100px!スライダーで直感的に使えます♪ &

記事を読む

flickr-3400039523-original_mini くつキッチュ/スクラップス!『キャプテンキッドが財宝を隠したってマジですか?吐噶喇(トカラ)列島宝島の話 』アイキャッチ画像

キャプテンキッドが財宝を隠した?鹿児島県吐噶喇(トカラ)列島『宝島』の話

  鹿児島県吐噶喇列島というところにキャプテンキッドが財宝を隠したという言い伝えの残るその名も

記事を読む

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

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

Town Block by Matija Grguric, on Flickr Some rig

記事を読む

scream and shout by Mindaugas Danys, on Flickr 『SyntaxHighlighter Evolved』がフリーズしまくりで絶望したーっ!!時の対処法。

「記事内コード表示用Wpプラグイン『SyntaxHighlighter Evolved』がフリーズしまくりで絶望したーっ!!」場合の対処法。

記事内コード表示用Wpプラグイン『SyntaxHighlighter Evolved』を適用

記事を読む

【告知】当サイト被験者サトウトシオの電子書籍が5月1日に発売されます! 『このいと式(仮)』7月8月表紙 アイ・キャッチ画像

【告知】当サイト被験者サトウトシオの「少し不思議な電子書籍」は、5月発売決定!

  出版されるのは、月ごとのイメージをテーマにした小説やイラストが収録されたカレ

記事を読む

Booth進出の準備編として、Pixivの「テンプレのテンプレ」を作ってみました♪  Pixivイメレス用素材テンプレートのテンプレートと引き換えにいてもらった女の子 illust by サトウトシオ@310104o

Pixivのテンプレートを作ってみたキッカケで、Pixiv共同管理アカウントの意外な事実が判明した件

Pixivテンプレートサンプル 登場人物:くつきちよこ ※管理人   佐藤 ※ゲスト &

記事を読む

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

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

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