それに合わせて慌ててオフィシャルサイトの
ページ作り直してるわけですが、久しぶりにやると
本当ワケわかんない...笑
いっつもその度にGoogleで検索してあ～でもないこ～でもないって
やって時間無駄にしてる...orz
ギターもミックスもバスケも何事も間空けるとダメだ！
ってことで大事なことは忘れないように
今度からブログに残しとくことにします！！
今日はWordPressでのソーシャルボタンの整列のやり方について。
よくニュースの記事の下とか動画の下とかにこんな感じで
FacebookやらTwitterやらのボタンが表示されてると思います。
これがいわゆるソーシャルボタン。
各サービスごとにこのボタンの縦・横の大きさがバラバラなので
ただソーシャルボタンのHTMLタグを埋め込むだけだと上下左右の
バランスがぐちゃぐちゃになっちゃいます。
これを整列する為に簡単なのが、下記コードをWordPressの
スタイルシートのCSSに貼り付けて、各数値を微調整すること。
--------------------------------------------
.oya {
position: relative;
}
.ko1 {
position: absolute;
top: 10px;
right: 45px;
}
.ko2 {
position: absolute;
top: 10px;
right: 145px;
}
.ko3 {
position: absolute;
top: 10px;
right: 180px;
}
.ko4 {
position: absolute;
top: 10px;
right: 210px;
}
----------------------------------------------
具体的には、まず下記手順でWordPressのスタイルシートの
最下部に上記のコードを貼り付けする。
①ダッシュボード画面で、左サイドバーの「外観」→テーマの編集をクリック。
②次に右サイドバーの一番下にある「スタイルシート」をクリック。
③スタイルシートのCSSの最下部に先ほどのコードを貼り付ける。
これでスタイルシートのCSSの編集はおしまい。
次にソーシャルボタンを入れたいページに下記コードを貼り付ける。
--------------------------------------------------------
<div class="oya">
<div class="ko1"> ※ここにTwitterのタグ※ </div>
<div class="ko2"> ※ここにFacebookeのタグ※ </div>
</div>
--------------------------------------------------------
※※<div class="ko1">と</div>の間にFacebookやTwitter等の
ソーシャルボタンのタグを入れること。※※
その後、先ほどのスタイルシートに戻り位置を微調整。
編集するのは”ko1～ko4”の「top」と「right」の数値
「top」とは上から○○ピクセル下げる ということ。
「right」は右端から○○ピクセル左にする ということ。
つまり、下記コードの意味は、
.ko1 {
position: absolute;
top: 10px;
right: 45px;
}
上から10ピクセル下げて、右端から45ピクセル左にするということになります。
コードの意味がわかったら１ピクセル単位で微調整をし、
ぴったりくるところまで合わせていくだけ。
コードの意味と貼り付ける場所がわかれば簡単です。
これで今度忘れてもまた簡単に思い出せるぜ（￣▽￣）=３