SSブログ

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の書き方 も合わせてお読み下さい。
 


nice!(0) 
共通テーマ:moblog

ホームページ作成 HTML5、CSS3の基本 [ネットビジネス]

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


HTML5、CSS3

 
ホームページが作れれば、クラウドソーシングなどで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の書き方

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

 


nice!(0) 
共通テーマ:moblog

標準入力 標準出力とリダイレクト、パイプのはなし [ネットビジネス]

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で作業する時は、この基本思想を大切にしたいですね。


nice!(0) 
共通テーマ:moblog

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

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


nice!(0)  コメント(0) 
共通テーマ:moblog

正規表現の使い方を覚えよう [ネットビジネス]

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

 


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関数などの関数でも、引数に正規表現を使うとコンパクトなプログラムが書けます。

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

 


nice!(0) 
共通テーマ:moblog

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

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

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

ホームページの制作を仕事にしたい。副業で稼ぎたい。 WordPressというCMSを使えば、最低限の知識でもホームページを作成・運用できます。 WordPressでホームページを作るために最低限どんな知識が必要になるでしょうか?

 

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

 

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

 

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

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

ビジネスでホームページ作成をする場合、 お客様がホームページに何を求めているのかを把握します

その上で、より良い提案が出来るようにマーケティングなどの勉強もしておくようにします。

 

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

 

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

 

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

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

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

 

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

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

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

nice!(0) 
共通テーマ:moblog

Linux ( Ubuntu )に無料動画編集ソフト shotcutをインストール [ネットビジネス]

Linux( Ubuntu )に無料動画編集ソフト shotcut をインストール

shotcut

Ubuntu に無料動画編集ソフトをインストール

Linux( Ubuntu )の無料動画編集ソフトを検索したら「shotcut」というソフトがみつかったので、Ubuntu にインストールしました。 コマンドラインでインストールする場合は

 

$ sudo snap install shotcut --classic
$ sudo apt install libsdl2-2.0-0

 

  Ubuntuソフトウェアセンターからインストール メニューにあるUbuntuソフトウェアセンターをクリックし、shotcut で検索後、shotcutが見つかったらクリックしてインストールします。
  Ubuntuソフトウェアセンターからshotcutをインストール(YouTube)

shotcut 作業画面

shotcutの作業画面です。  

shotcut 作業画面
shotcut 作業画面

     


nice!(0) 
共通テーマ:moblog

WordPress テーマ 最近の傾向 ALPHA2を使ってみた [ネットビジネス]

WordPress テーマ 最近の傾向

 

INFOPLATE5 販売終了 ALPHA2を使ってみる

今まで、使い慣れていた有料のWordPressテーマ「INFOPLATE 5 wp Pro」が販売終了だそうです。(このサイトも INFOPLARW5 wp Pro を使っています。)

それで、INFOPLATE を販売されていた方が新たに「ALPHA2 WordPress Theme」を販売されているので、購入して こちらのサイトにインストールしてみました。


ALPHA2 を検証するためにインストールしたサイト
クリックするとサイトが開きます。
ALPHA2 WordPress Theme を使ったサイト
クリックするとサイトが開きます。


 
なかなかお洒落で、今風なサイトになったと思いませんか?

それから、サイトが表示されるまでの時間が短いと思いませんか?


有料テーマ「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のテーマも動作検証や修正に手間がかかります。

手間 = お金

開発する側は、手間がかかった分はお金が欲しいというのが本音ですね。(プログラマの人件費は高額です。)

一般的に、有料テンプレートは一度購入してもらったらバージョンアップは無料という売り方をしているのでテーマを開発する側はイヤになってくるんじゃないかなぁ・・・。なんて思っています。


 


nice!(0) 
共通テーマ:moblog

rootユーザ システム管理者はlinuの王様 [ネットビジネス]

rootユーザ システム管理者はlinuの王様

 

rootユーザはLinuxの管理者

rootユーザはlinuxシステムを自由に設定できる最高権限を持つユーザです。(windows の administrator と同じ)

rootユーザは Linux の管理者権限を持つユーザです

root権限を持つユーザは linux に webサーバや mailサーバ、使いたい言語がインストール出来たり、他のユーザのパスワードを変えたり、他のユーザがシステムを使えるようにしたり使えないようにできます。root権限でハードディスク全体をフォーマットしたり全てのファイルを削除する事も出来てしまいます。

ruootユーザ管理権限者王様

 
root権限は linux上であらゆる事が可能で、システムを破壊する可能性もあるので、普段は root でログインすることはありません。

一般のユーザを作成して、root権限を与えられた一般ユーザでログインします

一般ユーザでログインした後、root権限が必要な時は「sudo su」コマンドを使って root権限を取得します。

ログインした場所がカレントディレクトリ

あなたがログインした直後、/homeディレクトリ下のあなた専用のディレクトリがあなたの「カレントディレクトリ」になります。



root権限でlinuxシステムのカレントディレクトリを参照



この /homeディレクトリ下に 2人のユーザー専用ディレクトリがあり、ユーザ「piyo」でログインした時の カレントディレクトリは /home/piyo/ になります。

linuxコマンド cd と pwd

linuxのファイルシステムを理解するためにコマンド cd と コマンド pwd の使い方を覚えましょう

「linux cdコマンド」などで検索してコマンドの使い方を覚えてください。

もっと便利な使い方があります。

$ sudo apt install -y manpages-ja manpages-ja-dev

 
man コマンドをインストールすれば、あなたが使っている linuxで コマンドのマニュアルが読めるようになります。

日本語のマニュアルを参照するために ubuntu に mannpages-ja manpages-ja-dev をインストールしている画面です。(右のターミナルでは、使わなくなったライブラリを削除しています。)




man cd で cd コマンドのマニュアルを参照しているところ。

おうちで linuxサーバ

仕事で linuxサーバを運用する場合は、クラウドを使います。(DDOS攻撃などで狙われた時に対応するには、何百万円もするファイアウォールが必要になります。)

自宅で linxサーバを立ち上げて、自分がroot権限を持ったシステム管理者になり、Webサーバやmailサーバ、ファイルサーバなどを運用したり、使いたいプログラミング言語(と付帯する環境設定)をインストールする事で、linuxサーバ運用に関する経験・知識が普通のlinuxユーザより何倍も高くなります。

過去記事 中古のWindowsマシンを Linuxマシンに変身 も合わせてお読み下さい。

このページで使っている画像は、無料で使える「gimp」を使って作成しています。このサイトの過去記事 → 無料の画像編集ソフト GIMP


nice!(0) 
共通テーマ:moblog

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ページに表示される内容が書かれます。


 

 

<!DOCTYPE html>
<html>
<head>
 <title>タイトル</title>
</head>

<body>
 Webページに表示する内容
</body>

</html>


 
これが HTML の最低限の雛形になります。

必ず覚えるタグ

<p> : 段落を示します。

<br> : 改行

<h1> <h6> : 見出し (h1 から h6 まで6段階)

<div> : タグで挟まれた部分をグループ化します。

<ul> : リスト表示

<ol> : 番号順にリストを表示

 

CSSの基礎

CSS(Cascading Style Sheets)は HTML と組み合わせて使われる、Webページのスタイルを指定するための言語です。

HTMLで文書構造を指定し、CSSはスタイルを指定。 → 文書構造とスタイル指定を分離して管理するために CSS が使われるようになりました。



「html 書き方」をキーワードにして検索した結果は次の通りです。

 

「css 入門」をキーワードにして検索した結果は次の通りです。

 


nice!(0) 
共通テーマ:moblog

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。