wordpressサイトで常時SSL化した手順1/2[エックスサーバー]

かねてから予告されていた通り、2018年7月からGoogle Chrome(グーグルクローム)ブラウザではSSLに対応していない「http://」で始まるすべてのWebサイトでURLバーに目立つように警告が表示されるようになります。

この関係でHPをSSL化してほしいという依頼が増えてきているので、実際に自分のサイトをSSL化してみた手順をまとめてみました。

ちなみに下記サイトで警告が出るサイトかどうかを調べることができます。
https://www.websecurity.symantec.com/ja/jp/support/ssl-checker

エックスサーバーでの設定

サーバーパネルのドメイン>「SSL設定」をクリックします。

ドメインを確認し、選択するをクリック。

「独自 SSL 設定の追加」タブをクリック。
再度ドメインを確認し、右下の「独自 SSL 設定を追加する(確定)」を押して終了です。「CSR 情報(SSL 証明書申請情報)」のチェックボックスは空欄で問題ありません。(ちなみに画像では(設定済)とついていますが通常は出ませんので気にしないでください←すでに設定した後でキャプチャ取ったため)

これでサーバー側の設定は終わりですが、すぐに「https://~」を見ても以下のような画面が表示されるだけです。

設定完了まで 30 分 ~ 1 時間ほどかかり、その後サイトが表示されるようになります。
「https://~」でサイトが表示されるのを確認してから次の作業に移ってください。
表示される前に WordPress 側で作業してしまうと、サイトが真っ白になって管理画面に入れなくなることもあります。

常時SSL化

独自SSLの設定が完了した時点では、自動的に「https://~」のURLへ転送されません。
Webサイトにおけるすべての表示を常時SSL化する場合は、「.htaccess編集」で以下の記述を追加します。

RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

「http://~」のURLでアクセスした際、自動的に「https://~」のURLへ転送されていれば設定完了です。

contact form7のお問い合わせフォームから海外のスパムメールが増えたので対策

wordpressでメールフォームを設置する際に便利なプラグイン「contact form7」。
本当にお世話になっているんですよね。
設置も簡単だし、カスタマイズも出来るし、プログラマーではないデザイナーの私にとってはwordpress様様で、contactform7様様なのです。

そんなメールフォームから最近ちょくちょく海外からのスパムメールが来まして。
スパムメールの対策を調べてやってみたところ、あまりに簡単だったのでメモとして残します。

プラグイン「akismet」を追加

akismet:author

送信者の名前を入力する項目にこのオプションを追加する。
例: [text* your-name akismet:author]

akismet:author_email

送信者のメールアドレスを入力する項目にこのオプションを追加する。
例: [email* your-email akismet:author_email]

akismet:author_url

送信者の URL を入力する項目にこのオプションを追加する。
例: [text your-url akismet:author_url]

この赤文字のテキストを既存のフォームに追加するだけでバッタリスパムメールが来なくなります。

たまにチェックボックスを追加してスパムを弾く方法とか出てますけど、やってみたら普通にスパムきてました(笑)
contact form7であればAkismetと連携した、このテキスト追加で結果が変わります。効果があります。

ぜひご参考までに~!

2018 wordpressひとまずこれ入れておこう!なプラグインリスト

久しぶりに一からwordpressを導入したサイトを作ることにしたので、個人的にこのプラグイン入れておけばいいやろ、と思うリストを作ってみました。
あとは随時必要に応じてプラスマイナスしておけばいいと思います。

初期値で必ず必要

WP Multibyte Patch

本家版、日本語版 WordPress のマルチバイト文字の取り扱いに関する不具合の累積的修正と強化を行うプラグインです。英語圏で作られた WordPress を日本語環境で正しく動作させるために必要となる機能を網羅していますので、なんらかの対策を行っていない場合は導入をおすすめします。

セキュリティ関係

Akismet Anti-Spam (アンチスパム)

ある程度アクセスを集めるとスパムコメントも比例して増えてきます。Akismetは、そういったスパムと思われるものを自動判定して分類してくれる便利なプラグインです。
また、WordPressをインストールするとデフォルトで入っています。

SEO関係

Google XML Sitemaps

Google XML Sitemapsは、 WordPressで構築されたサイトの サイトマップを自動で作成・通知できる便利な プラグインです。

All In One SEO Pack

All in One SEO Packはインストールするだけで簡単にWordPressでのSEO設定を可能にしてくれる優れたプラグインです。
特にwordpressの初期値ではdescripctionが設定されていなかったりするのでこのプラグインは自分の中ではかなり優先度が高いです。
各ページのタイトル設定、Googleアナリティクスとサーチコンソールの設定、各アーカイブページのnoindexの設定、キーワード設定、記事にSEO用のタイトルやキーワードを設定することが出来ます。
私の中で一番有難い機能としてはOPG設定が出来ることです。

お問い合わせ

Contact Form 7

お問い合わせフォームやアンケートフォーム、採用応募フォームなどフォーム設定するならこのプラグイン。Akismetとも連動してスパムを弾いたり、自動返信設定も出来て優秀で有名。

補助

PS Auto Sitemap

自動でページにサイトマップを出力してくれるプラグインです。ページ数が多いサイトや更新が多いサイトでは自動で生成してくれるこのプラグインが手間がかからず時短目的で入れています。
逆にそこまで更新やページが多くない企業サイトでは入れません。

Scroll Back to Top

「上にも戻る」系の中でもそこそこ設定の幅があるプラグイン。便利ですがマストではありません。お好みで。

容量軽く

Better Delete Revision

記事やページを保存、編集するたびに履歴としてデータが保存されていくリビジョン機能。
途中でブラウザがクラッシュしたり、間違ってページを閉じてしまってもリビジョンがあれば容易に復活が可能となる分、記事を書くたびにデータベースに不要なデータが蓄積されていくことになります。
そんなリビジョン削除ができるプラグインです。

アクセス解析

Google Analytics Dashboard for WP

Google Analytics Dashboard for WPは、Google Analyticsのアクセス解析レポートをWordPressのダッシュボード上に表示できるプラグインです。
なんだかんだでgoogleanalyticsってそこまで毎回確認しないので管理画面ですぐに見れるとありがたいです。

SNS

WP Social Bookmarking Light

WP Social Bookmarking Lightとは、WordPressの投稿記事にソーシャルボタンを設置できるプラグインです。 これだけスマートフォンが普及し、手軽にネットにアクセスできるようになった現在、集客をあげるためにはSNSの活用が必要不可欠です。 Facebook、Twitter、Instagram、LINEなど有名サイトからマイナーサイトまで幅広く設定が可能です。

バックアップ

WP-DBManager

WordPressで使用しているMySQLデータベースのバックアップ管理を行うプラグインです。あらかじめ決めたスケジュールに沿って自動的にバックアップを行ってくれたり、ファイルの圧縮やバックアップファイル数の制限、バックアップファイルをメールにて自動送信する機能などもあります。
案外サーバーまで触れない案件ってあるので保守範囲がどこまでかは分かりませんが何かあったときのためのバックアップは必ず取っておいたほうがいいと思います。

 

いかがでしたか?
ほとんど有名プラグインばかりですが、安定していることが一番条件なので間違いはないと思います。
Let’s enjoy WordPress!

フリーランス wordで作成した見積書の印鑑位置を調整する方法

見積書やら請求書から発行する際に必要な印鑑。
その位置の調整で少し手間取ったので備忘録です。

Microsoft Office 2003を使ってます

普通に「挿入」→「図」→「ファイルから」でハンコ画像を挿入すると、思った位置にいかないし、画像の分だけ余白が出来てレイアウトが崩れます。

ということで位置調整を画像に対して行いました。

該当画像を選択して右クリック。
「図の書式設定」→タブ「レイアウト」→「背面」→「OK」です。

iPhoneに緊急速報がきた!音や設定オフの方法

この前台風で緊急速報が何回も鳴っていてうるさかったので、結局音の調整も分からず設定だけオフにして寝ましたとさ(^^)

というわけで設定オフの方法と音の設定についてまとめました。

緊急速報を急いで閉じたので再度見たいとき

緊急速報を思わず「うるさい!」と閉じた後でもう一度見たいときは上部から下へフリックします。
するとこんな感じ↓で最近のお知らせを確認することが出来ます。

さらに詳しく見たい時はその速報をタップすると個別の速報画面に表示が変わります。

このとき下部にある「設定」を押すと設定画面に移行します。

さあ設定をオフにしよう

ホーム>設定>通知からもこちらの画面に移行出来ます。
下部のほうに「緊急速報」の項目があるのでボタンをオフにすると通知が来なくなります。

緊急速報の音は小さくできるの?

現在iPhoneのiOSのバージョンが10なんですけど、よっぽどバージョンが古く更新していない人を除き音量設定出来ません。
iOS 7.0~7.1は音量設定できたそうですが、もう設定オフするかオンかしかないようです。

そして最大音量で鳴るようになっているので、いくらマナーモードにしていようが音量設定を小さくしていようが一切関係なく鳴ります。

before afterタグで『』カギカッコなどの記号【】をCSSで表現する

【拡大する】などのアンカー付きの文章に対して出来れば【】なしでCSSのみで装飾したい場合、cssのcontentタグです。

<span class=”kakko”>拡大する</span>

 

.kakko {
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left:1em;
}
.kakko::before,
.kakko::after {
position: absolute;
content: ”;
width: 20px;
height: 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kakko::before {
top: 0;
left: 0;
content:”【”;
}
.kakko::after {
top: 0;
left: 5em;
content:”】”;
}

wordpress記事を多く書くサイトなら設定しておきたい更新通知サービス

2017wordpressの設定「投稿設定」に更新情報サービスがあります。
管理画面にはこのように書かれています。

新しい投稿を公開すると、WordPress は次のサイト更新情報サービスに自動的に通知します。詳細は Codex の Update Services を参照してください。複数の URL を入力する場合は改行で区切ります。

http://wpdocs.osdn.jp/%E6%9B%B4%E6%96%B0%E9%80%9A%E7%9F%A5%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9#.E6.97.A5.E6.9C.AC.E8.AA.9E

そこでcodexを確認してみると記入例がありました。

http://api.my.yahoo.co.jp/RPC2
http://bulkfeeds.net/rpc
http://blog.goo.ne.jp/XMLRPC
http://blogsearch.google.co.jp/ping/RPC2
http://coreblog.org/ping/
http://ping.bloggers.jp/rpc/
http://ping.blogmura.jp/rpc/
http://ping.cocolog-nifty.com/xmlrpc
http://ping.exblog.jp/xmlrpc
http://www.blogpeople.net/ping/

これをこのまま貼り付けて完了!

投稿を作成・更新する度にXML-RPC ping を送信することによって、ブログが更新されたことを人気のある更新情報サービスに自動的に通知します。
更新情報サービスは順番にこうした ping を処理し、独自のインデックスを更新します。

Google ブログ検索や Yahoo! ブログ検索のようなサイトから投稿記事への誘導してくれて集客につなげてくれるサービスなのでここは設定しておきましょう!

WordPress Infinite Scrollで次のページが読み込まれない時の対処

なぜ次ページがスクロールで効果ないのか悩みに悩んで、イージーミスだったことに気付いたのでメモ。

まず次ページのURLが存在するかを確認してください。
http://あなたのドメイン/page/2
私の場合はトップページでInfinite Scrollを設置したのでhttp://ドメイン/page/2が次のページにあたりました。

そうすると404エラーでページ自体が存在していないことが判明!
WP-PageNaviのプラグインでページ送りを設定していたのですが、おそらくこのあたりの問題ぽい。
設定→表示設定→1ページに表示する最大投稿数を「1」に設定して、バッチリ表示することが出来ました!
(ちなみに1Pあたりの表示数は数設定してあげてください。ここを設定していないと本当に表示数が1となります)

[css]positionで中央位置に置く

レスポンシブサイト制作の際に角丸ボタンの配置がPCサイトではabsoluteで右上に設定しているのに、スマホサイトではabsoluteで下部中央だったのでちょっと悩みました。

そこでスマホサイトの角丸ボタンのCSS設定したメモ。

 #news_link {position:absolute; top:auto; right:0; bottom:30px; left:0; width:100%; text-align:center;}

#news_link a {     border-radius: 40px 40px 40px 40px;    display: block;    border: 1px solid #999;    width: 200px;    padding: 7px 0;    text-align: center;    font-size: 15px; margin:0 auto;}

ここでのミソは右と左のabsoluteが0であること(もちろん上下の中央をとりたいならtopとbottomを0にする)。
そしてmargin:autoをとっていること。

個人的にはあまり使うことない手法だったので、へ~と思った次第でした。
transform: translateで画面中央に配置するやり方もありますヨ。