SQLの窓

2018年07月24日


無料SSL(Let's Encrypt) : [さくらインターネット]SSLサーバ証明書発行のお知らせ

https://winofsql.jp/info.php


さくらインターネットやその他のレンタルサーバで、無料SSL が使用可能である事を知り、インストールしました。インストール後、[さくらインターネット]SSLサーバ証明書発行のお知らせ というメールが来ましたが、手順はほぼボタンをクリックするだけです。

【無料SSL】サーバコントロールパネルからの導入手順

最初に、さくらインターネットで取得・管理しているドメインを利用する他社で取得・管理しているドメインを利用するを確認します。

自分は、さくらインターネットで取得・管理しているドメインを利用しています。

▼ 確認事項

さくらインターネットにて2004年7月15日以降に取得・移管された独自ドメインに限る。
( 会員メニューの契約情報の下のほうにある サービス利用期間 で確認できます )

さくらインターネットのネームサーバを利用する事
プライマリネームサーバ:ns1.dns.ne.jp
セカンダリネームサーバ:ns2.dns.ne.jp
対象となるドメインのAレコードの値がさくらのレンタルサーバに向いている必要がある。

以上の情報は、会員メニュー > ドメインメニュー > ゾーン編集 で確認できます。
( エントリ名 が @ の部分で確認ができます / ドメインで ping を実行して取得できた IP が A レコードに対応 )

おそらく、たいていの場合は問題無く、そのまま SSL の設定手順に基づいてクリックしていくだけです。

設定・お申し込み手順

1) SSL設定を有効にする

2) 確認

2) の確認は要するにまず、http:// ではなく https:// で表示されるかどうかです。

▼ ページの編集

問題は、そのページから読み込んでいる、.css .js 及び 画像が https:// でアクセスされていないと、Google Chrome の場合 URL の左に『保護された通信』と表示されません。

css 内に記述されている URL や、js 内より動的に作成されるものも全て変更する必要があります。特に、画像類も全て対象になるので細かくチェックします( ファイル名や画像名は、F12 のデベロッパーツールのコンソールで確認できます )

▼ 変更が不十分だとこうなります


▼ 証明書の更新について

メールの中に以下のように書かれています
今回お申し込みいただいた無料SSLについては証明書は有効期間が90日となりますが、サーバで自動更新いたしますので今後更新作業を行う必要はございません。ご利用を停止したい場合は「秘密鍵を含む設定の削除」から証明書を削除してください。
※ レンタルサーバ側で自動更新してくれるので、特別な配慮は不必要のようです。 http から https へのリダイレクトについて 暗号化(SSL)を有効としている場合、暗号化しているページへ誘導したい に以下のような .htaccess 用の記述が書かれています。
SetEnvIf REDIRECT_HTTPS (.*) HTTPS=$1 
<IfModule mod_rewrite.c>
RewriteEngine on 
RewriteCond %{ENV:HTTPS} !on 
RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] 
</IfModule>
ですが、自分はすでに .htaccess を配置していろいろやっているので、該当するフォルダ内の .htaccess の最後に以下を追加しました。
RewriteEngine on 
RewriteCond %{ENV:HTTPS} !on 
RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] 
※ もう少しきちんと記述方法を調べれば、もっと限定した処理も書けると思います ▼ 昔設置した、小文字から大文字のリダイレクト
RewriteEngine On
RewriteBase /
RewriteRule va003334/(.*) VA003334/$1 [R,L]
posted by lightbox at 2018-07-24 21:53 | WEBサービス | このブログの読者になる | 更新情報をチェックする

2016年09月30日


イメージユニット作成サービス / window.open と Lightbox2 と Shadowbox

大きい画像を表示する為の選択肢として、

1) window.open
2) Lightbox2
3) Shadowbox

のいずれかを選択して貼り付けコードを作成します。試してみたい場合、lightbox や shadowbox のライブラリを意識する必要はありません。ご自分でホスティングする方法は、以下のリンク先を参考にして下さい。

Lightbox2 ライブラリの今時の使い方
このユニットは以下のコードで設置できます
<script type="text/javascript" src="http://lightbox.on.coocan.jp/js/createImageUnit.js" charset="utf-8"></script>
関連する記事

JavaScript : 入力文字列を htmlentity に変換する
( Lightbox2 では、タイトル部分に htmlentity で HTML を設定できます )


タグ:Webサービス
posted by lightbox at 2016-09-30 03:16 | WEBサービス | このブログの読者になる | 更新情報をチェックする

2016年08月06日


【Google ドライブウェブホスティング機能の廃止で、2016 年 8 月 31 日 で利用ができなくなります】Google ドライブの公開ページと管理ページを行ったり来たりする為のブックマークレット

Google ドライブにおけるウェブ ホスティング機能の廃止について

この機能は、Google の方針により、2016 年 8 月 31 日 で利用ができなくなります



▼ 以下古い記録になります
-----------------------------------------------------------------------------


Google ドライブを共有設定で、『ウェブ上で一般公開』すると、WEB ページを公開できるようになりますが、簡単に双方向の移動方法が用意されていないので、ブックマークレットを作成しました。

それぞれの URL で判断して切り替えるようにしています。

Google WEB切替



関連する記事

Google ドライブにWEBページを作成する方法



posted by lightbox at 2016-08-06 12:48 | WEBサービス | このブログの読者になる | 更新情報をチェックする

2016年05月22日


フリーフォントでボタン素材作成のバリエーションサンプル / ノーマル・文字なし・太枠・フォント

たくさんのフリーフォント(約260種類)を使用していろいろなボタンを簡単に作成できます。

▼ 以下は jQuery で実際に動作するコンテンツです



posted by lightbox at 2016-05-22 20:19 | WEBサービス | このブログの読者になる | 更新情報をチェックする

2016年05月05日


utf8 文字ツール の 文字参照リンクの作成方法



http://lightbox.on.coocan.jp/html/utf8tool.php?hex=26C4&col=FFC0CB&target=26C4,26C5,26D4,26F3,26F5,26FD,2709

この URL で utf8 文字ツール を表示すると、先頭が 0x26C4 の文字になり、26C4,26C5,26D4,26F3,26F5,26FD,2709 で指定された文字の背景を col で指定した背景色にする事ができます。(hex=26C4 は、num=9924 でも動作します)

また、この URL で表示されたページにあるボタンで表示位置を変更しても、範囲内に選択した文字があれば、背景色は変更されたまま表示されます。元の位置に戻したい場合は、F5 で再表示して下さい。



1) 右上の ● をクリックするとその文字が先頭になります 

2) 文字の下の &#nnnnn; は、HTML 上で有効な文字そのものです 

3) その下は、nnnnn を 16進数に変換したものです 

4) 一番下は、文字そのもののコードを16進数であらわしています
3種類のコード部分はクリックすると選択されるので、CTRL+C でコピーして利用しやすくなっています。 本体の文字が連続して欲しい場合は、先頭にしたい文字の右上の ● をクリックしてから、文字一覧取得ボタンをクリックしてウインドウを表示させると、その中のテキストエリアに320文字を連続して表示しています。
posted by lightbox at 2016-05-05 20:24 | WEBサービス | このブログの読者になる | 更新情報をチェックする

2016年04月22日


フリーフォントでボタン素材作成

基本的なパターンのバリエーションに対して、色違いのサンプルを作成しました。

これ以外にも簡単に以下のバリエーションを作成できます
1) フォントの種類を変更
2) 文字の輪郭を別の色で作成
3) 文字を上下左右に寄せる
4) ボタンに太い枠を作成する
5) フォントサイズを変更する
6) ボタンのサイズを変更する( ドラッグでも変更できます )
7) 角丸の大きさを変更する
8) ボタンの光沢の強さを調整する
9) ボタンの文字を表示しないで作成する

光沢 : 0.6, グラデ : 50

➡ 色別

光沢 : 0.6, グラデ : 0

➡ 色別

光沢 : なし, グラデ : 50

➡ 色別

光沢 : なし, グラデ : 0

➡ 色別

光沢 : なし, グラデ : 0, ドロップシャドウ( 色:40190B )

➡ 色別

光沢 : 0.6, グラデ : 50, 文字枠色 : D44617

➡ 色別

光沢 : 0.6, グラデ : 0, 文字枠色 : D44617

➡ 色別



posted by lightbox at 2016-04-22 14:41 | WEBサービス | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり