bxSliderで画像スライドショーを作る|「プロに見える」ポートフォリオサイト作り

フリーランスイラストレーターとして
仕事をするなら、
ポートフォリオサイト
(ホームページ)が
あった方がいいんじゃないかな、
と思っています。

とはいえ、ポートフォリオサイトの
更新が死んでいても
ブログを更新しているだけで
ご依頼いただけたりするので、
「絶対に必要」かどうかは
ビミョーなところですが。

おとといの記事にて
「なる前に名乗るのが大事」
という話を書きましたが、
肩書きを名乗ったからには
「プロに見えるサイト作り」
を目指していきましょう!

プロっぽいサイトって何か

わたしは中3くらいから
趣味でイラストサイトを作ってたような
オタクだったので、
ウェブサイト作成自体は
問題なくできるのですが…

「プロっぽいサイトとは何か」
に悩んでいました。

で、イラストレーターに限らず
色々な方のサイトを見ていて
行き着いた感想がこれです。

◎トップ画像がだいたいみんな
デカい(横幅いっぱい)

◎トップ画像が自動でスライドしたり
アニメーション的な特殊効果が
あったりなんかする

そう、トップ画像がデカくて動くと
プロっぽい
(かっこいい)のです。

「別に仕事くるからええじゃないか」
と思って放置してたけど、
わたしもそろそろフリーランスになって
8年になろうとしているので、
もっとトップページを
プロっぽくしようと思いました。

で、できたのがこちら↓

ポートフォリオサイトのトップページ
画像クリックでサイトへ飛べます

手っ取り早くスライドするならbxSlider

わたしはHTMLタグが好きなのですが、
かといってプロのSEほどは読めないです。

とりあえず手っ取り早く
格好良くなればいいので、
jQueryを利用した
「bxSlider」ってやつを使いました。
 ↓
https://bxslider.com/

bxSliderキャプチャ1

トップページの右上か
上部真ん中に「Install」って
ボタンがあるので(2019年9月現在)
それを押してください。

そしたらこういう画面が出ます。
 ↓

bxSliderキャプチャ2

CDNでの使用ができるので、
わたしはそっちでやりました。

ダウンロードして自分のサーバに
あげた方が安心という方は、
ちょっと下の方にある
ダウンロードリンクを押してください。

<script>〜</script>内に
オプションを入れれば
色々なことができます。

わたしはとりあえず
「自動でスライドしてほしい」
「待ち時間を基本より長くしたい」
と思ったので、
下記の内容でhead内に入れています。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>	

<script type="text/javascript">
        $(document).ready(function(){
            $('.slider').bxSlider({
                auto: true,
                pause: 6000,
            });
        });
</script>

「auto:」が自動スライド、
「pause:」というのが待ち時間ですね。

オプション一覧は下記記事に
掲載されていましたので、
気になる方はどうぞ。
 ↓
bxSliderの使い方と「オプション」によるカスタマイズ

head内に入れるのが終わったら、
次はbody内の
「スライドを表示させたい場所」へ
指定のソースを入れます。

わたしはこんな感じで入れました。

<div class="slider">
    <div><img src="img/top/〇〇.jpg" alt="画像の説明"></div>
    <div><img src="img/top/〇〇.jpg" alt="画像の説明"></div>
    <div><img src="img/top/〇〇.jpg" alt="画像の説明"></div>
</div>

上記は相対パスで入れているのですが、
相対パスがよくわからない方は
https://〜(またはhttp://〜)で始まる
絶対パスで画像を入れてみてください。

bxSliderは左右の矢印を
消すことができないので、
(たぶん。色々やったけどだめだった)
スライド用の画像を作るときは
矢印の位置に大事な文字などが
かぶらないようにご注意くださいね。

追記:矢印消せました

当サイトの難しいこと担当・
ちえぞーさんこと鈴木千絵さん
矢印の消し方を教えていただきました…!

</script>の後に下記のCSSを
入れたら消せます(↑-↑)
(ちなみにわたしは自動でつく白枠を消して
横幅いっぱいにしたかったので
その指定も入れています)

<style type="text/css">
.bx-wrapper {
  margin: 0 !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: none !important;
  background: none !important;
}

.bxslider img{
  width: 100% !important;
  height: auto !important;
}

.bx-wrapper .bx-prev {
    visibility: hidden !important;
}
.bx-wrapper .bx-next {
    visibility: hidden !important;
}
</style>


※矢印だけ消したい方は
<style type=”text/css”>〜</style>の中に
下記だけ入れればOKです。
 ↓

.bx-wrapper .bx-prev {
    visibility: hidden !important;
}
.bx-wrapper .bx-next {
    visibility: hidden !important;
}

最近の主流はjQueryを使わないらしい

いろいろ調べて、最近は「jQuery」を使わない
Swiperが主流だぜ! というのも
見たのですが、実装しようとしたら
ぜんぜん動かなかったのであきらめました。

Swiperの方が気になる方は
下記のサイトをご覧ください。
(人様の記事です)

レスポンシブ対応でjQuery不要の高機能スライダー「Swiper」

【実例12パターン】画像スライダーはSwiper使っておけば間違いない!実用的な使い方を紹介

この通りやったけどまったく出来ず…。
うちのサイトは他にも
色々変わったことをしているので
それとの相性でできなかったのかも
しれません。知らんけど。

とりあえずbxSliderは
素人でも実装できたので、
「HTMLはちょっと分かるけど、
専門的なことまではわからない…」
という方はいっちょやってみては
いかがでしょうか。

どうしてもできない方は、
プロに頼みましょう。
ちなみにわたしは、自分の力でできないことは
ちえぞーさんこと鈴木千絵さん
お願いしています。

こちらの記事でも
ちえぞーさんのことを
ご紹介しております。
 ↓
ポートフォリオサイト、もっとわかりやすくしたい!(日本語版のみ)

ちなみに
「クリエイター・カウンセリング」
ポートフォリオ制作の補助をする
オプションもございますので、
気になる方はお気軽に
お問い合わせくださいね。

ごきげんよう、さようなら。

* * *

◎クリエイター・カウンセリングと
 一般のカウンセリングを
 承っています。
 申込・詳細はこちら
 ↓
日本中どこからでも受けられる
カウンセリングサービス
「ぱりことば。」


◎記事執筆やイラスト等の
ご依頼は下記メールフォームか
SNS・LINEでお問合せください。
まずお見積もりをお出しします。
 ↓
【ご依頼・お問合せフォーム】

* * *

ご質問や心配なことなど、
お気軽にLINEやSNSなどで
おたずねくださいね。

◎LINEのお問い合わせはこちら

友だち追加

※LINEアプリ内で「@palicosp」で検索しても出てきます

◎巴(ともえ)のSNS
◎Twitter @palicosp
◎Facebook @palicosp
◎Instagram @palicosp

* * * * *

◆巴の活動&企画◆◆
無料・活動紹介マガジン申込ページ
イラスト業務ポートフォリオはこちら
ネコ雑貨のオンラインショップ