Stylish Profile Gallery:インスタ風ギャラリーが作れる

2020年1月10日

インスタグラム風のギャラリーが作れる WordPress 用プラグインの紹介です。
それは「Stylish Profile Gallery」です。
その導入手順から日本語化・使い方と設定などを解説していきます。

Stylish Profile Gallery

Stylish Profile Gallery - WordPress.org

Stylish Profile Gallery は、インスタグラム風のギャラリーを無制限に簡単に作れます。
ギャラリーの表示は、ショートコードを使用して表示します。

記事を作成もしくは更新時点でのバージョン:1.1.0
マルチサイトでの利用:可

Gutenberg エディターでの動作

Gutenberg エディターに追加される機能は無いので、気にする必要は無いです。

Gutenbergでのショートコードの挿入手順

このプラグインは、ショートコードを使用します。
挿入手順については、下記の記事にて詳しく解説していますので、御覧ください。

Gutenberg でのショートコードの挿入手順 – WordPress活用術

インストール手順

下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化するか
Stylish Profile Gallery – WordPress.org

もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面から入手できます。

ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「Stylish Profile Gallery」と入力します。

WordPressプラグイン「Stylish Profile Gallery」の導入から日本語化・使い方と設定項目を解説している画像

検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。

プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。

WordPressプラグインのインストール手順を解説 – WordPress活用術

日本語化

Stylish Profile Gallery を有効化した際に日本語化されない場合には、
日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。

WordPress と関連プロジェクト(テーマ・プラグイン)用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。

※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。

日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。

WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術

専用メニュー

WordPressプラグイン「Stylish Profile Gallery」の導入から日本語化・使い方と設定項目を解説している画像

ダッシュボードの「プラグイン」メニューの下に追加されています。

管理画面

WordPressプラグイン「Stylish Profile Gallery」の導入から日本語化・使い方と設定項目を解説している画像

作成済みのギャラリー一覧。

使い方

ギャラリーを作成するには「Add Insta Gallery」ボタンをクリックします。

WordPressプラグイン「Stylish Profile Gallery」の導入から日本語化・使い方と設定項目を解説している画像

タイトルを入力し、ギャラリーで表示する画像を登録します。

WordPressプラグイン「Stylish Profile Gallery」の導入から日本語化・使い方と設定項目を解説している画像

画像を登録すると上のような感じになります。
ドラッグアンドドロップで画像の順番を入れ替えることができます。

プロフィール設定(Profile Settings)

WordPressプラグイン「Stylish Profile Gallery」の導入から日本語化・使い方と設定項目を解説している画像

Hide & Show Profile:
インスタ風のプロフィールを表示するかどうか。

WordPressプラグイン「Stylish Profile Gallery」の導入から日本語化・使い方と設定項目を解説している画像

  • Instagram Profile Image
    プロフィール画像を選択します。
  • Profile Title
    プロフィールタイトルを入力します。
  • Profile Description
    プロフィールの説明を入力します。

WordPressプラグイン「Stylish Profile Gallery」の導入から日本語化・使い方と設定項目を解説している画像

WordPressプラグイン「Stylish Profile Gallery」の導入から日本語化・使い方と設定項目を解説している画像

WordPressプラグイン「Stylish Profile Gallery」の導入から日本語化・使い方と設定項目を解説している画像

プロフィール画像は、コンピューター・URL・メディアライブラリーから選択できます。

WordPressプラグイン「Stylish Profile Gallery」の導入から日本語化・使い方と設定項目を解説している画像

  • Follow Button Text
    クリックするとインスタグラムの下記のユーザーネームのプロフィール URL にジャンプするボタンのラベルを入力します。
  • Instagram Username
    インスタグラムのユーザーネームを入力します。
  • Number Of Post
    インスタグラムの投稿数を入力できます。
    初期値:74
  • Number Of Followers
    インスタグラムのフォロワー数を入力できます。
    初期値:10
  • Number Of Followings
    インスタグラムのフォロー中の人数を入力できます。
    初期値:50

構成(Config)

WordPressプラグイン「Stylish Profile Gallery」の導入から日本語化・使い方と設定項目を解説している画像

Gallery Thumbnail Size:
ギャラリーのサムネイル画像のサイズを選択します。

WordPressプラグイン「Stylish Profile Gallery」の導入から日本語化・使い方と設定項目を解説している画像

デバイスに応じて表示する列数を選択できます。
上から large desktop/ desktop/ tablet/ phone の順になってます。

WordPressプラグイン「Stylish Profile Gallery」の導入から日本語化・使い方と設定項目を解説している画像

Hide Thumbnails Spacing:
サムネイル画像間に隙間を作るかどうか。

Gallery Thumbnail Order:
サムネイル画像の並び順を選択します。

アニメーション効果設定(Animation Effect)

WordPressプラグイン「Stylish Profile Gallery」の導入から日本語化・使い方と設定項目を解説している画像

Image Hover Effect Type:
ホバー時のアニメーション効果のタイプを選択します。

Image Hover Effects:
ホバー時のアニメーション効果を選択します。

WordPressプラグイン「Stylish Profile Gallery」の導入から日本語化・使い方と設定項目を解説している画像

Animation Eeffect:
ギャラリー初期表示時のアニメーション効果を選択します。

ライトボックス設定(Lightbox Settings)

WordPressプラグイン「Stylish Profile Gallery」の導入から日本語化・使い方と設定項目を解説している画像

Light Box Style:
ライトボックスのスタイルを選択します。

表示例

WordPressプラグイン「Stylish Profile Gallery」の導入から日本語化・使い方と設定項目を解説している画像

ギャラリーを表示するには、上のショートコードを記述するだけです。

WordPressプラグイン「Stylish Profile Gallery」の導入から日本語化・使い方と設定項目を解説している画像

実際に表示させると上のような感じで表示されます。

WordPressプラグイン「Stylish Profile Gallery」の導入から日本語化・使い方と設定項目を解説している画像

WordPressプラグイン「Stylish Profile Gallery」の導入から日本語化・使い方と設定項目を解説している画像

WordPressプラグイン「Stylish Profile Gallery」の導入から日本語化・使い方と設定項目を解説している画像

WordPressプラグイン「Stylish Profile Gallery」の導入から日本語化・使い方と設定項目を解説している画像

WordPressプラグイン「Stylish Profile Gallery」の導入から日本語化・使い方と設定項目を解説している画像

ホバー時のアニメーション効果を表示すると上のような感じになります。

代替プラグイン

Stylish Profile Gallery にほしい機能が無かった場合には、
Stylish Profile Gallery 以外にもギャラリーを作成できるプラグインを多数記事にしています。
以下では、Stylish Profile Gallery を含めて 20 個を簡単に紹介しています。
ギャラリーを作成できるWordPressプラグイン一覧

URL

Stylish Profile Gallery – WordPress.org

本ページはアフィリエイトプログラムによる収益を得ています