ホームページ作成時HTML&CSS3を調べる時に使っている本

ホームページ作成時HTML&CSS3を調べる時に使っている本

本

 
そばに置いておきたい本ってありますよね。

グーグルで検索するよりも効率良く使えてる本を紹介します。

ホームページ作成 ショートコードの多用に注意です。

WordPressテーマを変更する事が多くなっています。

WordPressのテーマを変更する時に、

「失敗したぁ!!」

と思うのが、WordPressテーマ固有のショートコードです
WordPressテーマを変更する度に、ショートコードの部分も書き換えなければなりません

投稿記事数が少ない時は、手作業で出来るかもしれませんが10年近く続けているWebサイトだと手作業で変換するわけにもいきません。

あなたならどうしますか?

投稿記事が1,000件以上あるWebサイト。

流行りのデザインに変えたいのでWordPressテーマを変更する事になりました。

あなたなら、以前使ったショートコードの部分をどうしますか?

こんな時は、プログラムを作ってMySQLデータベースのデータを直接書き換えています。

データのバックアップととって、投稿記事で使われているショートコードを抜き出して、ショートコードに変わる HTML&CSS に変換するプログラムを作成。それから検証して終了です。

これって、精神的に疲れます・・・・。

ショートコードは極力つかわず CSS で対応する。

そんな事が何件か続いたので、僕は最近なるべくショートコードは使わず HTML&CSS3 で書くようにしています。

WordPressテーマの洒落たショートコードと似たようなデザインにするために、Googleで検索したり本で調べます。

今、僕がよく使う本はこの2冊です。

よく使う本

 
こういう本の決めては「索引」です。
サクッと調べられる手軽さ、情報の簡潔さと使用例が書かれている事が大切です。

僕が重宝しているのはコンパクトさかな。
机のはじの方に置いておいて、手の届くところに置いてもじゃまにならない事も重要だと感じています。

HTML&CSSを勉強するなら

あなたが良いと思ったWebサイトを見つけたら、ブラウザーでお気に入りのWebサイトを表示して、「コントロールキー」+「u」(Macならオプション・キー+u)を押してhtmlソースを表示しましょう。

htmlソースを表示

 
htmlソースを表示してチェックするようにしていれば、HTML&CSS3に関するテクニックの多くを学べます。

html整形ツール

お気に入りの htmlソースを viエディタに貼り付けてモディファイして勉強した時に、適切なインデントと改行をして整形してくれる便利なツールが数多くWeb上で公開されています。

 
これらのツールを使うとHTML&CSSの勉強がしやすくなります。

 

JavaScriptを使ってみよう!!

JavaScriptを使ってみよう!!

 
JavaScriptのライブラリを使ってパララックスを実装したけど、JavaScriptに関する基礎知識をほぼ忘れてしまっているのに気が付きました。

という事で、JavaScriptの基本の基本をおさらいしています。

hello javascript worldをブラウザに表示

 

JavaScriptを使う

JavaScriptの文法は二の次にして、JavaScriptを使い倒してしまいましょう。
 
<script>~</script> の間に JavaScript のプログラムを記述。
 
<!–   –>ってHTMLでは、コメントアウトです。
JavaScriptでコメントアウトする時は、
1つの行内では、//を使うと、それ以降がコメントアウト。複数の行の時は/*   */(入れ子はダメ)で挟んだところがコメントアウトされます。
 
使っちゃダメ=予約語 をチェックしましょう。
変数名や関数名で使えない予約後は次の通りです。

JavaScriptは、変数名、関数名の大文字と小文字は別の文字として扱われます

  • await
  • break
  • case
  • catch
  • class
  • const
  • continue
  • debugger
  • default
  • delete
  • do
  • else
  • enum
  • export
  • extends
  • false
  • finally
  • for
  • function
  • if
  • import
  • implements
  • in
  • instanceof
  • interface
  • let
  • new
  • null
  • package
  • private
  • protected
  • public
  • return
  • static
  • super
  • switch
  • this
  • throw
  • true
  • try
  • typeof
  • var
  • void
  • while
  • with
  • yield

 

予約語を覚える必要は無いと思いますが、変数名や関数名で使えないワードがあるという事だけ知っておいてください

JavaScript実践のコツ

JavaScriptの特徴は、PHPやPerlのようなサーバーサイド・スクリプトと違って、クライアントサイド・スクリプトでWebブラウザ上で実行させる事を目的にしたスクリプト言語です。
 
有名なライブラリーをご紹介します。

これらのライブラリを使えばJavaScriptの文法を覚える必要もなく、サクサクとWebサイトが作れます

  • jQuery
  • 数多くのWebサイトで使われています。小規模なWebアプリケーションで利用されています。

  • Vue.js
  • シンプル・軽量。高速です。仮想DOMを使っていて描画を最適化してくれます。

  • Bootstrap
  • よく使われるスタイルがあらかじめ定義してあります。デザイン性のある高機能なWebサイトが簡単に構築できます。
    レスポンシブWebデザインに対応しています。

  • React
  • Button や Form などの UI パーツを使えるようにしたもの。FacebookやInstagramで広く使われています。

 

まとめ

JavaScriptの文法の細かい事を覚える時間があったら、ネットで検索して実装する方法を調べましょう。

僕は文法など細かいことを気にしすぎて手が止まってしまうよりも、力技(ちからわざ)でやりたいと思っている事を実装するようにしています。

インターネットが普及している現在、Web作成でわからない事は検索すればほぼ解決できるはずです。

お客様が望まれるWebサイトを構築する時、JavaScriptの知識が必要になる部分はそれほど多くありません。(概念などは把握しておきますが・・・。)

Webサイト構築には幅広い知識が求められる事も多いので、リサーチなどマーケティングの知識やコピーライティングの知識、できればプログラミングの知識も必要とされます。

実際に作業をする時、やりたい事を検索しながら実装し時間が空いたら基礎に立ち返るというやり方でも仕事をこなせると考えています。

そのような経験を積み重ねる事でスキルをみがき、お客様に自信を持ってよりよいアイディアを提供していきたいですね。
 

jQueryを使ってパララックスのホームページ作成

ホームページ作成のための道具選び

 
前回、ご紹介したように パララックスを使ったホームページを作るときの僕の開発環境(?)と開発手順について説明します。

jQueryを使ってパララックスのホームページ作成

僕は、Linux ( Ubuntu18 )を使っています。
今回、パララックスを実装するためにデモサイトを解析する時「viエディタ」を使用しました。

パララックス実装のための解析

Webサイトにパララックスを実装する時の僕の手順を公開します。

1 パララックスで綺麗に表示されているデモサイトを探します。(「jQuery パララックス デモ」をキーワードに検索)

jQuery Parallax Plugin Dem
 

 
というサイトが気に入ったので、このサイトの解析を行います。

2 表示されたブラウザで コントロール・キー + U を押下して、HTMLソースを表示します

 
3 HTMLソースをコピーして viエディタで解析します

 

HTMLソースは、90行。head部分で JavaScriptを読み込んだり、JavaScript関数を記述しています。

head部分作成した JavaScript関数を <ul id=”ほげほげ”> で呼び出しているのがわかりました。

表示部分を司る cssファイルについて調べると、 style.css だけ使っている事がわかりました。この style.css も viエディタで読み込んで解析します。

style.css は136行。表示フォントの指定やクラスごと、idごとに背景画像(background:url())などを設定している事がわかりました。

ホームページ作成 HTML5、CSS3。基本的なHTMLの書き方 も参考にしてくださいネ。

 
4 3で解析したことを踏まえて、わからない事をGoogleで検索します。
 
 例)
  このデモサイトでは、「Nikebetterworld Parallax Effect」というライブラリが使われている事がわかりました。ライブラリをダウンロードして解凍。

.
├── README.markdown
├── __MACOSX
│ └── scripts
├── images
│ ├── dot.png
│ ├── firstBG.jpg
│ ├── secondBG.jpg
│ ├── thirdBG.jpg
│ └── trainers.png
├── index.html
├── jquery-parallax-1.1.3.zip
├── scripts
│ ├── jquery.localscroll-1.2.7-min.js
│ ├── jquery.parallax-1.1.3.js
│ └── jquery.scrollTo-1.4.2-min.js
└── style.css

 

パララックス実装開始!!

Webサイトにファイルをアップロードする前に、僕の場合はローカルマシンの Ubuntuノートパソコンに作業用のディレクトリ(フォルダ)を作成して、動作検証しています。

今回、解析したデモサイトは90行と非常に短かいので UNIX/Linux を使うメリットはあまり感じなかったかもしれません。
UNIX/Linux は、もともと研修者・プログラム開発者のために作られた優れたOSです。あなたも UNIX/Linux の使い方をマスターして、仕事をスマートにこなせるようになりましょう。
 
先日、パララックスを使ったホームページを作成しました。このサイトも見てくださいネ。
 

パララックスを使ったホームページ jQueryを使う

パララックスとは?

 
スクロールした時に背景だけスクロールの速度を変えたり、要素ごとに異なる速度でスクロール表示させる効果パララックス(parallax)といいます。

パララックスを使ったホームページ

勉強のためにパララックスを使ったWebサイトを作成しました。

https://piyo2.click/

パララックス実装に必要な知識は?

  • jQuery・JavaScriptの知識
  • レイヤー(階層構造)の概念

この2つの知識が必要になります。
 
WordPressでパララックスを実現する時は、有料のWordPressテーマ grazioso があります。
僕はパララックスを実装する時は、HTML & CSS でトップページを作っています。

パララックスのメリットとデメリット

パララックスを実装したWebサイトのメリットは、訪問者に好印象・インパクトを与えられますが、一方、Webサイトが重くなるというデメリットもあります。

情報を詰め込みすぎてWebサイトが重くなりすぎないように、コンテンツの構成を考えてください。

パララックスを実装する

パララックスを実装するにあたり、「Vegas2」を使用しました。

vegas2

 
Vegas2 に関する情報は、 TRANSITIONS で取得できます。

vegas.min.css、vegas.min.css と vegas.js それから jquery-2.1.3.min.js を外部ファイルとして記述します。

Vegas2の使い方

Vegas2の公式ページで使い方およびデモを見ることができます。

Slideshow options and settings

 

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

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

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

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

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

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

    最低限必要な知識

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 
 

稼ぐためのコピーライティング その1

稼ぐためのコピーライティング その1

インターネットビジネスは文章で売る商売

メルマガアフィリエイトなどネットビジネスの基本は、文章で商品・サービスを売る商売です。

「どんな書き方をしたら稼げるようになるのか?」

コピーライティングについて解説します。

メルマガも商品を紹介するランディングページ(LP)も、文章でセールスをします
売上の成約率を上げるために、コピーライティングについて学びましょう。

コピーライティングのスキルで稼ぐ

文章を書くのが苦手!!

僕も文章を書くのは苦手ですが、コピーライティングのスキルを学んでからは書くことが好きになってきました。
コピーライティングはネットビジネスで稼ぐために必須のスキルです。

稼ぐチャンスを増やすためにも苦手意識を克服したいと思いませんか?

コピーライティングを学ぶと、自然に苦手意識も薄らいでいきます。そうして自分が書いた文章で商品が売れると、文章を書くことが楽しくなってきます。

売れる文章が書けないと大損します

ステップメールのテンプレートをコピー&ペーストしてセールスをかけても、読む人は「どこかで見たことがあるなぁ」と思ったり、全く興味も関心も示さずスルーしてしまいます。

あなたに売るための文章力があれば、月に何百万円も稼ぐ事も可能になります。

具体的な例を考えてみましょう。

1つ商品が売れると1万円の報酬になる商品を紹介します。
   ↓
100人の人が、あなたの紹介文を読みます。
   ↓
1%の人が、商品を買ってくれると 1万円の報酬になります。

そんな事が1ヶ月つづいたら、それだけも 1万円 × 30 日 で 30万円になります。

売る文章力がなければ 1本も商品は売れません。1日に1000人の人があなたの紹介文を読んだとしても 1000人 × ゼロ = 0円です。

文章が苦手だからといって、売れる文章の書き方を学ばないのは本当にもったいないと思いませんか?

コピーライティングを学ぶメリット

コピーライティングを学ぶ最大のメリットは、売上の成約率が上がることです。

僕のような「文章を書くのが苦手」な者でも、コピーライティングを学ぶことで文章を書くのが好きになります。苦手だと思っていたものを克服するって楽しいと思いませんか?

売れる文章の書き方を学ぶ順序

もし、あなたが文章を書くことが好きなら、扇動」で売れる文章の書き方を学んで下さい。

僕のように文章を書くのが苦手な人は、はじめにコピーライティングを学んで、文章を書くことが好きになってから 扇動」で売れる文章について学んで売上を爆発的にアップしてください。

売れる文章の基本は信頼を得ること

ネットビジネス(アフィリエイト)でものを売る時に、一番重要なのが信用してもらうことです。

あなたが一生懸命、商品の素晴らしさを伝えようと必死になって文章を書いても、読者があなたを信用していなかったら商品は売れません。

この人は信頼できるこの人の言うことは胡散臭くないと読者に感じてもらえれば、メールマガジンでもランディングページでもブログでも、あなたが販売するものを納得して買ってくれます。

「おすすめ出来ない商品は紹介しない。あなたが納得したものしか紹介しない。」というスタンスで文章を書くようにしてください。

売れる文章を書く時に上手な文章を書く能力は不要です。わかりやすい文章を書いて読者に信頼され読者の心を動かす事が大切です。

コピーライティングの前にリサーチする

コピーライティングを学ぶ目的は成約率を上げることです。そのためにはリサーチが重要です。リサーチを徹底的に行うことが成約率を上げる秘訣です。

僕が以前からおすすめしている 1ラウンドアフィリエイトでも商品選定の重要性が書かれています。

ネットビジネスで稼ぐための4つのアプローチのはなし

徹底的なリサーチで、何を書けば売れるのかが具体的にわかります。

リサーチの内容

  • ペルソナ
  • サービス・商品の典型的な ユーザー像を具体化する。

  • yahoo! 知恵袋 で相談内容をチェックする
  • SNSなどに参加し共通言語をみつける
  • キーワードを書き出す
  • 扱う商品・サービスについて調べる

 
ターゲットが反応する強いキーワード使って文章が書けるようにリサーチします。

反応するキーワードは人それぞれなので、セールスレターのあちこちにキーワードを無数に散りばめます。
読んだ人が無意識のうちに気になる言葉が多ければ購買意欲が高まります。