メッセージボードにスライドショー

こんにちは、パソコンワンポイントレッスン！

PCインストラクターの川上です。


このようなご質問いただきました↓↓↓

メッセージボードのところに画像のスライドショーで表示させたりするのは、私たち素人でもできますか？

あ、ヘッダー画像そのものをスライドショーにする記事は書いていたのですが↓

『アメブロのヘッダー画像をスライドショーに』

メッセージボードにスライドショーはまだ書いてませんでしたね^^;


それと･･･
集客ブログであれば、メッセージボードにはあまりゴチャゴチャと置かない方がいいのですが･･･

でも、できるのか？と聞かれれば、できます！と答えてしまいます～～^^;
（それと･･･、「天城越え」がわからない、と言われれば、サビをお伝えしてしまいます^^;）


はいっ！それでは、素人の方にもできるように、頑張って解説したいと思います～(^^♪



まず、スライドする画像を作ります。
ここでは、幅190px×高さ140pxにします。
（私はこの５枚にしました↓）

アメブロに画像をアップロードして、それぞれの画像URLを取得しておきます。

メッセージボードに（あ、フリースペースではないのでお間違いなく）HTMLタグを書きます。
（赤字の箇所を取得した画像URLに変更してくださいね。→画像URLの取得方法はこちらの記事内に書いています。）

<div class="carousel"><div style="width: 400px; margin: 0pt auto;" class="jCarouselLite"><ul><li><a href="#"><img src="http://stat.ameba.jp/user_images/20150424/10/sumitak1329/a2/02/j/o0190014013285330921.jpg" /></a></li><li><a href="#"><img src="http://stat.ameba.jp/user_images/20150424/10/sumitak1329/6a/58/j/o0190014013285330922.jpg" /></a></li><li><a href="#"><img src="http://stat.ameba.jp/user_images/20150424/10/sumitak1329/14/eb/j/o0190014013285330920.jpg" /></a></li><li><a href="#" target="_blank"><img src="http://stat.ameba.jp/user_images/20150424/11/sumitak1329/69/32/j/o0190014013285358732.jpg" /></a></li><li><a href="#" target="_blank"><img src="http://stat.ameba.jp/user_images/20150424/10/sumitak1329/ec/ba/j/o0190014013285330923.jpg" /></a></li></ul></div></div>

（それぞれの画像にリンクを設定したい場合は、＃のところをURLにしてくださいませ。）

この時点では、こんな感じで写真が縦に並びます。

そして、
フリープラグインに次のコードをコピペします。

<script src="http://www.google.com/jsapi"></script>

<script>google.load('jquery', '1.6.2');</script>

<script>(_JQ162_=jQuery)(function(){$=jQuery=_JQ162_;});</script>

<script src="http://www.takenet2000.com/public/jcarousellite_1.0.1.pack.js"></script>

<script src="http://www.takenet2000.com/public/jquery.easing.1.3.js"></script>

<script>

$(function() {

$(".jCarouselLite").jCarouselLite({

btnNext: ".next",

btnPrev: ".prev",

auto: 2000,

visible : 4,

speed: 1000,

scroll: 1

});

$(".jCarouselLite2").jCarouselLite({

btnNext: ".next2",

btnPrev: ".prev2",

visible : 2,

speed: 500,

easing: "linear",

scroll: 2

});

});

</script>

ご自分の外部サーバーにJSファイルを置きたい方は、
スライドするJSファイルを外部サーバーに置いて、公開リンクを取得します。

jcarousellite_1.0.1.pack.js

jquery.easing.1.3.js



あとは、CSSソースを追加してあげます。

/*◆メッセージボード・スライドショー◆*/

.top_menu_block{

text-align:center;

width:auto;

background:#fff;

padding:5px;

border-radius: 10px;

border: 3px dotted #DC9FB4;

}

.carousel {

width: 653px;

margin:0 auto 0 auto;

border: solid 1px #fff;

background-color: #fff;

position:relative;

overflow:hidden;

}

.carousel a.next{

display:inline;

float:right;

}

.carousel a.prev{

display:inline;

float:left;

}

.jCarouselLite {

margin: 0 0 0 0;

}

.jCarouselLite a:hover{

background:none;

}

.jCarouselLite li img, 

.jCarouselLite li p {

background-color: #fff;

width: 190px;

height: 140px;

margin:0 42px 0 0;

vertical-align:bottom;

}

.jCarouselLite2 li img, 

.jCarouselLite2 li p {

background-color: #fff;

width: 190px;

height: 140px;

margin: 5px;

}

以上で、このようにメッセージボードで画像をスライドショーすることができます！！

あ、ブラウザの更新は忘れないでくださいませ～（Windowsの方はF5キーを、Macの方はcommand＋Rキーを押してください。）

おさらいしますと、

１．スライドする画像を作成する
２．アメブロに画像をアップロードして、画像URLを取得する
３．メッセージボードにHTMLを記述する
４．プラグインにスライドショーのコードを記述する
５．CSSコードを記述する
６．ブラウザを更新する

という流れでできます！



あ、めまいをされた方は、失礼しました<m(__)m>



Ｐ．Ｓ．

最初の真面目な３枚の写真はこちらの方↓に撮っていただきました！ありがとうございます<m(__)m>

【スワンアロマテラピー】札幌ジュリークフェイシャルサロン･エステ･アロマトリートメント･マタニティ･子連れOK･大通り

それから･･･
早速、この記事の通りにやってみていただいた方が↓↓↓

メッセージボードにスライドショー設置してみた？！｜Webクリエイター加藤敦志

以上、メッセージボードにスライドショーでした。


LIDS札幌・ライフデザインスクール
川上 雄大

囲み枠｜見出し付枠｜色コード｜メニューバー