タグ別アーカイブ: マルチデバイス

独自ドメインでGmailを使おう【ドメイン・サーバー・メールのいいとこ取り】

  • 小
  • 中
  • 大

様々なサービスを利用していいとこ取りしよう

ドメインはお名前.comで取得し、それをエックスサーバーで運用し、メールサーバーはGoogle AppsのGmailを使うことで、快適に作業を進めることができます。

エックスサーバーにも優秀なメール機能は存在しますが、管理人は下記の理由からGmailの方が優れていると思います。

・POPで使わなければならない(これが一番でかい理由)
・迷惑メール機能はあるにはあるが設定が面倒
・メールアプリ(メールソフト)の設定が面倒
・複数のデバイスでメール管理しにくい(一番上の理由と同じ…)
・メールアドレス制作代行したとき設定を説明しにくい
・容量が小さい(MAX5ギガ)

これらの理由から、メールを管理するのはエックスサーバーではなくGmailの方が良いと個人的には思います。

個人でやるにも組織でやるにも、こっちの方がスマートだと思います。独自ドメインでGmailを使うことができれば、様々なデバイスを活用する場合もメールを確認しやすくなり、作業効率も上がるはずです。

まずはドメインを取得



お名前.comは相対的に安い金額でドメインを取得できる業者であるということができるでしょう。

ドメイン取ったらソッコーでネームサーバーをエックスサーバーに振り向けるようにしています。

ネームサーバーの変更すると浸透するまで結構時間がかかるため、早めにやっちゃいます。

ちなみに、エックスサーバーに向けるには、下記のようにネームサーバーを変更します。

ネームサーバー1 ns1.xserver.jp
ネームサーバー2 ns2.xserver.jp
ネームサーバー3 ns3.xserver.jp
ネームサーバー4 ns4.xserver.jp
ネームサーバー5 ns5.xserver.jp

参考→エックスサーバーマニュアル「ドメインについて」

サーバーを用意



エックスサーバーは言わずと知れた人気サーバーです。無制限にドメインを活用できるし、容量も一番安いプランでも200ギガもあります。

何かわからないことがあったら、電話で気軽にお問い合わせできるのも良いですね。管理人もよくお世話になります。

技術的に電話では答えられない場合は、メールでお問い合わせすることもあります。その回答がおそろしく速い。ありがたい限りです。

サーバーの準備ができていない場合は、ネームサーバーの変更よりも先にサーバーの準備をしてしまった方がいいでしょう。

Google Appsに登録する

Google Appsエックスサーバーでドメインが使える状態になったら、先にGoogle Appsに登録しちゃいましょう。

無料で30日間使えますし、お金を払うとしても年6,000円程度です。独自ドメインでGmailを使えるだけでも、格安と言えるのではないでしょうか。

クラウド機能もありますし、複数のドメインを管理することも可能です。作業効率も格段にアップするのではないでしょうか。

DNSレコードをGoogle Apps用に書き換える

ここが一番の難所です。なぜなら、エックスサーバーのマニュアルと、Google Appsのマニュアルとで、書いてあることが違うからです。

結論から言うと、DNSレコードのMXレコード、CNAME、TXTを書き換えます。

エックスサーバーのサーバーパネルにログインし、ドメイン欄にあるDNSレコード設定というところから編集することができます。注意書きにもあるように、設定を間違えるとウェブ表示されなくなったり色々と不具合が起こってしまう場合があるそうなので、注意しましょう。

管理人のDNSレコードはこんな感じです。

DNSレコードの設定

Google Appsのマニュアルには、MXレコードの「内容」の末尾に「.」があったのですが、それをそのまま記述すると「記述が正しくありません」という注意書きが出たので、末尾のドットは外しました。

Google Appsでドメイン登録とユーザー登録する

Google Appsで管理するドメインやユーザーを増やすことで、複数のドメイン、複数のメールアドレスを管理することができるようになります。

例えば職業柄たくさんのドメインやメールアドレスを管理しなければならない場合などでも、お名前.com・エックスサーバー・Google Appsという3つのサービスを併用することで、より効率よく管理することができるようになります。

MXレコードをチェックする

MXレコードに限らず、DNSレコードは書き換えたからといってすぐに反映されるわけではありません。浸透するまでに一定の時間が必要です。

ですから、今、特定のドメインのMXレコードがどのような状態になっているのか、調べたくなることもあるでしょう。

Google Appsには、MXレコードをチェックする機能が備わっています。これを使えば、特定のドメインのMXレコードの状態を調べることができ、さらに問題点なども指摘してくれます。

Google AppsのMXレコードチェッカー

photo by: Bull3t

WP SiteManagerでデバイス切り替えボタンを設置してユーザビリティを向上させる方法

  • 小
  • 中
  • 大

WordPressの超優良プラグインの使い方紹介です

WP SiteManagerとは、WordPressの超優良プラグインの1つです。このプラグインだけで色々なことができるのですが、この記事を読んでいる方はもうすでにこのプラグインを利用している可能性が高いと思われますので、詳しい使い方や紹介は割愛したいと思います。

ちなみにWP SiteManagerはFacebookページもありますので、こちらも有益な情報を得ることができるツールとして使うことができます。

このWP SiteManagerですが、とても便利なのは良いのですが、カスタマイズ方法などの情報があまり出回ってなく、今回のデバイス切り替えの件についてもほとんど情報がありませんでしたので、記事を執筆しようと思いました。マルチデバイスだけでなく、パンくずナビやページャーなどにもたくさんカスタマイズしたいところがあるのですが、それがなかなか難しくて悪戦苦闘しております…

今回はその悪戦苦闘が功を奏し、解決することができましたので、ご紹介させていただきます。

デバイスごとにリンクを張る

device-structure
さて、画像のようにデバイスごとに異なるテーマを表示させているとの前提で、各テーマに他のテーマを表示させる方法についてご紹介しておきたいと思います。ちなみにこの記事の画像はアイキャッチ画像を含めて全てWP SiteManagerのサイトから拝借させていただいております。

モバイル表示にさせたい時は

www.example.com/?site-view=smart

と記述すればモバイル表示されます。

PC表示させたい時は

www.example.com/?site-view=pc

と記述することによりPC表示に切り替えることができます。

ここまではプラグインサイトの更新情報に載っているのですが、逆に言うとここまでしか分からなかったので、少しつまずいてしまいました。

結果からいうとリンクを上記のコードの通りに張れば良かっただけなのですが、細かい手順などが分からなかったため、悪戦苦闘してしまいました。

今回は、同じようなことで困っている方のために、具体的な設置方法をご紹介させていただきます。

デザインの参考までにコードを載せておきます

管理人があるサイトで使っているコードを参考までに載せておきます。

footer.phpなど

<div id="footer">
<div class="device-switch">
   <ul>
       <li><a href="<?php echo home_url('/?site-view=smart'); ?>">モバイル表示に切り替える</a></li>
       <li><a href="<?php echo home_url('/?site-view=pc'); ?>">PC表示に切り替える</a></li>
  </ul>
</div>
</div>

いろんなサイトで使いたかったので、URLはPHPを使って呼び出すようにしてあります。このように記述しておけば、他のサイトに貼り付けたとしても正しくURLが呼び出されるはずです。smartやpcのあとにスラッシュを入れてしまうと正しく動作しませんので気をつけてください。

css

/*------------------------------------------------------------
デバイス切り替えボタンの装飾
-------------------------------------------------------------*/
#footer .device-switch ul li a {
    background-color: #好きな背景色;
    border: 1px solid #好きな色(囲み線);
    border-radius: 3px;
    display: block;
    font-weight: bold;
    margin: 5px auto;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    width: 200px;
}

#footer .device-switch ul li a:hover{
	background-color: #好きな背景色(マウスオーバーしたとき);
    color: #好きな文字色;
}

「好きな○○」の部分は、好きな色コードを記述して下さいね。

スマホサイトにPC表示ボタンを設置する理由

最近ではスマホに対応させることが至上命題などといわれていますが、管理人はなぜスマホサイトにPC表示機能を付けなければならないのかが分かりませんでした。

しかし、最近気付いたことなのですが、普段はPCで閲覧していて、外出先などからスマホでアクセスした場合、全然違うデザインだと困ってしまうことがあるということです。

どこになにがあるのか、そのサイトの細かい構造はどうなっているのか、などは普段見慣れているPCサイトの方が分かりやすい場合があります。そのような方のためにも、スマホからもPCサイトを見られるようにしておくという配慮は、ユーザビリティ向上に一役買ってくれるものと思います。

見ている人が快適に閲覧できるようにと考え、スマホサイトからもPCサイトが表示できるようにしました。

しかし当サイトはメディアクエリでマルチデバイス対応させておりますので、今回の方法は使えなさそうです。今回の方法は、デバイスごとに異なるテーマを表示させている場合に有効な手段であると考えられます。