[STINGER5]記事の下にSNSフォローボタンを表示させてみた。>ブログ運営[STINGER5]記事の下にSNSフォローボタンを表示させてみた。勉強の為に回っているブログでは、皆さんこう書かれています。(ニュアンスが違ったりはしますが)そこで僕もこれを様々なブログを参考にしながら実践してみたんですが、どうにもスマホで表示した際に横揺れしてしまう事が多かったんです。スマホでの横揺れはとても見ずらいので、本当に気をつけるべきポイントです。今回は、スマホで横揺れさせずに記事下にSNSを配置する方法をお話しようと思います。・Google+バッジを作成する・Google+ページを作成する・Feedlyのフォローボタンを作成する・各SNSのフォローボタンを横揺れさせずに配置する・まとめこの記事でできるのは、記事下にもありますが、⇓こんなヤツです。Facebookのソーシャルプラグインページから作成します。画面を下にスクロールすると、「いいね!」ボックスという項目がありますので、クリックします。URLの部分に、ご自身のFacebookのURLまたは、ファンページのURLを入力します。※匿名でブログを運営している方はファンページでの登録になります。ファンページの作成方法については後述します。WidthとHeightは指定しません、これを指定すると横揺れの原因になりますので、必ず空欄にしてください。Borderのみチェック。上画面と同じにして頂ければオッケーです。Codeをクリックすると、下の画面が表示されます。IFRAMEをクリックし、下に表示されたコードをコピーします。今回は色々なコードを並行して使いますので、コピーしたコードをテキストドキュメントなどにメモしておきましょう。facebookでファンページを作成する匿名・ニックネームでブログを運営していて、Facebookもブログ同様に匿名やニックネームで作成したい場合にはこのファンページを使用します。Facebookは実名利用を推奨しているので、ニックネームで登録するとアカウント凍結される可能性もあります。ファンページであれば、本名などが表示されてしまう心配はありませんので、オススメです。Facebookページの右上にあるメニュータブから、ページを作成を選択します。自身のウェブサイトの形態に合ったものを選択します。なおろぐの場合は個人ブログに該当するので、慈善活動またはコミュニティでの登録でスタートをクリックします。ページの情報を設定します。詳しく入力した方が良いですが、これは後から設定もできますから、とりあえずスキップでも大丈夫です。これでFacebookのファンページ作成が完了です。このファンページのURLをいいね!ボックス作成の際に入力することで、ファンページへのフォローボタンが作成可能です。Twitterボタンページから作成します。ボタンの項目があるので、フォローするのボタンを選択します。ボタンメニューが表示されるので、言語設定を日本語に(英語のままでもいいですが)変更、他の部分は上画像と同じにして頂ければオッケーです。完了したら、プレビュー下段のコードをコピーします。これもテキストドキュメントにメモしておきましょう。上でコピーしたコードを編集する事で、ボタン横にフォロワー人数が表示できます。'twitter-wjs');</script>こんな部分があると思います。この中の、data-show-count="false"という部分の"false"を"true"に変更します。'twitter-wjs');</script>これだけです。テキストドキュメントにメモしておきましょう。Platformページから作成します。設定をバッジに、レイアウトを横向きに選択します。他は上画像と同じでオッケーです。プレビューを見るとアイコンが付いていたりと若干違うのですが、これで大丈夫です。コードを全てコピーして、テキストドキュメントにメモしておきます。Google+ページを作成するGoogle+ページは、Facebookファンページと同じものと考えて頂ければ大丈夫です。本名で取得したGoogleアカウントを表示することなく、匿名・ニックネームでGoogleページを持つ事が出来ます。ご自身のGoogle+のトップページへ行きます。トップページ左上にホームボタンがありますので、そこにカーソルを合わせるとメニューが表示されます。メニューにあるページの項目をクリックします。ページの作成ボタンが出てきますので、クリック。形態を選択する画面が表示されるので、ご自身のウェブページに合ったものを選択しましょう。なおろぐは個人ブログですので、ブランドを選択します。ウェブページの情報を入力します。カテゴリはコミュニティが適切かと思います。これでGoogle+ページが完成です。Google+ページでバッジを作成することが可能です。buttonページから作成します。お好きなFeedlyボタンを選択します。好きな物を選べばオッケーですが、今回は当ブログで利用している左上を選択。次に、ウェブサイトのURLを入力します。URLを入力となっています。ここには、ご自身のウェブページURL末尾に『feed/』を加えて入力してください。当ブログの場合は『http://naolog.blue/』がページURLですので、ここに入力するのは『http://naolog.blue/feed/』となります。URLまで入力すると、このようにコードが表示されますので、これをコピーしてテキストエディタにメモしておきましょう。各SNSのフォローボタンを横揺れさせずに配置する上で作成したFacebook、Twitter、Google+、Feedlyの4つのコードを配置していく作業になります。wordpress管理画面の左メニュー『外観>テーマの編集』ページ右側にあると思いますので、探してみてください。s);})();</script></div>【Feedlyのコードをそのままコピペ】</div></div>※編集の際は【】も消してください。上のコードはsns.phpの末尾に追記すればOKです。タイトルを編集2行目後方にある【タイトル】をお好みのタイトルに編集してください。コメントを編集4行目にある【コメント】をお好みのコメントに編集してください。Faceboookコードを編集6行目にある【Facebookのコードをそのままコピペ】を、メモしておいたFacebookのコードに置き換えてください。Twitterコードを編集8行目にある【Twitterのコードをそのままコピペ】を、メモしておいたTwitterのコードに置き換えてください。Google+コードを編集11行目にある【//plus.google.com/u/0/113305894611553408015】の部分のみご自身のものに置き換えます。メモしておいたgoogle+のコードの中に、これと同じもの(後ろの数字だけ違う)があると思いますので、ご自身のものに置き換えてください。Feedlyコードを編集25行目にある【Feedlyのコードをそのままコピペ】を、メモしておいたFeedlyのコードに置き換えてください。ここまで終えたら『ファイルを更新』をクリックして完了です。ご自身のウェブサイトを確認してみましょう!こんな感じに表示されていれば成功です。スマホでも確認してみると良いでしょう。まとめ他のブロガーさんのカスタマイズ記事は本当に参考になります。PHP言語を完全に理解していないので、今回のように他の方のブログを見ながら自分なりに手を加えていくしかありません。同じような境遇の方の参考になれば幸いです。子テーマとは、簡単に言うと「元のテーマを変更する事なくテーマのカスタマイズをする物」です。...phpMyAdminでインポートできない場合「...バックアップの復元とかデータベースいじる必要がある時にやる作業だと思うんですけど、僕は今回ドメイン変更の作業をする中でやらかしました。データーベースいじる方法で書いてる記事を参考にしちゃったんですよねー。ブログを初めてまだ2週間ですが、ブログを初めてから様々な人のブログを読ませて頂いて、僕なりに感じる事も出始めてきました。(4)プロフィールナオ(管理人)愛知県在住の車屋さん。昼間は車屋、夜はブログ運営やネットビジネスに励んでいます。車屋歴15年、PCゲーマー歴20年、ゲーマー歴30年以上です。ゲーミングPCについての紹介や、本業の自動車、ネットビジネス副業などジャンルを絞らない雑記ブログの管理人です。ご連絡はお気軽にお問い合わせフォームからお願いします。