WordPressでサイトをつくる～備忘録P.1～ | NOR NO HACO / デザインのハコ

本サイトはアフィリエイト広告を利用しています

WordPressでサイトを作る。

実際にこのサイトを作成した時の備忘録として残そうと思います。

Table of Contents

どんな知識が必要だった？

WordPressだと、簡単に作れます。

ただ、やっぱりオリジナリティのあるサイトを作るとなると、ある程度の知識が必要になってきます。

HTMLの知識

HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略。

サイトやホームページには必ず必要なWEB言語の一つ。

<html>
<head><title>HTMLの知識</title></head>
<body>
<div id="header"><h1>HTMLとは</h1></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>

↑例えばこんなコード

CSSの知識

CSSとはCascading Style Sheets（カスケーディング・スタイル・シート）の略。

HTMLに対して大きさや色、配置などを指定する言語。

#header{
 color:#00000;
 width:100%;
}

.h1{
 font-size:15px;
 color:#FFF;
}

#content{
 width:auto;
 height:100%;
 flort-right:300px;
 margin:0 auto;
}

↑例えばこんなコード

まずは簡単にイメージづくり（どんなサイトを作りたいか？）

ワイヤーフレームの作成

どんなサイトにするのか、どんな人に読んで欲しいのか、何を配信したいのかなどを前提に念頭におき、デザインを考えていきました。

↑例えばこんな感じ（飲食店、美容室など、、、）

ヘッダー、フッターにはどんな情報を載せる？コンテンツ部分のレイアウトは？サイドバーはいる？右？左？

など、思い浮かべているサイトのイメージも書き留めたりしてまとめていきます。

大抵は、完璧には再現できないと思います。

作っているうちに、こうした方がいいんじゃないか？とかで変わっていき、出来上がったら原型とどめてませんでした（笑）

でも、ある程度のイメージをしておかないと、途中できっと混乱してきますので、、、

レンタルサーバーを借りる

サーバーがなければWEB上にもでてきません。

初心者でも始めやすい「ロリポップ」

見やすく、使いやすい見た目とそれぞれの設定にマニュアルが付いているので、初心者の私にも簡単に設定ができました。

このサイトでは「ロリポップ」というレンタルサーバーを借りています。

プランが色々あるのでご自身にあったものを選びます。

roripo

とてもお手軽な価格なのが特徴で、人気があります。

独自ドメインを使用するか？

レンタルサーバーを借りれば、ドメインも取得できます。

でも「http://homepage.lolipop.jp」のようなサーバー名が入ってしまったり、選べる名前がイマイチなものが多いです。

そこで、独自ドメインというものを取得しました。

そうすると、このサイトのように「http://nor-asu.work」のようなドメインにできます。

もちろん、よく見る「.com」や「.jp」などもありますが、少しお高めです。

企業サイトなどを作成する場合はそちらを選んだ方が、信用性もあっていいみたいですね。

誰かに使用されているドメイン名だと使用できないので注意が必要です。

ちなみに私は、お名前.comでドメイン取得しました。

onamae

サーバーへ独自ドメインを設定（ロリポップの場合）

独自ドメインを取得したら、サーバーへ設定します。

「独自ドメイン」　→　「独自ドメイン設定」

設定する独自ドメイン・・・取得したドメインを入力

公開（アップロード）フォルダ・・・お好きな名前を入れてください。

ドメイン側の設定（お名前.comの場合）

上部の「ドメイン設定」タブを押して、下の方にある「ネームサーバーの設定」へ

ドメインを選択すると、下のポップアップが出てきます。

あまり気にせず手続きを進めてください。

「他のネームサーバーを利用」にチェックを入れ、「1プライマリネームサーバー」と「2セカンダリネームサーバー」を入力。

ロリポップの場合

プライマリネームサーバー	uns01.lolipop.jp
セカンダリネームサーバー	uns02.lolipop.jp

これで独自サーバーへつながります。

※ネームサーバーの反映には1日～3日かかるようなので気長に待ちましょう。私は24時間後にはできていました。

WordPressのインストール

WordPressを簡単にインストールできるサーバーが増えてきているみたいです。

実際は自分でインストールをしないといけないみたいですが、私もロリポップに「簡単インストール」に助けられました。

サイドバーの「簡単インストール」から「WordPress」を選択。

インストール先ＵＲＬ	ローカルにインストールするフォルダを作成します。わかりやすい名前をで良いと思います。
利用データベース	データベースを複数作っていなければ、そのままで良いです。
サイトのタイトル	そのままの意味です。後から変更可能です。
ユーザー名	WordPressにログインする際に入力するユーザー名です。
パスワード	WordPressにログインする際に入力するパスワードです。
メールアドレス	指定のアドレスにWordPressログインURLが送られてきます。
プライバシー	WEBサイト上に公開するかのチェックです。インストール後も設定できます。

備忘録P.2ではオリジナルテーマに進んでいきます。

WordPressでサイトをつくる～備忘録P.2～

最後までお読みいただき、ありがとうございます。

投稿日: 2015-09-24
カテゴリー: CSS | 投稿者: NOR

全コンテンツ新着記事

【コピペで簡単】HTML+CSSで作るボタンデザイン集
「お問い合わせ」「購入」「予約する」など、重要な役割を果たすボタンデザインはこだわってデザインする必要があると思います。

今回は、HTMLとCSSを使って簡単にボタンデザインが可能なソースコードを都度更新していきます。

続きを読む

【Photoshop】物体や人物を切り抜きして背景を透明にする方法（画像・動画付き）
Photoshopでよくある作業の一つ「切り抜き」は、いくつかの方法で実現が可能です。

「切り抜き」をした素材はpsdやpngなどで保存すれば透過データとして扱うことができ、様々な場面で活躍します。

今回はそのいくつかの方法を画像や動画付きで書き残しておきます。

続きを読む

【動画編集ソフト Premier Proの使い方】01. 動画の新規作成方法とタイムラインについて
昨今では「動画編集スキル」が求められ、非常に需要が高まっています。

今回は、これから動画編集を始めようとする方向けに、なるべくわかりやすくお伝えできればと思っています。

続きを読む

【AI新機能の使い方】Illustratorの生成AI「Firefly Image 2」でテキストからベクターを作成！
Adobe Illustratorに追加された「生成AI（Adobe Firefly）」の新機能「Firefly Image 2」を実際に使用してみました。

以前にPhotoshopの生成AIも使用してみましたが、Illustratorはベクター生成なのでより直感的な作業・デザイン制作が可能になるかと思います。

続きを読む

【最新AI機能の使い方】PhotoshopのAI画像生成機能がすごい！
Adobe Photoshopに追加された新機能「生成AI機能」を実際に使用してみました。

今まで合成の作業はモノによっては、とてつもない時間と労力を費やしていましたが、この新機能でかなりの短縮になると思います！

続きを読む

iPhone Xに機種変更して気付いたiTunesの落とし穴
2017年11月3日発売だったiPhoneX（アイフォーン10）。

予約開始が同年10月27日16:01からだったので、私は15:59から携帯を握りしめ、16:00:45から予約ページの更新を繰り返しながら、ページが表示されるとすぐ予約の申込みを完了しました。

その成果あってか、発売日の11月3日の午前中には受け取りにいくことができました。

続きを読む