投稿

投稿日:

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

サーバー側での作業が終わったので、今度はwordpress側での設定作業を行います。

管理画面の「設定」＞「一般」の URL を 2 ヶ所「http://～」→「https://～」に変更します。

「変更を保存」をクリックすると自動的にログアウトするので、再度ログインしましょう。

Search RegexでURL一括置換する

今まで書いてきた記事や固定ページのなかにある内部リンク・画像リンクを修正します。

［プラグイン］＞［新規追加］から「Search Regex」を検索して、インストール＆有効化します。

有効化したら、［ツール］＞［Search Regex］に入り、「http://自分のドメイン」を「https://自分のドメイン」に一括置換します。

①ボタンで変更箇所を確認し、問題なければ②ボタンで一括置換をします。

次に「http://」を入力して[Search]を押します。
そうすると外部のURLが出てきますので画像など読み込んでいるものがあればhttps化してるか外すかして対応します。

ウィジェットやプラグインも外部画像など設定していないか「http://～」で始まるものは全て確認してください。
ちなみに私はAll in one SEOのSNS向けの画像がhttp://～になっていました。

WordPressテーマをチェックする

WordPress テーマ内で、自サイトの URL が直接記述されているところがないかチェックします。
画像やscriptを読み込んでいる部分などがあれば、すべて「https」に変更していきます。
主にheader.phpやCSSで直リンクしているものが私はヒットしました。

こちらも「http://」で検索すると外部のURLが出てきますので画像やscriptなど読み込んでいるものがあればhttps化してるか外すかして対応します。

最終チェック

全てのページのアドレスバーが「保護された通信」と表示されているか確認して終了です。

投稿日:

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あたりの表示数は数設定してあげてください。ここを設定していないと本当に表示数が１となります）

投稿日:

[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で画面中央に配置するやり方もありますヨ。