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  いかにもなタイトルですが、釣りじゃありません。 結論から申し

記事を読む

とつぜんですがここでクイズです。「発酵」に関する画像にチェックを入れてください。

面倒な画像認証を楽しいぷちクイズにできるGoogleAPI『reCAPTCHA』設定方法♪

※ダミー認証画像です(笑)くつきちよこ 登場人物:くつきちよこ ※管理人   佐藤 ※ゲス

記事を読む

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

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

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

記事を読む

フィード取得サービスを利用して『画像付きカテゴリ別記事』を表示させる方法 その3『複眼RSS』

フィード取得サービスを利用して『画像付きカテゴリ別記事』を表示させる方法 その3『複眼RSS』

rss_watercolor_icon by mfinleydesigns, on Flic

記事を読む

WordPress 4.3の更新でやらかした話 WP-Banがバグってサイトが真っ白に( × △ × )【解決済み】ようこそWordPress4.3

WordPress 4.3の更新でやらかした話 サイトが真っ白( × △ × )【更新時のプラグイン停止をお忘れなく!】

  『ユーキャン』で資料請求しました。※住所部分など、加工しています   W

記事を読む

創作ブログに最適な「LINEトーク吹き出しCSS」で、表示が崩れるときの忘備録 カスタマイズサンプルアイキャッチ画像

創作ブログにピッタリな「LINEトーク風フキダシCSS」の表示が崩れるときの忘備録

あけましておめでとうございます。   会話形式の多いブログにピッタ

記事を読む

佐藤利音『宇宙(セカイ)をデバッグする、簡単なお仕事です』宣伝回:その1 アイキャッチ画像:表紙ラフ案

佐藤利音『宇宙(セカイ)をデバッグする、簡単なお仕事です』宣伝回:その1

  ※ラフ案:佐藤利音 デザイン:くつきちよこ 登場人物:くつきちよこ ※管理人   佐藤 

記事を読む

インターネットサーバーエラーである日突然サイトが落ちたので閉鎖しようとしたけど、ダメ元である事をしたら偶然直った話。※マネは慎重に! 素材サイトの構成

インターネットサーバーエラーである日突然サイトが落ちたので閉鎖しようとしたけど、ダメ元である事をしたら偶然直った話。※マネは慎重に!

図:くつきちよこ   登場人物:くつきちよこ ※管理人   佐藤 ※ゲ

記事を読む

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

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

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

記事を読む

photonヤバイ!と思って切ったら、「EWWW Image Optimizer」line1674のエラーでダブルパンチ!……死ぬかと思った! パクリサイトが、パクラレサイトの画像に直リンして画像を盗用するイメージ

サイトをコピーされた? でも、JETPACKのphotonを有効にしてると、「画像の差し替えの反撃」ができないみたい

   直リンで画像を登用される時の説明画像   登場人物:くつきちよこ 

記事を読む

Message

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

CAPTCHA


Time limit is exhausted. Please reload CAPTCHA.

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

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

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