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

関連記事

正しく怖くなっていく著作権セカイで、ユーザーと著作者双方を守る規約のあり方とは? その1:規約でボケようとしちゃダメだぞ!アイキャッチ画像 illust by 佐藤利音@310104o

正しく怖くなっていく著作権セカイで、ユーザーと著作者双方を守る規約のあり方とは? その1:規約でボケようとしちゃダメだぞ!

   イラスト:佐藤利音@310104o デザイン:くつきちよこ 正しく怖くなってき

記事を読む

創作者さんのコリを癒す!セルフマッサージ動画5選 アイキャッチ画像 design by くつき 素材 by CELSYS

創作者さんのコリを癒す!セルフマッサージ動画5選

創作者さんのコリを癒す!セルフマッサージ動画5選 アイキャッチ画像 design by

記事を読む

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

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

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

記事を読む

Sea Change by Pen Waggener, on Flickr ブログちゃんと電子書籍くん

禁断の素朴な疑問…?(*´・д・)o0○(ブログと電子書籍の違いってなんだろう?)

  追記: 1年以上間の記事になぜか今頃になってアクセスが増えました……;; とい

記事を読む

Girls skipping at an athletics carnival by Powerhouse Museum, on Flickr オッスオラ!…から転生した美少女っぽいSTINGER LADYSを早速お試させて頂きました

オッスオラ!…から転生した美少女っぽいSTINGER LADYSを早速お試させて頂きました♪(あとちょろっとbtn素材配布)

現在テーマの衣替え中につき、へんな角丸祭りになっていてすみません; Girls s

記事を読む

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

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

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

記事を読む

Hardcover book gutter and pages by Horia Varlan, on Flickr ページををめくるめくwpプラグインFlippingBook Galleryとか合成GIFとかの雑談

ページををめくるめく効果が簡単に作れるwpプラグイン『FlippingBook Gallery』とか合成GIFとか諸々

※サーバーが落ちてるのかここしばらくつながらない状態のようです。様子見のため、URLやサンプルページ

記事を読む

「あの」アプリが使えないとお嘆きのアナタへ、アプリなしで簡単に写真をアニメ背景風に加工する方法♪ 空を夜に変えて写真をアニメ背景風(夜)にしてみた2♪

「あのアプリ」が使えないとお嘆きのアナタへ、アプリなしで簡単に写真をアニメ背景風に加工する方法♪

都市伝説らしい理想の泥犬と記憶の中の泥犬 illust by サトウトシオ@310104

記事を読む

簡単!『ファイヤーアルパカ』で動くイラスト作成しよ!オニオンスキンモードでラクラク作画! 4:うっすら透けて見える前の絵を確認しながら、絵を描きます。

簡単!『ファイア アルパカ』で動くイラスト作成しよ!オニオンスキンモードでラクラク作画!

  Firealpaca(ファイア アルパカ) で、素材作成 ⇒ GIF

記事を読む

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

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

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

記事を読む

Message

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

CAPTCHA


Time limit is exhausted. Please reload CAPTCHA.

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

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

  • パソコン工房「CLIP STUDIO PAINT PRO推奨パソコン」エントリーモデル登場