Webサイト制作日報

ポップアップで拡大画像をエフェクト表示させるLightBox系ライブラリは多々ありますが、非常に人気があり、個人/商用はもちろん通販サイトなど多目的なサイトで利用されています。

しかし、継続利用（jQuery等の干渉が毎度めんどいから継続）している
元祖Prototype系LightBox(v2.05)だとレスポンシブ非対応

スマホやブラウザを縮小した際にも拡大画像が原寸大のままハミ出してしまい、美しくありません。

「簡単にレスポンシブに出来るだろう」
と思いましてゴニョってみましたら
３時間も掛かりました・・・

画像サイズのCSSがstyle属性として直接指定されてしまう。
CSSファイルから上書きできない。
値を消すよう.jsファイルを編集しても外枠の縦高が元画像の値になるか、デフォルトの250pxが最低値として適用される。
height: auto !important;で上書き解除するも効かないｗ

lightbox.js
// this.prevLink.setStyle({ height: imgHeight + 'px' });
// this.nextLink.setStyle({ height: imgHeight + 'px' });
各部の高さ指定を削除してもダメ
inlineにしても高さが消えない・・・どんなBOXや？
試行錯誤した結果、実はFONT-SIZEが落とし穴！　あり得ない設定ｗ
// if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'});

これらを前提条件として、
CSS(@media)で変更すればOKで、style属性を打ち消す最優先な!importantも多用します。

JavaScriptの勉強を疎かにしたから、今こんな大変な目にあっています・・・

| コメント(0) | WEBサイト設定 | |

お問い合わせフォームからのスパムで、
同じ誘導URLのスパムメールが来てウザイとの事で、スパムのIPを調査してみた。

188.143.232.15  188.143.232.41  188.143.232.34  188.143.232.62
188.143.232.70  188.143.232.40  188.143.232.16  188.143.232.19
188.143.232.26  188.143.232.37

ロシアのIPです。.htaccessでIPやUA単位でアクセス拒否/禁止にすれば良いが、毎回毎回個別対処するのは現実的に手間が掛かかるので１発設定で済ませたい！
割り当てられたIPなので共通部分のアドレスを利用
188.143.232が今回の共通点のようです。
188.143.232.〜の全てを適用させるには、CIDRでも良いようですが今回は単純に、
188.143.232. のみ記述して*ワイルドカードにしておきます。

order allow,deny
allow from all
deny from 188.143.232.

ルート配置でも良いが、下層の動作ディレクトリのみで良いでしょう。
また、スパマーは403になるので、動的な404.ファイルに誘導しておく。

その他、色々な対抗策（英文のみ禁止やNGキーワード）もありますが、やりすぎて一般ユーザーまで拒否っちゃうといけません・・・（URLのみ連絡する人や文章内一致も想定されるので）

国別IPやブラックリストIPなどで予防するのも良いですが膨大なデータ・・・　スパム対策はイタチごっこでキリが無い（IP変更されたら無意味な）対処方法なので、小者は泳がして、あまりにしつこい常習スパムのみを内偵し、対処するしかありません。

| コメント(0) | WEBサイト設定 | |

最近、プロバイダーなどのブログサービスが廃止になることが多く、そこの多くのユーザーは廃止や引越しを余儀なくされるケースが多いようです・・・
本来は、有料回線ユーザーの為の無料オプションサービスなのに、赤字部門→経費削減でサービスを廃止するって・・・おかしいですよね→OCN,KDDI

日本で一番有名でユーザー数が多いブログサービスは、
Amebaブログ（アメブロ）だと思います。
（サービスの選択は、相性が一番かな？ 好みのブログサービスを選んでください）
個人的には、管理面での自由度は少ないし、広告が多いのが残念ですが、コミュニティが盛んなので記事のマーケティングは広がります。アメブロならサービス廃止のリスクも少ないかも。
（広告が多い理由は、広告収入でサービスを運営しているからでしょう）

アメブロの記事投稿方法

1. アメブロの管理画面にログイン
   アメーバID　パスワードを入力してログイン
2. 「ブログを書く」ボタン
   
3. • 記事のタイトルを入れる
   • カテゴリのテーマを選択
   • 記事を入力
   • 画像を入力
   
4. • 画像を選択 （パソコンから参照）
   • 画像のタイトル
   • 画像をアップロード
   
   画像はパソコン内のフォルダから選択/参照
   
5. 画像を選択
   
6. 記事を確認してから、記事をアップロード
   

7. テキストリンクの設定（アンカー）

   リンクしたいテキストを入力
   
8. マウスで反転させて、リンクボタン
   （マウスをクリックしたまま文字をなぞって反転させ選択状態にする）
   
9. 飛び先のURLアドレスを入力
   
10. リンク設定が完了
    

ウェブサイト業界あるあるｗ

URLをhtpp://〜のテキスト状態のままリンクしたり、
「こちら」とか「ホームページはここをクリック」などのテキストにリンクを設定するパターンが多いようですが、実は「地域や業種＋屋号」の方が、重要なキーワードを含む為にSEO的には良いですし、ユーザーも分かりやすいです。
具体例（HTMLソース）：
<p>〜〜〜に関するお問い合わせはお気軽に。<br>
<a href="http://www.〜〜〜〜.com/" target="_blank">〜〜販売 ○○店</a></p>

ブログは、放置せずに書き続ける事が大事です。

| コメント(0) | WEBサイト設定 | |

グローバルメニューにプルダウン式を追加したところ、
Lightboxのポップアップ機能が動作しない。
jQueryとprototype.jsの干渉/競合が原因。

JSの変更点

1. jQueryに以下を追加、
   <script type="text/javascript">
jQuery.noConflict();
</script>
2. 全ページのHEAD内に、この<script>を一括置換え。
3. プルダウン用.js内の$を以下の様に一括置換え。
   $(　を　jQuery(
4. CGIの<script>も置換え（絶対パス）

ところが、ローカルでは動くのに、
今度は、プルダウンがウェブ上で動作しない！
何故だろう？？？
プルダウン用.jsを上書きしていませんでしたｗ

| コメント(0) | WEBサイト設定 | |

久々のWP ＋ Contact Form 7 の編集（徹夜作業）です・・・

もう忘れていましたが、フォームの項目を増やすのは、
[お問い合わせ] → [タグの作成]でした。
チェックボックスやラジオボタンに<label>のオプションなんて以前あったかな？・・・

Contact Form 7用のデフォルトCSSは、
〜/wp-content/plugins/contact-form-7/includes/css/styles.css
まあ、他のCSSファイルでも良いですがｗ
div.wpcf7 label{ margin-left: 14px; white-space: nowrap;}
これで、ユーザーが利用しやすくなりますが、
ブラウザによっては、選択項目が多いと全て１行のnowrapになっちゃいますので、タグの自動作成を利用せずに、HTMLソースで<span>の区切りに改行を入れた方が良さそうです。
liのインライン横並び＋nowrapも同じで悩ましい・・・

| コメント(0) | WEBサイト設定 | |

以前に、カラーミーショップの持ち込みサブドメインの覚書を書きましたが、今回はカスタムDNSで設定せずに、自動設定にて対応してみました。

独自ドメイン：ムームードメイン
ウェブサーバ：ロリポップ
という、良くある格安運営のパターンですが、
今回の案件は、大々的なリニューアルと通販機能（ECサイト）の新設です。

まあ、ECサイト構築と聞くとプログラムでゴリゴリ構築するイメージがあるかもしれませんが、中小企業や小売店舗などの場合は、いわゆるショッピングカートをレンタル設置する事で大手並みの通販システムが運営できます。
経費的にも、構築だと予算：数十万円は見ておいた方が良さそうですが、レンタルのショッピングカートはテンプレートのプログラムを共有利用するというレンタルサービスなので、オーダーメイドではないのですが、年間で1万円程度で収まり、コスパ的には良いでしょう。
ただ、
デザイン面では、既存のテンプレを使う手も”あり”ですが、
メインのウェブサイトとの違いがあからさまなので、
カートのHTMLとCSSを編集し、ウェブサイトと同一デザインにした方がしっくりします。

広報はメインサイトで行いつつ、詳細ページも増やし、
通販部門をショッピングカートで行うという、いわゆる二刀流になります。
メインサイト＆カートだと、一応SEOにもなりますね。

で、今回は最近評判の良いカラーミーショップです。

クラさんの独自ドメインがムームーだったので第一候補でした。
（他にも、EC-CUBEのカスタマイズ案やクラさんからは、おちゃのこネット・e-shopなどの候補もありましたが）
先月は、初期費用の3,500円が無料だったので、クラさんもラッキーですね。
しかも、今なら独自ドメインの利用が無料だとか。
この無料ドメインは悩みますね。
クラさんの独自ドメインがムームードメインのため、同系列のカラーミーショップでは、独自ドメインのサブドメインが利用できるので、カートURLの選択肢が増え有利です。

1. カラーミーの初期URL
   カラーミーのサブドメインを借りる
   http://○○.shop-pro.jp/
2. 独自ドメインのサブドメイン
   カラーミーのサブドメインを借りる
   http://○○.独自ドメイン.com/
3. 今回無料サービスの独自ドメイン
   http://○○.com/
4. 別途、ムームードメインで有料レンタル
   http://○○.com/

まあ、あえてカラーミーの初期URLを利用する価値は無いので１番は却下だし、サブドメインが利用できるので、有料で借りる程の事もないような気がします。
なので、
迷うのは２番か３番、
将来的な移転を考慮しなければ、３番の無料の独自ドメインでしょうが、この先何があるかわからないので（カラーミーがサービス廃止とか・・・）
この無料ドメインの利用条件は、カラーミーの継続契約が必須なので、移転時の利用や正規化すらできないのがデメリットかな・・・
カラーミーへの永年の囲い込みが狙いなんでしょうけどね。
クラさんと相談した結果、今回はサブドメインの新規設定に決まりました。

最近は、カラーミーカートのデザイン編集の案件が増えています。

| コメント(0) | WEBサイト設定 | |

ウェブサイトのリニューアルを期に、
Yahooホスティングで運営していたクラさんが、
さくらインターネットへ移管する作業のお手伝いをしました。
今回は、.JPドメイン（汎用JPドメイン）でしたので更に複雑でした。

Yahooは知名度があり、宣伝も上手いので、一般ユーザーはウェブサイト用のサーバとして借りやすいのですが、コストは割高ですし、サーバスペック的には、サーバ専門業者には敵いません。

サーバに不満を感じたり、拡張したい場合には、
Yahooホスティングから他のレンタルサーバ業者へ移管しようとしますが、
Yahooホスティングからの独自ドメインの移管が、
初心者さんでは手続きが厄介/不明であり、諦めるユーザーも多いようです・・・
（Yahoo!ジオシティーズも制約が多かった）

独自ドメインの移管手順としては、
何故か、Yahooホスティングを解約しなければいけません。
ネームサーバを変更し、解約すると、
自動的にDoレジに移行され、
その後、Doレジから移管手続が出来るようになりますので、
両社のOUTの手続きを経て、JPRSに申請されます。
通常の移管よりも数ステップもの手続きが多く、ちょっと面倒でした。

※ 解約や契約の手続きは、契約者本人であるクラさん自身が行いましたが、Doレジとの連絡で行き違いがあったようで、一発ですんなりいきませんでした。（FAXで申請したそうです）

| コメント(0) | WEBサイト設定 | |

ウェブサーバ：KAGOYAにて、〜.co.jpのリニューアル案件。
www有りではアクセスできるが、
www無しではアクセスが出来ない・・・
あれ？.htaccessの正規化をミスったかな？
.htaccessの確認や削除してもアクセス出来ない。
という事は、元々www無しではアクセス出来なかったという事。
KAGOYAのマニュアルで調べてみると、
KAGOYAでは、コンパネのドメイン設定で、
www有り無しの両方を追加設定しなければいけないようです。

なるほど。今回は、www有りしか設定されていませんでした。
以前もKAGOYAで設定しましたが、
その時は両方設定されてたという事か。

ところが、追加設定をしたが、まだwww無しにアクセスできない・・・
public_htmlの上階層にも.htaccessは無いし、
というか、403ではなく、
「存在しないURL」だから反映されず、
設定反映のタイムラグって事かな？

.htaccessのSetEnvIf Hostの許可設定してみると、
www無しでもアクセスできるようになりました。
正解は、どっちだろう？ まあ、再調査するのも面倒なので結果オーライ。

※ 301での正規化なので、404が301でwww有に転送するようになったという事です。

| コメント(0) | WEBサイト設定 | |

新規ウェブサイトの開設依頼で、
当然、独自ドメインの取得をおすすめ（アドバイス）した訳ですが、
経費やドメイン名で悩んでいたのか忙しかったのか、数日経って、
クラさん自身で、独自ドメイン（.com　さくらインターネット）を取得/契約した。

この時、請求の支払い（銀行振込）を金曜日の銀行営業時間内に行ったそうですが、
独自ドメインの設定で「未払い」と表示され、金曜日には設定出来なかった。

土日に出来るかも？と思いきや、やっぱ定休なのでNG。
（クラさんから何時公開なの？と急いでるような連絡が入るが、さくらインターネット側に問い合わせて欲しいと返信・・・）
きっと、入金確認の作業が月曜日に回された？ 人的作業の遅れかな？
で、本日（月曜日）早々に出来るかと思いきや、夕方５時迄待ったがNG・・・
６時頃に確認すると、やっとドメインの設定画面に購入ドメインが現れた。
即設定しましたら、すぐに繋がり、めでたくローンチ。
いつも数時間は掛かるのに、こんなに早く繋がったのは初めて。
待たされた分を差し引いて、プラマイ０という事で納得・・・

銀行振込みでの入金確認はタイムラグが発生するので、
急ぎの場合は、クレカ払いの方が良いと思います。

| コメント(0) | WEBサイト設定 | |

WinSCPの設定を移行（エクスポート/インポート）しようと、
新旧PCの保存設定を見比べると、
旧PCの保存ファイルがレジストリ側で、
新PCの保存をiniファイルにしていました。
あれ？何故か統一していなかったので、面倒かと思いきや、
どっちでも簡単に、iniファイルでエクスポートできます。

1. エクスポート

   設定→環境設定→
   
2. 設定の保存→INI file(WinSCP ini)にチェック→
   OK→エクスポート
   
   適当なフォルダに一旦保存。

3. インポート

   インポートボタンは無いので、
   C:\Program Files (x86)\WinSCP
   に上書きすれば完了と思いきや、
   何故か、あるはずのWinSCP.iniが見当たりません・・・
   正体は、
   C:\Users\ユーザ名\AppData\Local\VirtualStore\Program Files\WinSCP
   ここにありますので、上書き保存。

| コメント(0) | WEBサイト設定 | |