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

WordPressでサイトを作る。

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


スポンサードリンク


 

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

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-top

roripo  

 

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

 

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

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

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

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

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

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

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

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

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

 

onamae

 

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

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

roripo-domein

 

 

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

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

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

 

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

onama.com setting

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

 

onama.com setting2

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

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

 

onama.com setting3

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

ロリポップの場合

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

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

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

 

WordPressのインストール

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

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

roripo-in1

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

 

roripo-in2

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

 

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

 

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


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

関連記事

WordPressでサイトをつくる～備忘録P.2～
FTPクライアントソフト「FFFTP」
HTMLとCSSの基礎知識 P.2
HTMLとCSSの基礎知識 P.1
テキストエディタソフト
【WordPress】functions.phpによく書くことまとめ

全コンテンツ新着記事

  • iPhone Xに機種変更して気付いたiTunesの落とし穴

  • 2017年11月3日発売だったiPhoneX（アイフォーン10）。

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

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

     

    続きを読む

  • mac for excel クラッシュ時の一時保存フォルダの場所

  • macのexcelで作業をしている時、何かのエラーを叩いてしまった際、excelが急にクラッシュして強制終了なんてことがよくあります。

    そんな時、Office製品はしっかり一時保存データを残してくれています。

    macでの一時保存フォルダを備忘録で残しておきます。

    続きを読む

  • 【Photoshop】簡単にドット柄を作る

  • 最近、バナー広告などのお仕事が増えてきて、デザインに取り入れる頻度が増えてきたので、この機会にドット柄の作り方を備忘録で残しておきます。

    私の環境はPhotoshop CS6 for Macです。

    続きを読む