シックスコアに申し込み

まずは契約前にシックスコアの会員に登録する必要があります。シックスコアの共有サーバーサイトへいき、右サイドバーのオンライン申込みボタンをクリック。

STEP1でメールアドレスを登録すると、認証IDが書かれたメールが届くのでSTEP3に入力して登録フォームへ移動ボタンをクリック。この間、ブラウザのウインドウは開いたままです。後は必須項目を記入して登録完了。会員IDとログインパスワードが届きます。

次に、上部メニューのログインから、届いた会員IDとパスワードを使って【メンバー管理ツール】にログイン。左メニューのサーバーから新規お申込みをクリック。希望のサーバーIDと契約プランなどを記入して確認画面ボタンをクリックし、支払い手続きを進めていきます。あとは申込み受付のメールが届けば、手続き完了です。

自分の場合は、クレジットカード払いで21:30に申し込んで、翌日の8:40にサーバー設定完了のメールが届きました。土日などを挟まない限りはかなり早く設定完了するんだと思います。

ドメイン設定からデータベースの追加まで

サーバーの設定はメンバー管理画面のサーバー→アカウント→サーバー管理ツールより行います。また、上部メニューのログイン→サーバー管理ツールから直接管理画面へ移動することも可能。ただし、会員IDとパスワード、サーバーIDとパスワードが全く別のものなので、多少戸惑うかもしれません。

管理画面はかなりシンプル。

まずは最初にドメイン設定を行います。S1プランは無料ドメインがもらえないので、ドメインは持込で。ドメイン管理サイト（自分は主にFC2ドメインを使ってます）の方で持込するドメインのネームサーバーを以下に変更。

[text]ネームサーバー1： ns1.sixcore.ne.jp ( 219.94.200.232 )
ネームサーバー2： ns2.sixcore.ne.jp ( 219.94.203.241 )
ネームサーバー3： ns3.sixcore.ne.jp ( 210.188.201.248 )[/text]

シックスコアのサーバー管理ツールから、左メニューのドメイン設定→ドメイン追加で持込むドメインを入力。持込ドメインの場合、認証方法はWhois認証にチェックをいれておきます。あとはDNSが反映されるのを待ちます。

ちなみに自分の場合、DNSの切り替えは5分かかったかどうかというくらい早かったんですが、サーバーにFTPでファイルをアップしてみてもすぐには反映されませんでした。どうもサーバー側で多少のタイムラグがあるようです。下記画像が表示されればドメイン設定は完了です。

他サーバーからの移転の際は、ネームサーバーを変更する前にサイトを確認できる、動作確認URLを発行することが可能です。

次にFTPアカウントを設定しますが、FTPアカウントは複数人で使用しない場合、特に追加する必要はありません。ホスト名とユーサー名が「example.com」とドメイン名になるので、あとはパスワードを設定するだけで接続可能です。

初期設定では、よくあるマルチドメインサーバーと違い、FTP上でドメインフォルダ間の移動はできないようになっているので、ドメイン毎にFTPの設定が必要になります。

最後にデータベースの追加ですが、これも特別難しいことはありません。左メニューから、データベース→MySQL設定→MySQL追加でデータベースを作成。文字コードはWordpressで利用する場合、特に理由がなければUTF-8で。そのあと、MySQLユーザー設定でMySQLユーザを追加します。

WordPressをワンクリックでインストール

ラストはWordpressのインストールです。シックスコアではWordpressはワンクリックインストールに対応しています。普段こういう機能は使ったことがないのですが、せっかくなので今回は使ってみたいと思います。

現時点ではWordpressのほかに、Movable Type（MTOS）・XOOPS・EC CUBE・PukiWikiがワンクリックインストールに対応しています。今後対応システムは増えていくのかもしれません。

サーバー管理ツールの左メニュー→ホームページ→ワンクリックインストールから、インストールしたいドメインを選択。

データベース名やユーザー名など、MySQLの追加で設定した項目を記入して、ブログ名とメールアドレスを記入します。インストール先にはwpというサブディレクトリが記入されていますが、ドメイン直下（www.example.com/）にインストールしたい場合はwpを削除して空にします。

ドメイン直下にWordpressをインストールする場合、サーバー上にあるindex.htmlとdefault_page.pngを削除しておきます（エラーが出るので）。

あとは確認画面からインストールを開始するだけです。

Wordoress自体インストールはかなり簡単ですが、更に簡単にできるといった感じ。ただし、インストールされるバージョンが2.7だったので、そこから2.7.1にバージョンアップさせました。PHPがセーフモードじゃないので管理画面からワンクリックで完了。

ほか、サーバー管理ツールから設定できるメニュー。

• メールアカウント設定
• 迷惑メール設定
• メールフィルタ設定
• 自動応答設定
• トリガー設定
• アクセス制限
• エラーページ設定
• MIME設定
• Cron設定
• サイト転送設定
• アクセス拒否設定
• CGIツール
• PHP高速化設定
• アクセス解析
• ログファイル
• SSL設定
• WAF設定
• phpmyadmin

PHP高速化設定はデフォルトで設定済みになっています。ほか、技術的な難しいことはよくわかりませんが、現時点ではかなり快適に動作中。12ヶ月契約の場合、S1プランで月額1,890円（3ヶ月契約では月額2,310円）とそれほど高額なサーバーではないので、企業のほかに個人で快適なサーバーを探しているという人にも向いています。

今後使い込んでいく予定ですが、気になったことがあったらまた記事にしてみたいと思います。

ミblogのサーバーはヘテムル(heteml)を使っています。

容量5G、マルチドメイン数50ドメイン、データベース10個、サブドメイン無制限など、スペック的には全く申し分ないのですが、情報ブログは一日複数投稿により記事数がかなり多くなるので、別サーバーでもう少し高速なサーバーを探すことにしました。

個人サイトなので表示速度はある程度割り切りますが、とにかく投稿時間でストレス溜まるのが嫌なんです（MTでは再構築の待ち時間に嫌気が差して、今では自分で使うことはほぼなくなりました）。

シックスコアを選んだ理由

そこで色々なレンタルサーバーを比較検討した結果、エックスサーバー（Xserver）の上位版、シックスコアの一番安いS1というプランに申し込みました。他のレンタルサーバーに比べて初期費用が若干高めですが、PHP高速化システムというものが決め手となりました。

PHPプログラムを最適化しコンパイルされた状態でキャッシュすることで、スクリプト実行速度を飛躍的に上昇させるPHP高速化システムを導入。弊社のベンチマーク調査で、WordPressなどの人気プログラムなどが最大で２～３倍の速度に！

2～3倍ってほんとかよと思いながらも、Wordpressは記事数が増えるとMTほどではないにしろ投稿に時間がかかるようになるので、少しでもそれを軽減できればいいなぁという感じです。

現在はWordpressをインストールしただけですが、管理画面やサイトの表示はかなり速く感じました。まぁ運営前はどんなサーバーでもそれなりに速いですが。記事が増えていく度に徐々に速さを実感できるといいなと思います。

シックスコア（sixcore）のS1プランスペック

本気で導入を考えている人はシックスコアのサイトで直接確認すると思うので、ここではざっと書いてみます。

• ディスクスペース: 30G
• マルチドメイン: 5個
• FTPアカウント: 10個
• サブドメイン: 100個
• MySQL: 5個
• 転送量課金: なし
• オリジナルCGI: ○
• PHP: PHP5

ほか、通常のサーバーでできることはほぼ問題なく稼動すると思います。

以下は2009/6/10時点での基本サーバー情報。

2009/6/5現在はキャンペーン中ということでSSLが無料です。自分は使う予定はないのですが、どうも一緒に申込みになるらしく、SSL取得手続きの案内メールが複数くるのが邪魔でした。特にSSLを利用しない場合は、メールの返信をしなければいいようです。

せっかく契約したので、申込みからFTP接続、データベース作成、Wordpressインストールまでを次回記事に無理やり引っ張って書きます。

Sketch Rockwell

Rough Draft, Regular

karabinE., Regular

!Sketchy Times, Bold

bearerFond, Regular

Katy Berry

Rickles, Medium

Note this

Rabiohead

Hannahs Messy Handwriting

全てのフォントは 45+ Exceptionally Useful Free Handwritten Fonts よりご覧下さい。また、ライセンスはフォントごとで異なるようなので、使用の際はダウンロードページにてご確認下さい。

もっと沢山のフリーフォントが見たい

100.000+ Free Fonts Mega Compilation

上記特集記事ではフリーフォントがダウンロードできるサイトを大量に紹介しています。各サイト個性的なフォントが揃っているので、是非一度見てみて下さいね。

Windowsでのフォントインストール

スタート→コントロールパネル→フォント→ファイル→インストールしたいフォントをドラッグ＆ドロップ。ファイルから新しいフォントをインストールでもいいです。

国内のWEBデザインリンク集

• デザインリンクデータベース更新が頻繁でカラーやジャンル、色々な種類のランキングから参考にしたいサイトが探せる人気サイト。各サイトには個別コメントがつけられ、スクリーンショットや過去のデザインの参照もできる。
• WebSite Color Indexシンプルなデザインリンク集。カラー・イメージ・業種別・アクセスランキングを設置。詳細ページには管理人さんの一言コメントあり。
• あんじょうできてはるパッと見ただけである程度サイトデザインがわかる大き目のサムネイルが見やすい。カテゴリーは業種別に分けられている。
• WEBdeDBこちらも人気サイト。更新頻度は高くないが、レベルの高いサイトが並ぶ。業種別とカラーから探せます。
• ikesai.comほぼ毎日更新されるウェブデザインリンク集。有名な企業のサイトが中心なので、参考にしやすい。
• ウェブアートノックARTNOC定期的に更新されるWEBデザインリンク集。業種・カラー・レイアウトから探せます。
• straightline bookmark黒基調のスタイリッシュなWEBデザインリンク集。リッチなFlashサイトが多め。
• デザイケ -Design Iketeru-かっこいいサイトを集めたデザインリンク集。サイトのイメージ・業種・カラーから探すことができる。
• Web Design Clipデザインが綺麗なリンク集。サーチリストで色・技術・カテゴリー・レイアウトから探せます。プロの仕事。
• WEBデザインの見本帳賑やかな雰囲気のデザインリンク集。サイトイメージ・ジャンル・色から探せる。一言コメントでリンク先がわかりやすい。
• S5-Styleリキッドレイアウトで画面いっぱいにサムネイルが広がるウェブデザインリンク集。気に入ったサイトはサイドメニューにポンポン保存できる。
• 週刊ウェブデザイン定期的に更新されるWEBデザインリンク集。他で見たことあるサイトが多めだが、1ページの表示数が多いのでサクサク見ていける。
• みんなで作るWEBデザインのリンク集運営者じゃなくてもサイトの推薦ができるWEBデザインリンク集。ワンポイントコメントが的確で面白い。
• ウェブセレクション黒でカチッとまとまったリンク集。閲覧済みのサイトは色が暗くなるので、無駄飛びの心配がない。
• WEBサイトカッコイイシンプルなリンク集。カテゴリーがボタン・見出し・ヘッダーなど、特徴のある部分で分けられているのがポイント。

色々なリンク集で紹介されているサイトを見ていくと、国内の有名なサイトはWEBデザイン会社が製作している場合がほとんどだと思うので 『きっちり・しっかり・かっちり』 としたサイトが多いです。後はフルFlashなどのリッチコンテンツ満載でとても真似できるレベルじゃない、凝ったサイトが多いのも特徴的。逆に、個性的・独創的なデザイン性の高いサイトは、海外に比べると少ない印象です。

自分が国内サイトで一番参考にしたい部分は「見出し（ロゴも含む）」です。海外サイトは英語なので、見出しの文字を大きくしておけばとりあえずデザイン的にオッケーというのが多いですが、日本語は漢字とひらがなという全く字画の違った文字が混ざり合うので、サイズを大きくするととてもチグハグに見えてしまいます。そこを何とか綺麗に見せようと、画像にしてみたり背景を工夫したりしているわけですね。個人的に、世界で一番見出しを工夫しているサイトが多いのは日本だと思っています。

海外のWEBデザインリンク集

• WP FLOATWordPressを使ったパワーサイトのみを紹介。ここを見ると自分のブログが恥ずかしくなる。Design Log of Ayaka itoを作ったデザイナーさんのAbout見て末恐ろしくなった。世界は広いっす。
• CreatticaCSSギャラリーの他に名刺、ロゴ、Flashなども紹介。特にPhotoshopギャラリーのクオリティーが高い。
• Design Bombsデザインが一番好きなギャラリーサイト。サイトを作ったデザイナーさんのブログも素晴らしいです。
• CSS FreshBlendしっくなデザインで見やすい。プレビューのレスポンスがいいのでサクサク見れます。外部リンクはサイト名。
• Creamy CSSカッチリと作られたギャラリーサイト。タグ、カテゴリー、アーカイブから目的サイトを探す。サイト下のブックシェルフが面白い。
• Colorgorize the Web細かく分けられたカラーに合ったサイトを表示できるのが特徴。並べ方を変えると詳細なサイトカラーが表示される。
• csscookie.com!かわいいデザインのシンプルなCSSギャラリーサイト。イラストつきのカテゴリーで細かくジャンルわけを行う。
• The Design Gene大きくて見やすいサムネイルが特徴。厳選された有名サイトへのリンクが多い。
• Unmatched Styleちょっとごちゃごちゃした感じだが、ギャラリーの他にブログも定期的に更新されているよう。
• CSSFury今風なデザインのカッチリしたギャラリーサイト。フッターにレート順にサイトが並ぶ。上部メニューからロゴギャラリーサイトも見れる。
• CSS Brigit1カラムでシンプルなサイト。リンク数がかなり多いので数を沢山見たい場合は重宝します。
• CSS TEA黄緑がメインカラーの明るいサイト。まとめブログも平行して書かれていて、デザイン系の記事が豊富。
• cssWOWかなりシンプルなギャラリーサイト。タグや得票数などからサイトを探す。他ではあまり見ないサイトが多め。
• CSS Maniaかなり有名なギャラリーサイト。更新頻度が高く、他ギャラリーサイトのネタ元にもなっているようなので、毎日通う価値ありです。
• Best Web Gallery綺麗なデザインの有名サイト。ギャラリーの表示方法は三種類から切り替えをすることができる。
• CSSPerk.com濃いグレーがメインカラーのギャラリーサイト。浮かびあがるプレビューイメージの見せ方が綺麗。
• NiceStylesheetホワイトバックのシンプルギャラリー。一週間に一回程度の更新で複数サイトが追加される。
• cssburstコメント書いている段階では見れなくなってました。
• CSSclip人気のあるギャラリーサイト。メインカラーや評価順に探すことができ、カテゴリーも細かく分けられている。
• The Best Designs小さめのサムネイルでシンプルに見せるギャラリーサイト。他と比べるとちょっと見づらいか。
• designfridge大き目のサムネイルが1カラムに並ぶ。フッターから色、テクスチャーの種類・レイアウト・ジャンルから探すことができる。
• Best CSS Gallery余計なものをほぼ全て省いたシンプルなCSSギャラリーサイト。
• CssLeakデザイン性の高いギャラリーサイト。詳細ページでは、リンク先サイトが使っているほぼ全ての色をカラーコード付きで見ることができる。
• cssstyle黄緑色がインパクトあるギャラリーサイト。カテゴリーのほか、カラーからも探せる。必ず詳細ページを見なきゃいけないのは面倒。
• siteInspire詳細なカテゴリから探せるサイト。リンク先は他のギャラリーサイトでは見ないサイトが多く、中には日本のサイトもちらほら。
• TheDesignInspirationWebのほかにイラスト、ロゴ、画像などのギャラリーもあり。まとめブログがなかなか濃い。
• CSS Gallery.com1ページに多めに掲載し、詳細ページで評価を行う。似たデザインの制作依頼もできるよう。

まだ沢山ありますが、きりがないのでこれくらいで。全部こまめにチェックするというのは時間的に難しいので、定期的に見るのはお気に入りのサイトいくつかという感じでしょうか。「新しく作ったからウチのサイトも載せとけよ」とか、「これ忘れてるよ」ってのがありましたら是非教えて下さい。

以前のテーマとは構造が全く違い、プラグインも減らしたり入替えたりしているので、ところどころお見苦しい箇所がありますが、少しずつ修正していきたいと思います。

WordPressを本格的にいじりだしてから早1年が経ったので、今回は好き勝手やってみました。といっても相変わらずPHPは本を購入しただけで全く手付かずの知識つかずなので、デザインとあわせて色々と見よう見真似です。

リニューアル時にやったこと

ノートにざっくりラフスケッチを書いてフォトショで・・・ってところは飛ばして、まずはローカルにWordpressをインストールしてサクッとリニューアルできるように準備しました。利用ソフトはXAMPPです。デザインやプラグインなどの稼動テストをローカルで行い、既存テーマを入替えて終了です。

デザインはカテゴリや新着記事などのナビゲーション部分でちょっと悩みましたが、この形に落ち着きました。時系列で見せるブログじゃないので月間アーカイブは削除して、カテゴリ名と同じ名前のタグも削除してます。そのほか、今回新しく利用したプラグインは後々記事で紹介していきたいと思います。

利用テーマはVicunaCMS

使用テーマは毎度おなじみのvicunaCMSさん。

自分の中では無料テーマというよりもCSSフレームワークとして利用させていただいているという感じになっちゃってます。多分、vicunaCMSがなかったらWordpressやMTには一切触っていなかったでしょう。デフォルトで使用している方は沢山いらっしゃいますが、是非一度おもいっきりカスタマイズしてみて下さい。特に初心者の方にはいい勉強になりますよ。

さらばIE6

ちなみにIE6は今のところ完全無視。透過PNGの対応も不完全なので見た目もかなり汚いはずです。いずれ時間がある時にでもボチボチ修正してみますが、IE8もリリースされたことですし、IE6をお使いの方はそろそろバージョンアップしてみてはいかがでしょう・・・と何気にお願いしてみます。

もうそろそろFirefoxのように自動でバージョンアップする仕様にしてほしいものです。

よりよいWebデザインにするための配色のセオリー :: Love is Design ::

第一印象を決めてしまうほど、色はとても大切な役割を持っています。Webデザインのイメージを決める上で、色は最も重要な要素といっても過言ではありません。

カラーピッカーを紹介した時にも書いたんですが、自分と同じ意見でうれしい。ここの管理人さんは色彩検定の勉強をしていたということで説得力があります。

ブログの記事では、配色によるイメージからPCCS（ヒュートーンシステム）の基礎、色の誘目性、多色使いのポイントなどが細かく説明されています。

本などあまり見る機会がないという人は必ず参考になるハズです。自分含め、いつも同じような配色のサイトになってしまうという人は、一度目を通してみるといいですよ。

また、配色は本やサイトを見る他に、街に出て色々なモノを見ると幅が広がるように思います。自分はよく彼女のショッピングに付き合わされるのですが、嫌々ついて行くんじゃなく、せっかくなので色んな服の色の組み合わせを見るように心がけています。特に、その年その年の流行色は、本やネットの情報よりも実際に街に出た方が実感できますからね。

文章じゃわかりにくいけど、IEなどブラウザの大きさを変更するとこんな状態になったりします。

これを回避するには、コンテンツボックスを背景用のdivで囲む方法がありますが、ただ背景を表示させる為だけに無駄なdivで囲むのはどうだろなーということで以下の方法を使用します。

まず、解決策としてbodyに [padding-left:1px] を指定して、1pxずれたところを修正。しかし、これでは正常に見れていたFirefoxなどでズレる恐れがあるので、CSSハックでIEのみに [padding-left:1px] を指定してあげます。

以下CSSの参考記述例です。

[html]body {
background-image: url(img/background.gif);
background-repeat: repeat-y;
background-position: center;
margin: 0px;
}

/* IE7でpadding指定 */
*:first-child+html body {
padding-left: 1px;
}

/* IE6以下でpadding指定 */
*html body {
padding-left: 1px;
}[/html]

これでズレは回避できます。Safariでは確認していないので、ずれるようなら適宜指定する必要があります。

この1pxのズレでご飯も喉を通らないくらい悩んでいた人は是非お試し下さい。

参考サイト

• CSSハック一覧 – HTML|CSSタグ辞書