kazu

wordpressで画像を挿入するときうまくいかないことが。

いろいろググってみてようやく解決しました。

「画像の横に文字が打てるようになってしまった…」
「画像が拡大しない」
「拡大した画像から元のページに戻ってこれない」

今回はこの悩みを解決する方法と、プラグイン「wp-jquery-lightbox」「Easy FancyBox」の使い方をご紹介します。

※1分ほどで読み終わる記事です。画像の拡大方法、ポップアップにする方法がわかります。

記事を書いているのは・・・

wordpress歴は計2年以上ですが、毎回ググっているため成長しないヘボヘボブロガーです。

※ブログが表示されないということが起こらないよう余計なことをしない精神でブログを書いています。アドバンスな使い方はさらにググってみてください。

そもそも2013年に舞台鑑賞日記をwordpressでスタート。その時テンプレート「賢威」を買うも仕事が忙しくなりたいして使わずに挫折。2018年にwordpressでブログを改めてスタート。しかし、100記事ほど書いたのに2回ブログが真っ白に…。もとに戻せずwordpressが嫌いに…。でもブログを続ける意思はあったので「はてなブログ」にお引っ越し。順調に200記事まで書くも2020年3月「はてなブログ」でも思うようにいかず。

2020年4月、wordpressにお引っ越し。ついに「賢威」を使う日が来ました!! 僕が持っていたのは「賢威6」だったので、カスタマーセンターに問い合わせ「賢威8」にアップデートしスタート。何をしたか記録していきます。

wordpressの画像アップで困った…。「jQuery lightbox」「Easy FancyBox」の使い方

画像を圧縮する

kazu

まずは下準備です。これをすると表示速度が早くなります。

重くならないように画像ファイルを圧縮しましょう。

基本は50kb以下になるよう気をつけています。大きくても100kbになるようにしています。

画像を挿入する

※「TinyMCE Advanced」というプラグインを使い、旧WordPressのエディターで編集しています。

ブログの投稿から左上にある「メディアを追加」をクリック。

次に「ファイルをアップロード」のタブを選択し、「ファイル」を選びます。

wordpressメディアを追加し画像を挿入する

そして「代替テキスト」を入力します。画像ファイルはネット上では情報が何もない状態です。この画像ファイルがなんのファイルかをgoogleに知らせる必要があります。そのときに「代替テキスト」を入れておくとファイルを見つけてもらえます。

wordpressメディアを追加する際代替テキスト、配置、リンク先を設定

「配置」は、「左」を選ぶと画像の右側にテキストを入力できるようになります。「中央」「右」だと左にテキストが入力できます。「なし」にすると画像の下にテキストが入力されます。

kazu

僕の失敗談。一回「左」に設定してしまったときのこと。

一回選ぶとその設定が継続されます。「左」に設定すると画像の横にテキストが入力できるようになります。ですが、僕は普通に画像の下からテキストを入力したかったのですが、どうがんばってもできない…。ググっても初歩すぎて方法が載っていませんでした。

ググったらhtmlコードを追加する方法を発見。「左」に設定してしまった場合、「<div style=”clear: both;”></div>」というhtmlコードを追加すると画像下からテキストが追加できるようになります。

ただし!!1番かんたんな解決策は「配置」を「なし」にすればいいだけの話でした。

「リンク先」は、「メディアファイル」を選ぶとクリックで拡大できるようになります(このブロックの画像はこの設定でアップしているので画像が拡大できるようになっています)。「なし」にするとクリックすることができなくなります。

最後に「サイズ」です。画像はビジュアルで大きさを自由に変えることができるので、どのサイズでもOKです。

ポップアップさせたい

このページでは画像をクリックすると大きくなり、「close」ボタンを押すと画像が元に戻るようになっています。これをするためにはプラグインを入れる必要があります。このサイトでは「wp-jquery-lightbox」というプラグインを使っています。ぼくはもう一つホームページを持っているのですが、そちらでは「Easy FancyBox」を使っています。

シンプルな「wp-jquery-lightbox」

とてもシンプルでサイトも重くならないのでオススメです。同じページにある画像をスライドショーとして表示してくれます。

プラグイン「wp-jquery-lightbox」をインストールする

「プラグイン」から新規追加し有効化します。その後「設定」から「jQuery Lightbox」を選択し、設定を行います。

jQuery Lightboxを設定する

調べたところ、この設定がイイみたいです。これをすれば今後一切、手を加える必要なく使えます。

ポップに画像を表示してくれる「Easy FancyBox」

こちらはマウスを画像に持ってくるとちょっと大きくなり、クリックするとビヨーンと拡大してくれるプラグインです。ポップな感じが好きです。

Easy FancyBoxの設定の仕方

こちらの設定は特にイジる必要はありません。そのままでOKです。

kazu

以上、画像を設定する方法でした!!