デジタルよろずや筑紫野 店長の雑記

仕事の事とか地域の事とか趣味の事とか雑多にぼやいてます。
バイクツーリングと野球観戦(ホークス)と競馬が好きです。
福岡と佐賀の県境ら辺に住んでます。

福岡県筑紫野市で、太宰府・大野城・小郡・筑前・朝倉・大刀洗・基山・鳥栖のエリアを中心に、パソコン/IT機器の出張修理・トラブル解決・ITサポートを地域最安値でやってます。
一部持ち込み修理も対応致します。(見積もり・出張料金は無料です)

デジタルよろずや筑紫野 ホームページ:https://www.digital-yorozuya.com/
ツイッター:https://twitter.com/digitalyorozuya
フェイスブック:https://www.facebook.com/DigitalYorozuya

Web制作

サーバー移転しました&Wordpress引っ越しメモ

Logo4

遅ればせながら、明けまして御目出度う御座います。今年もデジタルよろずや筑紫野を宜しくお願い申し上げます。

今年は色々新規事業を予定しており、それに伴い、上記タイトル通り公式サイトの運用サーバーを移転致しました。
これ自体は特に問題なく行えたものの(DNSの更新にやたら時間が掛かりちょっと焦りましたが)、問題は現在製作中のWordpressページの方でした…。

という訳で、個人的メモも兼ねて、Wordpressの引っ越し(サーバー移転)の際の注意点やら何やらを書いておきます。

 バックアッププラグインを使って引っ越し
 All-in-One WP Migrationを用いてバックアップ。通常は、エクスポートしたファイルをローカルに保存するのですが、何故か”500 Internal Server Error”が出てエクスポート出来ず。ただ、バックアップデータ自体はサーバー上に出来ていたため、FTPからアクセスして”ai1wm-backups”内の.wpressファイルをDLし、新サーバーの方でインポート。

 いきなり問題発生
 Wordpressバックアッププラグインを用いての別サーバー引っ越し自体初めてだったため、当初は上記手順で何の問題も無く出来る・・・と思っていましたが、いざページ表示をテストするとSQLのエラーログがずらずらと。
 どうやら、使用中のテーマ(Simplicity)の子テーマカスタムCSS参照ディレクトリが、移転前のサーバーのままになっている模様。
All-in-One WP Migrationでは、SQLの設定自動書き換えが完璧には行えないようで、サーバー管理ページから、データベース設定→phpmyadminでMySQL管理ページにログインし、SQLを書き換える事に。
ちなみに、テーマの削除→再サブスクライブでは駄目でした。

 MySQLデータベース書き換えでまたトラブル
 とりあえず全テーブルをエクスポートし、エディタから旧アドレスを新アドレスに全置換えを行い、インポート・・・するもエラー頻発。原因は、エクスポートファイルが2000KBを超えていたためらしい。
 仕方ないので、上記インポートファイルからどのテーブルのどのOption_IDやOption_nameに編集箇所があるのかを探し出し、構造タブから該当テーブルを手動書き換えする事に。
結果、無事エラーは解消されました。

 独自追加ウィジェットエリアで問題発生
 ところが、今度はテーマに独自追加したウィジェットエリアに導入したSiteOriginウィジェットがインポート(リストア)出来てない事が判明。ただ、これに関しては、Widget Importer & Exporterプラグインを用いてあっさり移転完了しました。

 依然残る問題点
 Wordpressダッシュボードで、プラグインを用いてバックアップしたデータをエクスポートする時や、phpmyadminでテーブル検索する歳に500エラーが出る原因が解消できず。
この点に関しては、サーバーの問題(仕様)の可能性もあると思います。現在も調査中です。

という訳で、結局ここまで至るのに半日近く掛かってしまい、自分の未熟さを痛感致しました…。(良い勉強にはなりましたが)
ゴリゴリにテーマをカスタマイズしてたのがアダとなった形です。

次に行うものとしては、現在Outlook.comで運用している独自ドメインメールを、今回新規移転したメールサーバに変更する事(DNSレコードを書き換えるだけですが)ではありますが、Outlookのスマホアプリはこれはこれで便利なので悩ましい所です。

公式ウェブサイトを色々変えてみました

Logo_title

Windows10への無料アップグレード期限である7月28日まで残り僅かとなりましたが、これを機にデジタルよろずや筑紫野 公式ホームページを色々と変えてみました。

まず主な変更点としては、"Internet Explorer 8"より古いブラウザのサポートを打ち切った点です。
これらの古いブラウザからの閲覧だと、デザインが大きく崩れる恐れがあるものの、アクセス解析ログを見る限り該当する古いブラウザ利用者は1%もいないため、大半の方には悪影響は出ません。
では具体的に何をやったかと言うと、IE7/9.jsやCSS3Pie、条件付きコメント振り分けといった、所謂”クロスブラウザ対策”のプラグイン・記述を全てパージしました。これにより、ページロードが若干速くなってます。

他、トップロゴを変えてみたり、一部重複してたようなコンテンツをまとめてみたり、 ヘッダ部分を変えてみたり、グローバルナビを変えてみたり、モバイル向けページのデザイン見直したり・・・と、割と色々弄りました。(ついでに当ブログもちょっとデザイン変更してみました)

なお、サービス内容そのものの変更や、料金面の変更だったりは行っていません。(多少表記修正はしましたが)

あとは、完全にフレキシブルなデザインにして、スマートフォン向けページをアドレス切り分けする事なく統合したいですね・・・。(今は.htaccessで、モバイル端末からのアクセスを自動で飛ばしてます)

モバイル端末向けページを(今更)作ってみました

先日のツイッターに続いてこちらも今更ですが、モバイル端末(スマホ・タブレット・ガラケー)からの閲覧専用の当社ウェブサイトのページを作ってみました。

正確に言えば、今までもモバイルからでも普通に見れてはいたのですが、1から新たに作り直した、って感じですね。

本来なら、別ページにリダイレクトする事なく、既存のページをレスポンシブデザインに変更してモバイル対応するつもりで、色々jQuery試しながらあーでもないこーでもないとコーディングしてたんですが、元々のデザインがレスポンシブデザインを意識せずに作ってしまっていた事もあり、結局断念して一から作る事にしました。
いずれは、一からデザインを見直して、レスポンシブなものにして、同一ページで全端末の視認性を確保したいと思います・・・・。

ツイッター組み込みウィジェットの大きさを自在に変える方法


Twitterのサイトへの組み込み型ウィジェット(埋め込みタイムライン)は、発行された埋め込みコードの<a class=”twitter-timeline”の後に続けて、専用のコードを記述する事である程度のカスタマイズが可能ですが、横幅(width="※")は180pxから520pxまで、という事になってます。

この横幅(Width)の制限を取り払って、上記の当HPのスクリーンショットのように自在に変更する方法を紹介します。(ちなみに、このSSでは842pxにしています。)

と言っても、やり方自体は至極簡単で、CSSに、
iframe.twitter-timeline {width: px !important;}
を追加するだけです。

要は、 『!important』を使って、優先順位を最上位にして、提供ウィジェットの既存のiframeタグに適用されているtwitter-timelineクラスのwidthを置き換えてるだけです。

ちなみに、本当はウィジェット本体の背景やBorder-radius等も詳細にカスタマイズしようと思ったのですが、このウィジェットのインラインフレームページは別ドメイン(twitter.com)で提供されているため、!importantでの強制書き換えも出来ず、また親フレームから子フレームへCSS適用する際によく使われるJavascriptを用いる方法もドメインが異なるため出来ませんでした。

サイト制作日誌~ようやく、一応の完成

デジタルよろずや筑紫野のウェブサイトが、ようやく、一応出来上がりました。
ただ、完全完成を100%とすると、まだ90%くらい、 ではありますが・・・。

あとは、アクセス解析(Googleアナリティクス)の設置、SEO対策、IE6用のデータ最適化、テキストの補充、この辺りをやれば完全に完成となります。

今回、最も苦労した点は、サイトデザインやコーディング・・・・ではなく、何よりもクロスブラウザ対策(主にIE6.7.8)でした。
IE7.jsやCSS3 Pieと言ったクロスブラウザ用のプラグインと、各jQueryを共存させつつ、全てのブラウザで同じデザインレイアウトを再現させる工程は、予想以上に骨が折れる作業でした。(結局、いくつかのjQuery・CSS3アニメーションエフェクトは断念する事になりましたが・・・)

サイトの拡張性を考えるなら、オールドブラウザは完全に切り捨て、もしくは条件付コメントを用いてCSS自体を最初から切り分けしといた方が、よりスマートだと痛感しました。

サイト制作日誌~マウスオーバーエフェクト思案中

ハイパーリンクやナビメニューに対するマウスオーバーアクションを、どんなエフェクトにするか、もしくはしないのか・・・

細かい事なようですが、この辺は技術的な問題も然る事ながら、デザイナーのセンスも問われる難しい部分だと思います。

現在、私もどういったものにしたらいいものか、あれやこれや試しながら試行錯誤中です。

低スペックのXP+IE6でもストレスなくブラウジング出来るよう、軽快に動作し、無駄に派手すぎて分かり辛くならないような、且つ見た目もよく・・・と我が儘な条件を付けてやってるせいで、なかなか決まりません。

ちなみに、グローバルナビメニューに関しては、ここのNav8みたいに、オンマウス以外のメニューのcolorを薄くし、オンマウスメニューにはbackground-colorも変更するようなものを作ろうとしてます。
参考にしてるページは主にこちら。
・・・が、イマイチ思ったようには動作してくれず、現在原因究明中です・・・。(なお、そのせいで肝心のコンテンツ制作がほったらかし状態な模様) 

サイト制作日誌~ロゴ作成

Logo

Inkscapeを使ってロゴを作ってみました。
はんこをイメージして作ったのですが、Inkscape自体を使い慣れてないせいで、予想以上に時間掛かってしまいました・・・。
有名所のソフトだと、既にはんこ風ロゴをテンプレートで配ってるようなサイトもあるんですが、Inkscapeだと、作り方すらググっても出てこなかったので、ゼロから試行錯誤しながらの制作でした。

一応、ロゴのコンセプトとして、屋号を入れつつ、シンプル且つ和風な感じ、というのを念頭に入れて、屋号がカナ四文字+かな四文字+漢字三文字という事も考えた結果、真っ先に浮かんだのがはんこでした。

大体のイメージを頭に作った段階では、割とすぐ出来るかな、と思ってましたが、フォント選びと、崩した感じを表現するのにかなり手間取ってしまいました。
おかげで(?)、Inkscapeの使い方も大分覚えられたので、まぁよしとします。 

サイト制作日誌~jQuery Chaining Effectsメモ

無駄に重くなりすぎないように気をつけつつ、jQueryでエフェクトもいくつか付けてます。
その一つが、 jQuery Chaining Effects Plugin (jquery.effectchain.js)です。

これは何なのかと言うと、指定した要素をロード時にフェードインしながら表示させるものです。(多用すると重くなります・・・)

カスタマイズ性や表示安定性はなかなかのものなんですが、デフォルトで使用すると困った現象が。
一度ページを表示させたあと、リロードすると綺麗に順々にフェードインしてくれるんですが、ページの初訪問(ファーストロード)の場合に限り、一瞬指定要素が見えた後にフェードインするという現象が発生。
ググってみても、このjQuery自体があまりメジャーでないらしく、当然出てこない。

と言うわけでコードをじっくり眺めていくと、フェードイン後のCSSを指定できる事が判明。
ならば、と初期状態でvisibility:hidden、フェードイン後にvisibility:visibleにして・・・みたのですが失敗。
visibilityで駄目ならボックスごと消すdisplayで同様にやってみた所、見事出来ました。

よくよく考えてみると、ボックス毎フェードインさせてる訳ですので、最初からdisplayでやってみるべきでした。 

サイト制作日誌~憎きIE6対策

ウェブ制作における最大にして最凶の壁と言っても過言ではない難敵、クロスブラウザ対策(というよりIE6/7/8対策)に現在取り組んでおります。

サイトに関しては、既にこのブログ開始以前から制作しており、基本デザインとトップページはある程度完成しております。(こんな感じ

なお、サイトコンセプトとしては、サイト利用者層も考慮に入れて、極力シンプルで分かりやすく、且つサイト制作を依頼して貰えるようなデザイン性も両立させたものを作りたいなと考えてます。
ちなみに制作に使ってる主なオーサリングツール・ドロー系グラフィックツールは以下です。
・MS謹製のExpression Web(無料版) …Dreamweaver程ではないですが、ちょっと前のホームページビルダー以上の機能性を誇るオーサリングツールです。大規模なサイトを構築するのでなければ、これで十分過ぎる程だと思います。
Inkscape…ペイント系のGIMP、ドロー系のInkscapeと言われる程の、オープンソースのフリーの
グラフィックウェアです。使いこなせば、イラレと遜色ないレベルで使えるらしいです。
フリーのソフトウェアばかり使ってるのは、単に経費節約という以外にも、将来的にはこれらを利用したWeb制作のコストダウンを提案する事業もやっていきいたい、ってのもあったりなかったり。

さて、本題、クロスブラウザ対策について。

まず確認ツールに関しては、ExpressionWebに標準搭載してあるSuperPreviewと、最終確認用として仮想マシンのXP+IE6の両方でやってます。

色々調べてみて、もっとも安定動作しつつ汎用性も高い組み合わせだろうと考え、以下のものを導入してみました。
・IE9.js(IE7-js)…ハックする事なく、IE6/7/8をIE9以上のブラウザの挙動に近づけるためのライブラリです。特に使いたかったのは、透過PNGの有効化です。
・ie7-squish.js…IE6のダブルマージン問題等を修正する上記の追加ライブラリです。
・CSS3 Pieここやら、ここここ等を参照しました。 ウェブクリエイターにはお馴染み、オールドブラウザでもCSS3を使えるようにするプラグインです。

問題となるのは、これらのプラグインの共存です。
(正しくないのかもしれませんが)下記のように記述しました。
<head>内
 <!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script><script>var IE7_PNG_SUFFIX = ".png";</script><![endif]--> IE9未満用IE9.js
<!--[if lt IE 7]><script src="http://ie7-js.googlecode.com/svn/trunk/lib/ie7-squish.js"></script><![endif]--> IE7用ie7-squish.js
</body>前
<!--[if lt IE 9]><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><![endif]--> IE9未満用Ver1系最新版jquery.min.js
<!--[if !lt IE 9]><script src="js/common/jquery-2.1.0.min.js" type="text/javascript"></script><![endif]--> IE9未満以外用のVer2系jquery.min.js
<script>window.jQuery || document.write('<script src="js/common/jquery-2.1.0.min.js"><\/script>')</script>
<script src="js/top/jquery.effectchain.js" type="text/javascript"></script> ←jQuery
<!--[if IE 9]><script src="js/common/PIE_IE9.js"></script><![endif]--> ←IE9用CSS3PieのJs版
<!--[if lt IE 9]><script src="js/common/PIE_IE678.js"></script><![endif]--> ←IE9未満用CSS3PieのJs版
<script type="text/javascript"> ←CSS3Pieをアタッチさせるセレクタ設定
$(function() {
  if (window.PIE) {
    $('.pie').each(function() {
      PIE.attach(this);
    });
  }
});
</script>
<script src="js/common/jq_setting.js" type="text/javascript"></script> ←jQuery用個人記述Js

苦戦した点 
・IE条件付コメント
…なんでもかんでもロードさせると非常に重くなるので、条件付コメントを多用してブラウザ毎にロードさせるプラグインを設定してます。
・ htc版PIEとIE9.js(IE7-js)が共存不可…完全に盲点でした。IE9.jsを使う際は、js版のPIEを使う必要があるとの事。
・Ver2系jquery.jsは、IE9未満は未対応…盲点その2。オールドIEでBorder-radiusを適用するためにはPIEと同時にjquery.jsも一緒にロードしないと駄目なので、当初未対応の2系しかロードしてなかっため、Border-radiusが全く適用されませんでした。
そこで、条件付コメントで <!--[if lt IE 9]>でVer1系、NOT演算子を付け加えた<!--[if !lt IE 9]>でVer2系をロードするように記述しました。
・IE6でDivにborder-radiusを使うと、何故かmarginが効かない…原因不明ですが、HEAD内に条件付コメント<!--[if lt IE 9]>でStyleタグを差し込み、body{margin-top:30px;}を適用して解決。
・マウスオーバーでのフェード効果が効かない…原因不明。まぁタダでさえIE6だと重くなってるので、IE6ではオフになってた方がよさそうです。

と言うわけで、これでなんとかクロスブラウザ対策が出来たような気がします。
多分、というか間違いなくもっとスマートな方法があると思いますが…。
最新記事
Twitter プロフィール
パソコンの故障修理やトラブルの解決、各種サポートの他、企業・団体向けITアドバイザーを行う「デジタルよろずや筑紫野」です。 筑紫野市を中心に、太宰府 小郡 筑前 朝倉 大刀洗 基山 鳥栖 等、福岡・佐賀の幅広いエリアを出張無料、見積もり無料でサービスを行っております。
メッセージフォーム

当ブログやデジタルよろずや筑紫野へのご意見・ご相談等についてはこちらからどうぞ。(非公開メッセージを送信出来ます。)

名前
本文
QRコード
QRコード