動くキャラ紹介にする方法 - RO
 09, 2014 08:45

動くキャラ紹介にする方法

ROブログやってるひとは、
キャラ紹介してるひとが多いとおもうんですが

キャラが多すぎてすごく縦長くなる!

なのでスライドして見せるようにしてみました!

すらいだー見本


スッキリしてオススメなので導入方法をご紹介

(1) Bxsliderをインストール



公式Bxsliderサイト(http://bxslider.com/)右上の[Downlord]をクリックしてダウンロードします

bxslider_DL.jpg



(2) 必要なファイルの名前を書き換え(FC2ブログのみ)



今回使うのは、マークした2つのファイルです。

bxslider_file.jpg


FC2ブログの場合ファイル名にピリオドやスラッシュがはいっていると
アップロードできないのでピリオドをアンダーバーなどに書き換えてあげましょう

bxslider_file_201409090455552bb.jpg

(3)2つのファイルをアップロードする



ファイルアップロードからアップロードすると、
URLが発行されるのでメモしておきます

あっぷろーど



(4) Bxsliderが使えるようにHTMLを編集する


HTMLを変更するとブログが正常に表示されなくなる可能性があります
複製でバックアップをとったりプレビューで確認しながら編集しましょう


ホーム>設定>環境設定>テンプレードの設定の
HTML編集でまずは〈head〉タグを探していきます
※Ctrl+Fで検索すると楽ちん

HTML.png

headタグの中に以下コードを書き込みます

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src=" (3)でうpしたJSファイルのURL "></script>
<link href=" (3)でうpしたCSSファイルのURL " rel="stylesheet" />
<script>
$(function(){
$('#slider').bxSlider({
auto:true,
speed:1000,
controls: 1,
pager:null,
onSlideAfter:function(){}
});
});
</script>


JSとCSSのURLは(3)でメモしておいたものに書き換えましょう

これでスライドを動かす準備は完了です。

(5) スライドする中身を準備する



まんじゅう

今回は画像でキャラ紹介つくってますが
動画やHTMLコンテンツもスライドできるみたいなので
気になったらチャレンジしてみてください(*゚∀゚)

(6)スライドを設置するよ


プラグインのフリーエリアを使っていきます。

ホーム>プラグイン設定>公式プラグイン追加>フリーエリア

設置するよ

フリーエリアの変更部分に下記内容を書き込みます

<div id="slider">
<div><img src="画像URL1" /></div>
<div><img src="画像URL2" /></div>
<div><img src="画像URL3" /></div>
</div>


キャラ数を増やしたいときは、
<div><img src="画像URL" /></div>
を好きなだけコピペしてください

設定ボタンを押して完了です(`・ω・´)b

最後に


ソース?あぁお好み焼きのね程度の知識のひとなので
詳しいひとからみたらおかしい記述などあるかもしれません

参考にしたサイトなどのせておくので
もっとカスタマイズしたいひとはどうぞ

<参考サイト>
jQueryプラグインbxSliderで初心者もスライダーつけてみるの回
簡単に設置出来るJQueryスライドショー「bxSlider」の使い方。
Bxsliderのデモページ
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました

<おまけ>
リンクの一部をiPhone風のアイコンリンクにしてみました

てすてす

英語サイトだけど直感的に操作できて
使いやすいのにフリー(・∀・)おすすめです!
http://iconion.com/
関連記事

COMMENT 0

WHAT'S NEW?