賢威をこよなく愛する「ちゃん」(@cyan_customizer)です。Twitterアカウントを載せてしまいましたが、このページに訪問された人はTwitterのリンクから、私のアカウントページに入る方もいると思います。サイトに訪問したことがない人には分からないので意味がありません。多くの人にサイトに訪れてほしいと思う場合は、SNSボタンでコンテンツを拡散してもらう方法があります。その為、賢威8はコンテンツ上部と下部にSNSボタンが設置されています。ボタンスマホのレスポンシブで表示されるSNSボタンパソコン表示もスマホ表示もSNSボタンの種類に違いはなく、横幅が狭いスマホ表示はボタン自体の横幅が狭くなっています。標準で表示されるSNSボタンの種類Twitter(ツイッター)Facebook(フェイスブック)はてなブックマークよく利用される3つのSNSボタンが表示されるので、このままで十分な機能が賢威8には揃っていますね。ブログやサイトの種類によってはSNSボタンの種類が少ないと感じる人もいるはず。賢威8で簡単にSNSボタンを追加できる方法を解説したいと思います。id=12]google+を削除したいと思う人は賢威8最新版にアップデートすれば、簡単に削除できますよ。賢威8のアップデートが何度も行われて「utility.js」が書き換わったため、「utility.js」にコードを埋め込む解説内容を修正しております。賢威8のSNSボタンのデザインをガラッとカスタマイズCSSカスタマイズでSNSボタンを白抜きにするまとめ賢威8のSNSボタンの表示設定を好きな場所に変更するやり方SNSボタンは目に付くところに置かないと意味がありませんので、賢威8もカスタマイズすることでSNSボタンの位置を変更することが出来ます。id=12]賢威8の標準機能と独自のカスタマイズの2通りで変更できるので解説します。id=653]SNSボタンを「上だけ」「下だけ」に表示を切り替える賢威8のSNSボタンはどこに表示されていますか?「知ってるよ!」と怒られてしまいそうですが、設定を触っていなければコンテンツの最上部と最下部に自動的に設置されます。初期設定は上の画像のように上下ともに、SNSボタンが表示される設定です。投稿ページでも固定ページでも同じ設定になります。上だけや下だけに切り替えが簡単に出来て、表示させてくない場合は「無効」にチェックを入れて保存すれば可能になります。id=12]運営者情報などの固定ページには無効設定が良いかもしれませんね。id=653]先ほども書いたように、SNSボタンはなるべく目に付きやすい場所が良いので、上と下の両方に表示していても良いと思います。どちらかを削りたいな~と考えていれば、間違いなく「上」の表示を消した方が良いでしょう。理由としては、訪問してコンテンツも読んでいない状態で、Twitterでリツイートしたりシェアすることはないはずです。SNSボタンを押す必要性が高いのは、コンテンツ下部になります。SNSボタンを記事中の好きな場所に設置する文字数が非常に多くなってしまうと、コンテンツ最下部のSNSボタンまで到達されないケースも多くあるはず。シェアされる機会を増やしたいと思うと、SNSボタンが上下だけでは足りないとかもしれませんね。基本設定以外にも、賢威8では下のコードを記事の本文中に挿入すると、SNSボタンを設置できるようになっています。class="sns-btn_hatena"></div></aside>コードを入れると、下にSNSボタンが設置されていますね。サイトアフィリエイトとは違って、ブログでは最後まで読まれるようなコンテンツを書き上げるのが最優先です。それでも、途中にSNSボタンを入れたい場合は、コードを使うことになります。毎回コードをコピペするのは大変なので、プラグイン「AddQuicktag」を利用してコードをタグで挿入できるようにしておきましょう。id=695]いっぱいの記事数になっちゃったから、1つずつコードを変えなくちゃ。id=653]同じような悩みを持っている方は、初めから賢威8の「共通コンテンツ」でSNSボタンのソースコードを登録して、ショートコードを作っておけば、後から簡単にコードの書き換えが出来ます。共通コンテンツで作られたショートコードを同じように、AddQuichtagに登録すれば簡単に記事に入れらえますよ。id=653]賢威8を使っている人で、こんな疑問を持ってる方も多いでしょう。初めに書いたようにシェア系「Twitter」「Facebook」とブックマーク系「はてなブックマーク」の3つを標準で表示して十分ですが、3つ以外にもシェア系「LINE」やブックマーク系「Pocket」がよく利用されています。あと、よく見るSNSボタンの種類はRSSリーダーで有名な「feedly」もあります。すべて実装すれば良いわけではありませんが、賢威8でどのようにしてSNSボタンを増やすんか解説したいきます。phpファイルやCSSをカスタマイズする時は、親テーマではなく子テーマをインストールして、その子テーマ内でカスタマイズするようにしてくださいね。id=653]「LINE」「Pocket」であれば、賢威8はWEBフォントやCSSはすでに書かれている状態なので、コードを追記するだけで実装できるようになっています。追記するのは下のコードになります。?>"></div>コピペしたコードを張り付けるファイルは、賢威8「template-partsフォルダ内」にある「part-sns.php」になっています。子テーマにも同様のフォルダとphpファイルを作りましょう。<aside>~</aside>の間に上のコードを挿入すれば、「LINE」「Pocket」のボタンが増えます。「LINE」「Pocket」を追加したときのスマホ表示パソコンで表示する時のSNSボタンの横幅は「max-width:850px」が指定されていますが、ボタンそれぞれには十分余白があります。縦型のスマホ表示はボタンの横幅がギリギリなので、これ以上ボタンを増やすのはやめた方が良いかもしれませんね。スマホだけ「条件分岐」でSNSボタンを2段に表示させる悲しいことに、トップページの最新情報やカテゴリー一覧のページで表示されるSNSボタンは、下の画像のように文字がずれてしまうほどギリギリの状態です。文字の大きさをCSSで小さくすれば対処できますが、かなり小さくしないとギリギリサイズのSNSボタンになってしまいます。id=653]そこで考えたのが「スマホ表示の時だけSNSボタンを2段で表示しよう!」ってことです。パソコン表示は十分余裕があるので、2段にする必要がないと感じたので。「スマホだけ」「カテゴリーページだけ」など特定ページなどで、表示方法を変えたい場合は「条件分岐」を活用すれば簡単に切り替えることが出来ます。スマホ表示の時だけSNSボタンを2段にする記述方法です。/無事にカテゴリーページなどのSNSボタンを2段に出来ました。id=12]もちろん各個別ページのSNSボタンも2段になっています。id=653]もしかすると「個別ページは1段のままで良い」と考える人もいるかもしれませんので、スマホ表示の「カテゴリー一覧」や「タグ一覧」になる「アーカイブページ」だけ2段にする方法もあります。先ほどのコード1行目を下のコードに書き換えるだけで実装できます。?>コメントアウト(//の後の部分)に書いているように、スマホ表示である場合にアーカイブページもしくはトップページで表示する条件に絞っています。id=12]好みの表示方法にすれば大丈夫ですよ。純粋なSNSとは言い切れませんが、現在のSNSが流行る前に非常に人気があった「RSSリーダー」の一種に「Feedly」があります。RSSリーダーの需要は少なくなっていますが、コアなファンなどに非常に重要があり、サイトによってはSNSボタンとして置いておく価値は非常にあります。1つだけ注意なのが、「Feedly」を追加するのは「LINE」「Pocket」を追加するようなCSSなどが用意されていないことです。id=12]自前でjsやCSSをカスタマイズする必要があります。id=653]コピペだけで実装できるようにしていますので、間違わないと思います。手順1:Feedlyボタンを設置する場所を作るまずは、Feedlyアイコンが表示される場所にコードを挿入します。?>"></div>上のコードを「Pocket」を表示するコードの後ろに追記します。id=12]「part-sns.php」で2段表示にされた方は、9行目と17行目の後ろですね。id=653]コードを挿入しただけでは、画像の矢印部分に「Feedly」のアイコンなどは表示されません。パソコン表示も同じです。手順2:「utility.js」にコードを追記するpart-sns.phpでは表示する場所を確保しましたが、「utility.js」のjsファイルはどのような動きでSNSボタンを表示するのかを制御しています。id=12]「Facebook」や「はてブ」の数を取得するのもutility.jsなんです。Script」は解説が難しいので、コピペだけで対応します。fa-rss-square"></i><span>Feedly</span></a>');});上のコードをコピペする場所は「utility.js」の630行目ぐらいに挿入すれば良いです。628行目までが「Pocket」のSNSボタンのコードになっています。Awesome5」にFeedlyアイコンが無いので、自前で画像やWEBアイコンを用意するのも良いです。めんどくさいな私は「RSSリーダー=Feedly」と思っているので、RSSを表す共通アイコン「」を利用しました。言っても、なぜかSNSボタンのリンク色がCSSで白色になっているので、カスタマイズしなければ見えない状態です。見えなくても安心してください。手順3:CSSをカスタマイズしてFeedlyアイコンを表示させるリンクしているはずの見えていないFeedlyアイコンを、CSSをカスタマイズして見える状態に変更します。id=12]アイコンや文字の大きさは、他のSNSボタンと共通なので色を指定すれば完了です。#6cc655;}元からあるFeedly公式のカラーに合わせて、CSSの文字色をしてしたので違和感がないです。賢威8のSNSボタンのデザインをガラッとカスタマイズSNSボタンの元々のデザインは何回も画像で出してますが、背景色が「白」でリンクの文字色が「各アイコンのイメージカラー」になります。id=12]とてもシンプルで、どんなサイトでも合うSNSボタンですね。id=653]でもよく見るSNSボタンは、背景色が「各アイコンのイメージカラー」でリンクの文字色が「白抜き」が多いです。私も文字が白抜きの方が目立つように思います。CSSカスタマイズでSNSボタンを白抜きにするCSSでデザインを変えるだけなので、一気にすべてのSNSボタンのデザインを変えたいと思います。必要なアイコンだけの装飾をコピペするだけで大丈夫ですよ。id=653]白基調の賢威8のデザインからすると、目立つ色のSNSボタンは良いかもしれないです。まとめブログ運営をする中でSNS上で拡散されるのは必須と言えるほど重要です。賢威では、拡散されやすいようにSNSシェアボタンが最低限揃っているので、良い記事を書いて拡散されやすいボタンを設置するように心がけましょう。賢威の使いやすさを解説した賢威の評判を紹介しているので、ぜひ見てください。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。賢威一筋の管理人「ちゃん(@cyan_customizer)」です。...WordPressテーマ賢威8の見出しデザインをカスタマイズ!WordPressテーマ賢威8はシンプルなデザインが特徴で私は気に入っていますが、少し物足りないと感じるユーザーも多いでしょう。...WordPressテーマ賢威8のテーブル(表)の入れ方とカスタマイズ方法!アフィリエイトブログを運営していると、重宝するのが商品やスペックの比較表を作るためのテーブルですよね。そこで、賢威8でテーブル(表)を簡単に記事に入れる方法を紹介します。賢威でブログやアフィリエイト運営している管理人「ちゃん(@cyan_customizer)」です。コンテンツSEOが重要視されるようになってから、長文のページがかなり多くなっていますよね。雨の日ブログ運営者ちゃんブログの更新情報をTwitterでチェックする2014年から副業アフィリエイター!金融系2つを中心に高単価サイトを5つ運営中!本業を辞めずに、SEOについて記事を書き続けています。