パズル調で画像の表示する「Image Puzzle」の使い方

ブログ記事作成で見やすくわかりやすくしようとすると
画像も大切になってきますよね。
説明的な画像はシンプルにするほうがいいですが
内容によってはアニメーションを付けて
目立つようにするのもありだったりします。
そこで小さなパズル調が破片が集まって画像を表示する
プラグイン「Image Puzzle」の紹介です。
エフェクトは数パターン用意されているので使いやすいですよ。
ここでは画像付きで設定、使い方を説明してるので参考にしてみてください。

Image Puzzleとは

WordPressで作成したブログ上で
小さなパズルが動きながら画像になるアニメーションを付加するプラグインです。
画像が表示されるまでのエフェクトが
4種類用意されているので好きなものを選ぶことができます。
また、画像の設置は事前に設定した画像のショートコードを使い
設置するタイプになっています。

プラグイン「Image Puzzle」のインストール

それでは始めていきましょう。
WordPressにログインしたら
ダッシュボードから「プラグイン」→「新規追加」へとクリックします。

プラグインを追加のページが表示されたら
キーワード検索欄に「Image Puzzle」と入力しましょう。
検索結果は、自動で反映されます。

Image Puzzleを見付けたら
「今すぐインストール」をクリックします。
＊下の方や右側、または違うページにある場合があります。

インストールが終わると「有効化」をクリックしましょう。

有効化すると自動でインストール済みプラグインのページに移動します。
もし、WordPressバージョンの違いで移動しない場合は
自分で「プラグイン」→「インストール済みプラグイン」に移動しましょう。

Image Puzzleのインストールは終わりです。

画像エフェクトの設定

ここでは投稿に貼り付けるためのエフェクト付き画像の設定をしていきます。
設定と言っても項目は２つなのですぐにできますよ。

それでは管理メニューから「Image Puzzle」をクリックしましょう。

すると設定ページが開くので
順番に進めていきましょう。

エフェクトを付ける画像を選びから始めるので
「Choose a media」をクリックしましょう。

メディアライブラリが開くので
好きな画像を選んで選んで「選択」をクリックします。

するとこのように画像が表示されますよ。

続いて、
画像が表示されるときのエフェクトを選んでいきますが
画像ではわかりにくいので動画で確認してみてください。

ここでは「Puzzle」を選びました。
すると下の項目に
「ショートコード」が表示されるのでクリックしてコピーしておきましょう。
＊投稿でこのショートコードを貼り付けます。

これで画像にエフェクトを付ける設定は終わりです。

設定した画像を投稿に貼り付け

ここでは作成したエフェクト付き画像を
投稿にショートコードを使って設置していきます。

管理メニューから
「投稿」→「新規追加」で通常の投稿記事作成ページに移動しましょう。

投稿作成ページが開いたら適当にタイトルを入力します。

そして、ショートコードを使うので
ここではクラッシックモードを表示させましょう。

まず、画像に合う適当な文章を入れてみました。
では、クラシックモードにある「表示」→「ソースコード」をクリックしましょう。

ソースコードが開いたら
コピーしていたショートコードを貼り付けましょう。
そして「OK」をクリックします。

本文スペースにショートコードが入ればOKですよ。

これで投稿に反映されていますよ。

エフェクト画像の確認

それではさっそくどのように表示されるのか
「プレビュー」から確認していきましょう。

するとこのようにエフェクトで小さな画像がパズル調に集まってきます。

そして、このように普通の画像が表示されます。

これでImage Puzzleの紹介です。

画像やアニメーション関連のプラグインは他にもいろいろありますよ。
タイルを並べたようにできる奇麗な画像ギャラリーや
画像をクリックすると拡大表示できるものがあります。
また、文字、画像にアニメーションを付けるもの
ブラウザータブでブログ名を流せるものもありますよ。
興味のある方はここより参考にしてみてください。

ギャラリープラグインで写真をタイルのようにレイアウトできるMeow Gallery Block(WordPress)

Meow Gallery BlockというWordPressのプラグインを使うと 画像をタイルのように並べてギャラリーが作れます。 違ったサイズの画像を混ぜるとスタイリッシュですよ。 画像付きで設定、使い方を説明してるので参考にしてみて下さい。

takuweb1.com

Meow Lightboxでギャラリーの写真をクリックで拡大表示！ Meow Galleryと併用をおすすめ

Meow Galleryの写真をクリックで拡大表示する プラグインMeow Lightboxの紹介です。 タイル型のギャラリーにポップアップ表示が付くとスタイリッシュで奇麗ですよ。 ここでは画像付きで使い方を説明してるので参考にしてみてください。

takuweb1.com

文字、画像にアニメーション付与するShortCodes Ultimateの設定と使い方(WPプラグイン)

WordPressブログ記事で使う文字、画像をアニメーションを付けて動かせる 便利なプラグインShortCodes Ultimateの紹介です。 また、他の機能が50以上あるので文字装飾もOK。 ここでは画像付きで設定、使い方の説明があります。

takuweb1.com

タブのブログ名にアニメーション効果「Stylish Scrolling Title」の使い方

ブラウザーのタブにはファビコンとブログ名が表示されますが ブログ名の文字に動きを付けると印象が変わりますよ。 そこでタブにあるブログ名を左右に動く プラグイン「Stylish Scrolling Title」の紹介です。 画像付きで使い方を説明してるので参考にしてみて下さい。

takuweb1.com

まとめ

ブログ記事に小さなパネルが集まって画像を表示するプラグインでした。
画像表示にエフェクトを付けるのは面白いですね。
アイキャッチ画像には向きませんが
イベントページやブログのジャンルによっては楽しいかと思います。
もし、画像にアニメーションを付けたいと思っていたら
一度試してみてはどうでしょうか。