nobigawa.com

アラフォーフリーランサーの気のまま雑記ブログ

ブログ運営

初心者でも簡単に画像をポップアップされるプラグインを使ってみた

投稿日:2017年4月23日 更新日:

スマホ1

プロ引きこもりの、のびがわです。
相変わらず今日も引きこもりまくっています。

ふと他人のブログを見て、画像をポップアップするプラグインを知りました。
自分もぜひ使ってみたいと思いました。

ということで、今回は画像をポップアップできるプラグインを紹介します。

Simple Colorboxとは

画像をポップアップできるプラグインはいくつかありました。
その中でも設定が簡単でテンプレートを弄らなくてもいいものを選びました。

それは「Simple Colorbox」です。

しつこいですけど画像をポップアップして表示させるプラグインです。
ポップアップ先の画像はそのままで記事に貼り付けてある分を縮小すればサイトの表示スピードアップできます。

またスライドショーもできるし便利ですね。
英語なのは気になりますが、設定は簡単です。

Simple Colorboxの設定

まずはインストールします。

Simple Colorboxのサイトからダウンロードしてプラグインのアップロード
またはプラグインの検索から「Simple Colorbox」と入力してダウンロード。

simple-colorbox画像

そのまま有効化します。
これで使えます。

簡単ですよね?
特に設定がいらないのがポイントです。
自分のような初心者にはうってつけです。

画像の貼り付け

画像の貼り付けも簡単。

投稿画面の時でメディアを挿入を選択。

メディアに画像があれば対象の画像を選択。
なければ「ファイルをアップロード」で対象の画像を選択しアップロード。

右側の添付ファイルの詳細タブの下の方にある「添付ファイルの表示設定」で設定をします。

添付ファイルの表示設定画面

配置は無難に「なし」がいいでしょう。
他の選択肢だと表示のズレが出るので設定が難しいです。

「左」に設定して右側に文章を書くこともできるようですが、慣れてからにします。

リンク先は「メディアファイル」を選択します。

もし画像を他のサーバーに保管してある場合は「添付ファイルのページ」を選択
その下に画像のアップロード先URLを入力します。

サイズは統一感をもたせたい場合は「中」がいいと思います。
縦か横が300pxで調整されます。

「中」の方が画像の読み込み時間が速くなります。
コンテンツの表示が速いのはSEOにも優しいです。

「小」はサイズが小さく画像が見にくくなる恐れがあります。

あとは「投稿に挿入」をクリック。

これだけです。

どんな感じで表示されるか?

試しに中サイズの画像とフルサイズの画像を埋め込んでみました。

画像をクリックすればポップアップされます。

ポップアップ画像

フルサイズは画像サイズそのままポップアップされます。

おまけ

SEO対策の為にも代替テキストは入力しておいた方がいいですね。
画像が見つからなかったり壊れていたり読み込めなかった時にこの文が表示されます。

代替テキスト入力画面

検索エンジンが画像を認識する際、代替テキストを頼りにします。
入力されていないと画像の存在をスルーすることになります。
ちなみに代替テキストはalt属性です。

またキャプションを入力しておくと画像の下にその内容が表示されます。
wp-caption-textクラスが該当ですが、よくわからない場合は弄らなくてもいいのかも。

代替テキスト、キャプションは画像の挿入時、添付ファイルの詳細で入力できます。

終わりに

自分のブログですが、画像に関しては特に細かく設定していませんでした。
画像は自分が撮ったもの以外は素材サイトから適当に引っ張ってきました。
ブログに貼り付ける前に画像サイズを圧縮するくらいです。

ちなみに画像サイズの圧縮はTinyPNGを利用させてもらっています。

「Drop your .png or .jpg files here!」をクリックして対象のファイルを選択するだけで圧縮されたファイルができます。
あとはダウンロードして使えます。

-ブログ運営
-, , ,

Copyright© nobigawa.com , 2019 All Rights Reserved.