ソラマメブログ
HOME > 動画 > FLASH 3D IMAGE SLIDER cu3er導入
by Ami at 2010年04月30日 01:56動画
Comments(2)
cu3erソラマメブログの方もせっかく素敵なテンプレートなのでアイキャッチの部分にcu3erというFLASHを入れました。
Wordpressなどではプラグインですぐに導入出来るのですが、ソラマメやBloggerなどは自分でコードを挿入したりswfやxmlを設置したりとてもめんどくさそうな作業が目白押しです@@
ソラマメやBloggerはxmlやswfのファイルをアップロードできないので別にスペースを借りる必要があります。オンラインストレージで検索すれば沢山無料のものが出てきます。多分この借りる作業が一番大変かもw
簡単に導入方法を説明します。
(スペースをどこも借りなくても下記の方法で導入はできます。でも私のSSしか流れないけどねxoxo相談してくれれば1枚ぐらいなら差し替えてあげてもいいよ^^v
Step1:Get CU3ER
cu3erをダウンロード>解凍して自分の借りたスペースにアップロードする。(私はcu3erフォルダを作りそこにアップロードしています。下記の説明もそれを前提にしています。)
Step2:Get Template
Templates for SLMaMeでアイキャッチスペースが有るテンプレートを自分のブログに設定する。(私のソラマメブログは「WhiteStripe」を使用しています)

Step3:Customize CSS
ソラマメブログ管理画面のテンプレート>カスタマイズを開きスタイルシート:の中にある

/*----------------------------------------------------
アイキャッチ画像
----------------------------------------------------*/
#eyecatch {
width: 100%;
height: 200px;
background: #fff url(/usr/templ/eyecatch_dammy.gif) no-repeat;
}


を探してheightとbackgroundを下のコードに書き換える

height: 300px;
background: url(/usr/amibeattie/cube_shadow.jpg) no-repeat center bottom;


この変更で高さを300pxにしてcu3erの影を入れています(自分が表示したいcu3erの高さ+50pxが目安です)

Step4:Customize HTML

トップページ:の中にある

</head>

を探しその上に下のコードろ貼り付ける。

<script type="text/javascript" src="http://mu.site40.net/cu3er/js/swfobject/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.xml = "
http://mu.site40.net/cu3er/config.xml";
flashvars.font = "
http://mu.site40.net/cu3er/font.swf";
var attributes = {};
attributes.wmode = "transparent";
attributes.id = "slider";
swfobject.embedSWF("
http://mu.site40.net/cu3er/cu3er.swf", "cu3er-container", "860", "250", "9", "http://mu.site40.net/cu3er/expressInstall.swf", flashvars, attributes);
</script>
<style type="text/css">
<!--
#cu3er-container {width:860px; outline:0;}
-->
</style>


黄色のhttp://mu.site40.netの部分は自分が借りたスペースのアドレスを記入。
次にトップページ:の中にある

<div id="eyecatch"><!-- --></div>

を探して下のコードに書き換える。

<div id="eyecatch">
<div id="cu3er-container">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</div>
</div>


これで設置は終了。
つかれたので下記の動画を見てQK>ココアを飲んだら次に進む・・・w

Step5:Nake images
860pxX270pxの画像を作ってファイル名をslide_1.jpg slide_2.jpg ・・・・・・・と数字の部分だけ変えてお好みの枚数作っていく(私はslide_5.jpgまで作ってます)それを自分で借りたスペースにアップロードしたcu3erフォルダの中にあるimagesフォルダにアップロードする。
FLASH 3D IMAGE SLIDER cu3er導入
Step6:Config.XML
あとはcu3erの中にあったconfig.xmlをいじるんだけど・・・眠いからこれをダウンロードして使って><
User Guideに回転速度や回転のタイプや字を入れる方法などとにかくたくさんたくさん詳しい設定方法等書いてあります。そこを3日読んでもわからない時はコメントしてください><わかる範囲で説明できると思います・・・でも素人なので多分答えれません!!!!!!!!!最近服と靴に不自由しているのでプレゼントしてくれれば喜んで設置のお手伝いをしますってこれも営利目的ってみなされてブログを削除されちゃうのかな?
xoxo

同じカテゴリー(動画)の記事画像
MMD動画 SLとは無関係なブログ
動画とかテンプレートとか とマメは復活するのかな・・・
てふてふ
真面目な遊園地
オブジェクトに挑戦!
怪しい遊園地
同じカテゴリー(動画)の記事
 MMD動画 SLとは無関係なブログ (2010-06-05 09:55)
 動画とかテンプレートとか とマメは復活するのかな・・・ (2010-04-28 16:03)
 てふてふ (2009-03-26 02:06)
 YouTubeの動画が許せなくて・再投稿してしまいました@@ (2009-03-07 01:58)
 真面目な遊園地 (2007-06-17 21:16)
 オブジェクトに挑戦! (2007-06-07 12:15)

Comments


えーとこれらを一応知ってる者として誤解の無いように一言言わせて頂きます。

これ用にフリーのサーバーをレンタルされたという事だと思いますが、基本的にサーバーのレンタルというのは素材などを保管する倉庫としてレンタルする事は禁止されている事が殆どですから、そこら辺の事情を知らずに借りる方が出るかも知れないので補足説明をされては如何でしょうか?
by ぴーちゃん at 2010年04月30日 06:42

えーと、面倒なので借りるところはカットしてます・・・

レンタルサーバーで検索してしまうと無料と有料プランでは大きく仕様が変わってたり各サーバー会社によって仕様が全く違うため、その辺を知らない人のためにこの記事ではレンタルサーバという言葉を使わずオンラインストレージという言葉を使い誤解を招かないようにしたつもりです。
もし興味がございましたらレンタルサーバという言葉ではなくオンラインストレージで検索することをおすすめします。
by Ami at 2010年04月30日 13:08

Leave a Comment

 *
 *
上の画像に書かれている文字を入力して下さい
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。