当ブログを常時SSL化しました。

利用しているレンタルサーバのエックスサーバーでは、2016年に「無料独自SSL」(ドメイン認証型SSL証明書「Let’s Encrypt」)が使えるようになりまして、独自ドメインをなんと無料でSSL化できてしまうのです!
なので、運営しているサイトをこつこつ常時SSL対応しています。

Googleが「HTTPS をランキング シグナルに使用します」と発表してからは、ウェブサイトのHTTPS化(常時SSL)が推奨されはじめているので本当にありがたいっ。

SSLとは、インターネットなどのTCP/IPネットワークでデータを暗号化して送受信するプロトコル(通信手順)の一つ。
SSLとは – IT用語辞典

※大手企業や公的機関などセキュリティの信頼性を明示したい場合は、シマンテックやジオトラストといった知名度の高い有料SSLがいいかと思います。

また、すでに運営しているサイトをHTTPS化するとサイトURLが変わるので(http://example.com ⇒ https://example.com)、やる事が多々出てきます。

既存サイトの常時SSL化で主にやる事

・重複コンテンツにならないよう301リダイレクト設定
・内部リンクのURL変更(画像URLパス含む)
・外部連携サービスの再登録orURL変更

また外部で利用しているプログラムがSSL対応していないと、動作しないものも出てくる可能性も…長く運営しているサイトでコンテンツ量も多いと他にもいろいろとやる事があるかもしれません。

 

WP4.9.1へアップグレード

ブログをアップグレードするのを忘れていました..
そして久しぶりの更新(;´∀`)

WP4.7から一気にWP4.9へアップグレードさせたので少々不安だったのですが、特に問題なく動作してます。

PHPバージョンも7に切替

レンタルサーバーがPHP7をリリースしているので、5系から7.1に切替ました。

PHP7は、以前のバージョンに比べパフォーマンスがかなり高いそうでWP高速化に期待が持てます。※但し古いバージョンのPHPだと動かなくなるのでご注意ください。

あとはMySQLデータベース5.0→5.5への移行!…なんですが、別サイトでエラーが出たので腰が重い。もう少し時間に余裕があるときにやろうかと思います。

icomoonのアイコンフォントをIE7・IE6にも表示させる

「icomoon」というサイトで作成したアイコンフォントが、IE7以下で表示できなくてハマリまくった。
しょう~もないミスでしたが、忘れてしまいそうなのでメモ。
(アイコンフォントの作成方法はすっとばしますのでご了承ください

まず、「icomoon」にてIE7/IE6対応のファイルもダウンロードできるよう設定。

icomoom2

GenerateFont→Preferncesクリックで「Suport IE7 & IE6」をチェック。icomoom1

WEBフォントをダウンロードすると「ie7」というフォルダ(ie7.jsとie7.cssが入っている)も一緒にダウンロードできる。

続きを読む icomoonのアイコンフォントをIE7・IE6にも表示させる

mod_pagespeed設定でWEBサイト高速化

当サイトのレンタルサーバーはエックスサーバーを使用しているんですが、mod_pagespeedが設定できるよとのメール案内があったので早速試してみました。

まずは、このサイトに設定…
なにか変な影響あるかな~・・・とドキドキでしたが、何の問題もなく動作♪体感速度は、かなり早くなった気がッ

GTmetrixで計測してみると・・・

pagespeed1

トップページがA台に突入…!

※エックスサーバーは、「サーバーパネル」→「HOMEPAGE」メニューにある「mod_pagespeed設定」へ移動し、「ON」に変更するだけ。
詳しくはコチラ→エックスサーバーマニュアル

さらにもう一つ、画像が多くて重いサイトにもmod_pagespeedを設定。

pagespeed2

キャッシュ系プラグインなどいろいろ入れても、F~C台から改善できなかったトップページが・・・

ナント、B台!YSlowではA台!

今までの、プラグイン試行錯誤はなんだったんだ…(笑

続きを読む mod_pagespeed設定でWEBサイト高速化

投稿されたタクソノミーターム名を表示する

記事に投稿されているカスタム分類(タクソノミーターム)だけを表示するタグ。

taxonomyは表示したいカスタム分類のタクソノミー名を記入すること

リンク付きで表示

■カンマで表示

<?php echo get_the_term_list( $post->ID, 'taxonomy', '分類: ', ', ', '' ); ?>

■ulリストで表示

<?php echo get_the_term_list($post->ID, 'taxonomy', '<ul ><li>','</li><li>','</li></ul>');  ?>

続きを読む 投稿されたタクソノミーターム名を表示する

first-letter×letter-spacingでSafari4がクラッシュ?

レスポンシブウェブサイトを制作中、MacのSafari4.1.3にてサイトを確認したらクラッシュする…。

(´;ω;`)なんでよ

低スペックMacのせい?
と思ったものの画像やソースの容量はかなり抑えたし、しかも他の重いサイトは表示される。これはソースに問題ありと見てエラー箇所の洗い出し。

JSの動作、記述ミスなどチェック

jqueryを幾つか設定しているのでまずはそこから確認。

  1. jqueryを一ずつ外して動作確認
  2. 別ファイルでjqueryをセットし個別に動作確認
  3. JS・HTML・CSSの記述ミスがないか確認
  4. JS・HTML・CSSの文字コードを統一させる

が、なんの問題もないし変わらない。

続きを読む first-letter×letter-spacingでSafari4がクラッシュ?

HTML5のa要素(リンク)が便利

何が便利かというと…リンクできる範囲がかなり広がった点。

HTML 4/XHTMLまでは<a>要素はインライン要素であるため、ブロックレベル要素(p、div、ul、h1、h2…)などを囲んではいけなかった。

▽HTML4/XHTMLまでの<a>要素

<div class="box">
<p><a>ブロックレベル要素を囲んではいけない</a></p>
</div>

が、しかし!
HTML5ならブロックレベル要素も囲んでいいのです。

▼html5からの<a>要素

<a>
<div class="box">
<p>html5からのa要素は、様々なタグや複数要素を囲むことができる。</p>
</div>
</a>

html5はインライン・ブロックレベル要素という概念がなくなった

HTML5では、インライン要素とブロックレベル要素の分類は廃止されており、 段落・リスト・表などのセクションに対しても、全体を<a>~</a>で囲んでリンクを指定できるようになっています。 ただし、その中に他のリンクやフォームボタンなどのインタラクティブコンテンツが含まれる場合には、リンクを指定することはできません。
<a>-HTML5タグリファレンス

ということなので、HTML5ならDIVやP全体にリンク範囲を広げたい…とかでCSSやJSをいじくりまわす必要もないわけです。

ちなみに、SEO的にどうなのかはわからない。
なるべくは”文字にのみ”がいいのかもしれないが…構文的に問題ないわけだし、余計なソースも増やしたくないのでこれを推し進める(笑

ただし以下のようなやり方はダメ。

<p>
<a>
<h1>間違ったやり方</h1>
<p>html5からのa要素は、様々なタグや複数要素を囲むことができるが…</p>
</a>
</p>

<a>要素を削除してみるとわかりますが、<p>の中に<h1>があったり<p>があるのは間違っています。基本的な構文、正しいコンテンツ・モデルを意識したい。

続きを読む HTML5のa要素(リンク)が便利

Androidの標準ブラウザ、widthのバグ?

Androidには標準ブラウザがある。
その名も「ブラウザ」。

android_browser

スマホ操作をレクチャーしてもらったときには、二度聞きしてしまった。名前からしてふざけているというか、やる気のない感じがします…個人的に(笑

通常はChrome使いなものの、サイト制作時にこの「ブラウザ」でも確認しているんですが、IE以上のヤバイ子ちゃんッぽい。

文字要素の幅がおかしなことに

ハマったのが、文字のレイアウト崩れ。
スマホを縦から横に切り替えたときの動作を確認していたら、コンテンツ内容(たぶんP要素)が指定の幅に広がらず、狭まってしまう。他ブラウザでは何の問題もないし、CSSやHTMLなどプログラムソースにおかしなところはない…なぜ…?? 続きを読む Androidの標準ブラウザ、widthのバグ?