当ブログを常時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対応していないと、動作しないものも出てくる可能性も…長く運営しているサイトでコンテンツ量も多いと他にもいろいろとやる事があるかもしれません。

 

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サイト高速化

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のバグ?

PHPでテンプレートをインクルードさせる

今では当たり前になってきた、サイト更新を簡単にしてくれるCMS(コンテンツマネジメントシステム)。でもコンテンツが少ない小規模サイトや、一度作ったら頻繁に更新しないサイトなどの場合、データベースを必要とするCMSの導入は逆にデメリットが大きい気がします。

小規模サイトでOK

CMS化に向いていないWEBサイト

  • 一度作ったらコンテンツの更新は殆ない
  • コンテンツ、ページ数が少ない
  • 新しいコンテンツの追加は常に外注する
  • 予算もないため小規模サイトでいい

それなら、従来の静的なHTMLだけで作ればいいだけじゃん。という話ですが、ヘッダーやサイドバーなんかは読み込むテンプレート形式にしたい・・・。

従来のHTMLオンリーなサイトは、コンテンツを追加すると、大体において全ページのリンク修正が発生します。CMSに慣れてしまうと“なんて無駄な作業なんだ”と感じてしまう(笑。

かといって、フレームやJSでやる方法はSEO的にちょっと避けたいところ。

PHPでファイルを読み込みテンプレート化

そんなときは、やっぱりPHPがかなり便利!
PHPインクルード
PHPが動くサーバーなら、PHPで任意のテンプレートファイルを読み込ませることができます。HTML、PHPはもちろんテキストファイルも読み込める。

<?php include("ファイル名"); ?>

読み込みの重複を絶対させない場合

<?php include_once("ファイル名"); ?>

include_once文で外部ファイルを一度だけ読み込む

続きを読む PHPでテンプレートをインクルードさせる

IE8以下にHTML5×レスポンシブウェブを対応させるJS

今更ながら、HTML5&レスポンシブウェブをIE8、IE7、IE6に対応させるための基礎中の基礎まとめ。

HTML5・CSS3はIE8以下では通常認識できない

  • IE8以下はHTML5に対応しない。タグを認識できない。
  • レスポンシブウェブに欠かせないMedia Queriesが効かない。CSS3だからあたりまえ。

Media Queriesは、デバイスの解像度(画面サイズ)によってCSSを切り替える方法なので、レスポンシブウェブデザインにするサイトは必要不可欠。逆にレスポンシブ対応でなければ気にしなくていい。 続きを読む IE8以下にHTML5×レスポンシブウェブを対応させるJS