ホームぺージにはWordpressを利用する機会が多くなってきております。

「ホームぺージ制作会社から勧められたからそれにした。」ではなく、ワードプレスの良い点を理解して導入することにより、効果は数倍に膨れ上がりますので、是非この記事を確認して知識を増やしてください。

2022.09.25

WordPress(ワードプレス)まとめ記事　基礎知識編

基礎知識 今、WEB集客のためにホームページ制作するならWordPressなんでしょうが、、、そもそもWordPressって何？ ...

WordPress(ワードプレス)まとめ記事　アップデート・バックアップ編

WordPressのアップデートやバックアップについては当社にもよく相談を頂きます。

ただ、トラブルが起きて相談を頂いた時点で、既に私たちにもどうにも出来ない事が多いので日頃からこまめにバックアップをしてアップデートをしておきましょう。

2022.09.22

WordPress(ワードプレス)まとめ記事　アップデート・バックアップ編

アップデート WordPressを安全かつ簡単に手動で最新版に更新(アップデート)する方法 WordPressはセキュリティ強化...

WordPress(ワードプレス)まとめ記事　HTMLタグ・編集方法編

WordPressで制作をさせて頂いたお客様から編集方法についてよく相談を頂きます。

WordPressについては当社で発明・開発したものではないので正直なところ、完璧に理解をしているわけではないので時々回答に困る事があります。

今回の記事の「改行」についてはまさにそうで・・・。
法則性があるんでしょうが・・・・複雑すぎて理解が出来ません。
その環境で出来る改行方法を探して、その方法を見つけるのが正解という状況です。

そんな状態に少しでもお役立てれば良いかな・・・という記事を集めてみました。

2022.09.23

WordPress(ワードプレス)まとめ記事　HTMLタグ・編集方法編

HTMLタグ WordPressを利用したブログで改行を行うときに使用するHTMLタグと正しい使用方法 WordPressを利用...

WordPress(ワードプレス)まとめ記事　プラグイン編

このWordpressのプラグインはWordpressを多く人が利用している一つの理由です。
そして、とても便利で、多くのプラグインが無料で提供されています。

しかし、同じケースで利用が出ると予測できるものでもプラグインの数が多いのでどのプラグインが良いのか判断が出来ない事が多いの事実です。

そんなプラグインの選択でお困りの場合は、下記の記事を参考にしてください。

2026.03.22

岡山の採用は「5.10倍」の時代へ。1人を5社で奪い合う超・人手不足でも、無名企業が若手に選ばれ続けるロードマップ

この記事の対象者 岡山県内で「求人を出しても1ヶ月以上応募ゼロ」が当たり前になっている経営者 大手企業や県外企業に、地元の優秀な...

まとめ

WordPressについて記載している記事のまとめ記事をお届けしました。

WordPressを利用しているホームぺージでトラブルが起きた！とかお困りの事があればこのまとめ記事を利用して改善を図ってください。

それでも、改善が出来ない場合は、エクセレントにご相談頂ければと思います。

▼該当サービス

無料相談の流れ

1.お申込み

下記お申込フォームより、お気軽にご連絡ください。

2.日程調整

担当より日程のご連絡をいたします。

3.無料相談

30分程度の相談会を実施いたします。

4.商談

弊社サービスをご検討頂ける場合には、お見積もりやサービスのご案内をさせて頂きます。

無料相談　ご利用後の流れ

しつこい電話セールスなどは一切いたしません。逆に、弊社サービスをご検討頂ける場合には、お見積もりやサービス内の詳細についてご案内をさせて頂きます。

ただ、メルマガの登録だけお願いします。
このメルマガでは新サービスの案内やコラムの更新情報のご案内をしております。

メルマガの解除はいつでもできますので、そこだけご理解とご協力をお願いいします。

▼お申し込みはこちらから

wordpressを利用したWeb制作が得意な会社　株式会社エクセレント

The post WordPress(ワードプレス)まとめ記事　　総まとめ編 first appeared on ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント　岡山.

今回は、「適切なサイズの画像」の改善方法についてお伝えいたします。

今回も基本、Wordpress(ワードプレス)を使用しているホームページでの対応策の案内となりますのでご注意下さい。

▼参考記事

2022.05.27

超簡単！ページ表示速度の改善方法は、PageSpeed Insightsが診断した上で改善方法を提示してくれます

ぺージの表示速度の改善方法 Webサイト(ホームぺージ)をクリックしてページが表示するまでに3秒以上かかってしまうと、半数以上のユーザーが...

さて！
その改善には以前、「次世代フォーマットでの画像の配信」の記事でご紹介いたしましたワードプレスのプラグインEWWW Image Optimizerを今回も利用します。

▼参考記事

2022.06.06

「次世代フォーマットでの画像の配信」をプラグイン　EWWW Image Optimizer　でスピード解決する方法　

PageSpeed Insights　改善シリーズの新作です。 ▼該当記事 今回は、「次世代フォーマットでの画像の配信」につ...

さて、早速に行ってみましょう！！

適切なサイズの画像とは？

200KB以下にする

ズバリ！！
「適切なサイズの画像とは」画像1枚のファイルサイズが「200KB」が目安となります。

そして、Googleの発表によると、1ページの容量は「1.6MB以内」が目安となります。

はて？？

そうなるとですよ。。。。

本文以外のサイトデータも考慮すると、200KB以下の画像だと1ぺージに5～6枚が良いという事になります。もっというなら、、、1ぺージに5～6枚以下が望ましいということになります。

うーーん。
そうなると・・・ページの内容によりますが・・・。
最近のほとんどのページは1ぺージに画像5～6枚で1.6Mの実現なんて不可能ですよね。ww

ということで・・・・あくまでも、画像については1ぺージに5～6枚を努力目標とする程度で良いと思います。

横幅は1,000px程度にする

ズバリ！！横幅は1,000px程度あれば問題ありません。
ちなみに、このサイトでは記事で使用している画像の横幅は「700px」です。

サイドナビがある場合は・・・700px～800px
サイドナビが無い場合は・・・1000px程度

に納める事を推奨いたします。

画像の高さは定番の比率を参考にする

ズバリ！！一般的な比率が良いです。ここはあくまでも見た目のバランス重視です。

一般的な比率とは下記を参考してください。

16:9（横幅1000px → 高さ562px）
4:3（横幅1000px → 高さ750px）
3:2（横幅1000px → 高さ666px）

ちなみに、、、余談ですが・・・縦横の比率と言えば・・・
日本でよく使われている名刺のサイズで有名なお話があります。

名刺の比率は1:1.654の黄金比というもので作られています。このサイズは、人間がもっとも美しいと感じる比率と言われています。

この比率は古代から現代までに様々な作品に取り入れられています。例えば・・・・

などなど・・・・。

何気なく作ってるのかな？と思っていた作品にはしっかりとした理由があるという

余談でした・・・。

画像最適化におすすめのツールやプラグイン

さてさて、いよいよ本題。
WordPressで制作しているホームページをEWWW Image Optimizerを利用してスピード解決する方法について説明していきます。

EWWW Image Optimizerの機能は「新規画像の圧縮」と「既存画像の圧縮」の2つです。
「新規画像の圧縮」では、プラグインが有効化されている状態であれば、画像をWordPressに追加する際に自動的に圧縮されます。

プラグインが有効化されている状態で、メディアの「一括最適化」を選び、「最適化されていない画像をスキャンする」を選択するだけで、「既存画像の圧縮」ができます。

非常に簡単に利用できるため、WordPressでホームページを運営しているなら、おすすめしたいプラグインです。

さて、今回もインストール方法からご紹介いたします。

インストール方法

プラグインの新規追加で検索窓にewwwと入れると検索結果に出てきます。

【今すぐインストール】を押し、有効化すれば完了です。

設定方法

初期設定

プラグインからEWWW Image Optimizerを探して【設定】を選択します。

上側のチェックボックスは目指す目標を選択します。
選択した方に最適な設定を推奨してくれるようになります。
両方にチェックを付けても大丈夫です！

下側のチェックボックスは有料のサポートが必要か、無料モードの選択になりますので【今は無料モードのままにする】にチェックを入れて【次】を押します。

基本的にはデフォルト状態のチェック項目のままで問題ありません。
初期設定が完了した後でも変更出来るのでご安心ください。

• メタデータを削除
  メタデータとは簡単に言えばデータのデータです。作成日やサイズなど、写真の場合は撮影した位置情報もメタデータです。このデータを削除することで画像の軽量化につながります。
• 遅延読み込み
  遅延読み込みはファーストビュー以外の画像を後から後から表示します。初期表示の高速化になりますのでチェックしておいてください。
• WebP変換
  画像サイズを自動的にリサイズする機能です。
  後から変更出来るのでとりあえずの数値で構いません。
• 埋め込みヘルプ
  チェックあり。
• 著名の報告
  チェックなし。

【設定を保存】を押します。

【完了】を選択して初期設定は以上です。

画像リサイズ設定

初期設定が終わったら通常の設定画面に切り替わりますので、こちらでリサイズ設定をします。

画像リサイズという項目でピクセル数の設定ができます。

ホームぺージでの定番のサイズは、上記で説明しましたように1,000px程度ですので、ここでは1,000とします。

あくまで上限サイズの指定なので、上限サイズより小さい画像は関係ありません。
大きいサイズの画像を軽量化するために、わざわざリサイズしてアップロードするのが面倒な時に役に立つ機能です。

高さの上限は基本的に0のままがおすすめです。
0にすることで幅の縮小比率に合わせて自動でリサイズされます。

設定が完了したら忘れずに【変更を保存】を押します。

以上の作業が完了すれば、これからアップロードする画像は自動的にリサイズされてアップロードされるようになります。

一括最適化

次は既にアップロードされている画像を一括で最適化する方法を説明していきます。

ここで注意が必要なのは一括最適化を行った画像は、元に戻すことができないという事です。
あらかじめ画像のバックアップをとっておきましょう。

設定画面の上の方にある【一括最適化】を選択します。

【最適化されていない画像をスキャンする】を押します。

最適化できる画像が〇〇点ありますと出るので【〇〇点の画像を最適化】を押します。

完了になれば最適化終了です。

まとめ

簡単な設定で自動的にリサイズしてくれるのでとても便利なプラグインです。
さらに既にアップロードされている画像も一括で最適化出来ます。

▼該当サービス

SEO対策が得意なホームぺージ制作会社エクセレント

The post 「適切なサイズの画像」をプラグイン EWWW Image Optimizer でスピード解決する方法 first appeared on ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント　岡山.

▼該当記事

2022.05.27

超簡単！ページ表示速度の改善方法は、PageSpeed Insightsが診断した上で改善方法を提示してくれます

ぺージの表示速度の改善方法 Webサイト(ホームぺージ)をクリックしてページが表示するまでに3秒以上かかってしまうと、半数以上のユーザーが...

今回は、「次世代フォーマットでの画像の配信」についてお伝えいたします。

EWWW Image Optimizerとは

EWWW Image Optimizerとは、画像を圧縮して表示速度を高速化するプラグインです。
ただ圧縮するではなく画像を劣化させることなく画像サイズを圧縮してくれます。

プラグインをインストールしておくだけで、新しくアップロードする画像を自動的に圧縮してくれる優れもの！！

また既存の画像も一括で圧縮できるので、SEO対策には欠かせないプラグインです。

EWWW Image Optimizerが出来る事

そんなEWWW Image Optimizerは画像を圧縮してくれるほかに、次世代フォーマット画像WebPへの変換作業もできるという優れものです。

そう！「次世代フォーマットでの画像の配信」問題はEWWW Image Optimizerを利用した次世代フォーマット画像WebPへの変換という事で解決です。

WebPとは

WebP（ウェッピー）とは次世代フォーマット画像の一つで、高圧縮でありながら、高解像度を維持できるGoogleが開発した画像拡張子です。ファイルの拡張子は「.webp」と表示されます。

jpegと同じ解像度にも関わらず、30％近く容量が軽く、アニメーションの表現もでき、PNGのような透過表現にも対応しています。まさに次世代の画像フォーマットですね。

では、早速にインストールしていきましょう。

インストール方法

プラグインの新規追加で検索窓にewwwと入れると検索結果に出てきます。

【今すぐインストール】をクリックし、有効化すれば完了です。

設定方法

プラグインからEWWW Image Optimizerを探して【設定】をクリックします。

初期設定

上側のチェックボックスは目指す目標を選択します。
選択した方に最適な設定を推奨してくれるようになります。
今回はサイト表示スピードの向上が目的なので【サイトの高速化】にチェックを入れます。

下側のチェックボックスは有料のサポートが必要か、無料モードの選択になりますので【今は無料モードのままにする】にチェックを入れて【次】を押します。

基本的にはデフォルト状態のチェック項目のままで問題ありません。

• メタデータを削除
  メタデータとは簡単に言えばデータのデータです。作成日やサイズなど、写真の場合は撮影した位置情報もメタデータです。
• 遅延読み込み
  遅延読み込みはファーストビュー以外の画像を後から後から表示します。初期表示の高速化になりますのでチェックしておいてください。
• WebP変換
• 1920幅の1920高さの上限で設定してください。
• 埋め込みヘルプ
  チェックあり。
• 著名の報告
  チェックなし。

以上を確認して頂いて【設定を保存】を押します。

【完了】を押せば初期設定は以上です。

基本設定

不足している寸法を追加にチェックするとレイアウトシフト対策になります。
不都合が起きたらチェックを外しましょう。

また、ブログで使用する画像幅を均等にする場合は画像のリサイズの幅を設定してください。
アップロードする画像が指定したピクセルより大きければ自動的にリサイズしてアップロードしてくれます。ただ大きく表示したい画像もリサイズされてしまうので注意しましょう。

WebPの設定

アップロードする画像を自動的にWebPに変換する設定です。

【WebP変換】にチェックを入れると、その下に.htaccessに書き足すコードが出てきます。これはWebP非対応のブラウザに対し、jpgやpngを代用する設定になります。

.htaccessはftpを使用して編集をします。ftpの使用方法は下記の記事を参考にしてください。

▼参考記事

2022.04.15

FFFTPの基本的な使い方をダウンロード方法から解説します

FFFTP（エフ・エフ・エフ・ティーピー）とは、Windows専用の無料で使える日本人が開発したFTPクライアントソフトウェアです。 ...

新しいブラウザはほぼWebPに対応していますが、古いブラウザや非対応のブラウザのために画像を表示できるようにする設定です。

コードは# END WordPressの直前にペーストすればOKです。
ペーストが完了したら保存しましょう。

.htaccessの編集が完了したら【リライトルールを挿入する】を押します。

緑色でWebPに変更されれば完了です。
【変更を保存】を押して設定を保存して下さい。

以上でこれからアップロードする画像は次世代フォーマット画像へ自動的に変換されます。

画像のWebP変換と圧縮

次はアップロード済みの画像の変換・圧縮作業に移ります。
引き続き設定画面での作業です。

設定画面の上の方にある【一括最適化】を選択します。

【最適化されていない画像をスキャンする】を選択します。
※一括最適化はWordPressダッシュボードのメディア→一括最適化があります。どちらから作業しても大丈夫です。

最適化できる画像が〇〇点ありますと出るので【〇〇点の画像を最適化】を押します。

完了になれば最適化終了です。

まとめ

簡単な操作で次世代フォーマットの画像に一括変換でき、アップデートする画像も自動で次世代フォーマットに変換してくれとても便利です。

もし、上手く設定出来ない時はエクセレントまでご相談頂ければと思います。

▼該当サービス

SEO対策が得意なホームぺージ制作会社エクセレント

The post 「次世代フォーマットでの画像の配信」をプラグイン　EWWW Image Optimizer　でスピード解決する方法　 first appeared on ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント　岡山.

とても便利なプラグインですが、初めて使った時は手間取ったのを憶えています。しかし、最近になって「Contact Form 7」よりも設定が簡単な「WPForms」というプラグインがあると聞いて、実際に使ってみました。

WPFormsのインストール

左メニュー　プラグイン　＞　新規追加　をクリックします。

プラグインの検索に「WPForms」と入力し、「今すぐインストール」をクリック、「有効化」をクリックします。

WPFormsでフォームを作成

左メニュー　WPForms　＞　新規追加　をクリックします。

フィールドを追加

「フォームに名前を付ける」のテキストボックスに任意の名前を入れます。
「テンプレートを選択」で好きなテンプレートを選びます。
今回は「空白のフォームを作成する」を選択しました。

「フィールドを追加」から使いたいフィールドをクリック、または右の画面へドラッグ＆ドロップします。

フィールドを編集

追加されたフィールドをクリックすると、フィールド設定ができます。
ラベルの変更や、説明の追加、必須の選択を行います。

編集が終わったら、「フィールドを追加」をクリックし、次々に必要な項目を追加します。
先ほどと同じ手順でラベルの変更等を繰り返します。
順番を入れ替えたい時はドラッグ＆ドロップで簡単に入れ替えることができます。
入力が終わったら、右上の「保存」ボタンをクリックしましょう。

通知の編集

フォームから情報が送信された時、デフォルトではWordPressで設定しているアドレス宛に通知メールが届きます。

お客様にも、自動返信メールが届くように設定を変更します。
左メニュー「設定」＞「通知」をクリックします。

「送信先メールアドレス」の変更

「送信先メールアドレス」には、{admin_email}が入力されています。
右上の「スマートタグを表示」をクリックします。

「メールアドレス」をクリックします。

すると、{admin_email}の横に{field_id=”*”}が表示されます。(*の数字は設定によって異なります)
{admin_email}と{field_id=”*”}の間に半角のカンマ「,」を追加します。

設定をミスすると、どちらのアドレスにもメールが送信されなくなるので注意してください。

メール件名やメールメッセージの変更

仕様上、お客様と自分宛に届く通知メールが同じ内容になるため、お客様に向けたメール内容になるよう編集します。

メール件名やメールメッセージを変更すると良いでしょう。メールメッセージ内の{all_fields}は、お客様の入力してくださった内容をメール内に表示させるタグなので、消さないように注意してください。

入力が終わったら、右上の「保存」ボタンをクリックします。

reCAPTCHAの設定

スパム対策のため、reCAPTCHAを設定していきます。
右上の「×」ボタンをクリックし、フォームの概要ページに戻ったら、左メニューから「設定」をクリックします。

「CAPTCHA」をクリックし、「reCAPTCHA」をクリックします。

下にスクロールすると、サイトキーなどの入力画面が表示されるため、そこに必要な情報を入力し「設定を保存」ボタンをクリックします。

reCAPTCHAのキーが不明な場合、以下の手順で取得してください。

reCAPTCHAのキー取得

Googleにログインした状態でhttps://www.google.com/recaptcha/about/にアクセスし、「v3 Admin Console」をクリックします。

新しいサイトを登録する画面が表示されるので、情報を入力します。

ラベル…サイトのドメインを入力
reCAPTCHA タイプ…reCAPTCHA v3を選択
ドメイン…サイトのドメインを入力
reCAPTCHA 利用条件に同意する…チェックを入れる
「送信」ボタンをクリックする。

登録が完了し、サイトキーとシークレットキーが表示されます。

フォームへreCAPTCHAを設定

フォームの編集画面に入り、「reCAPTCHA」をクリックし保存します。

フォームを設置

いよいよ、ページにフォームを設置していきます。
左メニューから「すべてのフォーム」をクリックし、先ほど作成したフォームの「編集」をクリックします。

右上の「埋め込む」をクリックします。

「新規ページを作成」をクリックします。

任意の名前をつけ、右のボタンをクリックします。

新規固定ページ作成の画面が表示されるので、「公開」ボタンをクリックします。
必要に応じて、パーマリンクやアイキャッチ画像など変更してください。

このようなフォームを作ることができました。
必要に応じてCSSで見た目の調整を行ってください。

動作確認をして、問題なければ完成です！

まとめ

この記事を書くにあたって初めて「WPForms」を使いましたが、初めて使うプラグインなのに全くストレスを感じることなく使うことができました。

「Contact Form 7」と比べて、機能も遜色なく直感的にフォームを作ることができるので、初心者の方には「WPForms」の方がおすすめできると感じました。普段から「Contact Form 7」を使いこなしている方からすると、一部のフィールド（電話・日付/時間・サイト/URL等）と、メール通知の分岐が有料なのが不満に感じる点かもしれません。

どちらも優れたプラグインなので、柔軟に使い分けていきたいと思います。

「設定でつまづいた」「作業する時間が無い」という方、エクセレントでの代行も可能です。お気軽にご相談ください。

The post WordPressで reCAPTCHAの設定も出来るWPFormsという便利なプラグインがとても使い勝手が良い件 first appeared on ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント　岡山.

そんな時はUrvanov Syntax Highlighterというプラグインがとても便利です！なんと、このプラグイン記事中にソースコードを簡単に埋め込むことができます。

直接記述出来ない文字や記号を文字実態参照に置き換える必要がないので、「HTML」「CSS」「PHP」等を解説する時に使うと便利です。preタグで囲むだけで機能し、ブロックエディターにも対応しているという優れもの。

preタグについてはこちらの記事に詳しく説明しておりますのでご確認下さいませ。

▼参考記事

2022.06.04

WordPressを利用したブログで改行を行うときに使用するHTMLタグと正しい使用方法

改行が上手く出来ない理由 Wordpressを利用したブログを運用しているお客様から、「改行が上手く出来ないんだけど・・・」とご連絡を...

この記事では、うちのブログでも使用しているUrvanov Syntax Highlighterの設定方法をご紹介させて頂きます。

使い方と設定方法

プラグインの新規追加からUrvanov Syntax Highlighterを検索してダウンロードしましょう。
プラグインを有効化すると、テキスト編集だと管理画面の設定に「Crayon」が追加されます。

・テキスト編集

・ビジュアル編集
テキスト編集だと管理画面の設定に<>が追加されます。

・ブロックエディタ―
ブロックエディターの場合も同様、専用ブロックを追加してコードを貼り付けるだけです。

使い方

テキスト編集の場合

テキスト編集の場合は<pre>タグで囲うだけで機能します。

<h2>タイトル</h2>
<p>テキスト</p>

詳細設定をしたい場合はツールバーに追加されたCrayonをクリックします。

こちらの画面で詳細設定ができます。
タイトル・プログラミング言語を表示させたり、特定の行をハイライトさせることができます。
お好みでカスタマイズが可能です。

編集が完了したら右上の【挿入】ボタンを選択して完了です。

ビジュアル編集の場合

ビジュアル編集の場合はツールバーから<>を選択して詳細画面にて編集してコードを追加します。

このようにUrvanov Syntax Highlighterを使用した部分は背景色がついているので他のテキストと見分けがつかなくなることはありません。
一度挿入したら詳細画面を開かなくてもテキストの編集ができます。

ブロックエディターの場合

ブロック挿入ツールからタグを追加します。

【<>Urvanov Syntax Highlighter】を選択すると先ほど同様、詳細画面が開くので、コードを入力して挿入してください。

クラシックブロックで編集する場合はツールバーにアイコンが追加されているので<>を選択すれば詳細画面が開きます。

基本設定

有効化さえすれば特に設定もせずすぐに使えますが、いちいちフォントサイズを変更するの面倒だったり、サイトに合わせてイメージを変更したい場合はデフォルトの設定を変更することができます。

サイドバーの設定からCrayonを選択すると設定画面が開きます。

テーマやフォントなど設定を変更するとプレヒューに反映されるのでカスタマイズしやすいです。

ツールバーの表示を【常に表示】にすると、マウスオーバーでツールバーが上下するのを防いでくれます。

行の【デフォルトで行を折り返す】にチェックを入れると、画面幅で自動的に折り返されるのでスクロールバーが非表示になります。

※が付いている項目は、ツールバーに表示されるメニューアイコンです。

カスタマイズ

用意されているテーマを更に編集したい場合は、複製をしてさらに細かくカスタマイズが出来ます。

【複製】を選択します。

テーマ名を編集します。
こちらは自由なので自分が管理しやすい名前にしましょう。
名前の変更が終わったら【OK】を選択します。

複製が完了するとテーマのプルダウンに追加されます。

複製したテーマを選択すると【編集】ボタンが選択できるようになります。
こちらを選択して細かいカスタマイズをしていきます。

ダブを切り替えると

• 名前などの基本情報の変更
• ハイライトカラーの変更
• フレームデザインの変更
• 行デザインの変更
• 左の数字デザインの変更
• ツールバーデザインの変更

がカスタマイズ出来ます。

細かくカスタマイズ出来るので自分のサイトにあったデザインに変更してみてください！

まとめ

基本的にはプラグインを有効化してすぐに使えるので簡単です！
更に細かいカスタマイズ機能も備わっているので自分好みのデザインでコードを埋め込みたい方にもおすすめです。

▼該当サービス

SEO対策が得意なホームぺージ制作会社エクセレント

The post WordPressでソースコードを埋め込むプラグインUrvanov Syntax Highlighterの設定方法 first appeared on ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント　岡山.

今回はそんないつ起きるかわからないトラブルに備えるためにWordPressのプラグインBackWPupで自動バックアップという方法を紹介します。

BackWPupと言えば、簡単に手動で出来るバックアップ方法を紹介しておりますのでご確認ください。

▼関連記事

2022.05.07

WordPressのバックアップを「BackWPup」というプラグインで対応する方法【初心者向け】

WordPressに関する調べものをすると、「必ずバックアップを取りましょう」「バックアップを取ってから・・・」といった説明をよく目にします...

「BackWPup」のインストール

左メニュー　プラグイン　＞　新規追加　をクリックします。

テキストボックスに「BackWPup」と入力します。

「インストール」をクリックした後、「有効化」をクリックします。

「BackWPup」の自動バックアップ設定

左メニュー　BackWPup　＞　新規ジョブを追加　をクリックします。

一般設定

ジョブ名…わかりやすい名前を付けます
ジョブタスク…デフォルトのままでOKです。
バックアップファイルの作成…デフォルトのままでOK
ジョブの宛先…「フォルダーへバックアップ」にチェック
ログファイル…デフォルトのままでOK
「変更を保存」ボタンをクリックします。

スケジュール設定

WordPressのcronにチェックを入れて「変更を保存」ボタンをクリックします。
スケジューラー…種類は基本のままでOKです。
スケジューラ―…毎週にチェック

バックアップを取るのはサーバーに負担が掛かるので、バックアップの頻度は週に一度程度で良いでしょう。

DBバックアップ設定

バックアップするテーブル…の全てにチェックが入っていることを確認します。
バックアップファイル名…そのままでOK
バックアップファイルの圧縮…「GZip」にチェック
「変更を保存」ボタンをクリックします。

残りの「ファイル」「プラグイン」「宛先：フォルダー」は特に変更の必要はありません。

宛先: フォルダー設定

バックアップを格納するフォルダーを必要に応じて変更します。
自動バックアップのファイルはここに入るので格納場所を確認しておきましょう。

ジョブの確認

左メニュー　BackWPup　＞　ジョブ　をクリックします。

設定したジョブが一覧に表示されていることを確認します。
これで自動バックアップの設定は完了です。

まとめ

アップデートやカスタマイズをする時にバックアップは取ると思いますが、それだけでは不安という方は自動バックアップの設定をしておけば安心ですね。

しかししかし、、バックアップ作業に不安がある方は、エクセレントでの代行も可能です。
お気軽にご相談ください。

▼関連記事

2022.05.29

WordPressのバックアップで「ファイルが大きすぎる可能性があり、キューに追加されません」というエラーの対処方法

別記事にて「BackWPup」というプラグインを使ったWordPressのバックアップ方法を紹介しました。 ▼関連記事 ...

▼該当サービス

SEO対策が得意なホームぺージ制作会社エクセレント

The post WordPressのバックアップをプラグインBackWPupで自動で取る方法を図説で紹介。 first appeared on ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント　岡山.

▼関連記事

2022.05.07

WordPressのバックアップを「BackWPup」というプラグインで対応する方法【初心者向け】

WordPressに関する調べものをすると、「必ずバックアップを取りましょう」「バックアップを取ってから・・・」といった説明をよく目にします...

2022.05.30

WordPressのバックアップをプラグインBackWPupで自動で取る方法を図説で紹介。

ホームぺージの運営期間が長くなってくると、コンテンツも充実しサイトに愛着が湧いてくることと思います。しかし、もし、突然何らかのトラブルが起き...

しかし、実は・・・当サイトは容量が大きく、プラグインではバックアップを取ることができなかったのです。「ファイルサイズを取得できません。」「ファイルが大きすぎる可能性があり、キューに追加されません」というエラーが出てしまいました。

ということで、今回の記事は「BackWPup」でのバックアップで「ファイルサイズを取得できません。」「ファイルが大きすぎる可能性があり、キューに追加されません」というエラーが出たというケースに使えるエラー改善方法についてお知らせします。

この方法は、プラグインを使わないバックアップ方法でもございますのでプロ仕様としてのバックアップ法をお探し方は参考にしてください。

バックアップするデータ

WordPressを構成するデータは大きく分けて2つです。
・サイトデータ（テーマ・プラグイン・画像）
・データベース（投稿等の内容）

これらのデータをバックアップするようにします。

バックアップ方法

今回はFTPソフト＋WordPressのエクスポート機能を使用します。
FTPソフトではサイトデータを、WordPressのエクスポート機能ではデータベースのバックアップを取ることができます。

FTPソフトを使ってデータをダウンロード

FTPソフトは、FFFTPやFileZillaなどがありますが、私の場合大きなデータを扱う時はFileZillaを使うようにしています。

サーバーに接続し、WordPressのディレクトリを開いたら、「wp-content」をダブルクリックします。

「plugins」「themes」「uploads」の3つを選択し、任意の場所にダウンロードします。

WordPressのエクスポート機能を使用

次に、WordPressの管理画面にログインします。
左メニューから　ツール　＞　エクスポート　をクリックします。

「すべてのコンテンツ」にチェックを入れた状態で、「エクスポートファイルをダウンロード」ボタンをクリックします。

任意の場所にファイルを保存します。
以上でバックアップは完了です。

まとめ

プラグインでのバックアップはお手軽ですが、FTPソフトを普段から使っている方なら、もしかするとこちらの方法の方がしっくりくるかもしれません。私も、普段はこの方法でバックアップを取るようにしています。

サイト更新のためにバックアップは欠かせませんが、作業のやり方がわからない方、不安がある方はエクセレントにご相談ください。

▼該当サービス

SEO対策が得意なホームぺージ制作会社エクセレント

The post WordPressのバックアップで「ファイルが大きすぎる可能性があり、キューに追加されません」というエラーの対処方法 first appeared on ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント　岡山.

PageSpeed Insights

待望のシリーズ第二弾！！

PageSpeed Insights

を利用した時に出てくる改善出来る項目の対応方法について教えちゃいますシリーズ。

今回はレンダリングを妨げるリソースの除外の方法についてです。

▼前回の記事

2022.05.18

「使用していない JavaScript の削減」をプラグイン　Flying Scripts　でスピード解決する方法　

PageSpeed Insightsの得点 PageSpeed Insightsとは、Googleさんから提供されており、URLを入力...

「レンダリングを妨げるリソースの除外」とは？

レンダリングとは？

コードやプログラムなどの情報を人が見やすいように表現・表示させること。

リソースとは？

ある操作の実行に必要なシステムや要素などのこと。

まとめると

以上をふまえて簡単に説明すると・・・・

「ホームぺージを表示させる時に、コードやプログラムの読み込みの順番がうまく出来てなくて表示するのが遅くなっている」

という状態です。

レンダリングを妨げるリソースを除外する方法

ホームぺージによって原因や状況は違いますが、このケースで指摘されているのは下記のものです。

もちろん、一つ一つ問題点を探して手動で一つ一つ対応する事も出来ますが、そんな面倒臭い事をせずにAutoptimize というプラグインを利用すればすぐに問題解決が出来ます。

それでは早速にインストールしてみましょう

Autoptimizeをインストールして有効化

【プラグインを追加】の画面で　Autoptimize　と入力してプラグインを探します。プラグインが表示されたら、【今すぐインストール】をクリックしてください。

インストールが出来たら【プラグインを追加】をクリックしてください。

続いて【有効化】のボタンを押してエラーが発生しなければ、初期設定は完了です。

Autoptimizeを設定

サイドナビの【設定】タブから【Autoptimize】を選択してください。

【JS、CSS＆HTML】タブを選択してください。

【JavaScript コードの最適化】にチェックを入れてください。

CSS オプション

【CSS コードを最適化】にチェックを入れてください。

HTML オプション

【HTML コードを最適化】にチェックを入れてください。

最後に【変更と保存とキャッシュの削除】を押してください。

【追加】タブを設定

Googleフォントを使っていない人は対応しなくてもOkです。
Googleフォントを使っている人も、スピードチェックして問題ないのであれば対応しなくてもOkです。

【変更を保存】を押して反映してください。

これですべて完了です。

スピードが改善されたか確認

PageSpeed Insightに戻って、再度URLを入れてスピードが改善されたか確認します。

そうした時に、エラーはまだ出ているケースがあると思います。
今改善したばかりの「レンダリングを妨げるリソースの除外」が全て対応出来ていないケースもありますが、PageSpeed Insightsはネットワークやサーバー・クライアントの負荷に応じて、分析結果が変動しますので、1回の計測だけでパフォーマンスを正しく評価することはできません。正しく結果を評価するには、数日にわたって何回か計測を行い、そこで頻発するエラーがあれば対応して行くようしてください。

まとめ

今回は、設定も簡単で、あまり考えるところはないのですが、プラグイン導入後のスピードチェックとサイトチェックは確実に行ってください。
気が付けば、表示が崩れているという事も珍しくありませんので。

もし上記のような不具合が生じた場合は、Autoptimize自体を削除して対応してください。
それでも、改善が出来ないという場合にはお気軽にエクセレントにご相談ください。

▼該当サービス

SEO対策が得意なホームぺージ制作会社エクセレント

The post 「レンダリングを妨げるリソースの除外」という項目はプラグイン　Autoptimize 　を使って簡単に解決出来ます first appeared on ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント　岡山.

PageSpeed Insightsとは、Googleさんから提供されており、URLを入力するだけでモバイル、PCそれぞれのWebページの読み込み速度をスコアリングしてます。しかも無料で改善ポイントまで教えてくれるという優れもののシステムです。

ほんと、親切なツールです。
そして親切なこのツールを使って、SEO会社さんやホームぺージ制作会社さんがお客さんに電話営業してくるんです。ww

御社のホームぺージのPageSpeed Insightsのスコアが異常に低いのですぐに改善しないと危ないですよ！

という営業をかけてくるんです。

そんなこと言われたら、詳しく内容を知らないホームぺージの担当者さんなら焦るじゃないですか！！

なんと！うまいなーーー！！

すると・・・すぐに・・・

大変だ～～至急！直してぇ～～～
おたくが作ったホームぺージ評価が低いって言われたよ～～

これです。
おなじみの日本のビジネスのおまじないワード【至急】付での連絡が来るのです。

順調に業務をこなしていたのに、この日本のビジネスのおまじないワード【至急】付で来る連絡にそこからの業務の進行に足元をすくわれてしまいます。

という事で、今回はPageSpeed Insightsの対応内容についてご紹介いたします。

得点が低くても慌てないで！

Googleも検索順位付け要素にページスピードを組み込んでいると言われているので、PageSpeed Insightsへの対応は検索エンジンの指標に対する最適化でもあるのは確かです。

しかし、ページの表示速度はランキング要因の１つに過ぎないので、PageSpeed Insightsの点数が仮に10点でも、検索順位が大幅に下落するかというとそうではありません。逆に得点が100点であれば、1位になるのかというとそうではありません。

ですので、すぐに改善しなくても大丈夫です。

そして改善しても検索の順位が劇的に改善するというとそうではないので、勘違いをしないでください。

費用対効果を落ち着いて考えてください。

費用が潤沢にあるのであれば、全てのエラーに対応すれば良いと思いますが、多くの場合はそうではないと思います。

エラーの内容とすれば、とんでもない作業内容を指示しているケースがあります。逆にパッパッと改善出来るケースもあります。
何が効果的で何を諦めないといけないのかをよく考えて対応すべきです。

もし、自分では判断が出来ないと思われるケースは当社にご相談ください。
状況をヒアリングしてお客様目線で丁寧に対応させて頂きます。

▼該当サービス

「使用していないJavaScriptsの削減」について

PageSpeed Insightで表示された「改善できる項目」の内、「使用していないJavaScriptsの削減」について改善をしていきます。

この項目を改善するだけでかなりの得点の回復が出来ます。

「Flying Scripts by WP Speed Matters」という便利なプラグインをインストールします。

このプラグインは、ユーザーが何かの操作を起こすまでJavaScriptの実行を遅らせ、ユーザーが何もしなくても指定した時間が経過するとJavaScriptが実行される仕掛けをホームぺージに組み込んでくれます。しかも、遅延時間を大幅に伸ばさない限りは、ホームページの表示画面が崩れるような可能性は低いのでお勧めのプラグインです。

では、早速インストールしてみましょう！！

Flying Scripts by WP Speed Mattersの設定方法

Flying Scripts by WP Speed Mattersを検索しインストール

【プラグインを追加】の画面で　Flying Scripts by WP Speed Matters　と入力してプラグインを探します。プラグインが表示されたら、【今すぐインストール】をクリックしてください。

インストールが出来たら【プラグインを追加】をクリックしてください。

続いて【有効化】のボタンを押してエラーが発生しなければ、初期設定は完了です。

Flying Scriptsを起動します

サイドナビの【設定】タブから【Flying Scripts】を選択してください。

設定画面が表示されたら【Settings】タブを開いて【Include Keywords】欄を確認します。

この項目にはPagespeed Insightの「使用していないJavaScript」を登録しますので、そのぺージを開いたままPageSpeed Insightsのページを開きます。

PageSpeed Insightsの【改善できる】項目をクリック

【使用していないJavaScriptの削減】の項目を表示して、該当ファイル名をコピーします。

コピーしたら先程の画面に戻って、【Include Keywords】欄にその内容をペーストします。

【Timeout】は5秒で設定します。

ここまでの内容が入力が完了すれば【Save Changes】ボタンを押せば設定完了です。

スピードが改善されたか確認

PageSpeed Insightに戻って、再度URLを入れてスピードが改善されたか確認します。

そうした時に、エラーはまだ出ているケースがあると思います。
今改善したばかりの「使用していないJavaScriptの削減」が全て対応出来ていないケースもありますが、これは5秒後にはJavaScriptが稼働するため、PageSpeed Insightsで計測する時点では稼働している為、対応が出来ていないと表示されている可能性があります。

PageSpeed Insightsはネットワークやサーバー・クライアントの負荷に応じて、分析結果が変動しますので、1回の計測だけでパフォーマンスを正しく評価することはできません。正しく結果を評価するには、数日にわたって何回か計測を行い、そこで頻発するエラーがあれば対応して行くようしてください。

まとめ

ホームページのスピードアップ対策は、必要ですがそれぞれの環境によっても異なり、原因は複雑な為、常に同じ結果となることはありません。
目指すべき得点は90点として改善をすれば良いと思います。

ただ、ワードプレスで使用してるテーマによってはその道のプロでなければ、どこをどう改善すれば良いのか分からないケースもありますので、70点から80点あれば十分だと私は思います。

※ご注意下さい。

今回の方法では、Chrome等で確認できる全てのJavaScriptを全て遅延させますので、以下の危険性が指摘されています。

もし上記のような不具合が生じた場合は、関連するJavaScriptを Flying Scriptsのキーワードから外す、もしくは Flying Scripts自体を削除して対応してください。

それでも、改善が出来ないという場合にはお気軽にエクセレントにご相談ください。

▼該当サービス

SEO対策が得意なホームぺージ制作会社エクセレント

The post 「使用していない JavaScript の削減」をプラグイン　Flying Scripts　でスピード解決する方法　 first appeared on ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント　岡山.

ホームぺージを閲覧中にテキストリンクがあるのかな？というケースでこのようなマークを見た経験があると思います。
これは「外部リンク」を示す場合に表示されているマークなんです。

以前はリンクを設定している場合には、ブルーの文字でその文字の下に下線が示されていたので、リンクが張ってあるとわかったものです。最近はさまざまな色のリンク文字色があり、その文字の下の下線も無くなりつつありますので、リンクが張ってあるかどうかわからないケースが増えてきました。

そこで、ユーザービリティーを考えて、このようなマークを表示する事でこのテキストリンクのリンク先は外部リンクがありますと見た目で分かるように工夫が出来るようになりました。

このユーザービリティ―については非常にわかりやすくていいなと思うのですが、運営者側には編集する手間が増えるだけで、さほどメリットもないものと思い込んでいたので、私は「へぇ～～～」というぐらいしか捉えてなかったので対応していなかったのです。

しかし！！その設定をいちいち設定する事無く、外部リンクのユーザービリティ―に対応が出来る便利なプラグイン　WP External Links　があるという事を知ったので、当社でも外部リンクのアイコン設定の導入をしたという経緯がありました。

ということで、今回はその外部リンクのアイコンを表示するプラグインについてご紹介させて頂きます。

WP External Linksはnofollow（ノーフォロー）が一括で設定出来る

nofollow（ノーフォロー）の属性とは？

WP External Linksはnofollow（ノーフォロー）が一括で設定出来るのですが、nofollow属性とは、リンク先を検索エンジンにクロールさせたくない時、リンク先のサイトと関連付けたくない場合に利用する属性値のことです。

検索エンジンは設置されたリンクから、リンク先のサイトの関連性や信頼性などの価値を判断しています。 内容の関連性が高い評価を渡すことで、リンク先のサイトが、検索順位が上がるなど、結果的に自サイトの評価を利用されてしまう可能性もあります。

そのような事態を避けるために、自身で信頼できないサイトや自サイトと無関係なページへのリンク、広告リンクなどに設定することで、Googleにクロールされて自社サイトの評価をリンク先に渡す事を防ぐ目的で作られました。

現実的に解説

？？？
だから何？？
と思われる方も多いと思います。私も当初はそっち側の考えでしたので、、、もう少し具体的な例で説明を致します。

サイトAとサイトBを通常リンクでつなぎ、そこからさらにサイトBからサイトCへ通常リンクでつないだ場合はどうなるのでしょうか？

この場合は、サイトAからサイトB、サイトBからサイトCにサイトAのページ評価が受け渡されます。そうなりますと、サイトCが評価の高いサイトであれば、サイトAはラッキーなのですが、サイトCがとんでもなく評価が低いサイトであれば、その評価がサイトAに受け継がれるので、サイトAの評価が悪くなってしまいます。

そうなる事を防ぐために　nofollow　の属性を設定して自サイトの評価が下がる事を防ぐためのSEO対策をするのであります。

さらに具体的な防御策の例について解説

有料リンク

Googleでは、SEO効果を受け渡すリンクの売買を禁止しており、これが発覚してしまうと、意図的ではないにしてもペナルティを受ける可能性があります。
nofollowを設定しなければ、SEO効果を出すどころか、Googleからペナルティを受けて検索順位を大きく下げられてしまう可能性があります。

例えば、自サイトへのリンクを含む有料記事を書いてもらったり、プレスリリースにリンクを設定する場合、サイト内にテキスト広告を設定したりする場合は、リンクを必ずnofollowリンクを設定しましょう。

必ず。

レビューなどのコメント

ホームぺージにレビュー欄やコメント欄を設けていると、訪問者や自動ツールによって評価の低いリンクの書き込みが行われ、ページの評価を渡してしまう場合があります。
このようなリンクを設置するツールでサイトに評価を渡さないように、nofollowを使用します。

必ず。

結論 : nofollowを設定することでSEO対策の評価が上がる事は無い

nofollowはリンク先へのPageRankの受け渡しを止め、リンク先をクロールしないようにGoogleに指示するための属性値です。

ただそれだけです。

ただそれだけですので、nofollowを設定することでSEO対策に効果があるという事ありません。

WP External Linksを設定することにSEO対策に効果はありませんが、インストール方法を説明いたします。

WP External Linksをインストールする

WP External Linksを今すぐインストールをクリック

プラグイン追加　で　キーワード　に　　WP External Links　と入力すると、プラングインが表示されますので　今すぐインストール　をクリックしてインストールを開始します。

WP External Links を有効化する

同じ画面で有効化のボタンが表示されたら、有効化のボタンをクリック。
同じ画面に現れなかったら、左サイドバーの　プラグイン　をクリックしてメインフレームのプラグインの一覧の中から　WP External Links　を探して　有効化のテキストリンクをクリック　します。

WP External Links を設定する

左サイドバーから　外部リンク　を探してクリックしてWP External Linksの管理画面を開きます。

外部リンクタブを設定

rel　属性の追加　の項目を触らなければ、その他は特に気を付けるべき個所は無いのでご自身の持っているイメージで設定してください。
下記に当社の推奨する設定内容をご案内いたしますので参考してください。

内部リンクタブを設定

こちらもrel　属性の追加　の項目を触らなければ、その他は特に気を付けるべき個所は無いのでご自身の持っているイメージで設定してください。
下記に当社の推奨する設定内容をご案内いたしますので参考してください。

除外リンクタブの設定

特に編集する項目はございません。
初期設定のままで大丈夫です。

例外タブの設定

外部リンクから除外する　欄に、外部リンクアイコンを表示したくないURLを入力します。
複数ある場合はカンマ（,）で区切ります。

まとめ

リンクアイコンを追加したりリンクの設定をまとめて変更したい時に使うと便利なプラグイン　WP External Links　の紹介でした。
有料テーマではリンクアイコンは最初から実装されているテーマもありますので、説明書を確認したり、サポートセンターに問合せをして確認することをお薦めします。

確認して、編集に挑戦して、、、あれ？？自分では無理かな？？

と思われた場合は下記のサービスのご利用をご検討頂ければと思います。
エクセレントではホームページの更新代行サービスも承っております。

ホームぺージの更新代行と言えば、岡山のエクセレント

The post WordPressで外部リンクの前や後ろにアイコンをつけるプラグイン　WP External Linksの設定方法 first appeared on ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント　岡山.