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

関連記事

くつキッチュ!SCRAPス WPにデフォルトでインストされてるプラグイン『HelloDolly』って一体何者?

WordPress謎のプラグインHelloDollyを有効化してみた結果www

  Photo by Stéfan  いかにもなタイトルですが、釣りじゃありません。 結論から申し

記事を読む

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

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

記事を読む

Mariachis Performing Inflight on @virginamerica by David Lytle, on Flickr ボカロ、アニソン、中の人以外で、創作中にテンション上がる系の音楽おおよそ5~7選くらい!

めちゃアガる!創作向けBGM 10選! ※今回はボカロ、アニソン、中の人『以外』です。

  創作中にテンション上がる系の音楽SSオススメ10選です。 埋め込めるだけ埋込んだので

記事を読む

縦書き小説PDFメーカー使ってみた♪ 縦書き小説PDFメーカー 挿絵⇒本文サンプル2 ※芥川龍之介『あばばばばば』青空文庫より2 http://www.aozora.gr.jp/cards/000879/files/14_14602.html

縦書き小説PDFメーカー使ってみた♪

  縦書きPDFメーカー使ってみた♪   登場人物:くつきちよこ ※管理人   佐藤

記事を読む

ワードプレスの記事内にSoundCloudの音楽を埋め込むには?【WPプラグイン】

  追記:2015-02-23 現在はURLコピペのみで簡単に埋め込み出来ます。

記事を読む

サイトの名刺ファビコンテスト前哨戦-ファビコン設置方法-* アイキャッチ画像 Favicons by Loozrboy, on Flickr

「サイトの名刺?」ファビコン設置方法 -ファビコンテスト前哨戦-

本日はサイトの名刺『ファビコン』に関しての記事です。 Favicons by Loozrb

記事を読む

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

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

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

記事を読む

Dog fetch toy train, dog crush toy train by Andy, on Flickr Some rights reserved

Fetch as Googleを忘れがちな知人のため、Search Console(旧ウェブマスターツール)で協力者の追加をしたよ!

Dog fetch toy train, dog crush toy train by

記事を読む

【宣伝回】 電子書籍の表紙や挿絵、ブログのポイント使いなどに便利な素材屋やってます♪

    と と 姉妹サイト くつきちよこ ※管理人   佐藤 ※ゲスト

記事を読む

326/365 - plug in. by Bryan Rosengrant, on Flickr Some rights reserved

Q:ワードプレスの記事内にSoundCloudの音楽を埋め込むには? A:【WPプラグイン】は不要です!

タイトル通りです。今はURLだけで埋め込み完了です。  326/365 - pl

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Time limit is exhausted. Please reload CAPTCHA.

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

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