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

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

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

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

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

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

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

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

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

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

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

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

で、できたのがこちら↓

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

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

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

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

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

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://〜）で始まる
絶対パスで画像を入れてみてください。

画像の上の矢印を消す方法

スライド用の画像に
左右の矢印がついてしまい、
消すことができないと
悩んでいたのですが……

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

</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などで
おたずねくださいね。