WordPressを使ってビジネスでホームページを作成

WordPressを使ってビジネスでホームページを作成

WordPress

 
ビジネスでWebサイトを作成する時に、メンテナンスがしやすいWordPressを使う事もある思います。

WordPressのテーマを選んで、「外観」や「設定」を最適化して完了!!

だけではお客様に満足してもらえません。

HTML&CSSの知識を身に着けてお客様に感謝されるWebサイトを作れるようになりましょう。

WordPressでホームページを作成

僕はビジネスでWebサイトの作成をしていますが、WordPressを使ってWeb作成する事が多くなりました。

仕事でWebサイトを作成する時

  • メンテナンスが楽なこと。
  • カスタマイズが容易なこと。
  • 表示速度が速いこと。

 
3つのポイントを重視しています。
 
集客できるWebサイトは日々の更新が必要になります。
WordPressで作成したWebサイトはコンテンツを更新した時にページ内の変更だけですむ事が多いのでメンテナンスが非常に楽です。

CSSの設定で表示の仕方を美しく

お客様のニーズに合わせてデザインを変更する時に、CSSの知識が必要になります

WordPressでCSSを編集する時は「Simple Custom CSS」というプラグインを使います。
このプラグインを使うと、テーマをアップデートした時でも CSSファイルが上書きされないので安心してCSSを変更する事ができます。

Simple Custom CSSについては、過去記事 → 「wordpressプラグイン僕のおすすめ6選はこれっ。 」も合わせてお読み下さい。

CSSの覚え方

CSSは、覚えるのではなくどのサイトを見れば解決できるか(チートシート)知っておくことが大切です。

チートシートとは?
 カンニング・ペーパーのこと。

CSS 参考になるサイト
日本語対応!CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス

 

CSS で出来ること

CSS(Cascading Style Sheets)は、HTMLで記述されたWebページの体裁(レイアウト)を指定するための言語のこと。
 
CSSでは下記の事ができます。

  • レイアウトを整える
  • 色を変える
  • 大きさを調整する
  • 線をつける
  • 形を変える
  • アニメーションをさせる

 
過去記事 → ホームページ作成 HTML5、CSS3。基本的なHTMLの書き方 も合わせてお読み下さい。
 

ホームページ作成 HTML5、CSS3。基本的なHTMLの書き方

ホームページ作成 HTML5、CSS3。基本的なHTMLの書き方

HTML5、CSS3

 
ホームページが作れれば、クラウドソーシングなどで1万円から5万円程度の案件がこなせます。

スキルアップすれば、店舗や企業からの依頼を受注して独立し個人事業主になる事だってできます。

ホームページ作成に必要なHTMLとCSSの基本

HHTML(HyperText Markup Language)は、Webページのタイトル、見出し、段落、箇条書きなどの文章構造を記述する言語のこと。

CSS(Cascading Style Sheets)は、HTMLで記述されたWebページの体裁(レイアウト)を指定するための言語のこと。

基本的なHTMLの書き方

  • <!doctype html>
  •  このファイルははHTMLだとブラウザに説明するための宣言。

  • <html lang=”ja”>
  •  html要素内で使われている言語は日本語という意味。

  • <meta charset=”utf-8″>
  •  meta要素はhead要素内に配置し、このページに関する色々な情報を記述します。

    ・文字コード
    ・ページの紹介文(概要文)
    ・ページに関連するキーワード
    ・TwitterやFacebookなどのSNSの情報
    ・作ったソフト
    ・著者
     今回の場合は、「このページは文字コード utf-8 」と宣言しています。

  • <head></head>
  •  この中に metaタグ、titleタグの書き込み、スタイルシート(CSS)の読み込み、JavaScriptの読み込みを記入。

  • <body></body>
  •  文章の本体。

  • <nav></nav>
  •  ナビゲーションと呼ばれる部分。リンク集の内容を示す見出しやリンクのリストなど。

  • <article></article>
  •  自己完結する内容を表すセクション。記事の見出しや文章など。

  • <section></section>
  •  汎用的なセクションを定義する。コンテンツ内においてテーマでまとめられた部分(見出しや文章など)。

  • <header></header>
  •  まとまりの最初の部分。

  • <footer></footer>
  •  一般的にそのセクションの筆者、関連ドキュメントへの陸、コピーライトなどの情報。

  • <title></title>
  •  Webページのタイトル。

  • <h1></h1>
  •  見出しとなるテキスト。h1からh6まで。

  • <p></p>
  •  段落。

  • <a href=”#” target=”_blank”>
  •  リンクを作成。

  • <img src=”./images/sample.jpg” alt=”サンプル画像”<
  •  画像ファイルのURL.

  • <div></div>
  •  CSSを適用させる部分で使う。

  • <address></address>
  •  連絡先。

  • <small><small>
  •  誤解を避けるための注意書きや警告、法的制限、コピーライトを表す法律用語など。

基本的なCSSの書き方

 セレクタ { プロパティ : 値; プロパティ; 値; ・・・ }

 

自分でホームページを作ることが出来たら

自分でホームページを作ることが出来たら・・・・。

  • お金が節約できます
  •  Webデザイナーにホームページ作成を依頼すると最低でも10万円以上の制作費が請求されます。

  • 時間が節約できます
  •  すぐにコンテンツを更新したい時でもデザイナーにWebサイトのイメージを伝えるのに、打ち合わせが必要になり時間がかかります。

  • 副収入が得られます
  •  ホームページを作るスキルを活かして、クラウドソーシングで仕事を探して副収入をえたり、お店や企業から仕事を受注して収入を得て独立することも出来ます。

 

標準入力 標準出力とリダイレクト、パイプのはなし

UNIX/Linux 標準入力 標準出力とリダイレクト、パイプのはなし

UNIX/Linux 標準入力 標準出力とリダイレクト、パイプ

UNIX/Linux 標準入力・標準出力

UNIX/Linuxのシェルから起動されるプログラムには、標準入力(STDIN)標準出力(STDOUT)標準エラー(STDERR)という入出力路が使えるようになっています。

リダイレクト(redirect)という機能を使って出力先を変える事ができます。

パイプ(pipe)は、1つのプログラムの出力を、一時ファイルを使わずに別のプログラムの入力に結びつける1本のつなぎのことをいいます。

 
UNIX/Linuxにあるこれら機能のおかげで、効率よく作業が行えるようになっています。

標準入力
 通常はキーボードに割り当てられています。

標準出力
 通常、画面に割り当てられています。

標準エラー出力
 通常、画面に割り当てられています。

 
標準入力 標準出力 標準エラー
 

リダイレクト、パイプを使った例

Ex1)
画面(標準出力)に Hello を表示する

 $ echo Hello
 
ファイルに Hello を書き出す
 リダイレクトを使って標準出力をファイルにつなぎます。(ファイルが作成される)
 $ echo Hello > hello.txt

リダイレクトの使用例など

Ex2)
ファイル情報を表示

 $ ls -l
 
ls -l
 
ファイル情報を取得して、9カラムを基準に並べ替える
 lsコマンドでファイル情報を取得し、パイプを使って sortコマンドで9カラムを基準に並べ替える。(途中でファイル出力せずにパイプを使って処理。)

 $ ls -l | sort -k9

パイプ使用例

理解を深めたい時は、→ 高知大学 理工学部 情報科学教室 「Lesson7 標準入出力を理解する」が勉強になります。

リダイレクトの種類

コマンド > ファイル コマンド結果をファイルへ書き込む
コマンド < ファイル ファイルの中身をコマンドの標準入力へ
コマンド >> ファイル コマンドの出力結果をファイルへ追記
コマンド 2> ファイル エラー出力をファイルへ書き込む
コマンド 2>> ファイル ファイルにエラー出力を追記
コマンド > ファイル 2>&1 ファイルに標準出力と標準エラー出力を書き込む
コマンド >> ファイル 2>&1 ファイルに標準出力と標準エラー出力を追記
コマンド << 終了文字 終了文字が現れるまで標準入力へ送る
コマンド &> ファイル 標準出力と標準エラー出力を同じファイルに書き込む
コマンド > /dev/null 2>&1 表示をしない。(表示をゴミ箱へ)

UNIXの基本思想

単純で汎用的な機能を持ったコマンドを組み合わせることによって大きな機能を実現する。」
UNIXの基本的な考え方のひとつです。それを実現するために実装されたと言っても過言ではありません。

UNIX/Linuxで作業する時は、この基本思想を大切にしたいですね。

UNIX/Linuxのシェルとカーネルとは?

UNIX/Linuxのシェルとカーネルとは?

シェルとカーネル

シェル( shell )は「」のことです。
linuxのシステム部分の「」にあたる部分をカーネル( Kernel )と呼びます。
 

カーネルは、アプリケーションがシステムコールという方法を使ってアプリケーションとハードウェア(CPU、メモリーやハードディスク、ネットワーク接続など)の橋渡しをします。

シェルは、LinuxのCUI上(ktermなどターミナルソフト)でインターフェイスの役割を担っていてコマンドを受け付けたり、結果を出力します。
 
京都産業大学が公開されているページがわかりやすいです。

シェルとは
UNIX / Linux でターミナルソフト (kterm など)を利用する場合、ユーザはプロンプトで操作目的のコマンドを入力し、そこで表示される結果を見てまた次のコマンド入力を行う、というサイクルで対話的な作業を行います。

本当は UNIX / Linux の中核(kernel: カーネル)が管理している機能を用いて、ユーザは様々な処理を行っているのですが、カーネル自身はユーザと直接対話する能力を持っていません。
そこで、ユーザと対話する能力を持ち、カーネルに対して操作のお伺いを立てる仲介役のプログラムが、ユーザとカーネルの間に存在してユーザは操作を行います。
この仲介役プログラムは、ユーザから見てカーネルの周りをすっぽり覆っている「殻」(shell) のように見えることからシェルと呼ばれます。
簡単に言えば、シェルは、ユーザが入力したコマンドを解釈してカーネルに処理を依頼し、その結果やメッセージなどを画面に表示する機能を持っているのです。

京都産業大学 シェルの概念と機能 より  
シェルとカーネル

 

  • Linuxを起動
  •     ↓

  • カーネルがコンピュータの状態を初期化
  •     ↓

  • アプリケーションが実行できるようになる。
  •     ↓

  • アプリケーションがコンピュータのハードウェアとやり取りする

 

シェルとシェルスクリプト。用語の使い方に注意

UNIX/Linuxを使っているのなら、「シェル」「カーネル」そして「システムコール」の役割が分かっていて、シェルとシェルスクリプトの用語の使い方を理解していれば十分です。(シェルはプログラム言語そのもの。シェルスクリプトはプログラミングの一種と考えるとわかりやすいですね。)

家電製品に利用されている「組み込みLinux」(テレビや携帯電話[アンドロイド]、プリンタなど)の開発をするエンジニアを目指すのであれば、カーネルやシステムコールに関して深い理解が必要になります。

シェルスクリプトとは?

script = 台本 ですね。
シェルスクリプトは、UNIX/linuxのシェルが解釈できる命令(コマンド)をつなげて実行できるようにした台本です。Windowsのバッチファイル( .bat )のUNIX/Linux版です。

シェル( shell )の種類

  • bash
  • sh Bourne シェル(ボーンシェル)。初期のUNIXの標準シェル。

  • csh
  • csh Cシェル。BSD系UNIXの標準シェル。

  • ksh
  • tcsh Cシェルの上位互換シェル。FreeBSDの標準シェル。

  • Bash
  • Bash バッシュ。GNUプロジェクトによるシェル。

 
Ubuntu をインストールしている人の大半のシェルは「bash」だと思います。

$ echo $SHELL

とコマンドを打つと確認できます。

正規表現の使い方を覚えよう UNIX/Linux

正規表現の使い方を覚えよう

UNIX/Linux を使いこなすための正規表現

UNIX/Linux を使う、プログラムをエディターで作る人なら「正規表現」の使い方を覚えれば、効率よく作業を進めることができます。

正規表現を使えば、膨大な量の文書から容易に見つけたい文字列を検索、置き換えする事ができます。

正規表現はテキストファイルに含まれる文字列の中で、指定したパターンにマッチする部分があるかどうかを調べます。
完全一致だけではなく、より複雑なパターンにも対応できるようになっています。

正規表現は、viエディタやUNIX/Linuxの grepコマンド、sedコマンドそして多くのPHPやPerlなど多くのプログラミング言語で使うことが出来ます。

正規表現を使った例

Ex1)
WordPressのテーマを編集する時、 function という文字列を探したい時

$ grep function *.php

 
Ex2)
Webサイト内の複数ある記事の全ての「だと思います。」という文字を「と思われます。」に書き換える。

$#/bin/sh
for f in *.html
do
sed -i -e ‘s/だと思います。/と思われます。/g’ $f
done

 
とコマンドを打つと、沢山のhtmlファイルから function という文字列が、どのソースプロラムに書かれているか一瞬で見つけることができます。
Ex3)
正規表現のパターン例 郵便番号をテキストファイルから抜き出す。

宮城県 980-0874 仙台市青葉区角五郎
108-0075 東京都港区
東京都墨田区押上 131-004

という内容の source.txt ファイルの郵便番号を全角にする

$ cat source.txt | sed ‘y/[0123456789]-/[0123456789]ー/’

宮城県 980ー0874 仙台市青葉区角五郎
108ー0075 東京都港区
東京都墨田区押上 131ー004

 

正規表現について書かれたサイト

 

 

正規表現 まとめ

正規表現の使い方を覚えると様々な場面で作業を効率よく行えるようになります。

C言語やperl、PHP言語などの sprintf関数などの関数でも、引数に正規表現を使うとコンパクトなプログラムが書けます。

はじめはメンドウと思うかもしれませんが、正規表現の使い方を覚えて手作業を減らす工夫をしてください。

 

ビジネスでホームページを作成する時に必要なこと

ホームページの作成に必要な知識は?

ホームページ作成で必要なスキル

ホームページの制作を仕事にしたい。副業で稼ぎたい。

WordPressというCMSを使えば、最低限の知識でもホームページを作成・運用できます

WordPressでホームページを作るために最低限どんな知識が必要になるでしょうか?

    最低限必要な知識

  • レンタルサーバの契約・ドメイン取得が出来ること
  • WordPressがインストール出来ること
  • HTML & CSS に関する知識があること
  • ヒアリングでホームページのコンセプトやデザインをイメージ出来ること
  • 最低限の画像処理が出来ること

 
ホームペー位作成にあたって、次のスキルがあるとライバルより優位に立てます。

    ライバルより優位になるための知識

  • タイピング = ブラインドタッチ
  • プログラミング (PHP言語やJPerlおよびava、JavaScript)
  • linuxサーバの運用知識
  • マーケティング(ステップメールの使い方も含む)
  • コピーライティング
  • SNSを活用した集客方法

ビジネスでホームページ作成をする

ビジネスでホームページ作成をする場合、
お客様がホームページに何を求めているのかを把握します
その上で、より良い提案が出来るようにマーケティングなどの勉強もしておくようにします。

ホームページ開設後、何年も継続して運用していくことになります。

僕は
WordPressでホームページを公開した場合、WordPressはバージョンアップが頻繁に行われるので、「一度ホームページを作ったら放置しておく」という考え方は排除してホームページは継続して運用する必要がある事をきちんとお客様に伝え納得してもらいます。

ホームページ作成後に料金のことでトラブルことのないよう、金銭に関することは仕事に着手する前にきっちりと決めています。(契約書作成)

ホームページはメンテナンスが必須

仕事柄、複数のホームページを15年近く作成・運用しています。
場合によっては、PerlやPHPでプログラムする事もありますが、一般的な運用ではホームページの運用が簡単なWordPressを使うのが一番ラクです。

ラクが出来る作業時間が少ない低料金で提供できる

ホームページ公開までの流れ

1時間ほど面談orSkypeで、打ち合わせをしてホームページのコンセプトおよび料金が決まったら、お客様から資料をメールしていただいています。
   
ライバルになりそうなサイトをリサーチしてデモ用サイトにサンプルサイトを作ります。
   
お客様からOKがでた段階で、正式なサイトを公開します。