MENU

メインビジュアルに特定ジャンルのランダム画像を表示する – SWELLカスタマイズ

SWELL-メインビジュアルに特定ジャンルの画像を表示

この記事にはプロモーションが含まれています

あらすじ

メインビジュアルにSWELLデフォルトのランダム画像を使う

SWELLERの方なら、わざわざメインビジュアルの画像をオリジナルで作成しなくても、カッコいい画像がランダムで表示される機能を使っている方も多いのでは。

タダでカッコいい画像が使える仕組みについては、以前ご紹介しました。

POINT OF VIEW　略して、ポイビュ…
メインビジュアルをミニマル風にカスタマイズ！ – SWELLカスタマイズ – POINT OF VIEW　略して、ポイビュー… とりあえず、メインビジュアルだけでもカッコよくしたい ブログのテーマをSWELLにしてから、ブロックエディタにもなれてきて、ブログを書くのが楽しくなってきました。 で…

おさらいもかねて、あらためてご説明しますね。

SWELLデフォルトのメインビジュアル「Lorem Picsum」とは

テーマをインストールした直後から、「さあ、はじめよう」というコピーと、カッコいいメインビジュアル画像が表示されます。

しかも、このメインビジュアル画像はアクセスするたびに違う画像をランダムに表示します。

SWELLの機能というよりは、画像ソースのURLに指定している「https://picsum.photos/」によりランダムに画像を表示しているのです。

このURL（https://picsum.photos/）のサイト、デザイナーの方ならご存じの、高画質・高品質なフリー写真をダウンロードできる「Unsplash」が提供する、「Lorem Picsum」というサービスで、アクセスするたびにランダムな画像を返してくれます。

Lorem Picsum
Lorem Picsum Lorem Ipsum… but for photos

SWELLでは、URLの後に「/1600/1200」を追記しています。

これにより「幅：1600px、高さ：1200px」の画像がランダムで返ってきますので、それがメインビジュアルに表示されるというワケです。

以下のサンプルの右下にある「Return」ボタンをクリックすると、ランダムな画像が表示されます。

See the Pen Lorem Picsum by yamowo claude (@yamowo) on CodePen.

「HTML」タブで見ていただくとわかると思いますが、

<img src="https://picsum.photos/800/600/">

<img>タグのsrc属性に、上記のようにURLを指定するだけで、ランダムな画像を取得することができます。

すばらしいサービスですよね。

ただ、ひとつ問題が。

いろんなジャンルの写真が表示されるので、ジブンのブログに合わない画像も表示される

そこで、今回のカスタマイズ内容としては、

ジブンのサイトに合う特定のジャンルの画像をランダムに取得する

といった内容になります。

「Unsplash Source」で特定ジャンルの画像をランダムに取得する

「Lorem Picsum」は、画像のジャンルを指定して画像を取得することができません。

そこで、特定のジャンル（キーワード）を指定して、ランダムに取得できるサービスが、「Unsplash Source」 です。

あわせて読みたい
Application Error

こちらも、本家「Unsplash」が提供するランダム画像取得サービスです。

以下のサンプルでは、「girl」というキーワードで絞り込んだ画像をランダムに表示しています。

「Return」ボタンをクリックしてみてください。

See the Pen unsplash by yamowo claude (@yamowo) on CodePen.

「HTML」タブから、ソースご確認ください。

<img src="https://source.unsplash.com/800x600?girl">

サイズ指定の後で、?girl というようにキーワードを設定すると、Unsplash内の画像の中から、そのキーワードでヒットした画像が取得できます。

上のサンプルソースで「?」の後のキーワードを変えて例：cat、「Return」をクリックしてみてください。

「Unsplash Source」 での絞り込みによるランダム画像の取得

「Unsplash Source」 では、以下の絞り込みができます。

キーワード絞込みによるランダム

URLの最後にコンマ区切りの検索用語のリストを指定することにより、ランダムな写真の選択をさらに絞り込むことができます。

例：https://source.unsplash.com/1600×900/?nature,water

特定のクリエイターからのランダム

「Unsplash」にアップしているクリエイターを特定して取得できます。

例：https://source.unsplash.com/user/ユーザーアカウント/1600×900

ユーザーの「Like」からランダム

ジブンのアカウントを持っている人は、「Like」した写真の中からランダムで取得することもできます。

例：https://source.unsplash.com /user/ユーザーアカウント/likes/1600×900

コレクションからランダム

特定のコレクションからランダムな写真を選択することもできます。

例：https://source.unsplash.com/collection/コレクションID/1600×900

ランダム間隔を指定して取得

1日間（daily）、または1週間（weekly）の間隔で、同じ画像を取得することができます。

例：https://source.unsplash.com/daily

上記の絞り込みにより、ジブンのサイトにあった画像をランダムに取得できるようになります。

カスタマイズ方法

さて、前置きが長くなりましたが、ここからは、上記で絞り込んだ「Unsplash Source」の画像を、メインビジュアルに設定するカスタマイズ方法です。

基本的にはコピペで完了します。

STEP
メインビジュアルの設定

カスタマイザーの「トップページ＞メインビジュアル」より設定します。

  • メインビジュアルの表示内容：　画像

にするだけですが、表示方法やサイズはサイトにあわせて設定してください。

メインビジュアルの設定方法については、SWELL公式サイトで詳しく説明されていますのでそちらをご確認ください。

SWELL
メインビジュアルの設定方法 | WordPressテーマ SWELL このページではSWELLの「メインビジュアル」機能の設定方法を解説していきます。 ちなみに「メインビジュアル」とは、トップページを開いた時に最初に目に飛んでくるエリア…
STEP
「Unsplash Source」 のURLを作成

ジブンのサイトにあわせて絞り込んだURLを作成します。

  • 例：https://source.unsplash.com/1600×1200?cat

サイズについては、SWELLのデフォルトでは「1600×1200」を設定していますが、ジブンのサイトにあわせて変更します。

STEP
JavascriptにURLを埋め込み

作成したURLを以下のスクリプトに埋め込みます。

<script>
document.addEventListener('DOMContentLoaded', function () {
  let imageSource = document.querySelector('.p-mainVisual__imgLayer img');
  if(imageSource != null) {
    imageSource.src = '';
    imageSource.src = 'https://source.unsplash.com/1600x1200?cat';
    imageSource.addEventListener('load', function () {
      imageSource.classList.add('fade');
    });
  }
});
</script>
  • 6行目：imageSource.src
    作成したURLを埋め込みます。
STEP
スクリプトをコピペ

作成した上記スクリプトをコピペします。

ペーストする場所は、トップページの作成方法により異なります。

  • トップページをデフォルトの状態で作成している場合
    カスタマイザーより「高度な設定＞headタグ終了直前に出力するコード」に上記スクリプトを貼り付けます。
  • トップページを固定ページで作成している場合
    固定ページの「カスタムCSS＆JS＞JS」に、上記スクリプトの<script>と</script>タグを削除して貼り付けます。
STEP
CSSをコピペ

デフォルトの「Lorem Picsum」に比べると、表示までにが若干タイムラグが発生するため、スクリプトでフェードイン処理を入れています。

フェードイン用の以下のCSSをコピペします。

.p-mainVisual__imgLayer img {
  opacity: 0;
}
.fade{
  animation: fadeIn 1s ease 0s 1 forwards;
}
@keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}
  • 5行目：animation: fadeIn 1s ease 0s 1 forwards;
    画像が読み込まれてから0秒後0sに、1秒1sかけてフェードインします。

CSSをペーストすう場所は、トップページの作成方法により異なります。

  • トップページをデフォルトの状態で作成している場合
    カスタマイザーの「追加CSS」に上記CSSを貼り付けます。
  • トップページを固定ページで作成している場合
    固定ページの「カスタムCSS＆JS＞CSS」に、上記CSSを貼り付けます。
STEP
完成

応用：メインビジュアル以外でも使えます

当ブログのトップでも、メインビジュアル以外のところで「Unsplash Source」の画像を使用しています。

「PICKUP VIEWPOINT」セクションの背景画像がそれです。

「フルワイド」ブロックの背景画像設定で、https://source.unsplash.com/800x600?girlを指定しています。

この場合、メインビジュアルのようにグレースケールにする設定がないので、以下のようにCSSでフィルターをかけています。

.swell-block-fullWide .__parallaxLayer {
  filter: grayscale(100%);
}

＼ ご支援ありがとうございます！ ／

くれぐれもカスタマイズは「自己責任」でお願いします^^;

当ブログでご紹介しているようなカスタマイズ（←本来の意味での）をしなくても、SWELLの基本機能だけで十分オシャレなブログ・サイトが構築できます。

テーマ選びに迷ったらSWELLを選んでおけば間違いないです！

（カスタマイズ沼にハマらないようご注意ください^^;）

SWELLを使用したブログの構築・カスタマイズのご相談承ります

本業の傍ら、SWELLを使用したブログの構築およびカスタマイズを承っております。
「おしゃれなブログにしたい」
「独自のカスタマイズをしたい」など、
お気軽にご相談ください。
詳しくは、TwitterのDMからどうぞ。
まずはTwitterで仲良くしてください ^^

#ヤモヲのひとりあそび

WordPressテーマ「SWELL」

17,600円（税込）

シンプル美と機能性の両立。圧倒的な使い心地を追求するWordPressテーマ。ブロックエディター完全対応！

ご購入はこちら
デモサイトを見る
あわせて読みたい
トップページをオシャレに！サイト型でカスタマイズする方法 – SWELLカスタマイズ こんなSWELLユーザーに読んでほしい「SWELLでトップページをサイト型でオシャレにカスタマイズしたい」「トップページをスクロールアニメーションで動きを持たせたい」
あわせて読みたい
メインビジュアルを背景に固定して表示する – SWELLカスタマイズ 以前こちらのデモページをご紹介した際に、「背景画像を固定するにはどうしたらいいですか？」と何件かお問い合わせいただきました。 写真やイラストを背景に固定するこ…
CUSTOMIZE
＋PLUGIN
KNOWLEDGE
SWELLカスタマイズ SWELLカスタマイズ - SWELLテーマ
SWELLカスタマイズ
シェアしていただけるとうれしいです^^
  • URLをコピーしました！
  • URLをコピーしました！

こちらの記事もよかったらどうぞ

あらすじ