Webデザイナーへの道しるべ | suge1040's diary

Webデザイナーになる事を目指しフェリカテクニカルアカデミーで勉強していましたsuge1040によるブログです。

Jimdoにスライドショーを入れる

Jimdoにスライドショーを入れる方法をご紹介します。

今回は、jQuery Cycleを利用してスライドショーを入れてみます。

初心者でも簡単に出来るのでとてもおすすめです!

それでは、やってみましょう!

※こんな感じスライドショーです。

 

jQuery Cycleのサイトを開きます。

クリック→jQuery Cycle

すると下記のページが開きます。

f:id:suge1040:20141222000507p:plain

 

②画面の左上にあるDownload the Cycle Pluginをクリック。

すると下記のページが開きます。

f:id:suge1040:20141222000903p:plain

③Cycle Lite Pluginを右クリックし、「名前を付けてリンク先を保存」を選び保存する。

macは「別名でリンク先を保存...」かな?

ファイル名が、jquery.cycle.lite.jsです。

 

④Jimdoの管理画面に移動。画面右側の「設定」をクリック。「ヘッダー部分を編集」を押します。

f:id:suge1040:20141222002257p:plain

 

⑤すると下記の画面が表示されます。

f:id:suge1040:20141222002526p:plain

 

⑥下記のコードを書き込みます。

<script type="text/javascript" src="http://www.google.com/jsapi"> </script> <script type="text/javascript"> //<![CDATA[     google.load("jquery","1.6.2"); //]]> </script>

<script type="text/javascript"> //<![CDATA[ jQuery.noConflict(); (function($) {   $(function() { ここに③で保存した「jquery.cycle.lite.js」のコードを貼り付けます。   }); })(jQuery); //]]> </script>

<script type="text/javascript"> //<![CDATA[ jQuery.noConflict(); (function($) {   $(function() { $(document).ready(function() {     $('.slideshow').cycle({                 fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...         }); });   }); })(jQuery); //]]> </script>

jquery.cycle.lite.js」のコードを貼付けます。とは、
jquery.cycle.lite.jsテキストエディタなどを使用しコードをコピーして
貼付けて下さい。

⑦Jimdoでスライドショーを貼付けたい所に、「+コンテンツを追加」をクリックして
「文章」→「追加オプション」→「HTMLを編集」をクリックし下記コードを書き込む。

<div class="slideshow">
 <a href="#"><img src="image01.jpg" alt="" width="" height="" /></a>
 <a href="#"><img src="image02.jpg" alt="" width="" height="" /></a>
 <a href="#"><img src="image03.jpg" alt="" width="" height="" /></a>
 <a href="#"><img src="image04.jpg" alt="" width="" height="" /></a>
 <a href="#"><img src="image05.jpg" alt="" width="" height="" /></a>
</div>

⑧リンクとイメージを書き込む。
<a href="#">の#にリンク先を書き込む。
<img src="image01.jpg" alt="" width="" height="" />のimage01〜05.jpgに
表示させたい画像のURLを貼付ける。
次に、画像サイズ(単位はpix)を入力。
width="ヨコサイズを入力" height="タテサイズを入力"
※単位(pix)は不要。

aについてはコチラ
imgについてはコチラ


⑨画像ファイルは下記のリンクページで紹介している方法を使うと簡単に出来ます。

【みんビズ/Jimdoでたまに耳にする「画像置き場」って何のことでしょうか・・?】
最近やっと意味を理解した | 今村だけがよくわかるブログ


画像を数枚貼付けると思いますので、画像URLをテキストなどを利用してコピペして
使うと良いと思います。


ぜひやってみて下さい。

参考ページ
【みんビズ Jimdoでもう少し柔軟なjQueryスライドショーを入れる】
jQuery Cycleを使ってシンプルなスライドを導入 | 今村だけがよくわかるブログ
【みんビズ/Jimdoでたまに耳にする「画像置き場」って何のことでしょうか・・?】
最近やっと意味を理解した | 今村だけがよくわかるブログ

JQuery Cycle Plugin

ポートフォリオサイト紹介

私のポートフォリオサイトを紹介します。

フェリカテクニカルアカデミーに在籍している時に作成したものです。

f:id:suge1040:20140826011511p:plain

 

Photoshopは使えた方が良い

Webデザイナーを目指すなら、Photoshopはマスターしておいた方がいいですよ!

やはり、Photoshopを使う機会が多いです。

私は、Illustratorの方が使いやすいので苦労しています。。。

IllustratorでWeb用に画像を作成する際の設定など

①新規でドキュメント作成する際は、ドキュメントをWebにする。

②線の中の”線を内側に揃える”を選択。

③表示→ピクセルプレビューにチェックを付ける。

④保存は、Webおよびデバイス用に保存(w)で保存

・画像サイズのアートボードサイズでクリップのチェックをはずす。

・プリセットをjpegPNG を選択。

カラーにならない!!

PhotoshopCS6を使っていて、色がカラーになりませんでした。

カラーモードの変更出来ないし。。。。

先輩に訊いたら新規でドキュメントを作成する時にカラーモードがグレースケールにしてしまうと、カラーに出来ないそうです。

へ〜!?そうなの!!

なので、新規で作成するときは必ずRGBまたはCMYKに設定して下さい。

PhotoshopCSでは、カラーになるんだけどな!なんでだろ???

macで記号や特殊文字を入力するためのショートカットキー

macで記号や特殊文字入力のショートカットキー

例)

· を入力するには、「Shift」+「Option」+「9」

• を入力するには、「Option」+「8」

 を入力するには、「Shift」+「Option」+「K」

é を入力するには、「Option」+「E」を押した後に「E」

参考ページ

ソース(HTML)でスペース(空白)を空ける記述

ソース(HTML)でスペース(空白)を空ける記述は2種類あります。

①&nsp;  ······ 空白が薄いのでたくさん空けたい場合には向いていない。空白欄に記入するのには良い。

②<span style="margin-right: 8em;"></span>  ······ 空けたい文字数分だけ空けられる。

※ 8emの部分に空けたい文字数を記述