カテゴリー: WEB DESIGN

WordPressでホームページやウェブサービスを作る時に、独自ドメインを取得することであなただけのオンライン上の住所を手に入れることができます。

独自ドメインのメリット

1. 独自ドメインは、サイトアドレス（URL）とメールアドレスを自分の好きな名前にできます。（http://www.好きな名前.com）（アカウント名＠好きな名前.com）自分のお気に入りの名前や数字などの文字列を自分で作ることができるので、これから作るホームページやブログにも愛着が湧いてきます。メールアドレスの作成や削除も簡単でいつでも自由に行うことができます。（※独自ドメインを１つ取得すれば、URLとメールアドレス両方に併用することができるので２つ取得する必要はありません。）
2. 独自ドメインは、ブログやホームページ、ウェブサービスを公開する場合に、URL・メールアドレスが変わりません。無料でできるブログサービスだと、そのサービスが終了してしまった時、プロバイダ変更、レンタルブログ変更などをした時にURLが変わってしまいます。独自ドメインであれば、URLもメールアドレスも変更することなく安定して運用していくことができます。
3. 独自ドメインだと、GoogleのSEO（検索エンジン最適化）に効果があります。内容が増えてしまいますので詳細の解説はここでは割愛します。

ムームードメイン

GMOペパボが運営する独自ドメインを安価で取得できるサービスです。最安値が99円と言う安さがウリのサービスです。キャンペーン期間だと通常１年間の契約料金を半額くらいの料金でドメイン契約できたりするなど、安くてシンプルに管理しやすいドメインサービスを使いたいならムームードメインがオススメです。レンタルサーバーの「ロリポップ」や「ヘテムル」と運営母体会社が同じなので併用で契約する人が多いです。

お名前.com

GMOインターネット株式会社が運営するサービスで、期限切れドメインの取得予約やドメインのオークションなど様々なサービスが充実しています。お名前.comでドメインを取得する人は、「お名前.comサーバー」と一緒に契約する人が多いです。

エックスドメイン

２年目以降のドメイン更新料が安く、管理画面も分かりやすくとても使いやすいサービスです。独自ドメインを契約していない場合でも、「HTMLサーバー」「PHP・MySQLサーバー」「WordPress」を無料で利用できます。サーバーの「エックスサーバー」を運営しているエックスサーバー株式会社が運営元なので、エックスサーバーと併用して契約する人が多いです。

独自ドメインの取得方法

1. 使いたいドメイン名を入力する。あなたが使いたいドメイン名を入力すると、取得できるかどうかがわかります。「取得できます」という旨の表示出たドメインは取得可能です。すでに使われているドメインは取得できませんので、他のドメイン名を考えましょう。（※基本的にドメインは一度決めた後は変更はしない方が良いです。ホームページを公開した後でもドメイン名の変更はできますが、変更前のURLではアクセスできなくなります。当然、それまでに蓄積されたブックマークやページの内部リンク外部リンクも使えなくなってしまい、結果、検索エンジンの評価も下がってしまいますので、ドメイン名は慎重に選ぶようにしてください。）
2. 申し込みフォームで必要事項を入力します。名前、住所、生年月日など、契約者の必要事項を入力します。
3. 申し込み内容を確認します。入力した内容を確認し、間違いがなければ利用規約やプライバシーポリシーに同意、お申込みを完了します。申し込みが完了すると、登録のメールアドレスに確認メールが届きます。（※登録メールアドレスやパスワード、取得したドメインの情報などは忘れないように必ずメモを取るようにしてください。）
4. お支払いを完了します。独自ドメインはたいてい１年契約で〇〇円という契約になります。数年分をまとめて契約することも可能です。支払いをしないままだと、ドメインが使えなくなってしまいせっかく作ったホームページにアクセスできなくなってしまいます。さらに、支払い期限を過ぎて放置したままになると、再度そのドメインを使おうと思ったら最低でも２万円ほど料金がかかってしまいますので支払い忘れはないように気をつけましょう。通常は、契約期間終了が近づいてくると、登録メールアドレスに「更新してください」という旨の通知がきますので、メールの確認をしておけば大丈夫です。
5. ドメインを取得する。支払いが完了したら、パスワードを入力して管理画面へ行き、独自ドメイン取得を完了させてください。
6. WHOIS情報の設定。ドメイン情報の詳細を入力します。「WHOIS」という、ドメイン名の登録者に関する情報を誰でも参照できるサービスに対して設定を行います。情報の公開は特に必要なければ「弊社の情報を公開する」を選択します。
7. ネームサーバーの設定。独自ドメインを取得した会社が提携していないサーバーの場合、ネームサーバーを入力する必要があります。（例：エックスサーバーを使っていてムームードメインで独自ドメインを取得した場合、ムームードメインのコントロールパネルから取得したドメインを選択し「ネームサーバー設定変更」をクリックします。そして「GMOペパボ以外のネームサーバーを使用する」を選択し、エックスサーバーのサーバー情報を入力していきます。具体的には「ネームサーバ1」に「ns1.xserver.jp」、「ネームサーバ2」に「ns2.xserver.jp」、「ネームサーバ3」に「ns3.xserver.jp」というようにネームサーバーにサーバー情報を入力していきます。入力できたら「設定変更」をクリックします。）これで取得した独自ドメインとデータを保管しているサーバーを結びつけることができました。

まとめ

独自ドメインを取得したら、WordPressをインストールするためのレンタルサーバーを契約しましょう。レンタルサーバーを契約するには「WordPressサーバーの契約方法」を参照してください。

…

↑

この様にHTMLで画像を貼ることができます。

<img src="http://evahks.com/wp-content/uploads/2016/02/How-to-draw-the-symbol-of-world-peace-mark-150x150.jpg" alt="world peace mark symbol" width="150" height="150" />

コードはこんな感じ。

画像を貼るHTMLサンプルコード

<img src="画像のファイル名（保存場所URLやパス）" width="画像の幅" height="画像の高さ" alt="代替テキスト">

画像を貼れるシンプルなサンプルコード

<img src="画像ファイル名や保存先URL">

これだけでも画像表示させることができます。

・「画像のパス」には、画像のアップロードされている保存先URLか、相対パスを入れます。初心者はURLの方がわかりやすいかもしれない。

・「画像の幅」は、数値を記述

・「画像の高さ」は、数値を記述

・「代替えテキスト」は、画像の説明文を書いておきます。なくても画像は表示されます。

HTML画像リンクさせる方法（サンプルコード）

HTMLで貼り付けた画像をクリックするとリンク先へ移動する様に出来るサンプルコードを紹介しています。…

画像にリンクを貼ることが出来ます。

画像にリンクを貼ることで、画像をクリックするとリンク先URLへ移動します。

HTMLで画像にリンクを貼ることの出来るサンプルコードをご紹介します。

↑

（例）この画像にリンクを貼ってあります。

この画像をクリックするとYouTubeの動画ページへ移動します。

画像リンクのHTMLサンプルコード

<a href="リンク先のURL"><img src="画像のファイル名（保存場所）" alt="画像の説明文"></a>

①画像リンクを貼りたい場所へHTMLでコピペします。

②必要な情報に書き直します。

• 「リンク先のURL」は、画像をクリックして移動する先のURLを記述します。
• 「画像のファイル名」は、アップロードされている画像のURLを記述します。
• 「画像の説明文」は、画像を説明する文章を記述します。

③画像リンク完成！

リンク出来ているか確認してみましょう。

HTML画像を貼る方法

画像だけ貼りたい方は↑リンクへ移動すると、HTMLで画像を貼れるサンプルコードが紹介されています。

 …

横方向の位置を指定するシンプルな並べ方

align=”左右”を追加すると、横方向の位置を指定できる様になります。

CSSプロパティのfloatと同じ効果で、clear=”both”で回り込みを解除するというシンプルな横並び方法です。

<img align="left" src="画像のＵＲＬ" />
<img align="right" src="画像のＵＲＬ" />
<br clear="both">

↑が使えない場合はこう↓して、alignの回り込みを解除します。

<div style="clear:both;"></div>

細かく指定して横並びする方法

style属性を使うので、位置や色などのデザインをcssで細かく指定することができます。floatやmarginなどcssの知識が必要になります。

画像を隙間なく並べる方法

<div style="float:left;">
<img src="画像のＵＲＬ"/>
</div>
<div style="float:left;">
<img src="画像のＵＲＬ"/>
</div>
<div style="float:left;">
<img src="画像のＵＲＬ"/>
</div>
<br clear="both"/>

画像の間にmarginで空間を指定する方法

<div style="float:left; margin: 

ホームページを制作する時などに、HTML・XHTMLでコードを記述したり、コピペで追加したりすると思いますが、後でコードを見直した時に何のコードか一目で分かるようにソースコード内にメモを書いておくと良いです。

このメモのことを「コメントアウト」と言い、ソースコードに日本語などの文字を書いてもサイトのページに表示されない様にしてくれます。

今回はHTML・XHTMLのソースコードにメモを記述する方法についてご紹介します。

これはタグではなく「宣言」といいます。

HTML・XHTMLのコメントアウトの書き方

<!-- ここに表示したくないテキストを書きます。 -->

HTML・XHTMLでもコメントアウトが可能です。

（記述は同じでも定義がやや異なる部分があります）

※気をつけることとしては、このタグ内ではハイフン（-　←これのことです。）を２つ続けて使ってはいけないので注意が必要です。

 …

ホームページやブログの記事などで画像を表示させる方法です。

HTML入力で画像を入力する時にはこのタグを使います。

<img src="画像ファイル名">

その際「画像ファイル名」のところに、画像の置いてあるURLを入れます。

または、画像ファイル名のところに、画像ファイル名（拡張し.jpg/.gif/.pngなど）をつけて記述します。（ファイルの指定は絶対パスと相対パス）…

ブログやサイトを運用していて「ここの文章を枠で囲いたいな〜」と思ったら、htmlを編集できる画面で枠をつけることができます。WordPress、アメブロ、FC2でも記事を枠で囲うことができます。

今回は簡単な枠をつけらえるhtmlのサンプルになります。

使いたい枠を見つけたら「ああああああああああああ」の部分を好きなテキストに変えて、HTMLの記述できる画面にしてからコピペしてください。

※ワードプレスの場合：テキストエディターに切り替えてコピペします。

細かい点線の枠

<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333;">
    ああああああああああああ
</div>

点線の枠

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333;">
    ああああああああああああ
</div>

実線の枠

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333;">
    

検索エンジンIDの取得

まずはじめに、自分のサイト専用の検索エンジンを作るために、検索エンジンのIDを取得します。GmailアカウントがあればGmailアカウントでログインします。アカウントを持っていない場合はGmailアカウントを新規作成してください。

Gmailアカウントを持っている方はこちらのページにアクセスして、「新しい検索エンジン」をクリックします。

検索エンジンの作成

すると設定画面になります。

①検索するサイト：検索対象にしたいURLを入力（複数のURLでも可能）。ドメインに*（アスタリスク）をつけると検索範囲を指定することができます。

（例）

• 個々のページ: www.example.com/page.html

• サイト全体: www.mysite.com/*

• サイトの一部: www.example.com/docs/* または www.example.com/docs/

• ドメイン全体: *.example.com

②言語： 日本語圏の場合は日本語の方が良い

③検索エンジンの名前：好きなもので良い

ここまで入力できたら「作成」をクリック。

するとこんな画面になります。

「検索エンジンを編集」のコントロールパネルか左側にある検索エンジンの編集を選択。

検索エンジンの編集

基本設定

まずは基本設定から

1. 「検索エンジンID」をクリックすると、作成したカスタム検索エンジンのIDが表示されます。
2. 「公開URL」はこの検索エンジンのみが表示されているURL。きになる方は試しにクリックしてみよう。

Googleカスタム検索エンジンのアカウント作成方法

Googleカスタム検索の検索結果画面に出てくるロゴデザインを変更する方法についてご紹介します。Googleカスタム検索エンジンの作り方や設定方法などについてはこちらをご覧ください。

検索結果が表示される時に、検索バーの隣にあるロゴデザインの変更方法について解説します。

上の画像の赤い四角で囲われている部分です。上の画像はロゴデザイン変更済みのものになります。デフォルトではお馴染みGoogleの画像になっています。これを自分の好きなロゴに変更できます。とっても簡単にできるので楽しんでやってみましょう！

Googleカスタム検索エンジンの「コントロールパネル」を開きます。

https://cse.google.com/cse/all

手順

上から順番に作業手順を解説しています。動画と合わせてご覧いただくとスムーズに作業が進められると思います。

1. 左にある「デザイン」をクリック
2. 「レイアウト」
3. 「Googleがホスト」を選択
4. 「新しいウインドウ」を選択
5. 「カスタマイズ」
6. 「ロゴの画像URL」にロゴとして使用したい画像が置いてあるURLを入力
7. 「ロゴのリンク先」ロゴをクリックした時に飛ばしたいページのURLを入力
8. 「ロゴの高さ」（縦幅に従って横幅も自動で決まります）→「保存」

以上になります。

Googleカスタム検索エンジンについて学ぶ

Googleカスタム検索エンジンのアカウント作成方法

 …