バズログカテゴリ: ホームページ制作

WordPressにPDFを埋め込みたいけど、方法が分からない…。

上記の様にお悩みではありませんか？

WordPressデフォルトの機能では、PDFを埋め込む機能が搭載されていません。

ただしプラグインを使用すれば、PDFも簡単にWordPressへ埋め込む事が可能です。

今回はWordPressに簡単にPDFを埋め込む方法について詳しく解説していきます。

1：簡単にWordPressでPDFを埋め込む方法

WordPressにPDFを埋め込みたい。

WordPressにPDFを埋め込むには、プラグインを使用する事で簡単に挿入する事が可能です。一番簡単にPDFを埋め込む事のできるプラグイン「PDF Embedder」を使用してPDFを挿入する方法を紹介します。

PDFのレイアウトをそのまま挿入する事ができるので、レイアウトを崩したく無い場合にもオススメのプラグインです。PDFを埋め込む手順は以下の通りに行います。

• 手順1：プラグインを有効化
• 手順2：PDFをアップロード
• 手順3：投稿ページにPDFを埋め込む

上記3つの手順に従って詳しく紹介していきましょう。

1-1：手順1：プラグインを有効化

PDFを埋め込むプラグイン、「PDF Embedder」をインストールし有効化します。

プラグイン新規追加画面で「PDF Embedder」を検索しましょう。

検索結果に表示されない場合は、WordPress.org (WordPress公式サイト)でダウンロードしてインストールします。

PDF Embedder – WordPress

プラグインのインストール方法については下記記事にて詳しく解説しています。

WordPressのプラグインをインストールする方法と出来ない4つの原因

1-2：手順2：PDFをアップロード

プラグインを有効化したら、埋め込みたいPDFをメディアにアップロードしましょう。

(1) メディア➡︎「新規追加」クリック

(2) 「ファイルを選択」をクリック

(3) PDFを選択して「開く」選択

(4) メディアへのPDF追加が完了

1-3：手順3：投稿ページにPDFを埋め込む

メディアへPDF追加が完了したら、PDFを埋め込みたいページへ移動します。

(1) 投稿ページもしくは固定ページへ移動

(2) 「メディアを追加」クリック

(3) メディアに追加したPDFを選択し「投稿に挿入」を選択

(4) PDFのショートコードが挿入される

PDFのショートコードが挿入されます。

プレビューできちんとPDFが挿入されているか確認してみましょう。

きちんと投稿ページにPDFが反映されています。

以上がPDFを埋め込む方法です。

2：プラグインなしでPDFを埋め込む方法

PDFは埋め込みたいけれど、プラグインは使用したく無い。

PDFはプラグインを使用しなくても、埋め込む事が出来ます。

ただしプラグインを使用した場合の様な、レイアウトでは表示されないので把握しておきましょう。

早速プラグインを使用せずにWordPressにPDFを埋め込む方法を紹介していきます。手順は以下の通りです。

• 手順1：メディアにPDFを追加
• 手順2：URLをコピーしておく
• 手順3：埋め込みたいページでURLを貼り付ける
• 手順4：完成

上記4つの手順に沿って解説していきます。

• プラグインを増やしたく無い！
• 面倒な手間は省きたい！

上記の様にお考えの場合には、この方法でPDFを挿入すると良いでしょう。

2-1：手順1：メディアにPDFを追加

埋め込みたいPDFをメディアに追加します。

(1) メディア➡︎「新規追加」選択

(2) 「ファイルを選択」クリック

(3) PDFを選択して「開く」クリック

(4) 追加完了

2-2：手順2：URLをコピーしておく

メディアに追加したPDFのURLをコピーします。

(1) メディアに追加したPDFをクリックして開く

(2) URLをコピーする

PDFを埋め込む際にURLが必要です。

コピーしておきましょう。

2-3：手順3：埋め込みたいページでURLを貼り付ける

PDFを埋め込みたいページで、PDFを埋め込んでいきます。

(1) PDFを埋め込みたいページへアクセス

(2) PDFを埋め込みたい文書を選択して「リンク挿入ボタン」をクリック

(3) ① URLを貼り付けて②の歯車マークをクリック

メディア追加でコピーしたPDFのURLを①に貼り付けましょう。

(4) リンクを新しいウィンドウで開く場合は「✔︎」チェックを入れる

チェックを入れたら「更新」をクリックします。

2-4：手順4：完成

リンクを挿入したらPDFの埋め込みは完了です。

プレビューで確認してみましょう。

(1) リンクを貼り付けた文書をクリック

(2) PDFが表示される

以上がプラグインを使用せずに、PDFを挿入する方法です。

まとめ

WordPressでPDFを埋め込む方法を詳しく紹介してきました。

PDFはプラグインを使用すれば、レイアウトがそのままの状態でWordPressに埋め込む事が可能です。

またPDFへのリンクを貼り付ける方法であればプラグインを使用せずに、埋め込む事も出来ます。

ぜひ参考にしてみてください。

WordPress内にカルーセルを表示させたい。

上記の様にお考えではないでしょうか？

サイト内にカルーセルを表示させる事によって、文字だけでなく視覚的にユーザーへ情報を届ける事ができます。また、サイトへ訪問した際にカルーセルがあると自然にカルーセルに目がいきますよね。

カルーセルをサイト内に設置して、ユーザーにクリックされやすいサイトを作ってみましょう。

1：プラグインで簡単にカルーセルを表示させる手順

カルーセルを表示させたいけれど、難しそう…。

上記の様に考えではありませんか？

プラグインの「WP Posts Carousel」を使用すれば誰でも簡単にカルーセルを表示させる事が出来ます。

HTMLやCSSの知識は一切必要なく、表示させる事が可能です。

今回はWP Posts Carouselを使用して簡単にカルーセルを表示させる方法を紹介していきます。

1-1：プラグインを有効化する

簡単にカルーセルをサイト上に表示する為に、プラグインを使用しましょう。

プラグインは「WP Posts Carousel」です。

インストールした後、有効化しておきましょう。

1-2：初期設定

WP Posts Carouselの初期設定を行います。

設定からWP Posts Carouselを選択しましょう。

(1) 設定➡︎「WP Posts Carousel」クリック

(2) 設定を行う

• ① Font Awesome ：Font Awesomeのイラストサービスを使用するか
• ② Scripts include：フッター使用時にチェック

①・②は使用する際にチェックを入れれば良いので、通常はチェックを入れなくて大丈夫です。

③の「Custom breakpoints」では、レスポンシブデザインを適用したい場合に入力します。

デバイス毎に表示させる場合の、幅サイズを指定しましょう。

レスポンシブデザインを適用しない場合は未入力で結構です。

レスポンシブデザイン対応のプラグインについては３章で紹介しています。

1-3：ウィジェットに表示させる

プラグインを有効化したら、WP Posts Carouselがウィジェットに追加されています。

ウィジェットに反映する様に設定していきましょう。

(1) 外観➡︎「ウィジェット」を選択

(2) ウィジェットに追加されている「WP Posts Carousel」をクリック

(3) 表示先を選択して「ウィジェットを追加」クリック

• サイドバー
• 投稿記事下

上記２つから表示させる方を選んでウィジェットに追加しましょう。

(今回は投稿記事下に追加する方を選んでいます。)

(4) 表示方法を設定

表示方法を３つのオプションで設定します。

• 表示オプション
• 投稿オプション
• カルーセルオプション

３つのオプション毎に設定内容を紹介していきましょう。

【① 投稿オプション】

【② 投稿オプション】

【③ カルーセルオプション】

上記画像の様に設定し、一番下の「保存」を必ずクリックしましょう。

1-4：表示を確認し完了

ウィジェットで設定が完了したら、カルーセルがきちんと表示されているか確認します。1-2で紹介した様に設定すると、下記画像の様にコンテンツ下にカルーセルが表示されるので参考にしてみて下さい。

2：記事内にカルーセルを表示させる方法

ウィジェットではなく、記事内(コンテンツ)にカルーセルを表示させたい。

上記の様にお考えの場合には、WP Posts Carouselを有効化すれば記事投稿ページから簡単にカルーセルを記事内に表示させる事が可能です。表示手順について紹介していきます。

2-1：表示手順

記事内にカルーセルを表示する方法を詳しく紹介しましょう。

プラグインの「WP Posts Carousel」を有効化した状態で、投稿ページにアクセスします。

(1) 投稿ページ上の編集ボタン部分に下記アイコンが追加される

赤枠で囲ったアイコンをカルーセルを挿入した部分をタップ後に、クリックするとカルーセルが挿入されます。

(2) 表示方法を編集

ポップが出てきて表示方法を決める事が出来ます。

日本語表示にしたデフォルトのポップを貼り付けておくので、参考にしてみてください。

ちなみに今回は何も変更せずデフォルトの状態で表示させてみます。

画面下の「ショートコードを挿入」をクリックするのを忘れない様にしましょう。

(3) カルーセルが挿入される

(4) プレビューで確認

カルーセルがきちんと挿入されている事を確認し完了です。

(表示設定はデフォルト)

3：レスポンシブデザインに対応！3つのオススメプラグイン

WordPressでサイトを構築する上で「レスポンシブ」が重要ですよね。

もちろんカルーセルを表示させる際にもレスポンシブデザインに対応しているかどうか気になりますよね。

レスポンシブデザインって何？という場合の為に簡単に紹介します。

レスポンシブデザインとは、ユーザーのデバイスに関係なく画面のサイズに応じてレスポンシブに表示を変えることができるデザインの事です。

URL・HTML・CSSは変えずに同じファイルを使用する事によって、デバイスにより起こる表示エラーを防ぐことが出来ます。

レスポンシブデザインが対応しているカルーセルプラグインを使用すれば、表示エラーを起こす事がないのでユーザービリティの向上・Googleの検索エンジン、クローラーの巡回もスムーズに行う事が可能です。

そんなレスポンシブデザインに特化したオススメのカルーセルプラグインを3つ紹介します。

• Master Slider
• Smart Slider 3
• Meta Slider

上記３つのプラグインの中でもオススメはSEO効果もある「Master Slider」です。

３つのプラグインの特徴について詳しく解説していきます。

3-1：Master Slider

Master Slider 

Master Sliderは、画像と動画の両方に対応しているカルーセルプラグインです。

もちろんレスポンシブ対応の機能が搭載されています。

またCSSで自分の好きな様にカスタマイズを行う事も可能です。

自分だけでのオリジナリティ溢れるカルーセルを表示させたい！

そんな場合には、Master Sliderをオススメします。

3-2：Smart Slider 3

Smart Slider 3

Smart Slider 3は、Youtube等のビデオをカルーセルに表示させる事が可能です。

また、管理画面からカルーセルの設定を簡単に行う事が出来ます。

カスタマイズ性も優れている高機能プラグインです。

3-3：Meta Slider

Meta Slider

Meta Sliderは、ショートコードを記事に挿入するだけで簡単にカルーセルを表示させる事が可能です。

４つの種類のスクリプトから選ぶ事が出来ますが、Coin Sliderとスライドタイプはレスポンシブ非対応なので注意しましょう。

まとめ

WordPressでカルーセルを表示させる方法について詳しく紹介してきました。

カルーセルはプラグインを使用する事で簡単に表示させる事が可能です。

ウィジェットエリアに表示させたり、コンテンツ内の好きな場所にも簡単に表示させる事が出来ます。

またレスポンシブデザインに対応しているプラグインも多く存在するので、状況に応じて使用するプラグインを変更するのもオススメです。

ぜひ参考にしてみて下さい。

コンテンツ下にソーシャルボタンを設置したいな。

コンテンツの下にTwitterやFacebook等のシェアボタンが設置されているサイトをよく見かけますよね。

SNSのシェアボタンをコンテンツ下に設置する事によって、多くの人へ優良なコンテンツを届ける事が出来る可能性が広がります。ソーシャルボタンを一から設置しようとすると大変な作業です。

ソーシャルボタンを設置したい場合には便利なプラグイン「WP Social Bookmarking Light」を使えば簡単に設置する事が出来ます。

今回は「WP Social Bookmarking Lightの使い方」や「表示位置を好きな場所にカスタマイズする方法」まで解説していきましょう。

1：WP Social Bookmarking Lightの使い方

コンテンツ下にソーシャルボタンを設置したい！

上記の様に思い立ったら、プラグインの「WP Social Bookmarking Light」を使用して直ぐに設置してみましょう。肝心の使い方が分からない…。

そんなあなたの為にWP Social Bookmarking Lightの使い方を全てご紹介します。

プラグインは事前にインストールして有効化しておきましょう。

プラグインのインストール方法については下記の記事にて詳しく解説しています。

WordPressのプラグインをインストールする方法と出来ない4つの原因

1-1：使用開始手順

早速プラグインを使用してソーシャルボタンを設置する方法を解説していきましょう。

プラグインを有効化すると、設定内にWP Social Bookmarking Lightが追加されています。

(1) 設定➡︎「WP Social Bookmarking Light」を開く

(2) WP Social Bookmarking Lightの設定画面

WP Social Bookmarking Lightの設定画面になります。

この画面でソーシャルボタンを表示する設定を行なっていくのです。

主な設定は２つです。

• 一般設定
• 各ソーシャルボタンの設定

上記２つの設定を詳しく紹介していきます。

1-2：一般設定

一般設定の設定方法について紹介していきます。

• ① Position：ボタンの位置
• ② Individual Artcle：トップ画面への表示
• ③ Pages：固定ページへの表示
• ④ SNSボタンの選択：表示ボタンの選択

一般設定では上記①〜④の設定を行います。

４つの設定について詳しく紹介しましょう。

【① Positionの設定】

① Positionの設定とは、ソーシャルボタンを配置する位置を決める設定です。

表示させる位置は4つの中から選ぶ事が出来ます。

• TOP・・・ページ上部にのみ表示
• Bottom・・・ページ下部にのみ表示
• Both・・・ページ上部と下部に表示
• None・・・表示しない

設定はBothがオススメです。

ボタンはページの上部と下部の両方に設置されていた方がシェアされる確率が上がります。

【② Individual Artcleの設定】

個別の記事の設定では、個別記事以外にもトップページやカテゴリーページでもソーシャルボタンを設置するかを決める事が可能です。

• Yes・・・個別ページ以外では表示されない
• No・・・トップページやカテゴリーページでも表示される

上記２つから好きな方を選びましょう。

【③ Pagesの設定】

Pagesの設定では固定ページにもソーシャルボタンを設置するかを決める事が出来ます。

• Yes・・・表示する
• No・・・表示しない

固定ページは「お問い合わせ」や「企業情報」等を載せるページなので、NOを選択し表示させないのがオススメになります。

【④ SNSボタンの設定】

Enable Servicesでは、どのソーシャルボタンを表示させるかを決める事が出来ます。表示させるオススメのボタンは５つです。

• Twitter
• Facebook
• hatena_button
• google_plus_one
• pocket

上記５つのSNSは利用者数も多く、これらを追加しておけばシェアされる可能性が大きく高まります。ボタンを追加・順番に入れ替え・削除について紹介しましょう。

【追加と順番の入れ替え】

ボタンを追加するには、右側のB枠からボタンを選んで左側のA枠に追加するだけです。

順番を入れ替えたい時は、ボタンを掴んで移動させます。

【削除】

削除したい際には、ボタン右側に表示されているバツ印をクリックして削除しましょう。

1-3：ソーシャルボタンの設定

ソーシャルボタンの設定について紹介します。

今回紹介するソーシャルボタンは、オススメ5つのボタンの設定のみです。

• Twitter
• Facebook
• hatena_button
• google_plus_one
• pocket

各ボタンごとに詳しく解説していきます。

【Twitter】

Twitterボタンの設定です。

ソーシャルボタンを追加すると上のタブにSNS名が追加されます。

• ① Via・・・Twitterのアカウント名を入力
• ② Language・・・Japaneseを選択

Twitterの設定では上記２つの赤枠で囲った部分を上記の様に変更しましょう。

変更後は画面下の「変更を保存」をクリックします。

【Facebook】

Facebookボタンの設定です。

FBと書かれているタブを開きます。

• Locale・・・「ja_JP」と入力
• Version・・・「xfbml」を選択
• Add fb-root・・・「yes」を選択

Facebookボタンの設定はもう１つ行いましょう。

FBと書かれているタブの横にある「FB like」を開き以下の様に設定します。

• Layout・・・button_count
• Action・・・Like
• Share・・・yes

Actionの選択部分ではLikeボタンかRecommendボタンを選ぶ事が可能です。

広く知られているLikeを選択するのが良いでしょう。

【hatena_button】

はてなボタンの設定です。

Layoutを「standard」に設定し変更を保存します。

【google_plus_one】

google_plus_oneの設定です。

• Button size・・・medium
• Language・・・Japanese
• Annotation・・・bubble

上記の様に設定し変更を保存してください。

【Pocket】

pocketの設定です。

Button typeを「horizontal」を選択して変更を保存します。

1-4：ソーシャルボタンの表示を確認し完了

一連の設定が完了すると、サイト上にはソーシャルボタンが表示されています。

サイトの表示を確認してみましょう。

以上がソーシャルボタンをプラグインの「WP Social Bookmarking Light」を使って表示させる方法です。

2：WP Social Bookmarking Lightを使用する4つのメリット

ソーシャルボタンはプラグインで設置するのが一番良いのかな？

上記の様にプラグイン導入を不安にお考えではありませんか？

プラグインのWP Social Bookmarking Lightを使用して、コンテンツにソーシャルボタンを表示させる事で4つのメリットが生じます。ソーシャルボタンを設置したい場合には、プラグインを使用するのが１番良い方法と言えるでしょう。

• アクセス数の増加
• 手間なく設置できる
• 新サービスにも対応できる
• PHPで表示位置を指定できる

上記4つのメリットについて詳しく紹介していきましょう。

2-1：アクセス数の増加

１つ目のメリットはアクセス数の増加です。

プラグイン使用に関係なく、ソーシャルメディアのボタンを追加する事でシェアされる可能性が高まります。良いコンテンツをユーザーに提供する事ができれば、シェアが広がりサイトへのアクセス数増加も期待できるのです。ソーシャルボタンをサイト内に設置するのは非常に良いSEO対策と言えます。

2-2：手間なく設置できる

2つ目のメリットは手間がかからない事です。

自分でソーシャルボタンをサイト内に表示させようとした場合、全てのボタンのソースコードを埋め込む必要があります。プラグインを使用すれば、ソースコードを埋め込む作業が必要ないので手間を省く事が可能です。

2-3：新サービスにも対応できる

3つ目のメリットは、新サービスにも対応可能な点になります。

プラグインのWP Social Bookmarking Lightは、アップデートを定期的に行なっているので新しくスタートしたSNSでもボタンを利用する事が可能です。

2-4：PHPで表示位置を指定できる

4つ目のメリットは、PHPで表示位置を指定できる点になります。

管理画面からボタンの位置を設定するだけでなく、PHPから自身で指定したい場所にボタンを表示させる事も可能です。管理画面とPHPの両方で表示位置の指定ができる点もメリットと言えるでしょう。

3：【カスタマイズ】好きな場所へボタンを表示させる魔法のコード

ソーシャルボタンを好きな場所で表示させたい！

上記の様にお考えではありませんか？

管理画面から設定できる位置ではない場所へ表示させたい場合もあるはずです。

そんな時は以下のコードを使用してみてください。

表示させたいテンプレート部分に下記コードを追加するだけで、ソーシャルボタンを表示させる事が可能です。

まとめ

プラグインの「WP Social Bookmarking Light」を使用してソーシャルボタンを表示させる方法について詳しく紹介してきました。

「WP Social Bookmarking Light」を使用すれば、簡単にソーシャルボタンを表示させる事が可能です。

ソーシャルボタンを設置する事でシェアされる可能性が大きく高まります。

もちろんシェアされる為には、良質なコンテンツを発信する事が大切です。ぜひ参考にしてみて下さい。

完成前のHPやブログにアクセス制限をかけたいとお考えではありませんか？

まだ作成途中の段階では公開したくない時がありますよね。

そんな時に便利なのが「ベーシック認証 (Basic認証)」です。

ベーシック認証をかけた状態でサイトへアクセスするとIDとPWを求められます。

IDとPWが分からなければサイトへアクセスする事は出来ないので、許された人のみがサイトへアクセスする事が可能です。

そんなベーシック認証を行う方法は３つありますが、１番のオススメは「利用しているサーバーで設定する方法」になります。

今回はベーシック認証を行う3つの方法について詳しく解説していきましょう。

1：ベーシック認証を設定する3つの方法

サイトやブログにベーシック認証を設定したいけれど、方法が分からない。

ベーシック認証とはサイトやブログにアクセス制限をかけて、ユーザー名とPWを入れる事で表示する事ができる様にする設定です。

そんなベーシック認証を設定する方法は３つあります。

• サーバーで行う
• 手動で行う
• プラグインで行う

上記３つの方法で設定する事が出来ますが、１番のオススメはサーバーでの設定です。

サーバーでの設定は利用しているサーバーの管理画面で簡単に設定する事が出来ます。

２つ目に簡単なのはプラグインでの設定ですが、デメリットが多くオススメとは言えないでしょう。

ベーシック認証を行う3つの方法について詳しく紹介していきます。

1-1：サーバーで設定する方法と特徴

【特徴】○：簡単にできる ×：サーバーによっては対応してない可能性あり

サーバーで設定する方法は、利用しているサーバーの管理画面から簡単に設定する事が可能です。

ベーシック認証を行う方法としては、最も簡単でオススメな方法と言えるでしょう。

1-2：手動で設定する方法と特徴

【特徴】○：サーバーやテーマに関係なく設定できる ×：コーディング知識が必要(上級者向け)

手動で設定する際には、htaccessとhtpasswdのファイルを自分で作成し設定する方法です。この方法は、利用しているサーバーやテーマに関係なくベーシック認証を設定する事が可能です。ただしhtasccesとhtpasswdという２つのファイルを自分で作成・用意する必要があるのでコーディング知識が必要になります。

初心者には難しい方法になります。

1-3：プラグインで設定する方法と特徴

【特徴】○：手間がかからず簡単にできる ×：互換性やサイトが重くなる可能性あり

プラグインで設定する方法は、手間がかからず初心者には一番便利な方法と言えるでしょう。

ただし、利用しているテーマとの互換性が無かったり他のプラグインと干渉してしまう可能性があります。

またプラグインを入れる事で、サイトが重くなる可能性もあるのでオススメの方法とは言えないでしょう。

2：サーバーでベーシック認証を行う方法

ベーシック認証を行う方法として、最もオススメなのが利用しているサーバーで行う方法です。

サーバーの管理画面から簡単に設定する事ができ、プラグイン使用時の様なデメリットも発生しません。

利用しているサーバーにより設定方法が異なりますが、大体の設定方法を紹介しておきましょう。

• ① サーバーの管理画面へアクセス
• ② ベーシック認証設定ページへアクセス
• ③ 必要事項の入力と選択
• ④ 完了

多くのサーバー会社では上記の方法で、ベーシック認証の設定が可能です。

しかしベーシック認証の設定に対応していないレンタルサーバーもあるので、事前に確認しておきましょう。

3：手動でベーシック認証を行う方法

ベーシック認証を行う最もオススメな方法は、サーバーの管理画面から行う方法です。

しかしサーバーによっては設定に対応していない場合もあります。

そんな時にオススメしたいのが手動でベーシック認証を行う方法です。

利用しているサーバーの種類にとらわれずに、自分でベーシック認証を設定する事が出来ます。

また、プラグインを利用した時の様なデメリットも生じないのでオススメの方法です。

ただし、htaccessでの方法はコーディング知識が必要となります。

初心者の場合には難しい作業と考えられますが、今回は初心者でも簡単に出来る様に紹介していきましょう。

手順は以下の通りです。

• ① htpasswdファイルを作成
• ② htpasswdをwp-adminと同じディレクトリへアップロード
• ③ htaccessファイルに記述を追加
• ④ htaccessファイルを上書きアップロード
• ⑤ サイトへアクセスして確認

上記の手順を詳しく解説していきます。テキストエディタとFTPソフトを準備しておきましょう。

3-1：htpasswdファイルを作成

htpasswdファイルを作成します。

htpasswdファイルは「EN-PC SERVICE」というサイトを使用すれば簡単に作成する事が可能です。

EN-PC SERVICEのサイトへアクセス

使用方法を紹介します。

(1) IDとパスワード欄を入力

ベーシック認証でログインする際に使用するIDとパスワードを入力し「.htpasswd作成」のボタンをクリックしましょう。

(2) 生成された「.htpasswd」を全てコピーする

赤枠で囲った部分に表示されるコードを全てコピーしてください。

コピーしたコードをテキストエディタに貼り付けて保存しましょう。

(3)「.htpasswd」名で保存する

保存する際に必ず、頭に「.」を入れる事を忘れないで下さい。

3-2：htpasswdをwp-adminと同じディレクトリへ

.htpasswdのファイルを作成したら、wp-adminと同じディレクトリへFTPソフトを使ってアップロードしましょう。

場所はwp-adminと同じディレクトリに置く必要があります。

/home/ドメイン名/www/ドメイン名

3-3：htaccessファイルに記述を追加

.htpasswdファイルの作成が完了したら、次は「htaccessファイル」に記述を追加しましょう。

すでにwp-adminと同じディレクトリ内に「htaccess」ファイルが存在しています。

そのファイルの中に書かれている記述の上に、下記のコードを追加しましょう。

フルパスは、ルートディレクトリからのパスを記載します。

例：/home/ドメイン名/www/ドメイン名/wp-admin/

3-4：htaccessファイルを上書きアップロード

htaccessファイルに上記の記述を追加したら、もともとのhtaccessにFTPソフトでアップロードして上書きしましょう。

以上の作業で全て完了です。サイトへアクセスし、ベーシック認証が出来ているか確認してみます。

3-5：サイトへアクセスして確認

3-1から3-4までの手順で作業完了後、サイトへアクセスすると以下の様なポップが出てくるはずです。

.htpasswdファイル作成時に決めたIDとパスワードを入力すると、サイトへアクセスする事が出来ます。

ぜひ参考にしてみて下さい。

4： プラグインでベーシック認証を行う方法

プラグインでベーシック認証を行う場合は、プラグインをインストールして有効化するだけで設定が完了します。

とても簡単にベーシック認証を設定する事が出来るので、一時的に使用する場合や難しい作業が面倒な場合には利用すると良いでしょう。

プラグインは「WP BASIC Auth」を使用します。

使用方法について詳しく解説していきましょう。

4-1：使用方法

プラグインのWP BASIC Authを使用してベーシック認証を行う方法を紹介します。

(1) プラグインをインストールして有効化する

WP BASIC Authをインストールして有効化しましょう。

プラグインを有効化すれば、他に行う設定はありません。

サイトへWordPressからログアウトした状態でアクセスすると、下記画面が表示されるので確認してみましょう。

普段使用しているWordPressにログインする際の、ユーザー名とログインパスワードでサイトへログインする事が可能です。

まとめ

WordPressでベーシック認証を行う方法について紹介してきました。

ベーシック認証は３つの方法で行う事が可能です。

• サーバーの管理画面から行う
• 手動で行う
• プラグインで行う

３つの方法について紹介してきましたが、１番かんたんでオススメなのは「サーバーの管理画面から行う方法」になります。サーバー側でベーシック認証の設定に対応していない場合には、手動で行う方法がオススメです。

ぜひ参考にして下さい。

WordPressにお問い合わせフォームを作成したい！

上記の様にお考えではありませんか？

ホームページやブログに設置する事で、仕事に繋がったりユーザーの満足度向上に繋げる事が出来るので問い合わせフォームは作成しておいた方が良いアイテムです。

でも問い合わせフォームってなんだか設置するのが大変そうですよね。

今回使用するのはプラグインの「Contact Form 7」です。

Contact Form7を使用する事で、本当に簡単に問い合わせフォームを作成する事が出来ます。

さっそく作成方法を解説していきましょう。

1：問い合わせフォームの作成方法

問い合わせフォームを作成する時に便利なのがプラグインの「Contact Form 7」です。

Contact Form7を使用すれば、簡単に問い合わせフォームを作成する事が出来ます。プラグインインストールから、作成方法までの全手順を紹介しましょう。

1-1：プラグインをインストールする

問い合わせフォームを作成する為に必要なプラグイン「Contact Form 7」をインストールして有効化しておきましょう。

1-2：Contact Form 7の設定をする

プラグインを有効化後、Contact Form 7で設定を行います。

WordPressメニューバーに「お問い合わせ」が追加されているのでクリックして開きましょう。

(1) 「お問い合わせ」を開く

(2) コンタクトフォーム 編集ページ

お問い合わせフォームの編集ページになります。

一覧が表示されている部分の「コンタクトフォーム1」を開きましょう。

(3) お問い合わせフォームの項目編集画面

お問い合わせフォームで表示される項目の編集画面になります。

項目を編集したい箇所がなければ、このまま固定ページにお問い合わせフォームを表示させてみましょう。

項目の追加方法は2章で詳しく解説します。

1-3：表示させたい箇所へショートコードを貼り付ける

お問い合わせフォームを表示させたい箇所で表示させる方法を紹介していきます。お問い合わせフォーム編集ページ上部の「ショートコード」を表示したい部分の「ウィジェット」や「テキスト」に貼り付けましょう。

(1) ショートコードをコピー

(2) 表示させたい箇所にショートコードを貼り付ける

表示させたい箇所にコピーしたショートコードを貼り付けて下さい。

今回は固定ページ(お問い合わせページ)のビジュアル部分に貼り付けます。

たったこれだけで、お問い合わせフォームは完成です。

プレビューで見てみると以下画像の様に表示されます。

2：問い合わせフォームの項目を増やす方法

問い合わせフォームの項目をもっと増やしたい！

Contact Form 7で設置したデフォルトの問い合わせフォームには

• 名前
• メールアドレス
• 題名
• メッセージ本文

上記4つの項目が入っています。

Contact Form 7のタグを使えば簡単に項目を追加する事が可能です。

項目を追加する方法について紹介していきましょう。

2-1：項目の追加手順

お問い合わせフォームに項目を追加する方法を紹介します。

(1) お問い合わせ➡︎「コンタクトフォーム」を選択

(2) 項目を追加したいフォームの「編集」をクリックして開く

(3) 項目を追加したい部分をクリックしてから「タグ」を選ぶ

項目を挿入したい部分をクリックしてから、画面上部のタグ部分から追加する項目を選びましょう。

(4) 「タグを挿入」をクリック

必須項目にしたい場合は、画面上部の必須項目部分に「✔︎チェック」を入れます。

その後、画面下の「タグを挿入」をクリックしましょう。

(5) 項目が追加される

項目が追加されています。

「電話番号」と書かれている部分も好きに名前を変更する事が可能です。

項目追加後は、画面下の「保存」をクリックして変更を保存しましょう。

プレビューで項目の追加が出来ているか確認してみましょう。

きちんと項目が追加されていれば完了です。

3：迷惑メールとスパム対策

お問い合わせフォームを作成した時に心配なのが「迷惑メール」や「スパム」の被害ですよね。

大量のメールが届くだけでも迷惑ですが、それ以上にウイルスに感染してしまう可能性もあるので出来るだけ対策を取っておきましょう。

Contact Form 7を使ってお問い合わせフォームを作成した際に、一緒に使う事が出来る便利なプラグインがあります。

• Akismet Anti-Spam

上記プラグインはスパムをブロックする事ができて、１度取得すれば複数で使用する事も可能です。

迷惑メールやスパムが届く前に事前に対策をとっておきましょう。

取得方法から設定完了まで詳しく紹介します。

3-1：プラグインをインストール

スパム対策に使用するプラグインをインストールしましょう。

「Akismet Aniti-Spam」とプラグイン新規追加画面で検索し”インストール後”に”有効化”して下さい。

3-2：Akismet Anti-Spamの「APIキー」を取得

Akismetのプラグインを有効化すると画面上部にバーが表示されます。

APIキーを取得して使用できる様にしていきましょう。

(1) 「Akismet アカウントを設定」クリック

(2) 「APIキーを取得」を選択

(3) 画面が切り替わります。下へスクロールして下さい。

(4) 一番左の「Get started with Personal」をクリック

(5) 必要事項を入力し「アカウントを作成」をクリック

• メールアドレス
• ユーザー名
• パスワード

上記３項目を埋めて「アカウントを作成」をクリックします。

(6) 料金を￥0に変更する

画面右側の赤枠で囲った部分が￥4,500と表示されていて、左側にクレジットカード情報の入力欄が出ています。この状態だとお金がかかってしまうので、赤枠で囲った料金部分を一番左へスライドして下さい。

(7) ￥0にして「URLと氏名」を入力する

料金部分を￥0にするとクレジットカード情報の入力欄が消えます。

• ① サイトURL
• ② 氏名

上記２つの部分を入力し一番下の「CONTINUE WITH PERSONAL SUBSCRIPTION」をクリックしましょう。

(8) 「Activate this site」をクリック

(9) APIキーの取得完了

APIキーが表示され、取得は完了です。

画面下の「変更を保存」をクリックしておきます。

APIキーを取得しただけでは完成ではありません。

Contact Form 7で文言を加えましょう。

3-3：Contact Form 7で文言を加える

スパムをブロックする為に、Contact Form 7でも文言を追加する必要があります。

(1) お問い合わせ➡︎「コンタクトフォーム」を選択

(2) スパムをブロックさせたいフォームの「編集」をクリック

(3) 「akismet:author」と加える

text*部分に「akismet:author」と書き加えます。

• 名前：変更前 [text* your-name] ➡︎ 変更後 [text* your-name akismet:author]
• メールアドレス：変更前 [email* your-email]➡︎ 変更後[email* your-email akismet:author_email]
• URL：変更前 [text your-url] ➡︎変更後[text your-url akismet:author_url]

上記の様にtext部分に書き加えましょう。

「akismet:author」の書き加えは1つでも効果はありますが、より多く書き加えた方が効果が増します。

3-4：スパムメールがブロックされ完了

お問い合わせフォームに文言を書き加えたら、本当にスパムがブロックされるか試してみましょう。

(1) スパムを送信

(2) スパムはきちんとブロックされる

正常なお問い合わせではないと判断されて、画面下にエラー文が表示されています。

きちんと設定が完了した事を確認したら設定は完了です。

まとめ

WordPressで作成したブログやサイトに「お問い合わせフォーム」を作成する方法について詳しく紹介してきました。お問い合わせフォームは便利なプラグイン「Contact Form 7」を使用すれば簡単に設置する事が可能です。

また迷惑メールやスパム対策も、AkismetプラグインであればContact Form 7と一緒に使用する事が可能です。ぜひ参考にしてみて下さい。

WordPressで、蛍光ペンの様なマーカーを使って文章を目立たせたいな。

上記の様にお考えではありませんか？

この様な蛍光ペンのマーカーで文章の大事な部分に、線を引く事で文章に強弱を与える事が出来ます。

文章に強弱ができると、リズムが出来るので文章もより一層読みやすくなるのです。

そんな蛍光ペンの様な線は一体どの様に引くのか気になりますよね。

プラグインの「TinyMCE Advanced」を使う事で簡単に蛍光ペンの様な線を引く事が出来る様になります。

また、CSSにコードを加えるだけで、下記画像の様に細い線を引く事も可能です。

今回は、上記の蛍光ペンを簡単に使える様にする方法について紹介していきます。

1：蛍光ペンを簡単に引く方法

蛍光ペンで引いた様な線を使いたい！

蛍光ペンで線を引いてみた。

上記の様に、文章に蛍光ペンを引く事で大事な部分を目立たせる事が出来ます。

重要な箇所に色をつける事で、文章にメリハリをつける事が可能です。

WordPressで作る文章に蛍光ペンの様なマーカーを使用するには、初心者でも簡単に使用する事の出来るプラグイン「TinyMCE Advanced」を使います。

まず初めに、この様な蛍光マーカーを使用する方法を紹介していきましょう。

プラグインを有効化するだけで簡単に使い始める事が可能です。

1-1：TinyMCE Advancedを有効化する

プラグイン➡️「新規追加」の順にアクセスし「TinyMCE Advanced」と検索してプラグインをインストールした後、有効化しましょう。

1-2：TinyMCE Advancedの設定で背景色を追加する

(1) 設定➡️「TinyMCE Advanced」を選択する

プラグインを有効化すると、設定項目の中に「TinyMCE Advanced」が追加されています。

クリックして開きましょう。

(2) 使用しないボタン項目の中から「 A 背景色」を選んでエディターに追加する

下段の「使用しないボタン」の中から「 A 背景色」を掴んで、上段のエディター部分にドラッグ&ドロップでボタンを追加しましょう。追加後、画面上部の「変更を保存」をクリックしてください。

上記画像の様に「 A 背景色」をエディター部分に追加したら、蛍光ペンが使用できる様になっています。

投稿ページへ移動して試してみましょう。

1-3：蛍光ペンを使用してみる

設定完了後、投稿ページ(記事を書く画面)のエディター部分を見ると「 A 背景色」が追加されています。

「 A 背景色」をクリックすると、カラーパレットが表示されるので好きな色を選んでみましょう。

”カスタム”と書かれている部分をクリックすれば、カラーパレットに表示されていない色を蛍光ペンとして使う事も可能です。

色を選択すれば、この様な蛍光ペンで線を引いた様に色をつける事が可能です。

2：CSSを追加して蛍光ペンをアンダーラインとして引く方法

プラグインを使用すれば簡単に蛍光ペンで線を引いた様に、文章に装飾をつける事が可能です。

次に紹介するのは、下記画像の様に蛍光ペンをアンダーラインとして使う方法になります。

この様に、がっつりマーカとして引くよりも、アンダーラインの方がしつこさがなく文章がより読みやすい印象になるでしょう。アンダーラインはCSSに記述を追加する必要があるので、必ず子テーマのstyle.cssで編集する様にします。

なぜならテーマを更新してしまうと親テーマが書き換えられてしまい編集内容が消える可能性があるからです。

初心者でも簡単に出来る様、コードは全てコピーペーストで出来る様に貼り付けます。

ぜひ参考にしてみて下さい。

2-1：AddQuicktagをインストールして有効化しておく

アンダーラインを引く方法を紹介していきます。

まずは、プラグイン「AddQuicktag」をインストールして有効化しておきましょう。

「AddQuicktag」を使用する事で簡単にアンダーラインをエディターへ追加する事ができ、いちいちHTMLを入力する手間が減ります。

2-2：style.cssにコードを追加する

style.cssにアンダーラインのコードを追加しておきましょう。

(1) 外観➡️「テーマの編集」をクリック

(2) 子テーマの「style.css」にコードを貼り付ける

子テーマのstyle.css、赤枠で囲った部分にアンダーラインのコードを貼り付けます。

今回はピンク色のマーカー・水色のマーカー・黄色のマーカーを追加したいので下記コードをそのままstyle.cssへ貼り付けて保存します。

1. /*ぴんく色マーカ*/
2. .pink_line {background:rgba(0, 0, 0, 0)
3.   linear-gradient(transparent 60%, #FFABCE 0%)
4.   repeat scroll 0 0;}
6. /*水色のマーカ*/
7. .blue_line{background:rgba(0, 0, 0, 0)
8.    linear-gradient(transparent 60%, #A7F1FF 0%)
9.     repeat scroll 0 0;}
11. /*黄色のマーカ*/
12. .yellow_line {background:rgba(0, 0, 0, 0)
13.    linear-gradient(transparent 60%, #FFFF88 0%)
14.     repeat scroll 0 0;}

色を変更したい場合は下記赤マーカをつけた部分の色コードを変更すれば、好きな色へ変更する事が可能です。

1. .pink_line {background:rgba(0, 0, 0, 0)
2.   linear-gradient(transparent 60%, #FFABCE 0%)
3.   repeat scroll 0 0;}

カラーコードは下記記事で取得する事が出来ます。

HTML,CSS カラーコード一覧表 ｜ 背景色や文字色の設定 

2-3：AddQuicktagでクイックタグを追加する

cssにアンダーラインを表示させるコードを追加したら、有効化しておいた「AddQuicktag」でクイックタグ追加の設定を行います。

(1) 設定➡️「AddQuicktag」をクリック

(2) アンダーラインのクイックタグを追加する

クイックタグをアンダーラインの色ごとに追加していきます。

• ① クイックタグのボタン名を入力：何色のマーカーなのか分かりやすい名称が良い
• ② ボタンのアイコンを選択する
• ③ 開始タグ：<strong class=”pink_line”>
• ④ 終了タグ：</strong>
• ⑤ 一番右端のチェックBoxにチェックを入れる

上記の様に設定したら、変更を保存します。

同じ様に色ごとに全て追加していきましょう。

2-4：実際にアンダーラインを引いてみる

style.css、クイックタグでの追加が完了したら設定は終わりです。

投稿画面でアンダーラインを実際に引いてみましょう。

(1) 蛍光ラインを引きたい部分を選択します。

(2)「Quicktags」をクリックしてマーカーの色を選ぶ

(3) アンダーラインが適用される

プレビューで見て見ると、cssで指定した色でアンダーラインが反映されています。

以上がCSSを追加してアンダーラインを引く方法です。

3：【おまけ】css記述の見方と変更方法

蛍光ペンの引き方について詳しく解説してきました。

プラグインを使えば簡単に蛍光ペンを引く事が可能です。

２章でアンダーラインを引く方法について紹介してきましたが、CSSに貼り付けたCSSの記述を変更する事で自分だけのアンダーラインを作成する事が可能です。

CSSで記述した下記画像の見方と変更方法を紹介します。

• ①➡️「クラス名」マーカー装飾を呼び出す際に必要になる名前
• ②➡️  ラインの太さ•••0〜100％で表し、数字が低いほど太くなる
• ③➡️ 「カラーコード」線の色を表す

CSSに記述する際に上記の①②③を変更すれば、自身の好きな様にマーカーをカスタマイズして蛍光ペンとして使用する事が可能です。ぜひ参考にしてみてください。

まとめ

WordPressで蛍光ペンを引く方法について紹介してきました。

蛍光ペンは、プラグイン「TinyMCE Advanced 」を使えばクリック１つで簡単に使用する事が可能です。

また、CSSを追加する事でカスタマイズした蛍光ペンも簡単に使用する事が出来ます。

WordPressで蛍光ペンを使用して、より読みやすいコンテンツを作成してみて下さい。

WordPressで投稿した記事の下に、関連記事を表示させたい！

上記の様にお考えではありませんか？

関連記事をコンテンツ下に表示させる事で、ユーザーに他のコンテンツを読んでもらえる可能性が高くなります。知りたい情報を関連記事で提供する事によってユーザービリティの向上にも大きく貢献するのです。

そんな関連記事の表示方法ですが、プラグインを使用すれば簡単にサムネイル付きで表示させる事が出来ます。

HTMLやCSSが分からなくても大丈夫です。

一番簡単な関連記事の表示方法について詳しく紹介していきましょう。

1：最も簡単に「関連記事」を表示させる方法

関連記事を記事下に表示させたいけれど、難しそう…。

上記の様に考えているあなたに、本当に簡単な関連記事の表示方法を紹介していきます。

今回は関連記事を表示させるプラグイン「WordPress Related Posts」を使って表示させていきましょう。

WordPress Related Postsは、関連記事を表示させるだけではありません。

• 表示デザインの変更
• PV数
• クリック率

上記３つの機能を利用・確認する事ができる優秀なプラグインです。どの様にユーザーが回遊しているのか、確認したい場合には「WordPress Related Posts」のプラグインをオススメします。

さっそくWordPress Related Postsを使って、関連記事を表示させる方法を解説していきましょう。

1-1：プラグインの有効化

関連記事を表示させるにはプラグインを用います。

「プラグイン」➡️「新規追加」の順のWordPressで操作し、「WordPress Related Posts」と検索しましょう。WordPress Related Postsが表示されるのでインストールし、有効化して下さい。

プラグインのインストール方法について詳しく知りたい場合は、以下の記事にて詳しく解説しています。

WordPressのプラグインをインストールする方法と出来ない4つの原因

1-2：WordPress Related Postsを設定

プラグインを有効化したら、設定を進めていきましょう。

(1) 設定から「WordPress Related Post」を選択

(2) WordPress Related Postの設定

WordPress Related Postの設定をしていきましょう。

• ① Related Post Title : 関連記事の上に表示されるタイトルの変更
• ② Number of Posts： 表示する関連記事の数を変更

上記２つを入力・変更したら下へスクロールします。

”Advanced settings”と書かれている右にある「▼」をクリックしてタブを開きましょう。

• ③ Enable Themes : 左側に✔️を入れて”有効化”する
• ④ Layout : 関連記事の表示デザインをクリックして選択
• ⑤ Display Thumbnails For Related Posts : サムネイル表示の有無
• ⑥ Display Publish Date : 投稿日の表示

上記③④⑤⑥に✔️を入れましょう。

必要であれば、その他のカスタマイズにもチェックを入れて下さい。

上記の様に設定し終えたら、一番下までスクロールして変更を保存し完了です。

1-3：表示を確認し完了

1-2で紹介した様に設定が完了したら、投稿した記事下に反映されているか確認してみましょう。

以上がプラグインを使った関連記事を表示させる方法です。

2：手動で関連記事を表示する方法

関連記事はプラグインを使えば簡単に表示できる事が分かりましたね。

過去の記事にも反映されるので、面倒な手間なく表示可能です。

しかし、きっとこんな場面に遭遇する事があるでしょう。

「この記事には、あの記事を関連記事で表示させたいな…。」

自動で関連記事が表示されるのは便利ですが、手動で選びたい場合もあるはずです。

そんな時、WordPress Related Postは手動で関連記事を選ぶ事も出来ます。

手動で関連記事を選択する方法を紹介しましょう。

2-1：関連記事を手動選択する方法

関連記事を手動で選択するには、WordPressにログインした状態で該当の記事をクリックして開きます。

(1) 関連記事下の「Edit Related Posts」をクリック

(2) 関連記事をドラッグ&ドロップ

下記画面が表示され、関連記事が選べる様になっています。

表示させたい関連記事をマウスで掴んで、上段にドラッグ&ドロップで移動させましょう。

関連記事を選び終わったら、画面右上の「Save and Close」をクリックして完了です。

簡単に手動で関連記事を選ぶ事が出来ます。

3：関連記事を表示する２つのメリットと１つのデメリット

関連記事をプラグインによって表示する事によって、メリット・デメリットはないのかな？

プラグインで関連記事を表示する事によって２つのメリットと1つのデメリットがあります。

メリット

• ユーザービリティの向上
• 過去記事のSEO強化

デメリット

• サイト速度低下の可能性

上記２つのメリットと1つのデメリットについて詳しく解説していきましょう。

3-1：２つのメリット

２つのメリットについて解説します。

投稿した記事に関連記事を表示させる事によって、ユーザーは深く知りたい情報までたどり着ける可能性があります。ユーザーの満足度が十分満たされれば、それはユーザービリティの向上に繋がっているのです。

また、古くなった記事を閲覧してもらうチャンスにもなります。

ある程度の記事数がサイト上にアップされた際に、過去に投稿した記事はどうしても目立たなくなってしまいます。閲覧が減少すると、SEO評価も下がってしまう可能性があるのです。

しかし関連記事で表示する事によって、過去に投稿した記事も閲覧してもらう事ができ過去記事の内部リンク・SEO強化に繋がっていきます。

3-2：１つのデメリット

プラグインで関連記事を表示するデメリットを紹介します。

プラグインを導入すると、必ずのちのち起こるのがサイト速度の低下です。

プラグインをいくつも入れる事によって、サイト自体が重くなり速度が遅くなる可能性があります。

プラグイン導入時には、不要なプラグインは削除しておく様にしましょう。

まとめ

WordPressで関連記事を表示させる方法について詳しく解説してきました。

関連記事はプラグインを使う事で、とても簡単に表示させる事が可能です。

関連記事を表示させる事によって、ユーザービリティの向上やSEO強化にも繋がるのでぜひ試してみて下さい。