adjust-the-button_ecmg

ワードプレス

【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法

下の記事で紹介した「カッコ美しいオリジナルシェアボタン」。ここでは自分のサイトデザインへさ・ら・に!思い通りにフィットさせる、具体的な調整例をいくつか紹介します

カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせた作り方と簡単カスタマイズ

こんなシェアボタンですね。 そうです、コピペで完成する、メリットいっぱいのやつです。

original-share-button_02

目次

【調整例1】シェアボタンの並び順を変える

【調整例2】シェアボタンの種類を変える

【調整例3】シェアボタンの色を変える

【調整例4】シェアボタンの数を変える

【調整例5】シェアボタン全体の幅を調整する

【調整例6】公式ボタンと併用する

こちらの記事で紹介したデベロッパーツールを利用して作業すると効率的です。

【調整例1】シェアボタンの並び順を変える

single.php内の該当箇所を入れ替えるだけでOK。例えばデフォルトではTwitter⇒Facebookの順に並んでいますが、Facebook⇒Twitterの順にするなら 

 Before | After

<!--Twitterボタン表示-->
<li class="twitter-o"><!--省略--></li>
 
<!--Facebookボタン表示-->
<li class="facebook-o"><!--省略--></li>
<!--Facebookボタン表示-->
<li class="facebook-o"><!--省略--></li>
 
<!--Twitterボタン表示-->
<li class="twitter-o"><!--省略--></li>

 Before | After

original-share-button_13

original-share-button_14

直感的に順番を入れかえるだけ。カンタン。

【調整例2】シェアボタンの種類を変える

ここでは例として「Google+」を「Pocket」と差し替えます。style.cssに下の記述を追記。

/* Google+ボタンスタイル */
.sns_org .gplus-o a {
	background:#6B6B6B;
	box-shadow:0 5px 0 #555555;
}
.sns_org .gplus-o a:hover {
	background:#170042;
}

次に下の記述を、single.phpの不要なボタンの記述と差し替えます。

<!--Google+ボタン表示-->
<li class="gplus-o"><a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;" target="_blank" rel="nofollow"><span class="icon-google-plus2" style="font-size: 135%;"></span><br /><p style="margin-top:2px;">G-Plus</p><span class="sns_count"><?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></span></a></li>

 変更例

original-share-button_29

【調整例3】シェアボタンの色を変える

これもカンタン。style.css内の、各ボタンのスタイル(「.sns_org .facebook-o a」など)の「background」や「box-shadow」の「#」に続く数値を変更すればOK。

/* Facebookボタンスタイル */
.sns_org .facebook-o a {
	background:#6B6B6B;
	box-shadow:0 5px 0 #555555;
}
.sns_org .facebook-o a:hover {
	background:#170042;
}

 変更される場所

original-share-button_15

ちなみにマウスオーバー時の色も、上の「a:hover」が付いているほうの「background」の数値を変えることで、好みの色にできます。(各ボタンごとに変更できます)

original-share-button_16

【調整例4】シェアボタンの数を変える

例えばfeedlyの購読ボタンはいらない!という場合。single.phpから該当の箇所を削除 

<!--feedlyボタン表示-->
<li class="feedly-o"><a href="ここにfeedly購読URLを入れる" target="_blank" rel="nofollow"><span class="icon-feedly" style="font-size: 145%;"></span><br /><p style="margin-top:2px;">feedly</p><span class="sns_count"><?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></span></a></li>

続いてstyle.cssの不要になった部分  を削除し・・・

/* feedlyボタンスタイル */
.sns_org .feedly-o a {
	background:#6B6B6B;
	box-shadow:0 5px 0 #555555;
}
.sns_org .feedly-o a:hover {
	background:#170042;
}

.sns_org li」の「width」や「margin」の数値を変更して調整します。

.sns_org li {
	float:left;
	width:18%;
	margin:0 1% 30px 1%;
}

 変更される場所

original-share-button_26

original-share-button_10

それにともなって、ボタン内のフォントサイズなども調整が必要になってくるかと思います。style.css内「.sns_org li a」の「font-size」や・・

.sns_org li a {
	font-size:75%;
	position:relative;
	display:block;
	padding:12px 2px;
	color:#fff;
	border-radius:4px;
	text-align:center;
	text-decoration:none;
}

 変更される場所

original-share-button_11

.sns_org li a .sns_count」の「font-size」もですね。 (ボタン内のシェア数フォントサイズ)

/* ボタン内のシェア数スタイル */
.sns_org li a .sns_count {
	position:absolute;
	font-size:85%;
	right:5px;
	bottom:3px;
}

 変更される場所

original-share-button_12

私の環境では、TCDテーマ独自の「TCDテーマオプション」内「カスタムCSS」に追記してもうまく反映されなかったため、今回のCSSは全て子テーマの「style.css」に追記しました。
お勉強不足のため、理由はわかりません。でも結果的にうまくいくならオッケーでしょう。
原因が分かれば追記しようと思います。でも結果的にうまくいくならオッケーでしょう。

【調整例5】シェアボタン全体の幅を調整する

デフォルトではカラム幅いっぱいに並ぶようになっています。記事本文の幅に合わせたいときなど、「デザインやフォントサイズはそのままに、全体幅を縮めたいとき」はこんな調整を。

 Before | After

.sns_org {
	display:block;
	margin:auto;
	width:100%;
}
.sns_org {
	display:block;
	margin:auto;
	width:89%;
}

 Before | After(クリックで拡大)

original-share-button_30

original-share-button_31

【調整例4】で紹介したボタン幅や余白、フォントサイズを合わせて調整すると、いっそう思い通りに仕上がります。

【調整例6】公式ボタンと併用する

ちょっと欲張りな応用なんですが、主にFacebookの「いいね!」ボタンを設置するための調整。「いいね!」ボタンは 残念ながら 公式ボタンでしか設置できないんですよね。

今回設置したオリジナルのFacebookボタンは、公式ボタンでいうところの「シェア」ボタンにあたります。「いいね!」は「シェア」より気軽にポチッとしやすい、という人も多いはず。

original-share-button_ins5

ということで、公式ボタンも数が少なければまあいいだろう、と思えるのであれば、こちらも取り入れてみてください。(でも一番読み込みに時間がかかるのはFacebook周りのものなんですけどね・・)

TCDテーマなら超絶簡単。テーマオプションで「ソーシャルボタンを表示する」にチェック⇒ボタンタイプを公式ボタンに設定し、必要とするSNSだけにチェックを入れます。

original-share-button_17

original-share-button_18

original-share-button_19

original-share-button_20

ハイ、これだけでOK

でも、微妙な調整が必要な場合もあるでしょう。今回設置したオリジナルシェアボタンとの余白を調整したい場合は、style.css内の「.sns_frame_btm」をちょろっといじります。

 Before | After

.sns_frame_btm{
	/* margin-top:0px; */
	/* margin-bottom:0px; */
}
.sns_frame_btm{
	margin-top:50px;
	/* margin-bottom:0px; */
}

 Before | After

original-share-button_21

original-share-button_22

ここでは極端に広げましたが、こんなかんじで簡単に余白を調整できます。「/*」と「*/」を消してやると有効化されるので、あとは数値を変えるだけ。もちろん、オリジナルシェアボタン下の余白を調整したければ、「margin-bottom」のほうの数値を変えればいいわけですね。

こちらの記事で紹介した「デベロッパーツール」の動画をもう一度見てみましょう。

original-share-button_09

動画ではタイトル下の方のボタンたちを調整していますが、「あー・・ナールホドォ。。」になったでしょう?少し理解が深まったと思います。で、あとはスマートフォンでの見栄えも確認しておけばパーペキ・・いや完璧ですね。

original-share-button_27

original-share-button_28



こんなところでしょうか。Chromeのデベロッパーツールを利用しながら、いろいろといじって、好みのボタン、好みの余白になるように遊んでみましょう。

思い通りにうまく仕上がったら、ぜひ教えてください。新築祝いにお邪魔させていただきます。お茶なんていりません。お気遣いなく。それでは。

関連記事

実践あるのみ!TCDテーマで学ぶ、記事装飾の簡単カスタマイズとCSSの基本

【使用者レビュー】WordPress初心者にこそおすすめのブログテーマ、TCD「MAG」のデフォルト機能と魅力を徹底解説

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね!ボタン」をセン…
  2. “知っているつもり”の拡張子、jpg gif png。画…
  3. あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方…
  4. 仕事に時間をとられ、何もやる気がでない時。がんじがらめ感をスカッ!と解消するモチ…
  5. TodoistでToDoリスト。プロジェクトやタスクの階層化で頭の中を楽にする

関連記事

  1. intuitive-custom-post-order_ec

    ワードプレス

    ほら、こんなに直感的。投稿記事の順番を並び替えるWordPressプラグインIntuitive Cu…

    記事の順番だって、自由に決めたい。ブログなどのトップページで表示さ…

  2. feedly-count-problem_ecmg

    ワードプレス

    feedlyのフォロワー数が表示されないっ!?SNS Count Cacheのキャッシュ進捗「部分的…

    怪奇現象と、ある研究者の記録。私は街はずれの湖のさらに奥にある…

  3. backwpup-japanese_ec

    ワードプレス

    アップデートで英語化された!?BackWPupをサクッと日本語化する方法

    アップデートしたら、設定画面が英語化された!? 2…

  4. switch-by-the-device_ecmg
  5. insert-card-link_ecmg

    ワードプレス

    クリックひとつで完成。Embedlyで見栄えの良いカード型の記事リンクを貼る方法

    リンク挿入、どうしてますか?記事を書いていると、「以前に自分が書い…

  6. blog-theme-mag_ecmg-ps

    ワードプレス

    【使用者レビュー】WordPress初心者にこそおすすめのブログテーマ、TCD「MAG」のデフォルト…

    本当のことを話します。ワードプレスのブログテーマ【MAG】。このサ…

【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

Requ.Sound Lab. | レク.サウンドラボ

レク.サウンドラボ

音に、景色と”振る舞い”を。

特集記事

  1. extension-tools-for-bloggers_ec
  2. tcd-theme-selection_ecmg-ps
  3. todoist-extension_ecmg
  4. adjust-the-button_ecmg
  5. business-books_ecmg
  6. tcd-theme-user-review_ecmg
  7. improvement-flow_ecmg
  8. todoist-tips_ecmg
  9. display-speed_ec
  10. valuable-content-from-image_ec

ピックアップ記事

  1. todoist-advanced_ec
  2. dash_ecmg
  3. like-button-card_ecmg-ps
  4. quicktag_ecmg
  5. tcd-css-customize_ecmg
  6. blog-theme-mag_ecmg-ps
  7. widgetoon-js-count-jsoon_ecmg
  8. jpg-gif-png_ecmg
  9. todoist-class_ecrt
  10. tcd-theme-widget_ecmg

強みを見つけて、活かしていくために。

business-books

タスク管理で、自己管理。

todoist

おすすめ記事

  1. Windows?Mac?なんでもゴザレ。スクリーンショットに…
  2. タスクを完了させたくなる!? モチベーションアップに役立つT…
  3. 小規模チーム、家族間の疎通に。Todoistで始める気軽なタ…
  4. ”ブログにおいしい”、注釈画像の作り方。矢印や枠線、文字を追…
  5. 【Retinaディスプレイ対応3】ねえ・・どうする?widt…

魅力的なブログを、今すぐ作る。

tcd-mag

ブログのRetina対応、始めませんか?

retina-os-solution

最近の記事

  1. 【使用者レビュー】WordPress初心者にこそおすすめのブ…
  2. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  3. タスクに、日時や曜日が勝手に反映される・・!?Todoist…
  4. 魅力的なブログで収益化。ワードプレステーマTCD【MAG】の…
  5. MAGのデザインをフル活用。PCとスマホの広告設置枠を自由に…

ゆっくり、フシギなGIFアニメ。

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

特集記事

  1. 『伝わりやすいブログ』を作るには?画像で届ける価値あるコンテ…
  2. 【保存版】知ったら戻れない、美しさの極みへ。WordPres…
  3. 【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザ…
  4. 目指せ軽量化!今から始める、WordPressサイトの表示ス…
  5. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…

Requ.log | おすすめビジネス書

コンテンツの秘密-ぼくがジブリで考えたこと 「言葉にできる」は武器になる。
プロフェッショナルは「ストーリー」で伝える 日本人の知らなかったフリーエージェント起業術

Requ.log | おすすめ物語

モモ マリコ/マリキータ
なんくるない たったひとつの冴えたやりかた

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. improvement-flow_ecmg

    マネジメント

    最低限習得しておきたい自己管理術。忙しくても、頭と心は軽くしておく生活改善フロー…
  2. retina_ecmg

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  3. tcd-mag_ecmg-ps

    ワードプレス

    魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカ…
  4. tcd-theme-selection_ecmg-ps

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
  5. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマ導入前に知っておきたい、2つの注目機能とユーザー目線レビュー
PAGE TOP