時期によるシェア率の違いを直感的に把握できたり、過去記事のメンテナンスにも役立ちます。2016.11.11便利すぎて、もうヤミツキ。必要な設定だけにフォーカス。「ページを表示するたびに、今のシェア数を取得しに走り回ってくれる」公式シェアボタン。下のコードをまるっとコピー。子テーマの「style.css」に追記します。background:#170042;}全ての作業後、うまくいかなければ・・TCDテーマであればほぼ問題ないかと思いますが、全ての作業を終えても表示が崩れたりした場合、下の記述をstyle.cssに加えてみてください。display:block;}また、「mod_pagespeed」設定をしている場合も一時、表示が崩れることがあります。mod_pagespeed設定をしている時だけ表示が崩れるようであれば、mod_pagespeed起因のキャッシュが原因となっていると思われます。その際は一度mod_pagespeedを解除し、しばらく経ってから再度設定してみてください。子テーマの「single.php」にコードをまるっとコピーTCDテーマにはデフォルトで主要なSNSアイコンが用意されています。デザインもいいですね。CSSで呼び出せるようになっているのも嬉しいところ。「どこで使われてるんだろコレ?」的な隠しアイコン的なものまであったり・・・じゃあ、おいしく流用させていただきましょう。TCDテーマ以外の利用者は、もう一手間必要になります。(いつか紹介予定)ここでは例として、記事ページトップにあるタイトル下と、記事本文の下に設置します。記事本文下タイトル下に設置まずは下のコードをまるっとコピー。子テーマの「single.php」内、タイトル近辺の表示させたい場所に追記します。feedly購読URL取得ページ上の公式ページ内「Step2」で、自分のサイトURLに【feed/】を付けたものを入れると、「Step3」に必要な記述が出力されます画像の「購読URL」部分だけをコピーして、ハイライト部分「ここにfeedly購読URLを入れる」の文字と差し替えればOK。このサイトの場合、こんなかんじになります。?></span></a></li>このサイトの場合、こんなかんじになります。?></span></a></li>差し替えたURLの後の/(スラッシュ)が重複しないよう注意しましょう。?></h2>この下に追記すれば、タイトル直下に表示されることになります。下のコードをまるっとコピー。子テーマの「single.php」内、記事本文下の、表示させたい場所に追記します。ここから」の後に追記してください。用意されている記事下のシェアボタン呼び出しコードはこんな感じ。コレはTCDテーマならほぼ似たような記述になっていると思います。?>この下に追記すれば、デフォルトのシェアボタン直下に表示されます。重複しないように、「TCDテーマオプション」内で「ソーシャルボタン表示」のチェックを外しておきましょう。【参考】TCDテーマオプションの使い方2015.10.06理想のWEBサイトを直感デザイン。「TCDテーマオプション」の使い方サイトレイアウトは、直感的に、簡単に。WEBサイトを立上げると、最初におおまかなレイアウト設定をすることになります。微調整(おめかし)今回のカスタマイズは、このサイトに使用しているテーマ【MAG】に最適化した状態です。実際に記事ページを表示してみましょう。?違うテーマを利用している場合、カラム幅も余白も違います。その分、微調整が必要になってくる場合もあると思います。惜しい!もうちょいタイトルとの間の余白を変えたいシェアボタン間の余白を変えたいシェアボタン、4つでえーわシェアボタンの並び順、変えさしてこれらは基本的に、Chromeの「デベロッパーツール」で見当をつけることができます。実際のソースをいじらないでも、「もしココをこう変更したら?」をプレビューできるスグレモノ。クリックで拡大ナルホド。li」の「width」の数値を変えれば、シェアボタンの大きさを変えられるんだな!とか、「.sns_frame_top」の「margin-top」を有効化して数値を変えれば、タイトルとの隙間が埋められるんだな!なんてことが簡単に分かりますね。今回の【オリジナルシェアボタン調整の具体例】については、こちらにまとめました。これでシェアボタンの色から細部の余白まで、思い通りに仕上げることができるはずです。2016.11.11【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法もっと思い通りに。下の記事で紹介した「カッコ美しいオリジナルシェアボタン」。ここでは自分のサイトデザインへさ・ら・に!思い通りにフィットさせる、具体的な調整例をいくつか紹介します。こんなシェアボタンですね。コピペで...終了!おつかれさまです。以上、オリジナルシェアボタンの設置方法を紹介してきました。最後にもう一度、設置のメリットを振り返っておきましょう。メリットページ表示速度アップ思わず「押したくなる」ボタンアクション記事ごとのシェア数推移を把握できるサイトデザインに合わせてカスタマイズできる好きな場所に設置できる公式ボタンと併用できるさて、最後の【公式ボタンと併用】。なんでわざわざまた併用する必要があるのか?その答えは、Facebookの「いいね!」ボタンがほしいからです。今回設置したオリジナルのFacebookボタンは、公式ボタンでいうところの「シェア」ボタンにあたります。「いいね!」は「シェア」より気軽にポチッとしやすい、という人も多いはず。欲張って、両方とも設置したいですよね?「Google+」や「Pinterest」も一緒に設置したいですよね?それ、ほんのちょっとした応用で、夢が叶います。いうわけで、【TCDテーマで公式ボタンと併用する方法と、簡単な調整方法の例】もこちらで挙げておきます。「たしかに!」と思った人はぜひ。2016.11.11【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法もっと思い通りに。下の記事で紹介した「カッコ美しいオリジナルシェアボタン」。ここでは自分のサイトデザインへさ・ら・に!思い通りにフィットさせる、具体的な調整例をいくつか紹介します。こんなシェアボタンですね。作業自体はシンプルですが、「自分のサイトにビシッ!とフィットさせる」過程で、ずいぶん自由なカスタマイズができるようになると思います。チャレンジしてみてください。関連記事2016.12.24魅力的なブログで収益化。ワードプレスのTCDテーマ【MAG】。インストールするだけで、デザイン性の高いブログサイトに変身させてくれるキラーテンプレートです。キラーと言ってもスゴいスゴぉいのほうです。"いいね!"Facebookで更新情報をお届け。SEO【実例集】細部の余白まで美しく。【基本編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹...ゆっくりじわじわ、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方...実践あるのみ!TCDテーマで学ぶ、記事装飾の簡単カスタマイズとCSSの基本”ブログにおいしい”、注釈画像の作り方。Screenpressoで矢印や枠線、文...魔法のような仕事効率化。ブログにも使えるWindows定型文ツール「Phrase...関連記事ワードプレス【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法もっと思い通りに。下の記事で紹介した「カッコ美しい...ワードプレスクリックひとつで完成。Embedlyで見栄えの良いカード型の記事リンクを貼る方法リンク挿入、どうしてますか?記事を書いていると、「以前に自分が書い...ワードプレス理想のWEBサイトを直感デザイン。「TCDテーマオプション」の使い方サイトレイアウトは、直感的に、簡単に。WEBサイトを立上げると、最...ワードプレス便利すぎて、もうヤミツキ。Cacheの設定方法と有効...必要な設定だけにフォーカス。「ページを表示するたびに、今のシェア数...ワードプレスほら、こんなに直感的。Cu...記事の順番だって、自由に決めたい。ブログなどのトップページで表示さ...ワードプレス「私の名前はページプラグイン。」Facebookページのいいね!ボタンをWordPressウィジェッ...サイドバーでよく見る「アレ」。・・あれ、見た...【Requ.log記事】魅力的なブログを、今すぐ作る。【Requ.log記事】魅力を活かす、カスタマイズまとめ。「わかりやすいブログ」に必須の「伝わりやすい画像」...記事を見栄えよく、伝わりやすく。ブログ記事を書き始めると、分からないことがど...【作業順まとめ】ブログを彩る!記事作りが捗る!クオ...知らなきゃもったいない。先日、とある交差点で信号待ちをしていた時のこと。見た...魅力的なブログで収益化。ワードプレステーマTCD【...ブログの魅力を最大限に引き出す!ワードプレスのTCDテーマ【MAG】。インス...【実例集】細部の余白まで美しく。オリジナルシェアボ...もっと思い通りに。下の記事で紹介した「カッコ美しいオリジナル...TCDテーマの強みとは?他テーマとの違いと基本機能...基本機能と実際の使用感。WordPressは、初心者でも本格的なWEBサイト...【フリーランス必見】確実に納期を守るために。タスク...僕らの合言葉、【No-u-Ki】。10分で終わらせてくるっ!」WordPress子...とりあえず作りきる!知識は後半!記事ページをカスタマイズしたい。え?記事下に...WordPressで子テーマを作る際に知っておくべ...知っとかないと、きっと困る。pn...ブログレベルならこれだけでOK。WEBサイトで使う画像の拡張子、何にしてます...きれいにしっかり画像圧縮。WordPressプラグ...どうせ圧縮するなら、きれいにしっかり。WEBサイトに表示させる画像は、ファイ...ChromeでWEBページ全体をフルスクリーンショ...上から下までの、全体像をゲット。WordPress...意外と知らない、WordPressの”お気づかい”ひとつの画像をWordPr...魅力的なブログを、今すぐ作る。ピックアップ記事Windows?Mac?なんでもゴザレ。スクリーン...”気軽な”先輩をウマく使おう。WordPress...意外と知らない、WordPressの”お気づかい”ひとつの画像をWordPr...便利すぎて、もうヤミツキ。WordPressプラグ...必要な設定だけにフォーカス。「ページを表示するたびに、今のシェア数を取得しに...「私の名前はページプラグイン。」Facebookペ...サイドバーでよく見る「アレ」。・・あれ、見たことない?...ゆっくりじわじわ、フシギな色変化。GIFアニメを使...色が変わるサイトロゴを簡単に。休むことなく働き続ける、一生懸命な画像。「...子テーマ使用者必見!カスタマイズしたWordPre...もう逃げなくても、えーんやで。やってきた、WordPressテーマ...ブログのRetina対応、始めませんか?掘り出し記事アップデート通知が来ない理由は・・?WordPre...テーマの更新通知がこない理由。使用しているWordPressテーマがアップデ...【Retinaディスプレイ対応1】Macで綺麗に。...簡単に、美しく。ページ表示速度の観点で考えると、画像においてはできるだけ小さ...feedlyのフォロワー数が表示されないっ!?SN...怪奇現象と、ある研究者の記録。私は街はずれの湖のさらに奥にある森の中、ひ...今すぐできる、開発者登録とFacebookアプリの...こんなに簡単だったんですか。サイト運営をしていると、Facebookページと...自分のアクセスはカウントさせない!Googleアナ...自分の足あとを追ってませんか?サイト運営をしているなら、Googleアナリテ...【Retinaディスプレイ対応3】いつものwidt...意外と知らない掟がある・・・WordPressにデフォルトで備わっている「テ...ゆっくり、フシギなGIFアニメ。最近の記事FirefoxでWEBページ全体をフルスクリーンシ...上から下までの、全体像をゲット。今見ている「WEBページ全体の画像」が...ChromeでWEBページ全体をフルスクリーンショ...上から下までの、全体像をゲット。今見ている「WEBページ全体の画像」が...ポチッ、でビョイーン。クリックで画像を拡大表示させ...インストールしたら、もう使える。記事のなかに画像を挿入したものの、思っ...Todoistとも連携。複数のメールアカウントを一...もうメールはブラウザで開かない。GmailやYahooメールなど、複数のWE...とっておきのWordPressテーマ。ピックアップ記事”ブログにおいしい”、注釈画像の作り方。Scree...注釈画像も、自由自在。前回までの記事では、Windows用の万能ツール「Sc...【使用者レビュー】WordPress初心者にこそお...本当のことを話します。ワードプレスのブログテーマ【MAG】。このサイトで今、...Twitterのシェア数表示を復活!「widget...簡単登録で、後はおまかせ。Twitterは以前仕様変更があり、公式ボタンでは...【応用編】スケジュール・タスク管理の大黒柱。万能ツ...実際使える、利便性と”デザイン性”。タスク管理ツールTodoistは、リリー...WordPress初心者にオイシイ、簡単記事装飾。...反則ギリギリな簡単さ。小見出しのデザインを美しくしたい?ああ、例えば、世にも...「忙しくてやりたいことができない・・!」に効く。マ...想い描く未来に、一歩前進。とっておきのWordPressテーマ比較...TCDの、おすすめテーマを選抜。あなたの体のこと...【小技特集】もっと使いこなす!おすすめタスク管理ツ...小技を制してラクしよう。タスク管理ツールTodoistは、直感的に利用できる...いつでもどこでも即タスク化。Todoistの便利す...さらに便利に。Todoistはそれ自体の持つ機能でじゅう...【作業順まとめ】ブログを彩る!記事作りが捗る!クオ...知らなきゃもったいない。先日、とある交差点で信号待ちをしていた時のこと。見た...【実例集】細部の余白まで美しく。オリジナルシェアボ...もっと思い通りに。下の記事で紹介した「カッコ美しいオリジナル...人気記事WordPressで子テーマを作る際に知っておくべ...知っとかないと、きっと困る。WordPressでカスタマイズをするなら、「子...「10分で終わらせてくるっ!」WordPress子...とりあえず作りきる!知識は後半!記事ページをカスタマイズしたい。え?記事下に...ChromeでWEBページ全体をフルスクリーンショ...上から下までの、全体像をゲット。今見ている「WEBページ全体の画像」が...Screenpresso(スクリーンプレッソ)を使...使いはじめたら、もう手放せない。pn...ブログレベルならこれだけでOK。WEBサイトで使う画像の拡張子、何にしてます...きれいにしっかり画像圧縮。WordPressプラグ...どうせ圧縮するなら、きれいにしっかり。WEBサイトに表示させる画像は、ファイ...【基本編】スケジュール・タスク管理の大黒柱。万能ツ...まずはここから。Todoistの基本編。【Todoist】は、いわゆるタスク...最近の記事FirefoxでWEBページ全体をフルスクリーンシ...上から下までの、全体像をゲット。今見ている「WEBページ全体の画像」が...ChromeでWEBページ全体をフルスクリーンショ...上から下までの、全体像をゲット。今見ている「WEBページ全体の画像」が...ポチッ、でビョイーン。クリックで画像を拡大表示させ...インストールしたら、もう使える。記事のなかに画像を挿入したものの、思っ...Todoistとも連携。複数のメールアカウントを一...もうメールはブラウザで開かない。レク.ログ】ご活用ルールブログ【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底上げに役立つ10個の...ワードプレスTCDテーマの強みとは?他テーマとの違いと基本機能をユーザー目線でレビューワードプレス【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点...ワードプレス【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法マネジメントいつでもどこでも即タスク化。ThemePICKUPカッコ美しい、オリジナルシェアボタン。サイトデザイ...美しいボタンで、シェアしてもらおう。FacebookやTwitterなどのS...ポチッ、でビョイーン。クリックで画像を拡大表示させ...インストールしたら、もう使える。