【WPプラグイン】Shadowbox JSの導入・設置方法!画像をかっこよく表示!

こんちゃーっす、アマテラスです。

今日はかっこよく画像を表示させるプラグイン、

Shadowbox JSのご紹介です。

どんな感じがというと・・・

クリックしてください。

結構キレイに表示されてますよね。

色々なサイトを見ていて、

前から気になっていたので導入してみました。

HTMLに抵抗がある人は、

分かりづらいかもしれませんが、

導入自体は簡単なので大丈夫です。

ちなみに僕のこのブログでも使っていますし、

画像を多用するトレンドブログにも組み込んであるので、

画像をクリックした時の見栄えもよくなります。

Shadowbox JSの導入・設置方法

まずプラグインをインストールしましょう。

WPの管理画面から「プラグイン」→「新規追加」で、

「Shadowbox JS」を入力し検索します。

出てきたらインストールして、

有効化するだけでOKです。

次に以下のHTMLを<head>内の中に記述します。

 <link type=”text/css” href=”css/shadowbox.css” rel=”stylesheet” media=”all” />

<script type=”text/javascript” src=”js/shadowbox.js”></script>

<script type=”text/javascript”>Shadowbox.init();</script>

「外観」→「テーマ編集」→「ヘッダー」の中ですね。

大概このヘッダーの中に<head>タグはあります。

記述は最後の</head>の直前にでも入れておきましょう。

「haed」タグを探す時には、

「Ctrl+F」で検索窓が出てくるので、

そこに探したいワードを入れれば見つけやすくなります。

記述して「ファイル更新」したら完成です。

あとは実際にブログの画像をクリックすると、

動画のように画像が出てきます。

もし出てこないという場合は、

記述の位置が間違っているか、

僕が記載したHTMLが間違っているかもしれませんので、

その時は遠慮なく質問してもらえれば対応します。

やはりある程度ブログが形になってきて、

安定してくると少しでも他のブログと差別化したくなってくるので、

今後もオススメなのを見つけたら記事にしていきます。