サイドバーTwitterFacebook0Google+LinkedInPocket0stinger5のSNSシェア用のボタンはよ~く観ると、デザインだけでなく、大きさまでばらばらだったりします。SNSボタンの数も「ツィッター」・「フェースブック」・「グーグル」・「ハテナ」の4個です。いまや「スマホ」の時代。ブログ表示させるSNSボタンも「LINE」・「Pocket」や「feedly」を設置しておけば、よりアクセスが見込まれると思う。SNSシェア用ボタンを「LINE」・「Pocket」や「feedly」をカウンター付きで設置。サイドバーにもSNSシェア用ボタンを設置してみた。ここで紹介するstinger5のカスタマイズは、私の備忘録です。バックアップは忘れずに!!!以下記事はワードプレス(WP)や、テーマのstinger5をカスタマイズしたやり方等を忘れないために書き留めた備忘録ですこれらを参考にカスタマイズする時は、自己責任でお願いいたします。ソースコードを変更する場合は、FTPソフトを使ってサーバーにアップ。各サーバーのオプション(ファイルマネージャー)等(例はさくらサーバーです)でカスタマイズを行ってください。SNSシェア用ボタンをカウンター付きでデザインを統一させた。SNSシェア用ボタンをカウンター付きでデザインを統一させた。まとめ私のブログで使っているWordpressテーマ「Stinger5」のデフォルトのSNSボタンはこんな感じ。デザインだけでなく、大きさまでバラバラに観えます。カスタマイズするので、スマホからの流入を促すためにもSNSシェア用ボタンを「LINE」・「Pocket」や「feedly」をカウンター付きで設置。ついでにサイドバーにもSNSシェア用ボタンを設置してみた。Cache」のプラグインをインストールする。Cache」を入力して検索。インストール⇒有効化。シェア数の取得はイラナイヨ!!っと言う人はプラグインは必要なし。SNSシェア用ボタンのカスタマイズ確認アイコンフォントは設置が簡単なAwesomeを使用します。このカスタマイズではアイコンフォントを使用するので、記述していないブログやコードを削除してしまったっていう人は、下記コードを「ヘッダー(header.php)」内の「</head>」より前に記述する。?></div>[/php]上記コードをコピーして置く。外観⇒テーマ編集⇒「sns-top.php」を開く(私の場合子テーマ)。表示されているコードをすべて削除する。次にさきほどコピーして置いたコードをペーストする。ツィッターのところの【●ツイッターアカウント名(例:@たかよし)●】を削除してから、自分のアカウントを記述する。feedlyボタンのところの【●ドメイン名(例:y-taka.biz)●】を削除してから、自分のドメイン名を記述する。「ファイルを更新」ボタンをクリック。「sns-top.php」内にあるすべてのコードをコピーして置く。外観⇒テーマ編集⇒「sns.php」を開く(私の場合子テーマ)。表示されているコードをすべて削除する。次にさきほどコピーして置いたコードをペーストする。「ファイルを更新」ボタンをクリック。SNSシェア用ボタンを装飾するスタイルシート(style.css)を開く(私の場合子テーマ)。{}」より前に記述する。{」より下に下記コードを追記する。{」と「}」の間に下記コードを追記する。{margin-right:0;}[/css]「ファイルを更新」ボタンをクリックしてカスタマイズ後のSNSシェア用ボタンを確認する。PCで確認すると、おそらく各SNSシェア用ボタンの文字が小さいと思う。(そう感じるのは私だけ?)これはカウンター数の桁数が多くなった場合を考慮してる。{」内のフォントサイズ「font-size:75%;」を「90%」に変更する。サイドバーにもSNSシェア用ボタンを設置サイドバーの上部にもSNSシェア用ボタンを設置しておくことで、ブログに訪れるお客様の増加につながると思う。外観⇒テーマ編集⇒サイドバー(sidebar.php)を開く(私の場合子テーマ内のサイドバー(sidebar.php))。height=’42’></a></li></ul></div>[/php]上記コード内にある【●アカウント名●】の箇所に自分のアカウント名を記述する。上記コード内にある【●ドメイン名●】の箇所に自分のアカウント名を記述する。サイドバーのSNSシェア用ボタンを装飾する外観⇒テーマ編集⇒スタイルシート(style.css)を開く(私の場合子テーマ内のスタイルシート(style.css))。{}」より前に記述する。}[/css]尚、現地点では「feedly」の装飾はしていないので、「feedly」のソーシャルアイコンをそのまま使用してる。「ファイルを更新」ボタンをクリックしてカスタマイズ後のSNSシェア用ボタンを確認する。修正とカスタマイズブログをカスタマイズしてたら、「サイドSNSアイコン」の装飾がなぜか崩れたので修正とついでにボックスで囲ってみた。スタイルシート(style.css)に修正版を追記または変更する。#008000;}[/css]まとめこのSNSシェア用ボタンのカスタマイズは、とても気に入ってます。言えばロゴマークと各SNS会社名の間にスペースを入れたい気がする。それは後日という事で。様のブログを参考にしてもらいました。アリガトウございます。!◆お客さんたちも大好評です:◆新品種類がそろっています。お客様の手元にお届け致します。豊富な品揃えで最新作も随時入荷致しておりますのでごゆっくりとご覧ください。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。Librariesと言う物がインストールされてました。ブログのカスタマイズに挑戦13,542ビューNTT代理店の株式会社ワイズからインターネット開通を申し込みました。10,367ビューデスクトップに変なメッセージが入るようになりました。