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の基本 [ネットビジネス]
ホームページ作成 HTML5、CSS3。基本的なHTMLの書き方
ホームページが作れれば、クラウドソーシングなどで1万円から5万円程度の案件がこなせます。
スキルアップすれば、店舗や企業からの依頼を受注して独立し個人事業主になる事だってできます。
ホームページ作成に必要なHTMLとCSSの基本
HHTML(HyperText Markup Language)は、Webページのタイトル、見出し、段落、箇条書きなどの文章構造を記述する言語のこと。
HCSS(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の書き方
標準入力 標準出力とリダイレクト、パイプのはなし [ネットビジネス]
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
ファイル情報を取得して、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 を使う、プログラムをエディターで作る人なら「正規表現」の使い方を覚えれば、効率よく作業を進めることができます。
正規表現を使えば、膨大な量の文書から容易に見つけたい文字列を検索、置き換えする事ができます。
正規表現はテキストファイルに含まれる文字列の中で、指定したパターンにマッチする部分があるかどうかを調べます。
完全一致だけではなく、より複雑なパターンにも対応できるようになっています。
正規表現は、viエディタやUNIX/Linuxの grepコマンド、sedコマンドそして多くのPHPやPerlなど多くのプログラミング言語で使うことが出来ます。
正規表現を使った例
WordPressのテーマを編集する時、 function という文字列を探したい時
Ex2)
Webサイト内の複数ある記事の全ての「だと思います。」という文字を「と思われます。」に書き換える。
for f in *.html
do
sed -i -e 's/だと思います。/と思われます。/g' $f
done
とコマンドを打つと、沢山のhtmlファイルから function という文字列が、どのソースプロラムに書かれているか一瞬で見つけることができます。
Ex3)
正規表現のパターン例 郵便番号をテキストファイルから抜き出す。
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を使うのが一番ラクです。
ホームページ公開までの流れ
↓
ライバルになりそうなサイトをリサーチしてデモ用サイトにサンプルサイトを作ります。
↓
お客様からOKがでた段階で、正式なサイトを公開します。
Linux ( Ubuntu )に無料動画編集ソフト shotcutをインストール [ネットビジネス]
Linux( Ubuntu )に無料動画編集ソフト shotcut をインストール
Ubuntu に無料動画編集ソフトをインストール
Linux( Ubuntu )の無料動画編集ソフトを検索したら「shotcut」というソフトがみつかったので、Ubuntu にインストールしました。 コマンドラインでインストールする場合は
$ sudo apt install libsdl2-2.0-0
Ubuntuソフトウェアセンターからインストール メニューにあるUbuntuソフトウェアセンターをクリックし、shotcut で検索後、shotcutが見つかったらクリックしてインストールします。
Ubuntuソフトウェアセンターからshotcutをインストール(YouTube)
shotcut 作業画面
shotcutの作業画面です。
WordPress テーマ 最近の傾向 ALPHA2を使ってみた [ネットビジネス]
WordPress テーマ 最近の傾向
INFOPLATE5 販売終了 ALPHA2を使ってみる
今まで、使い慣れていた有料のWordPressテーマ「INFOPLATE 5 wp Pro」が販売終了だそうです。(このサイトも INFOPLARW5 wp Pro を使っています。)
それで、INFOPLATE を販売されていた方が新たに「ALPHA2 WordPress Theme」を販売されているので、購入して → こちらのサイトにインストールしてみました。
なかなかお洒落で、今風なサイトになったと思いませんか?
それから、サイトが表示されるまでの時間が短いと思いませんか?
僕から購入された方は購入時にチェックしてください。
↓
今回、動作確認のために → https://jitakubusiness.com/ のサイトに「ALPHA2」をインストールしましたが、jitakubusiness.com も有料WordPressテンプレートの「ALPHA2」を使う前は「INFOPLATE5」を使っていました。
「INFOPLATE5」のショートコードを使って記事を書いていたので、「ALPHA2」に移行する時に、記事を正常に表示させるためにショートコード部分を全部書き直す必要があり苦労しました。
今回は、幸いにも記事数が少なかったので少し手作業をしましたが、もし記事数が多かったらWordPressのデータベースを直接書き換えるスクリプトを作らないと手に負えない事になっていたと思います。
僕のサイト経由でALPHA2を購入された方
僕の会員制のコミュニティサイト
アフィリ・ブートキャンプにご招待します。
コミュニティサイトでは、
- ネットビジネス関連
- 稼げる情報やノウハウが満載です。
- WordPress関連
- 他のサイトに差がつく仕組みを公開しています。
- Linux特にUbuntu関連
- 知っているだけで、256倍効率よく作業できるノウハウが満載です。
を話題にしています。会員制ならではの情報提供をしています。
お問い合わせフォームに
氏名、メールアドレス、題名に「購入した商品名」、メッセージ本文に「注文ID」を入力して送信してください。
ソフトウェア開発は手間がかかりますネ
有料のWordPressテンプレート「THE WORLD」や「メシオプレス」そして「INFOPLATE」などが販売終了になっています。
仕事で使うソフトウェアは、世の中のニーズに合わせて常に更新しなければいけないので手間がかかります。
WordPress 本体が頻繁にバージョンアップされるので、WordPressのテーマも動作検証や修正に手間がかかります。
手間 = お金
開発する側は、手間がかかった分はお金が欲しいというのが本音ですね。(プログラマの人件費は高額です。)
一般的に、有料テンプレートは一度購入してもらったらバージョンアップは無料という売り方をしているのでテーマを開発する側はイヤになってくるんじゃないかなぁ・・・。なんて思っています。
rootユーザ システム管理者はlinuの王様 [ネットビジネス]
rootユーザ システム管理者はlinuの王様
rootユーザはLinuxの管理者
rootユーザはlinuxシステムを自由に設定できる最高権限を持つユーザです。(windows の administrator と同じ)
rootユーザは Linux の管理者権限を持つユーザです。
root権限を持つユーザは linux に webサーバや mailサーバ、使いたい言語がインストール出来たり、他のユーザのパスワードを変えたり、他のユーザがシステムを使えるようにしたり使えないようにできます。root権限でハードディスク全体をフォーマットしたり全てのファイルを削除する事も出来てしまいます。
root権限は linux上であらゆる事が可能で、システムを破壊する可能性もあるので、普段は root でログインすることはありません。
一般のユーザを作成して、root権限を与えられた一般ユーザでログインします。
一般ユーザでログインした後、root権限が必要な時は「sudo su」コマンドを使って root権限を取得します。
ログインした場所がカレントディレクトリ
あなたがログインした直後、/homeディレクトリ下のあなた専用のディレクトリがあなたの「カレントディレクトリ」になります。
root権限でlinuxシステムのカレントディレクトリを参照
この /homeディレクトリ下に 2人のユーザー専用ディレクトリがあり、ユーザ「piyo」でログインした時の カレントディレクトリは /home/piyo/ になります。
linuxコマンド cd と pwd
・ linuxのファイルシステムを理解するためにコマンド cd と コマンド pwd の使い方を覚えましょう。
「linux cdコマンド」などで検索してコマンドの使い方を覚えてください。
もっと便利な使い方があります。
man コマンドをインストールすれば、あなたが使っている linuxで コマンドのマニュアルが読めるようになります。
日本語のマニュアルを参照するために ubuntu に mannpages-ja manpages-ja-dev をインストールしている画面です。(右のターミナルでは、使わなくなったライブラリを削除しています。)
man cd で cd コマンドのマニュアルを参照しているところ。
おうちで linuxサーバ
仕事で linuxサーバを運用する場合は、クラウドを使います。(DDOS攻撃などで狙われた時に対応するには、何百万円もするファイアウォールが必要になります。)
自宅で linxサーバを立ち上げて、自分がroot権限を持ったシステム管理者になり、Webサーバやmailサーバ、ファイルサーバなどを運用したり、使いたいプログラミング言語(と付帯する環境設定)をインストールする事で、linuxサーバ運用に関する経験・知識が普通のlinuxユーザより何倍も高くなります。
過去記事 → 中古のWindowsマシンを Linuxマシンに変身 も合わせてお読み下さい。
このページで使っている画像は、無料で使える「gimp」を使って作成しています。このサイトの過去記事 → 無料の画像編集ソフト GIMP
htmlソースを書いてブラウザに helloと表示させる [ネットビジネス]
htmlソースを書いてブラウザに hello と表示させる
ブラウザーにhelloと表示
Webサイトに表示させるためHTML(Hyper Text Markup Language)言語で記述するのが一般的です。
ブラウザに「hello」と表示させるために vi エディタで test.html を記述します。
書き上がった test.html をブラウザーにドロップして、 htmlファイルの内容を表示させます。
<html>
<head>
<title>test</title>
</head>
<body>
<p>hello!!</p>
</body>
</html>
HTMLタグの基礎
< と > で囲まれたものをタグといいます。
タグは <タグ> と </タグ> の対になっています。
<html> </html>
HTMLで書かれたファイルと宣言します。
文書全体を<html>タグで囲みます。
<head> </head>
Webページの基本情報が書かれます。
<title> </title>
Webページのタイトルを指定します。
<body> </body>
Webページに表示される内容が書かれます。
<html>
<head>
<title>タイトル</title>
</head>
<body>
Webページに表示する内容
</body>
</html>
これが HTML の最低限の雛形になります。
必ず覚えるタグ
<br> : 改行
<h1> <h6> : 見出し (h1 から h6 まで6段階)
<div> : タグで挟まれた部分をグループ化します。
<ul> : リスト表示
<ol> : 番号順にリストを表示
CSSの基礎
CSS(Cascading Style Sheets)は HTML と組み合わせて使われる、Webページのスタイルを指定するための言語です。
HTMLで文書構造を指定し、CSSはスタイルを指定。 → 文書構造とスタイル指定を分離して管理するために CSS が使われるようになりました。
「html 書き方」をキーワードにして検索した結果は次の通りです。
- まずはここから!HTMLの書き方【初心者向け】 | TechAcademyマガジン
- 初心者向けHTML入門:書き方の基本とタグの使い方
- HTMLの書き方-HTMLの基本
- 普通のHTMLの書き方
- HTMLの基本からタグの書き方まで世界一簡単に解説 | CodeCampus
- 超絶初心者のためのフロント入門(HTML、CSS、JavaScript) - Qiita
- HTMLの書き方は?初心者でもわかるHTMLの基本!改行や画像挿入など ...
- 【初心者向け】HTMLの書き方入門ガイド!タグの使い方も例を交えて図解
- 簡単で正しいHTMLの書き方: はじめに
- ハローワークインターネットサービス - 履歴書・職務経歴書の書き方
「css 入門」をキーワードにして検索した結果は次の通りです。