【Stinger3】記事下をチョチョイとカスタマイズ | えんじにか

えんじにか

元エンジニアがセラピストになっちゃったブログ。iPhoneや日々の雑多など個人的に気になったことを綴っています。

【Stinger3】記事下をチョチョイとカスタマイズ

      2013/12/10

screenshot 400x300 【Stinger3】記事下をチョチョイとカスタマイズ
Stinger3

どうもです。ハラです。

ENJIさんがけっこう私宛にメッセージを送ってくれていまして(勘違い)

 

先週もずっとちょこちょことStinger3を弄くってまして、やりたいと思っていた記事下の修正をやりました。

  • シェアしてくれるとうれしいんだな(山下清風)
  • ブログ情報を受信していただく施策

 

以上2点対応しました。先週やっていた細かい修正点なんかは、次の記事あたりで何やったかまとめます。(振り返りやすいように)

 

キッカケになった記事は、ENJILOGさんの僕のWordPressブログで効果を出している+αなカスタマイズという記事です。

こちらの記事で記載されているのは、

  1. フォロワーやファンを増やす仕組み
  2. スマートフォンの改行について
  3. Amazonアソシエイト
  4. アイコンやプロフィールはとても大事

 

んで、個人的には1が必要と思い今回対応しました。(2については不要、3は既に導入済、4は現在対応中のため)

 

たぶん、どこに設置すんねん!と困ってる人もいるんじゃないかと思ったので、手順などをまとめます。

ちなみに、個別カスタムなので事前にバックアップ要!ちゃんとバックアップしてくださいね。真っ白くなってブログが表示されなくなっちゃいますよ。

そうそう、不安な方とか大きいサイト運営している方は、XAMPPやMAMPなんかで自分のPC上にサーバにあるブログを再現して、自分のPCで修正→動作確認してからサーバにカスタマイズを反映するってやり方の方がいいかもしれないですね。

 

今回やったこと

  1. Stinger3のアップデート(個別カスタマイズ版→Stinger3_10/23配布版)
  2. Twitterメンション設定、シェアボタン押下時の@a2u3を表示
  3. シェアボタン下に、Twitterのフォローボタン追加
  4. シェアボタン下に、Facebookページへのいいねボタン追加
  5. シェアボタン下に、Feedly購読ボタン追加
  6. 3〜5を記事下へ設置

 

ちなみに、1〜5に関しては、もう既に解説されている記事があるため詳述はしませんので、リンク先のブログなどを参考にしていただければなと思います。

 

Stinger3アップデート

個別にカスタマイズしているので、アップデートしなくてもよい・・・のですが、ブログの記事にするなら正規版かつ最新版で説明した方が優しいだろう。俺に惚れるだろうと思ったので、アップデートしました。惚れるなよ。

最新版のStingerはダウンロードページからゲッツしてきてください。
(σ・∀・)σゲッツ!!

113279327 8612278d75 z 400x266 【Stinger3】記事下をチョチョイとカスタマイズ
[Extended Mobile Suit In Action!!] MS-06S ZAKU II / quattrovageena

 

Twitterメンション設定

最新版のStinger3に上書きしたので、ヘッダー画像の修正とか、メンション設定の修正。個人的にはアップデートしたものに対して修正した方が良いと思います。自分で作ったものなら、細かく理解できると思うので、最新版に自分のカスタマイズを盛り込む方が漏れが無いと思います。

設定はこちらSTINGERご利用の方にぜひ、やって頂きたい事。のTwitterメンション設定からどうぞ。

 

記事下に、Twitterボタン追加

定期的に見てもらうための施策。自分の場合個人アカウントなので、いつもの発言も表示するようにした方がいいかもなーなんて思ったり。

コードの取得は僕のWordPressブログで効果を出している+αなカスタマイズのTwitterフォロワーボタンの作成方法からどうぞ。

まずはコード取得して、メモ帳にでも貼り付けといてください。

 

記事下に、Facebookページボタン追加

定期的に見てもらうための施策その2。その他のSNSもやるにこしたことはないけど、TwitterとFacebookはやっといたほうがええじゃろ。という感覚。

コードの取得は僕のWordPressブログで効果を出している+αなカスタマイズのFacebookのファン登録ボタンの作成方法からどうぞ。

まずはコード取得して、メモ帳にでも貼り付けといてください。(デジャブ)

 

記事下に、Feedly購読ボタン追加

そもそも、自分自身あまりRSSリーダーとか活用していなかったってのもあるんですけど、色々反省。出来る限り他の方のブログも見に行こうと最近思いました。ま、別に全てのブロガーさんをフォローするなんてことはできないけど、属性が近い人はいるだろうしね。

参考にしたのはこちら、ブロガーやメディア運営者向け!3ステップで作れる、「Feedlyボタン」の作り方

まずはコード取得して、メモ帳にでも貼り付けといてください。(でぢゃゔゅ)

 

取得したコードを記事下に配置

恐らくどこをどうやったら配置できんねんって方もいると思うので。自分がどこを修正したか書きますね。

あ、作業前はバックアップしましょうね!

 

2013/10/23版のStinger3のsns.phpは以下の通り(変更前)


<div id="snsbox03">
<div class="sns03">
<ul class="snsb clearfix">
<li> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</li>
<li>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;layout=box_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTransparency="true"></iframe>
</li>
<li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>
</li>
<li> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>|<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</li>
</ul>
</div>
</div>

 

変更後


<div id="snsbox03">
<div class="sns03">
<br><br>
<strong>この記事をシェアするとフラグ立ちます(なんの!?)</strong>
<ul class="snsb clearfix">
<li> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="a2u3" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</li>
<li>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;layout=box_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTransparency="true"></iframe>
</li>
<li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>
</li>
<li> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>|<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</li>
</ul>

<br>
<strong>ブログ情報<s>背信</s>配信中!よろしければ♪</strong>
<br><br>
<!-- Twitter -->
Twitterで(σ・∀・)σゲッツ!!してきたコードを貼る。
<br><br>
<!-- Facebook -->
Facebookで(σ・∀・)σゲッツ!!してきたコードを貼る。
<br><br>
<!-- Feedly -->
Feedlyで(σ・∀・)σゲッツ!!してきたコードを貼る。
<br>

</div>
</div>

変更後を確認していただくと分かりますが、追加したのは3〜4行と、17〜30行です。改行コード(<br>タグ多いのが気になるね)まぁ見なかったことに。

 


<br><br>
<strong>この記事をシェアするとフラグ立ちます(なんの!?)</strong>

3〜4行目で、ソーシャルボタン押してくれると嬉しいな的なこと書いてます。<strong>〜</strong>で挟まれている文字列を修正してくださいませ、

オリジナルメッセージじゃないと書く意味はない気がするんで、自分らしさが出てればいいんじゃないでしょうか。

 


<br>
<strong>ブログ情報<s>背信</s>配信中!よろしければ♪</strong>
<br><br>
<!-- Twitter -->
Twitterで(σ・∀・)σゲッツ!!してきたコードを貼る。
<br><br>
<!-- Facebook -->
Facebookで(σ・∀・)σゲッツ!!してきたコードを貼る。
<br><br>
<!-- Feedly -->
Feedlyで(σ・∀・)σゲッツ!!してきたコードを貼る。
<br>

17〜30行目で「ゲットしたコードを貼る。」と記述している文字列の行を削除して、取得してきたそれぞれのコードを貼り付けてくださいませ。

CSSを使って見た目よくするとかはご自由にどうぞ。

 

まとめも

はい、ということで無事に惚れて頂けたでしょうか?作業完了しましたか?PHPが分かれば大体の修正箇所は特定できると思いますが分からない人や自分で特定すんのめんどくせー、修正箇所明確に頼む。って方の参考になれば幸いです。

かくいう自分も、PHP分かるんだけどソース見るのだりぃとか思ってたクチです。(ぉぃ)

 

また言わなくていいことを告白してしまった・・・私はなんと罪深いうんちゃらかんちゃら

 

ではでは

 

 

 - ▼ブログ , ,

AdSense

AdSense

Comment

  1. […] 【Stinger3】記事下をチョチョイとカスタマイズ […]

Message

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current ye@r *

  関連記事

3064351634_2985f244c7_z
【月次報告】ブログ収益8ヶ月目 2014/1は前月比+230%

Money Queen / doug88888 ↑どの国でも行われることなのでし …

wordpress
NewStatPressリンクがうまく動作しないのよ。

余波再び。 どうもこんにちは、すーちゃんです。 中学生の頃、女子にちゃん付けで冷 …

6174224161_be733fbb8f_z
【裏オフ会】というのはどうだろうか

A Social Gathering / 62252479@N06 なんだか。 …

グラフ
【月次報告】ブログのアクセス数vol.1(1日目〜120日目)

お疲れ様でございます。この言葉どうにも慣れませんハラでございます。   …

medium_5267464508
SEO対策したら検索流入減ったという話(自分のミスだけど)

photo credit: MoneyBlogNewz via photopin …

wordpress
WordPress公式アプリ iOS6でカテゴリー選択ができない

どーもどーもどーも、もーどハラです。 画面を見ていただくと分かりますが、回線表示 …

6515534221_579ee6b7c5_z
ブロガー名刺発注してみた!

Metal business cards by Pure Metal Cards …

7230055562_c06d96cd3f_z
WordPressとMySQLをローカル環境で利用する

PC_Desk / johnsalvador   どーもハラです。 目 …

wordpress
成分表書くのに表作りたい WordPressプラグインでサクっとできないの?

どうも、サクサクっとハラです。   ライスミルクの感想を書くために成分 …

2451955460_03208cbb00_z
このブログはlivedoor blogに引っ越・・・しません!

batsu / chrisliang82 ブログ引っ越しません! ということで、 …