SLAM's Crazy B-log

Go Music For Life!!

OFFICIAL WEBSITE → http://slam-3.com
最新情報、曲の試聴・無料ダウンロードはこちらから♪


-----------------------------



不器用でまっすぐな恋を描いた夏の切なソング
【MV】SLAM / Sunflower






----------------------------

NEW !
テーマ:
今回はFacebookにSoundcloudのプレイリストを表示させる方法。
今回もめちゃくちゃ簡単だったのに、難しく考えて無駄に悩んでしまった...
ってことでまた忘れないようにここに記録しときます!!

まずはオフィシャルサイトでのSoundcloudの表示はこんな感じ↓






これと同じ埋め込みタグをFacebookに埋め込むとこんな感じになってしまう↓

fb1





ああでもないこうでもないとやっていたところ、あら簡単。
実はSoundcloudのURLを貼付けるだけでOKでした!

実際にURLを貼付けて再生ボタンをクリックしてみたのがこちら↓

fb2



なんだよこんな簡単だったのかよ...
考えすぎて損したわ~


AD
いいね!した人  |  コメント(0)
最近の画像つき記事  もっと見る >>

テーマ:
もうすぐ新曲「Sunflower」のPVが完成します。

それに合わせて慌ててオフィシャルサイトの
ページ作り直してるわけですが、久しぶりにやると
本当ワケわかんない...笑 

いっつもその度にGoogleで検索してあ~でもないこ~でもないって
やって時間無駄にしてる...orz

ギターもミックスもバスケも何事も間空けるとダメだ!

ってことで大事なことは忘れないように
今度からブログに残しとくことにします!!



今日はWordPressでのソーシャルボタンの整列のやり方について。

よくニュースの記事の下とか動画の下とかにこんな感じで
FacebookやらTwitterやらのボタンが表示されてると思います。
これがいわゆるソーシャルボタン。

sns button1” width=“100%” border=


各サービスごとにこのボタンの縦・横の大きさがバラバラなので
ただソーシャルボタンの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のスタイルシートの
最下部に上記のコードを貼り付けする。


①ダッシュボード画面で、左サイドバーの「外観」→テーマの編集をクリック。

sns button2


②次に右サイドバーの一番下にある「スタイルシート」をクリック。

sns button3


③スタイルシートのCSSの最下部に先ほどのコードを貼り付ける。

sns button4


これでスタイルシートの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ピクセル左にするということになります。

コードの意味がわかったら1ピクセル単位で微調整をし、
ぴったりくるところまで合わせていくだけ。

コードの意味と貼り付ける場所がわかれば簡単です。

これで今度忘れてもまた簡単に思い出せるぜ( ̄▽ ̄)=3


AD
いいね!した人  |  コメント(0)

テーマ:
最近は営業ばっかでなかなか
創作モードになれないのですが、
やっぱ色々たまってる想いが
あったようで。

久しぶりに曲書いてます。

珍しく自分以外の人の話を少々。

何かいい感じです。
これのプロモ撮りたい。

まだ息抜きでやってる感じだから
ちょっと先になりそうだけど、
完成したらまたアップします!
AD
いいね!した人  |  コメント(0)

AD

Amebaおすすめキーワード

Ameba人気のブログ

Amebaトピックス

ランキング

  • 総合
  • 新登場
  • 急上昇