SLAM's Crazy B-log

Go Music For Life!!

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


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



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






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


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

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






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

fb1





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

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

fb2



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


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

テーマ:
今回はWordpressのプラグイン『meteor slides』を使ってトップページのみにスライダーを表示させる方法。

スライダーってのは、よくサイトの上部にあって、画像が勝手に切り替わってそのサイトの最新の情報なんかを表示してくれるやつ。ちなみに俺のサイトではこんな感じ。Youtubeサムネイルの上にあるのがスライダーです。


meteo_slider10


このスライダーを表示させる為に、まずはWordpressプラグインの『meteor slides』を新規にインストール。(プラグインの新規追加から"meteor slides"で検索。)


インストールが終わったら、ダッシュボードのサイドバーに『スライド』って項目が表示されるので、そこの新規追加をクリック。


meteo slider6



スライドの設定画面になるので、それぞれの項目を入力。


metero_slider7


更新ボタンを押して入力が完了すると、こんな感じでスライドが登録されます。
(3枚を登録した画面)


meteo_slider8



最後に「スライド」-「設定」画面から細かい部分を微調整。


meteo_slider9



これで『Meteor Slides』側の設定は終了。
あとはCSSに『Meteor Slides』のタグを埋め込むだけ。

ダッシュボードから「外観」-「テーマの編集」-「ヘッダー」をクリック。


metero_slider1



meteo_slider2


</head>タグの下に下記タグを貼り付け。

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

<center><?php if (is_front_page()) { if (function_exists('meteor_slideshow')) { meteor_slideshow(); }} ?></center>

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

meteo_slides3



これでトップページのみに先ほど設定したスライダーが表示される。
ここで大事なのはこの部分

<?php  と { の間にある


 if (is_front_page()) 


このタグがあれば、トップページのみにスライダーを表示。なければ全ページにスライダーを表示となります。皆さんどうぞお試しを!!


meteo_slides4


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

Amebaおすすめキーワード

Ameba人気のブログ

Amebaトピックス

ランキング

  • 総合
  • 新登場
  • 急上昇