デザイン | Back Pack Hack-デジタルノマド・キラのブログ https://kohkira.com Back Pack Hack（バックパックハック）は、デジタルノマド/事業家のキラが運営するブログです。旅行、テクノロジー、ビジネスなどについての情報を発信しています。 Tue, 31 Dec 2024 09:23:45 +0000 ja hourly 1 https://kohkira.com/wp-content/uploads/2017/12/cropped-BPHlogocam-32x32.png デザイン | Back Pack Hack-デジタルノマド・キラのブログ https://kohkira.com 32 32 「買って良かった」「友人にも紹介しました」WordPress動画講座を受講された方の声 https://kohkira.com/feedback/ Mon, 04 Dec 2017 11:41:07 +0000 http://kohkira.com/?p=5905 「WordPressブログスタート講座」売れてます 400人以上に対面で教えた内容を動画講座にした「ゼロから１日で仕上げる！動画でわかる
WordPressブログスタート講座」ですが、えらい売れています。 ゼロから１日で...

The post 「買って良かった」「友人にも紹介しました」WordPress動画講座を受講された方の声 first appeared on Back Pack Hack-デジタルノマド・キラのブログ.]]> 「WordPressブログスタート講座」売れてます

400人以上に対面で教えた内容を動画講座にした「ゼロから１日で仕上げる！動画でわかる
WordPressブログスタート講座」ですが、えらい売れています。

ゼロから１日で仕上げる！動画でわかる
WordPressブログスタート講座

ttp://kohkira.com/post_lp/wp/

購入＆修了された方の声

既に、修了された方もちらほら。

その中の一人、Nさんから実際に頂いたメッセージを紹介します。

（本文まま。本人許可済）

 

Nさん

ちっさな事でも進歩が見えると嬉しいですね。

WP講座受けて良かった、動画買って良かった、

としみじみ思いました。

アドバイスありがとうございます。

 

100記事書く理由の動画も拝見しました。

最初から作り込んだ記事より、軽いものを、

というアドバイス、すごく気が楽になりました。

 

吉良さんみたいに面白くてタメになるブログを書けるようになるには、

インプットと訓練が必要なんだろうなぁと思いました。

ブログよく拝見してます。面白いです。

友人にも紹介しました。

 

とのこと。嬉しい限りです。有難うございます。

今後ともさらに、コンテンツ追加していきますね。

内容は、こちらからどうぞ。

ゼロから１日で仕上げる！動画でわかる
WordPressブログスタート講座

 

それでは明日も、よい人生とよい明日を。

あわせて読みたい

  1. 「ゼロから１日で仕上げる！動画でわかるWordPressブログスタート講座」リリースしました
  2. オンラインスクールの作り方と、僕がWordPress動画講座を作った３つの理由。
  3. 「ネットで稼ぐ」は楽じゃない。だが、俺の講座は売れている。
The post 「買って良かった」「友人にも紹介しました」WordPress動画講座を受講された方の声 first appeared on Back Pack Hack-デジタルノマド・キラのブログ.]]> 5905 Schooで「HTMLに一切触れたことがない初心者のための60分」の講師をしました【生放送】 https://kohkira.com/schoo2/ Wed, 31 May 2017 21:11:37 +0000 http://kohkira.com/?p=3707 HTMLに一切触れたことがない初心者のための60分 先日、株式会社スクーさんに出演依頼を頂いていた、 「HTMLに一切触れたことがない初心者のための60分」の生放送授業が、無事終わりました。 内容は以下のとおり↓ sch...

The post Schooで「HTMLに一切触れたことがない初心者のための60分」の講師をしました【生放送】 first appeared on Back Pack Hack-デジタルノマド・キラのブログ.]]> HTMLに一切触れたことがない初心者のための60分

先日、株式会社スクーさんに出演依頼を頂いていた、

「HTMLに一切触れたことがない初心者のための60分」の生放送授業が、無事終わりました。

内容は以下のとおり↓

schooのライブ授業に出演します

今回教えた内容

今回は、全くの初心者を対象に、「HTMLとは何か？」から始まり、

基本的なタグ等を中心に「始めてのHTML」を書いてみて「おお、なるほどね楽しい」と終わることを目標としました。

 

実際やってみると、意外と時間押し押しで、一部「次回に続く」になりましたが！

作成するページ

６０分で、こんな感じの、各自簡単な自己紹介作ってみよう！というのを目標としました。

書くコード

用意したHTMLコードはこんな感じ。

けっこうなボリュームにも見えますが、動画をコピペで挿入したりする所もあるので、かなり初心者向けです。

基本的かつ、理解しやすいタグを中心に教えていきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="schooでHTMLの勉強を始めてみました。">
    <title>schooではじめてのHTML</title>
    <!-- コメント CSSを呼び出し -->
    <link rel="stylesheet" href="mystyle1.css">
  </head>
  <body>
	<header>
		<h1>自己紹介ページ</h1>
	</header>
	<div>
	    <h2>基本プロフィール</h2>
		    <img src="selfiecircle.png" width="200" height="200">
		    <p>
		    吉良　光（きらこう）
		    <br>
		    世界中を旅して、GoProとドローンで映像を撮っています。
		    <br>
		    世界一周をしながら、<a href="https://www.facebook.com/gotr1p/" target="_blank">旅する１分動画「TR1P（トリップ）</a>を作りました。
		    <br>
		    <a href="https://kohkira.com/">旅とテクノロジーのブログ「BackPackHack」</a>も書いています。
		    </p>
		 <h2>世界一周の旅に持っていったドローン「Mavic Pro」</h2>
		    <iframe width="560" height="315" src="https://www.youtube.com/embed/p1d_ptE6yrc" frameborder="0" allowfullscreen></iframe>
		 
		 <h2>「TR1P（トリップ）」の動画の一例</h2>

		<table>
		<tr>
		<td>
			<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fgotr1p%2Fvideos%2F639375376258220%2F&show_text=0&width=400" width="400" height="225" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
		</td>
		<td>
			<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fgotr1p%2Fvideos%2F639379822924442%2F&show_text=0&width=560" width="400" height="225" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
		</td>
		<td>
			<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fgotr1p%2Fvideos%2F665801863615571%2F&show_text=0&width=560" width="400" height="225" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
		</td>
		</tr>
		<tr>
		<td>
			<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fgotr1p%2Fvideos%2F639383326257425%2F&show_text=0&width=560" width="400" height="225" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
		</td>
		<td>
			<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fgotr1p%2Fvideos%2F639854562876968%2F&show_text=0&width=560" width="400" height="225" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
		</td>
		<td>
		    <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fgotr1p%2Fvideos%2F643131885882569%2F&show_text=0&width=560" width="400" height="225" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
		</td>
		</tr>
		</table>
	</div>
    <footer>
    	このサイトは、KOH_KIRAによって運営されています。
    </footer>
  </body>
</html>

CSSはこんな感じ。今回はHTMLメインなので、CSSはその仕組みだけ触りました。

p{color: blue;}
body{background: #F0F8FF;
     text-align: center;
     }

 

講習内容のテキスト全文はコチラから。↓

ゼロからマスターするHTML/CSS

・HTMLってなんだ？
HTMLは、Hyer Text Markup Langageの略です。プログラミング言語ではないけれど、（ひらたく言えば）ウェブサイトなどを作るために必要な言語です。
「Markup」というのは、直訳すると「印を付ける」みたいな意味で、HTMLは「この文章のここはこういう意味だよ！」という「構造」を定義するわけです。
HTMLは、サイトの「構造」を定義して、CSSは「見た目」を定義します。
「何を載せるか」を決めるのがHTML、「どう見せるか」を決めるのがCSS、という感じでしょうか。

・今日つくりたいページを見てみよう
今回は、皆さんに簡単な自己紹介ページを作ってもらうことで、基本的なHTMLタグや、簡単なCSSについて触れていこうと思います。

・HTMLの例を見てみよう
あるサイトを開いて「ページのソースを表示」をクリックすると、そのウェブサイトのHTMLが見られます。
初見では難しいかもしれないけど、このギザギザの記号を覚えていくことで、ウェブサイトが作れるようになるのです。

・必要なツールを用意しよう
HTMLを学習する上で、必要なツールは２つ。そして今回だけ利用するひとつ。
１，ブラウザ→今回は「Google Chrome」を使います。他のものでも問題無いかと思いますが、IEだけはやめておいてください（笑）
２，テキストエディタ→今回は「Sublime Text」を使います。
３，自己紹介に使えそうな画像や文章→フンワリと用意しておいてください。

・HTMLの基礎ータグと属性
HTMLの基礎の基礎！「タグ」と「属性」という言葉を覚えましょう。
HTMLは、基本的に「文章に”構造的な意味”をつける」言語です。
ホームページの中で、「ここはタイトルなんだよ」とか「検索結果に出したいのはここだよ」とか「ここは引用文なんだよ」とか。

<タグ>文章</タグ>

これが、基本的なタグの付け方です。
そして、そこにさらに、何らかの属性を付けたい場合があります。
そんな時は

<タグ 属性名=値>文章</タグ>

と入れてあげる必要があります。

・属性とタグの、実際の例
ちょっとわかりにくいので、例をあげます。

Hello World

を、

<p>Hello World</p>

で囲むと、「この部分は”文章”なんだよ」という意味になります。
（pは「Paragraph（段落）」のpです。）

<p style="font-size: 16pt;">Hello World</p>

と書いたりすると、「このpで囲んだ部分は、文章で、文字の大きさは16ピクセルなんだよ」という意味になります。
このような、タグと属性の基礎を押さえていくことが、HTML/CSSの基礎になります。


・はじめてのHTML

新しいファイルを開いて、

<!DOCTYPE html>
<html lang="ja">
</html>

と書いてみてください。
次に、その中にheadタグとbodyタグを書き込みます。

<!DOCTYPE html>
<html lang="ja">
  <head>
  </head>
  <body>
  </body>
</html>

これで、「今からHTMLの文章を作るよ」「言語設定は日本語だよ」「ここが基本情報（head）で、ここが（実際に表示される）body部分だよ」と書き込む準備が出来たワケです。

<head>タグで囲まれた内容は、「htmlファイルの情報」を宣言するものです。
<head>タグの中の内容は、<title>タグを除いて普通はブラウザの画面上に表示されません。

で、実際にウェブサイトに表示される内容が<body>タグ内の内容、というワケです。

次に、headタグ内にmeta charsetとtitleを入れてみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>schooではじめてのHTML</title>
  </head>
  <body>
  </body>
</html>

<meta charset="utf-8">（メタキャラセット）とは、「文字の種類」を定義しています。文字化けなどをしないようにするための設定ですね。
Shift_JISとかもあるんですが、一般的にはこのutf-8を使うことが多いです。とりあえず入力しておきましょう。
titleタグは、そのまんま、「このウェブサイトのタイトルはこれだよ」と定義してあげるタグですね。

次に、bodyタグの中に、以下のように文字を入れてみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>schooではじめてのHTML</title>
  </head>
  <body>
    <p>はじめてのHTMLだよ！</p>
  </body>
</html>

ここまでできたら、ファイルを保存してみましょう。
上の「File」から「Save」か、command（control）+Sを押して保存してみましょう。
保存名は「index.html」で。


・ブラウザに表示してみよう

保存したファイルを、ブラウザにドラッグ＆ドロップしてみましょう。
すると、タブの部分にtitleタグ、本文内にpタグの内容がそれぞれ、出てきました！

「ページのソースを表示」で見てみると、あなたの書いたHTMLが出てきます。

※ここまででつまづいてしまっている人にありがちなのは、文字のつづりの間違いや、スペース（空白）の全角/半角が間違っている場合などです。チェックしてみましょう。

・HTMLを使って動画を挿入してみよう
ここまでやって「全くおもしろくない…」と思った方も、一部いるかもしれません。
（僕も最初思ってました　笑）
ここでちょっとだけ「おおー」となってもらうために、ちょっとだけ遊びましょう。

youtubeの動画を開いてください。
新しい動画を開いたら、「共有」から「埋め込みコード」を選択。
その内容をコピーして、bodyの間に入れてみてください。

 <iframe width="560" height="315" src="https://www.youtube.com/embed/p1d_ptE6yrc" frameborder="0" allowfullscreen></iframe>

ファイルを改めて保存して、ブラウザを更新すると、動画がでてきます。
…ちょっとだけ、テンション上がるでしょ？
<p>動画を埋め込んでみよう！</p>という感じに、コメントも入れてみましょう。
これと同じやり方で、Twitterやフェイスブックページなども埋め込んだりできるワケですね。


・よく使うタグ
よく使うタグとして、descriptionタグなどがあります。
これは、検索結果などに表示される内容なので、正確に入力する必要があります。


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="schooでHTMLの勉強を始めてみました。">
    <title>schooではじめてのHTML</title>
  </head>
  <body>
    <p>はじめてのHTMLだよ！</p>
    <p>動画を埋め込んでみよう！</p>
	    <iframe width="560" height="315" src="https://www.youtube.com/embed/p1d_ptE6yrc" frameborder="0" allowfullscreen></iframe>
  </body>
</html>


・styleタグを使ってみる（はじめてのCSS）
body内に、CSSを書いて見た目を変えられる、styleタグを使ってみましょう。
bodyの中に

 　　<style>
    	p{color: blue}
    </style>

を書き込んでみましょう。
全体はこうなります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="schooでHTMLの勉強を始めてみました。">
    <title>schooではじめてのHTML</title>
    <style>
    	p{color: blue}
    </style>
  </head>
  <body>
    <p>はじめてのHTMLだよ！</p>
    <p>動画を埋め込んでみよう！</p>
    　　<iframe width="560" height="315" src="https://www.youtube.com/embed/p1d_ptE6yrc" frameborder="0" allowfullscreen></iframe>
  </body>
</html>

すると…文字の色が青くなります。

・CSSファイルを分ける
ただ、このstyleタグ、次第にとっても長くなっていく上に、大量のページに同じものを書いたり修正したりするのが大変になってきます。
なので、冒頭で述べたように、HTMLファイルとCSSファイルという形で分けて、
head内には、「このCSSファイルを参照するよ！」とだけ書いておくようにします。

まずは、さきほどの　p{color: blue}　の部分を切り取って、
新しくファイルを作り（command+N）、新しいファイル内に貼り付けます。
そのファイルに「mystyle.css」という名前をつけて、index.htmlと同じ場所に保存しましょう。

次に、head内に、以下の内容を書き込みます。

<link rel="stylesheet" href="mystyle.css">

全体としてはこうなります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="schooでHTMLの勉強を始めてみました。">
    <title>schooではじめてのHTML</title>
    <link rel="stylesheet" href="mystyle.css">
  </head>
  <body>
    <p>はじめてのHTMLだよ！</p>
    <p>動画を埋め込んでみよう！</p>
	    <iframe width="560" height="315" src="https://www.youtube.com/embed/p1d_ptE6yrc" frameborder="0" allowfullscreen></iframe>
  </body>
</html>


link rel="stylesheet"は、「別ファイルのスタイルシートを呼び出すよ」という意味で、
href="mystyle.css"は、「mystyle.cssという名前のCSSファイルを呼び出すよ」という意味。

そして、mystyle.cssに書かれている　p{color: blue}が、index.htmlに適用されるようになるので、
結果的に、head内に p{color: blue}を書いたときと同じように、表示されるのです。


これがCSSです。サイトの見た目を決めるものですね。
基本的な書き方は

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

という書き方をします。
「この部分について、見た目のココを、こうするよ」という感じでしょうか。

「:」は「コロン」
「;」は「セミコロン」といって、ちょっと似ていて間違いやすいので、気をつけましょう！

CSSは、これを部分ごとに沢山書いていくだけです。

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

という風に並んでいきます。

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

という風に、一つの項目内に複数のプロパティを並べることも多いです。
「見出しについては、文字の色はこう、フォントの種類はこう」という風に。

・もうちょっとだけ練習
ついでに、mystyle.cssに
body{background: #F0F8FF;} 
とも書き込んでみましょう。

これで、背景の色も変わったハズです。
このように、カラーはその名前の他、カラーナンバーやRGB値でも指定することができます。

さらには、
body{background: #F0F8FF;
     text-align: center;
     } 

という内容もその後に書き込んでみましょう。
これで、文章全体が真ん中にきました。
このように、CSSとは、サイトの「見た目」を決定する、ということがわかればOKです！

・コメントを書き込んでみる

<!-- コメント -->と書き込むことで、HTML内に好きなコメントを残したりすることができます。
せっかくなので、さきほどのHTMLに<!-- CSSを呼び出し -->と書いて、学習メモを残してみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="schooでHTMLの勉強を始めてみました。">
    <title>schooではじめてのHTML</title>
    <!-- CSSを呼び出し -->
    <link rel="stylesheet" href="mystyle.css">
  </head>
  <body>
    <p>はじめてのHTMLだよ！</p>
    <p>動画を埋め込んでみよう！</p>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/p1d_ptE6yrc" frameborder="0" allowfullscreen></iframe>
  </body>
</html>

このコメントは、自分用のメモの他、人とコードを共有する際のメモ書きとして、
また、<!-- -->で囲むことで「消したくはない部分を無効化」したりするのにも使います。


※このコメント部分も、ソースを表示すると、見ることができてしまうので、機密情報や変なことは書かないようにしましょう！


ちなみに、CSSのコメントは /*コメント*/ という風に書くことができます。


・セクションタグを使ってみよう

ここまでが、HTMLの基礎です。
次は実際に、ちょっとしたページを作りながら、いろんなタグを使ってみましょう。
今回僕は、自己紹介のページを作ってみようと思います。

HTMLのタグはたくさんあるのですが、
今回は（時間も短いので）できるだけシンプル、かつ分かりやすいタグを優先して使っていきましょう。


・headerタグと見出し<h1>…<h6>タグ

最もよく使われるセクションタグの一つが<header>タグです。
これは、その名の通り、ウェブサイトのヘッダー（頭）の部分に使われます。
ウェブサイトのタイトルやロゴ、メニューの部分ですね。

</body>の下に

    <header>
	</header>

と書いてみましょう。
そして、この中にまた書き込みをすると、それがサイトのヘッダーに表示されるわけです。

今回はここに

   <h1>自己紹介ページ</h1>

と入れてみました。
（ <p>はじめてのHTMLだよ！</p>　は、消しておきました）

<h1>は「見出し１」という意味です。
文字を”見出し”として目立たせる時に使います。
h1からh6まで使うことができます。

そして、それぞれの見出しにCSSでデザインを割り当てて、文字の大小や周りの色などを調整したりもできます。

見出しの例としては、スタイリングして分かりやすくしたこちらを見てみましょう。

マレーシア、クアラルンプールのシンボル「ペトロナス・ツインタワー」を１分で旅しよう


ついでに、
<p>動画を埋め込んでみよう！</p>
の部分も、

<h2>世界一周の旅に持っていったドローン「Mavic Pro」</h2>
と変えてみました。見出しになります。


・footerタグ
footerタグも、最もよく使われるセクションタグの一つです。
ウェブサイトの一番下に、情報などを載せるタグですね。

    <footer>
    	このサイトは、KOH_KIRAによって運営されています。
    </footer>

などと、入れてみましょう。

これで、全体としては

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="schooでHTMLの勉強を始めてみました。">
    <title>schooではじめてのHTML</title>
    <!-- コメント CSSを呼び出し -->
    <link rel="stylesheet" href="mystyle.css">
  </head>
  <body>
	<header>
		<h1>自己紹介ページ</h1>
	</header>
    <footer>
    	このサイトは、@KOH_KIRAによって運営されています。
    </footer>
    <p>動画を埋め込んでみよう！</p>
	    <iframe width="560" height="315" src="https://www.youtube.com/embed/p1d_ptE6yrc" frameborder="0" allowfullscreen></iframe>
  </body>
</html>

こんな風になり、ヘッダーとフッターができた形になりました。
これ以外にも、sectionやarticleなどの細かいセクションタグがあるのですが、ちょっと長くなるのと、今回は使わないので割愛します。

・imgタグで画像を入れてみよう

ヘッダーとフッターができたら、次はその間に本文を入れてみましょう。

        <h2>基本プロフィール</h2>
	    <img src="selfiecircle.png">

を入れてみます。
画像は、index.htmlと同じ場所に入っている画像の名前を、指定してみてください。

このままだとデカすぎたりするので、

　　　　　width="200" height="200"

をimageタグ内に追加して、画像の大きさを指定します。


・改行のbrタグ
画像を入れることができたら、その下に簡単な自己紹介を入れてみましょう。

　　　　　　　<p>
		    吉良　光（きらこう）
		    世界を旅する１分動画「TR1P（トリップ）を作っています。
		    世界中を旅して、GoProとドローンで映像を撮っています。
		    旅とテクノロジーのブログ「BackPackHack」も書いています。
		    </p>

これだけだと、文章が全て続いた状態で表示されてしまうので、<br>タグで、「改行」をしてみましょう。

            <p>
		    きらこう
		    <br>
		    世界中を旅して、GoProとドローンで映像を撮っています。
		    <br>
		    世界一周をしながら、を旅する１分動画「TR1P（トリップ）を作りました。
		    <br>
		    旅とテクノロジーのブログ「BackPackHack」も書いています。
		    </p>

このbrタグには、閉じタグはありません。
ここまでで、全体では、こうなりました。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="schooでHTMLの勉強を始めてみました。">
    <title>schooではじめてのHTML</title>
    <!-- コメント CSSを呼び出し -->
    <link rel="stylesheet" href="mystyle.css">
  </head>
  <body>
	<header>
		<h1>自己紹介ページ</h1>
	</header>
	    <h2>基本プロフィール</h2>
		    <img src="selfiecircle.png" width="200" height="200">
		    <p>
		    吉良　光（きらこう）
		    <br>
		    世界中を旅して、GoProとドローンで映像を撮っています。
		    <br>
		    世界一周をしながら、旅する１分動画「TR1P（トリップ）を作りました。
		    <br>
		    旅とテクノロジーのブログ「BackPackHack」も書いています。
		    </p>
		    <h2>世界一周の旅に持っていったドローン「Mavic Pro」</h2>
	    <iframe width="560" height="315" src="https://www.youtube.com/embed/p1d_ptE6yrc" frameborder="0" allowfullscreen></iframe>
    <footer>
    	このサイトは、@KOH_KIRAによって運営されています。
    </footer>
  </body>
</html>


・aタグでリンクを設定しよう
よく使うタグの一つとして、文章や画像に「リンク」を入れられるaタグというものがあります。
今回は、先程の文の中に、リンクを貼ってみましょう。

まずは、飛ばしたい先のリンクを用意します。

世界を旅する１分動画「TR1P」　https://www.facebook.com/gotr1p/
BackPackHack  https://kohkira.com/

そして、リンクを入れたい文字を、それぞれこのように囲みます。

		   
		    世界一周をしながら、<a href="https://www.facebook.com/gotr1p/">旅する１分動画「TR1P（トリップ）</a>を作りました。
		    
		    <a href="https://kohkira.com/">旅とテクノロジーのブログ「BackPackHack」</a>も書いています。

これで、リンク付きの文章が出来上がりました。
さらに、最初のリンクだけ、「新しいタブで開くリンク」にしてみましょう。
a href=""の後に
           
           target="_blank"

 を書き足すだけです。
 こんな風になりました。

            世界一周をしながら、<a href="https://www.facebook.com/gotr1p/" target="_blank">旅する１分動画「TR1P（トリップ）</a>を作りました。

これで、最初のリンクだけ、新しいタブで開くようになりました。試してみてください。


・tableタグを使って、項目を並べてみよう

次に、tableタグを使って、６つの項目を表のようにキッチリ並べてみましょう。
動画の下あたりに

			<table>
			<tr>
			<td>データ1-1</td>
			<td>データ1-2</td>
			<td>データ1-3</td>
			</tr>
			<tr>
			<td>データ2-1</td>
			<td>データ2-2</td>
			<td>データ2-3</td>
			</table>

と書き込んでみてください。
更新すると、６つに別れた表が出てくると思います。
これは、tableタグというものを使って、表を作ったワケです。
<tr>は「ここから行が始まるよ」<td>は「ここから列が始まるよ」という意味。

じーっと眺めて考えると、なんとなく見えてくるんじゃないかと思います。

・tableの各項目に動画を入れてみよう
この、tableタグで作った表の中に、文章以外の項目を入れることも可能です。

ここには、文章でも画像でも、何を入れても構いません。あくまでtableタグの練習なので、

僕は、先ほどと同じように、動画を入れてみることにしました。
特に入れたいモノが無い、という人はぜひコピペしてつかってみてください。映像も見てほしいので！
動画の埋め込みコードを取得してきて、

データ１−１の部分に

			<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fgotr1p%2Fvideos%2F639375376258220%2F&show_text=0&width=400" width="400" height="225" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>

データ１−２の部分に

			<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fgotr1p%2Fvideos%2F639379822924442%2F&show_text=0&width=560" width="400" height="225" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>

データ１−３の部分に

			<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fgotr1p%2Fvideos%2F665801863615571%2F&show_text=0&width=560" width="400" height="225" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>

データ２−１の部分に、

			<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fgotr1p%2Fvideos%2F639383326257425%2F&show_text=0&width=560" width="400" height="225" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>

データ２−２の部分に

			<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fgotr1p%2Fvideos%2F639854562876968%2F&show_text=0&width=560" width="400" height="225" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>

データ２−３の部分に

	    <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fgotr1p%2Fvideos%2F643131885882569%2F&show_text=0&width=560" width="400" height="225" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>

を、それぞれ入れてみました。

これで、最初に見せたような、自己紹介のページは、だいたい出来たんじゃないかと思います。

今日紹介できなかった、ol､ul､li､dl､dt､dd、hr､pre､blockquote､div、hr､pre､blockquote､div、form、input、…など様々な細かいタグや、CSSなどについては、是非今後学んでみてください！

今回は、ザッと簡単なサイトを作ってみることで、苦手意識を無くして、「HTMLって、WEBってそんな感じなのか、面白いかも」と興味を持ってもらえたなら嬉しいです。

全体の流れ

放送の全体の流れはこんな感じでした。

  • 講師自己紹介
  • そもそもHTMLとは何か
  • 世界一周をした理由
  • HTMLを書いてみよう①
  • 先生の失敗談
  • HTMLを書いてみよう②

授業のようす

実際の放送のキャプチャ画像で授業のようすをご紹介。

 

「こんにちはキラです。ライダース着てきたぜぇ、ワイルドだろぉ〜？」

 

「こんな感じでね、世界一周して旅の１分動画作ったんスよ、次はウユニ撮りたいっスね」

 

「でも今日はね、HTMLの講座なんで、その話しますね。

こんな感じの、簡単な自己紹介ページを一緒につくりましょう」

 

「HTMLというのはウェブサイトの構造を決めます。CSSは見た目を定義するモノなんですねー」

 

「はい、実際に書いてみましょう。動画とかもパーンと貼ってみると楽しいっすよね」

 

「なんか生徒さんの中にザーボンさんのアイコンの人おるwwぶははww」

 

「ろくろはねー、こうやって回すとツボが綺麗にできるんすよー」

 

「テンション上がってきた、ジャケット脱いだろ」

 

「ろくろはね！やっぱりこう！こう回さなきゃ！」

てなわけで、ろくろについてアツく語った６０分になりました。

受講者のコメントを紹介

というのはもちろん嘘で、実際ちゃんとHTMLやりましたよい。

 

放送内で、受講者さんから実際に入ったコメントは以下の通り。

実名の引用はNGですが、一部紹介してここでコメントを返しますw

講師自己紹介について

めっちゃ良い動画ですね。海外行きたいなー（T.H.さん）
きらこう

いやー嬉しいっすね。ぜひこの辺からいろいろご覧になってください。

そして、ぜひドローン持って旅してみてください。最高ですよ！

 

ドローン始めたきっかけがかっこいい・・・（R.T.さん）

きらこう
褒められたww「世界一周しながら映像が撮りたかった」的なことを言った気がします。

 

平井堅？（K.H.さん）
きらこう
おい誰がPOP★STARや

（引用:http://www.pinups.co.jp/hirai/）

授業内の感想

出来上がっていく感じが楽しい！！（T.A.さん）

感動する～（M.T.さん）

すっごい（M.H.さん）

天才！！！（Y.I.さん）

ミニコーナーが楽しいｗ（J.T.さん）

初心者にやさしい吉良先生！（R.T.さん）

先生のお話もっと聞きたかったです。今日はありがとうございました。（K.K.さん）

めっっっっちゃたのしい！（H.O.さん）

先生おもしろいです（笑）（Y.K.さん）

先生の授業は何時間でも聴けますね。（T.A.さん）

おや！続編あるんですか！やった！（H.O.さん）

きらこう

うおー、こんなに褒められるとやっぱり嬉しいですね。せんせい、カンチガイしちゃうw

 

誰かに似てる？と思った！（M.T.さん）
きらこう
やから誰がPOP★STARや

（引用:http://www.pinups.co.jp/hirai/）

授業内で答えられなかった質問について

授業内でお答えできなかった質問もあるので、ここでお答えしてみようと思います。

figureとp、sectionとarticleの区別が難しいのですが、このように区別できるという方法があれば教えてください（J.A.さん）
きらこう

お、やや高度な質問ですね。

figureタグは、「その部分が無くても全体の意味は通るけど、補足として入れたい図や表、画像」を入れる時に使われることが多いですね！

sectionやarticleタグは、divが最も意味が無くて汎用性の高いのに対して、目的や意味がややはっきりしています。sectionが、本における「章」だとしたら、articleは、さらに小さな「ひとまとまりの文章」くらいの感じでしょうか。

 

まさかWordファイルでくるとは意外（Y.S.さん）

講座に必要なテキストなど、事前にわかるとさらにうれしいです！ダウンロードするのに、時間かかってアワアワしました・・・初心者なので。でも授業自体は面白かったので、それで集中できなかったのが残念です！（E.M.さん）

きらこう

この辺は、ほんとすみません。

本来テキストなどは無くても良いのですが、できるだけ分かりやすくするために、内容の書き起こしをしたら、授業前ギリギリになっちゃいました！できるだけ早めに用意しますw

 

WEBアプリケーションを作成するに当たり、①HTML + PHP, ②Spring, Struts, Seasar2などがありますが、①の手法は古いとは思っていません。実際のところ、先生はどうお考えでしょうか？（A.O.さん）

きらこう

①の方法がいいと思います。というのも、②の方法だとできる人が少なくて、チームでやったり外注したりする際に余計にコストがかかってしまうかと。

どのようなアプリケーションかにもよりますが、特別な理由がない限りは、共有しやすいやり方でやるほうが、全体での費用対効果が高まると思われます。

個人的な感想やまとめ

今回、生放送＆オンラインの授業って初めてだったのですが、やってみての感想は以下の通り。

６０分はやっぱり短い！

いやー、やっぱり６０分は予想以上に短いですね。自己紹介して、基礎の話して、ちょろっと書いたらあっという間に時間ですw

無駄な内容はほぼなかったと言っていいと思いますが、それでも、出来るコトは限られていましたね！

 

用意していた内容の半分くらいしかできなかったので、次回以降に持ち越しになりました。

ただ、上記の通り、生徒さんの反応は良かったので、悪くはなかったと思います。

生徒さんがかなり意欲的＆好意的

これもけっこう意外でしたw顔の見えない授業とかってもっと荒れるのかと思っていたのでw

「進行を無視した高度な質問されたり、悪口言われたりするのかな…」とビビってましたが、全くそんなことはありませんでした。

やはりこの辺は、Schooのユーザー層がしっかりしていて、仕組みもしっかりしている証拠ですね！

生放送って楽しい

そんなワケで、全体的に、とても楽しくて新鮮な体験になりました。めっちゃ褒められたしw

こういう楽しいご依頼は、どんどんお受けしていきたいですね！

 

次回以降の内容も、各SNSや当ブログでお知らせ＆レビューしていきたいと思います。

各SNSはこちらからどうぞ！

プロフィール

 

それでは今日はこのへんで。

明日も、良い人生とよい旅を。

あわせて読みたい

The post Schooで「HTMLに一切触れたことがない初心者のための60分」の講師をしました【生放送】 first appeared on Back Pack Hack-デジタルノマド・キラのブログ.]]> 3707 schooのライブ授業に出演します https://kohkira.com/schoo/ Sat, 27 May 2017 14:19:58 +0000 http://kohkira.com/?p=3666 スクーの生放送授業に出演します 明日、５月２７日１９時より、オンライン学習の「Schoo（スクー）」のライブ授業に、講師として出演します。 Schoo – 参加型のオンライン動画学習サービス HTMLに一切触...

The post schooのライブ授業に出演します first appeared on Back Pack Hack-デジタルノマド・キラのブログ.]]> スクーの生放送授業に出演します

明日、５月２７日１９時より、オンライン学習の「Schoo（スクー）」のライブ授業に、講師として出演します。

Schoo – 参加型のオンライン動画学習サービス

HTMLに一切触れたことがない初心者のための60分

僕が顔出し声出しで動画に出るって、個人的には割とレアです。

「Schoo（スクー）」とは？

参加型のオンライン動画学習サービス「Schoo」の説明は以下の通り。

国内最大級の授業数。ITスキルや最先端の知識が動画で学べる

業界最先端のITスキルをはじめとして、社会人が抑えておきたいビジネススキル、さらにプログラミングやWebデザインの基礎から応用まで、明日の仕事に生きる授業をラインナップしています。

Schooの特長は「参加型生放送」で授業が日々開講されていること。毎回異なるテーマについて、受講生同士や先生との生放送中の対話を通じて、一人では得られなかった「答え」を得ることができます。

参照:https://schoo.jp/about

いいですねー。

就職前や起業前に勉強したい学生も、転職したいサラリーマンも、何か新しい趣味などをやりたい普通の人も、オンライン動画で色々学べるサービスですね。

僕が初心者に優しい理由

「HTMLに一切触れたことがない初心者のための60分」ということなんですが、きっと良い授業が出来ると思います。

なぜなら僕は‥

４歳でエリートの両親にPCを与えられ、
６歳でプログラミングを始め、
１０歳でゲームを作成し、
１４歳で大金を稼ぎ、
政府機関から莫大な報酬を受け取るウィザード級ハッカーに…

というのは、完全な嘘でwww

実際の僕は‥

もともとはITも機械も好きでなく、
高校生まで携帯は家族兼用で、
数学は割と苦手で大学は文学部、
微妙にコミュ障だったけどmixiでネットに触れはじめ（笑）
大学中退後引きこもってガチで金が無くなったので仕方なく受けたサイト制作の仕事で始めてプログラムも触りだして…

という、典型的な後発組のヒトなんですね。

そんな、手と足を動かして、泥臭く実践で覚えたタイプなのです。

 

技術を学んだお陰で、今はこうなれました。↓まだまだ未熟者ではありますが。

プロフィール

小さな机に、クソみたいなASUSのパワーブックと「サルでもわかるHTML」を並べて「ああ？分かんねえよクソが…」とか独りごちていたあの頃がとても懐かしいw

分からない人の気持が分かる

そんなワケで、いい授業が出来る、というのはあながち嘘ではなくて、

「分からない人の気持ちがけっこう分かる」わけですよ。

初心者にとって、どこが面白くなくて、どこで挫折するか、とかが分かる、と。

 

「こういうのがメンドイよねー、わかるわかる」という感じのノリで、受講者さんに共感してく感じでやってきます。

もちろん、あくまで外部講師なので、基礎の部分もちゃんとやります（笑）

 

そんなワケで、お知らせでした。

こちらの記事も、あわせてどうぞ。

Schooで「HTMLに一切触れたことがない初心者のための60分」の講師をしました【生放送】

「ゼロからITやりたいけど何からすればいい？」という人へ。３つの基礎から固めよう！

【384人の講習実績】東京で、ホームページ作成（WordPress）Campの講師をしてきました

身体で覚えろ！ブラインドタッチ（タッチタイプ）のコツと練習方法。

【保存版】適当に始めちゃダメ！ウェブサイトやブログを「本気で」作る前に考えるべき８つのこと

ブログで稼ぎたい人へ。最初にやるべきたったひとつのこと【a8.net登録】

初心者でも分かる！WordPressブログSEOのためのGoogleキーワードプランナーの使い方

WordPressアクセスアップの方法。まずは「５つの経路」について知ろう。

なぜ、あなたのブログ＆サイト作りはいつも挫折するのか？原因と対策を教えます。

【記事まとめ】今年こそ、WordPressでブログ＆ウェブサイトを作ろう。

いつまでも子供のように人生を楽しむ秘訣。なぜ、年をとるほど一年が短く感じるのか？

WordPress講習。自然界のものは下から伸びる。

https://kohkira.com/daniel/

仕事に「ウラ技」はない。地力を付けることで道は開ける。

 

それでは明日も、良い人生と良い旅を。

The post schooのライブ授業に出演します first appeared on Back Pack Hack-デジタルノマド・キラのブログ.]]> 3666 WordPressでブログ＆ウェブサイトをつくるメリット＆デメリット https://kohkira.com/wpmerit/ Tue, 07 Feb 2017 23:29:42 +0000 http://kohkira.com/?p=2864 今回の結論を先に 今回の内容の結論、先に結論からまとめてしまいます。   「WordPressでウェブサイトを作るメリットとデメリット」は、 WordPressのメリット ・カスタマイズが自由で簡単 ・知識や技...

The post WordPressでブログ＆ウェブサイトをつくるメリット＆デメリット first appeared on Back Pack Hack-デジタルノマド・キラのブログ.]]> 今回の結論を先に

今回の内容の結論、先に結論からまとめてしまいます。

 

「WordPressでウェブサイトを作るメリットとデメリット」は、

WordPressのメリット

・カスタマイズが自由で簡単

・知識や技術が身につく

・独自ドメインで運用できる

・広告含め、載せる内容が自由

・アクセスアップに強い

・そこまで難しくない

・情報が豊富

WordPressのデメリット

・開設がちょっと大変

・維持コストがかかる

・多少の慣れと技術が必要

・限界もある

WordPressを使うべき人

ということで、どんな人にオススメかというと、

名前
多少の手間は問題ないので、他のものと差別化されたブログやウェブサイトを、本格的に作っていきたい！

アクセスも長期的にしっかり集めていきたいし、web制作に関しての知識や技術も身につけていきたい！

という人にオススメ、ということです。

WordPress　ワードプレス　ブログ　作り方

前回のおさらい

さて、前回、「無料サービスを使ってウェブサイトやブログを作るメリットとデメリット」について書きました。

アメブロやwixってどうなの？無料のサービスでブログやサイトを作るメリット＆デメリットについて。

この中では、wixやJimdo、はてなやアメブロ、ライブドアブログのような「無料でブログやウェブサイトが作れるサービス」のメリットとデメリットについて書きました。

 

今回は、それと比較して、独自ドメインやサーバーを自分で取って作るブログやウェブサイト、

その中でも特に「WordPress（ワードプレス）」を使って作成するメリット・デメリットについて書いていこうと思います。

メリット１，カスタマイズが自由で簡単

WordPressで作成するブログ＆ウェブサイトは、カスタマイズの幅が広く、また簡単です。

 

例えば、WordPressには「テーマ」とか「テンプレート」と呼ばれるデザインの「型」のようなものが用意されており、

それらを適用するだけで、色んなデザインに変更ができます。

WordPress　ワードプレス　ブログ　作り方　テーマ

加えて「プラグイン」という機能拡張システムで、ちょっと複雑なシステムも簡単に導入できます。

例えば、お問い合わせフォームを一瞬で作成したり。

WordPress　ワードプレス　ブログ　作り方　プラグイン

基本的な使い方を理解した後も、

HTMLやCSSなどのコーディングについて学べば、細かなカスタマイズやデザイン変更もどんどんできるようになります。

 

このように、WordPress含め、自分で作ったサイトは色々と自由にカスタマイズができるのです。

当たり前のことではありますが、これは、間違いなく最大の魅力の一つだと言えるでしょう。

 

また、しっかりとアクセスアップ対策を行っていれば、長期的に多くのアクセスがあるサイトを作ることも可能です。

作りこむのが大変なぶん、ちゃんと作れば長期的にはかなり潰しがききます。

メリット２，知識や技術が身につく

自分でブログやウェブサイトの製作を行った場合、面倒なことは多いのですが、

その分、 サイトのデザインやHTML/CSSのコーディング、 PHPやJavaScriptなどのプログラミング、 SEOやソーシャルメディアなどによるアクセスアップ… といった知識や技術が、少しずつ身につきます。

 

ただ、ゼロから全てコーディングして作るのに比べると、簡単に始めることができます。

 

なので「Web製作の技術を身に着けたいけど、何からすればいいのかわからない…」という人は、

まずはWordPressでサクッとサイトを立ち上げつつ少しずつ知識を身に着けていく、というのが、とてもオススメの方法です。

WordPress　ワードプレス　ブログ　作り方

さらには、WordPressを使っている企業や個人はけっこう多いので、一定以上の技術が身につけば、仕事の依頼もけっこう来ます。

 

例えば僕の場合、社団法人festivoで定期的にWordPress講習会の講師として教えたり、

色んな企業や個人のブログやウェブサイト制作、運用、カスタマイズ、コンサルティングの依頼を沢山頂けるので、

正直なところ、WordPress関連だけでも、けっこうな額を今まで頂いています。

[su_row][su_column size=”1/2″] [/su_column] [su_column size=”1/2″] [/su_column] [/su_row]

そんなワケで、やっぱり少しずつでも、知識や技術を身につけるのはオススメなんです。

メリット３，独自ドメインで運用できる

WordPressなどで自分で作成したブログやウェブサイトは、独自のドメインで運用できます。

ドメインとは、「◯◯.com」とか「◯◯.jp」というアレですね。インターネット上の住所みたいなものです。

あれが、基本的には自由に決められます。

WordPress　ワードプレス　ブログ　検索　SEO

これが、無料サービスを使って作ると、URLの末尾に「◯◯.wix.com」とか「◯◯.hateblo.jp」という文字が付いたりします。

（※有料版にアップグレードすれば、外せるサービスもあります）

 

特に気にならない場合は良いんですが、IT系の人たちは「短くてシンプルなURLの方がクール」みたいに思ってるフシがあり、

末尾に「.wix.com」とか付いてると「あ、無料サービスで創ったんだな…」と分かったりします（笑）

 

僕の場合、このブログには「kohkira.com」と、自分の名前をキュッとURLに当てています。

 

あとは、「独自ドメインの方が長期的なSEOには有利」という意見もありますが、

最近はレンタルブログもSEOけっこう強いよね、ということで、意見が割れているみたいです。

まあ、最終的には好みやこだわりの問題になるかもしれません。

 

独自ドメインの取得の仕方に関しては、ここに詳しく書きました。参考まで。

【画像付き】５分でできる！お名前.comでドメインを取ってみよう。

メリット４，広告含め、載せる内容が自由

広告などが自由にコントロールできるのは、自分でサイトをつくる最大のメリットの一つといえるでしょう。

 

アメブロなどのレンタルブログの場合、無料で使用すれば記事の中に勝手に広告が入ってしまいます。

しかも、この広告収益は書いた人には入りません。受取の権利はあくまでサービスの運営会社にあります。

まあ、だからこそ無料でサービス提供できるワケです。

さらには、運営会社の利用規約に反する広告掲載は禁止されており、エグい貼り方をすればアカウントの停止などをされてしまいます。

その一方で、自分でドメインとサーバーを取得すれば、好きな場所に好きなように、「自分の」広告を掲載できます。

例えばこんな風に、好きな場所にGoogle AdSenseの広告を張ったり。↓




基本的に自由に、広告を入れたり消したりできます。

これは、「カスタマイズが自由」という部分にも通じるメリットですね。

WordPress　ワードプレス　ブログ　作り方

また、自分で作るサイトは、基本的に何でも書けます。

もちろん、エログロとか違法、倫理的にアウトな内容になると、レンタルサーバー会社などからNGを食らうでしょうが。

 

レンタルブログのように、ちょっとエグいセールスや人の悪口くらいで、アカウント停止されてブログが消える、なんてことはありません。

まあ、そんな際どいネタを書く人はそうそう居ないかと思いますが、

レンタルブログ等の場合、運営会社の裁量で決定されるので、やや不安定といえば不安定です。

 

これは例えるなら、大きなマンションに住む場合、マンションのルールがあり、

管理会社から出て行けと言われたら出ないといけない、というのに似ている気がします。

メリット５，アクセスアップに強い

WordPressで作る場合ですが、ちゃんとやることやれば、しっかりアクセスが集まります。

 

もちろん、表面だけ作って放置、じゃダメです。

・目的やコンセプト、キーワードをしっかりと決めて

・サイトを立ち上げて

・各種設定を適切に行って

・SEOも意識した良い記事を沢山作って

・SNSなどでしっかりシェアして被リンクを増やして

・数字や結果をしっかり計測して改善して

・それを継続する

というコトをしっかりやれば、しっかりPVも上がり、売上も上がります。

WordPress　ワードプレス　ブログ　SEO

多少の手間と時間はかかりますが、じっくりと取り組めば、必ず結果が出るし、数字を見て細かいコントロールもできるようになります。

そもそも、「アクセスはどんな経路からあるのか」については、以下の記事に書きました。

WordPressアクセスアップの方法。まずは「５つの経路」について知ろう。

そして、具体的なキーワード選定法や設定に関しては、以下の記事にも書きました。

初心者でも分かる！WordPressブログSEOのためのGoogleキーワードプランナーの使い方

完全保存版！WordPressブログにおすすめのプラグイン23選

拡散を狙え！WordPressの「All in One SEO Pack」でOGP設定をしてアクセス数を増やす方法

メリット６，そこまで難しくない

独自ドメインやサーバーを取得して、WordPressを使ってサイトを作るのは、無料で簡単に作れるサービスと比較すると、ちょっと大変です。

ドメインとサーバーの申し込みして、それらを紐付けて、WordPress入れて、テーマやプラグイン入れて…と、やることがいっぱいあります。

 

これらは、慣れないうちはけっこう大変なんですが、ちゃんと調べればそこまで難しくないし、一度慣れてしまえば、けっこう簡単です。

メリットと呼ぶほどのことではないかもしれませんが、ビビリ倒すほどのことではありません。

WordPress　ワードプレス　ブログ　作り方

 

このブログ内にも、作り方を写真付きでかなり詳しく書いていますので、コレを見ながらやれば大丈夫。

【記事まとめ】今年こそ、WordPressでブログ＆ウェブサイトを作ろう。

メリット７，情報が豊富

さて、これも大きなメリットの一つです。

WordPressを使う場合、大抵のことは、調べれば何とかできます。

 

日本にもユーザーが沢山いるので、情報もネット上に沢山あります。

「WordPress＋やりたいこと」で検索すれば、かなりの数の記事がヒットします。

 

WordPressは世界中で使われているCMS（＝ブログ等を作るシステム）なので、英語ができればさらに情報を得られます。

人に聞いたり、本で調べるより、検索して独習する機会はとても多いので、これはとてもうれしい所ですね。

WordPress　ワードプレス　ブログ　SEO　アクセスアップ

WordPressを使うデメリット

さて。最後に、独自でサイトを作るデメリットについて。

 

まあ、前の記事と上の内容を見ていただければ、大体の内容は想像できるかもしれませんが(笑)

より深く理解していただくため、細かく説明をしていきましょう。

デメリット１,開設がちょっと大変

無料で簡単なウェブサイト＆ブログサービスと比較すると、ですが、WordPressでのサイト開設には、少し手間がかかります。

 

サーバーとドメインを取得して、それらを設定して、WordPressをインストールして、テーマをインストールして、プラグインを入れて…

とやって初めて、まともなウェブサイトの形になります。

 

そこまで難しい内容ではありませんが、最初はちょっと苦労するかもしれません。

これは言葉で説明するのが難しいので、とりあえずやってみて、ダメなら諦めましょう（笑）

【記事まとめ】今年こそ、WordPressでブログ＆ウェブサイトを作ろう。

デメリット２，維持費コストがかかる

WordPressを利用する場合、自分でドメインとサーバーを取得して、そこにWordPressをインストールして利用します。

 

WordPress公式のサイト（wordpress.com）から会員登録して利用するのは、簡単ですが絶対にオススメしません。

有料版ですら、テーマやプラグインの利用に制限がかかって、最悪だからです。

 

なので基本的には、サーバーやドメインを自分で取ることになります。

そしてその場合、維持費がかかるワケです。

ドメインの場合、安いものでは100円以下から取ることができ、 １年後の更新料はだいたい1500円〜/年くらいです。

（もちろん、どんなドメインを取るかにもよりますが）

 

サーバーの場合、「エックスサーバー」のようなレンタルサーバーは年間で数千円、

「アマゾンAWS」のような重量課金制サーバーの場合は、使ったぶんだけ(=アクセスがあった分だけ) 料金を支払うシステムになっています。

 

昔と比べるとドメインもサーバーも相当に安くなっていて、今では子供のお小遣いで取れるほどになりま した。

が、維持費を払う必要があるというのは、デメリットの一つです。

 

もちろん無料サービスを使う場合も、高度な機能を使う場合は課金するのがベターなので、

本気でブログやウェブサイトを運用する場合は、遅かれ早かれお金はかかることになるでしょう。

あとは、定期的なメンテナンスやバックアップなど、労力としてのコストも多少は発生します。

これも、そんなに大変なことではありませんが、一応デメリットの中に入れておきます。

デメリット３，多少の慣れと技術が必要

WordPressを利用する場合、「ダッシュボード」という独自のUI(管理画面など)に慣れていく必要があります。

こんな画面ですね。

WordPress　ワードプレス　ブログ　作り方　プラグイン

また、基本的な製作が終わった後も、アクセスなどはSEO対策やソーシャルメディア対策を行って自分でやっていかなくてはいけません。

一度慣れてしまえば楽なのですが、慣れるまで少しの辛抱が少し必要です。

 

あとは、中級者以上になると、細かいカスタマイズがしたくなると思いますが、それにはHTML/CSS、PHPなどのコーディング・プログラミング技術が必要になってきます。

これも、分かる範囲から少しずつやっていけばいいのですが、「細かい作業が全くだめ！発狂する！」みたいな人はキツいかもしれません（笑）

 

まあ、これもビビる程ではないので、考えるよりは実際にやってみるのが一番です。

WordPress　ワードプレス　ブログ　カスタマイズ

デメリット４，限界もある

WordPressでのブログやウェブサイト作成は、カスタマイズの幅が広いというメリットがありますが、

もちろん、それには限界もあります。

 

WordPressは、基本的にはウェブサイトやブログ作成のためのCMSなので、「月間１００万PVのメディアブログ」などの運営は余裕でできます。

ただし、複雑なシステムを要するサービスなどには向いていません。

 

例えば「cookpad」や「NAVERまとめ」のような、ユーザーがログインして投稿をするタイプのサービスの作成は、WordPressでは難しいでしょう。

（このようなサービスをつくりたい人は、基本的なHTML/CSSコーディングを学んだ後、Ruby on Railsなどを勉強しましょう）

WordPress　ワードプレス　ブログ　作り方

機能としての限界の他に、使う人の技術力によっては、（最初は）カスタマイズの限界もあります。

 

WordPressのデザインには、基本的に「テーマ」や「プラグイン」という機能を使用するのですが、

デザインは良くも悪くもこれらのシステムに依存するので、そういう意味での限界が存在するのです。

 

つまり、段階としては

初心者
テーマ？プラグイン？なんだそれ？どうやって使うの？

という段階から

中級者
基本的なシステムは使えるようになったけど、ココをもっとこうしたいなあ…

となって

上級者
HTML&CSSのコーディングを覚えて、細かいカスタマイズもできるようになったぞ

という段階を経る必要があるのです。

 

なので、中級者までは、色々ともどかしいこともあるかもしれません。

まとめ

以上、ちょっと長くなりましたが、まとめていきましょう。

 

「WordPressでウェブサイトを作るメリットとデメリット」は、

WordPressのメリット

・カスタマイズが自由で簡単

・知識や技術が身につく

・独自ドメインで運用できる

・広告含め、載せる内容が自由

・アクセスアップに強い

・そこまで難しくない

・情報が豊富

WordPressのデメリット

・開設がちょっと大変

・維持コストがかかる

・多少の慣れと技術が必要

・限界もある

WordPressを使うべき人

ということで、どんな人にオススメかというと、

名前
多少の手間は問題ないので、他のものと差別化されたブログやウェブサイトを、本格的に作っていきたい！

アクセスも長期的にしっかり集めていきたいし、web制作に関しての知識や技術も身につけていきたい！

という人にオススメ、ということでした。

 

少しむずかしい内容もありましたが、どうでしたか？

まあ、言葉で説明するのが難しい所もあるので、まずは実際に手を動かしてみてください。

記事内でも紹介しましたが、こちらに詳しくまとめてあります。

【記事まとめ】今年こそ、WordPressでブログ＆ウェブサイトを作ろう。

それでは、明日も、良い人生と良い旅を。

あわせて読みたい

The post WordPressでブログ＆ウェブサイトをつくるメリット＆デメリット first appeared on Back Pack Hack-デジタルノマド・キラのブログ.]]> 2864 全部無料！フリー素材・写真・画像サイト全力まとめ17選 https://kohkira.com/freepics/ Tue, 10 Jan 2017 20:18:22 +0000 http://kohkira.com/?p=2633 フリー素材・写真・画像サイト、まとめました。 ブログやウェブサイトを作る人が必ず使うのが「フリー素材」。 どうせなら、オシャレで印象的なものを、安全かつ無料で使いたいですよね。   今回は、フリー素材・写真・画...

The post 全部無料！フリー素材・写真・画像サイト全力まとめ17選 first appeared on Back Pack Hack-デジタルノマド・キラのブログ.]]> フリー素材・写真・画像サイト、まとめました。

ブログやウェブサイトを作る人が必ず使うのが「フリー素材」。

どうせなら、オシャレで印象的なものを、安全かつ無料で使いたいですよね。

 

今回は、フリー素材・写真・画像サイトまとめとして、

素材数が多く、使い勝手の良いフリー素材サイトを１７個、全力でまとめてみました。

 

これだけあれば、もう素材探しに困らないハズ。

自分に合ったサイトを、探してみてください。

ぱくたそ

http://www.pakutaso.com/

言わずと知れた、日本最大級のフリー素材配布サイトです。

とにかく高品質・高解像度にこだわっている他、年間の行事や時事ネタもすぐに素材にしてくれるフットワークの軽さも有り難いですね。

 

ジャンルは、人物や自然風景やオブジェなど、総合的に揃っています。

ブログやホームページに画像をちょっと差し込みたい、という程度なら、このサイト一つで充分なくらいです。

いらすとや

http://www.irasutoya.com/

こちらも、超メジャー級素材サイト。

日本に住んでいる人なら、一度はここのイラストを見たことがある、というレベルです。

もはや、現実社会の広告すら、「いらすとや」に侵食されているレベル（笑）

 

ここも、あらゆるジャンルのかわいいイラストがある他、時事ネタにもすぐに対応するフットワークの軽さがあります。

このブログには、テイストが合いにくくて使う機会があまりないのですが、可愛い系で分かりやすいイラストが欲しい方は、ぜひどうぞ。

写真素材　足成

http://www.ashinari.com/

こちらも、日本最大級の全国のフリー素材配布サイト。

アマチュアカメラマンさんが撮影した写真を提供してくれています。

 

風景、飲食、人物とオールジャンルをカバー。

掲載枚数は75000枚以上（２０１６年３月時点）と、すごいボリュームがあります。

タダピク

http://www.tadapic.com/

こちらは画像をキーワード検索できるサイトです。

２９の無料画像提供サイトから、検索ワードに合った画像をピックアップしてくれます。

 

これで様々なサイトをはしごして画像を探す手間が省けますね。

例えば「三毛猫」で検索すると8,170,000件もヒットします。すごい（笑）

pixabay

https://pixabay.com/

こちらも、シンプルなフリー素材検索サイト。

ワードを打ち込むだけで、オシャレな写真からシンプルなイラストまで、様々な素材が探せるのが嬉しいです。

日本語でも英語でも検索できるし、タグから似た画像を辿ったりもできるので、操作性が良いですね。

everystockphoto

http://www.everystockphoto.com/

北米を中心に、全世界でも有名な写真素材の検索エンジンです。

他の共有サイトを含めて、500万点以上から写真を探せます。

海外サイトなので、多少英語が理解できる必要がありますね。

morgueFile

http://www.morguefile.com

高品質・高解像度の写真素材がなんと約100万枚！

これも海外のサイトなので、全て英語表記で写真も海外の風景や人物です。

 

一部有料ですが、ほとんどが無料で利用できます。

ユーザー登録が必要ですが、FacebookやTwitter経由でユーザー登録できるので、登録に手間もかかりません。

一部有料素材もあります。

Mediachain

http://images.mediachain.io/

ワードを打ち込むと、いろんなフリー素材サイトを横断的に検索してくれるサイトです。

これも、英語のみを使用します。

ちょいちょい画質のあまりよくないものがひっかかるのは難点ですが、検索結果は多く、バリエーションも豊富です。

写真AC

http://www.photo-ac.com/

人物写真や風景写真だけでなく、インテリアや小物などの幅広い写真が取り揃えられています。

サイトもすっきりとして使いやすいですね。

利用には、ユーザー登録が必要です。

ソザイング

http://sozaing.com/

写真から様々なWeb素材まで揃っている総合フリー素材配布サイトです。

ユーザー投稿型のためクオリティに差がありますが、幅広い種類の素材が見つかるというメリットもあります。

Freestockphotos.biz

http://www.freestockphotos.biz/

約15,000枚もの写真素材がで利用可能です。人物系の写真の種類がとても豊富です。

LoveFreePhoto

http://lovefreephoto.jp

自然風景や町並み、海外などの写真が多く掲載されています。

同じモノの写真でも、様々な角度からのものがあって細かなニーズに応えられます。

ゆんフリー写真素材集

http://www.yunphoto.net/

最大600メガピクセルクラスの高解像度の写真素材サイトです。とにかく高解像度。

英語、中国語など15の言語に対応し世界の200の国と地域から月間30万人、200万PVとワールドワイドに活用されています。

キー局のドラマやクイズ番組やCM、メジャーアーティストのMVでも使用されているんだとか。

ビジトリーフォト

http://www.busitry-photo.info/

人物写真中心のフリー写真素材サイトです。

商用利用も可能。ユーザー登録が必要です。

 

笑顔、怒る、叫ぶといった「感情」のカテゴリで分けられていて、Webメディアの記事に使いやすそうな写真が多く掲載されています。

サブコンテンツの「プロカメラマンが教える、写真の撮り方講座」も、是非読んでみてください。

MIKA★RIKA

http://mika-rika-free.jp/

「私たち、無料です」。おお…なんかドキドキする。

可愛い女の子２人の写真が使い放題。

様々なシチュエーションの写真素材の他、女の子の声で撮られたセリフなどの音声素材も利用できます。

このサイト自体も話題になったのですが、ここからさらに派生したフリー素材インド人『DEV★SAN』もかなり話題になりました（笑）

GIRLY DROP

http://girlydrop.com/

コスメやスイーツなど、「女の子っぽい」写真に特化したフリー素材検索サイトです。

なんかこう、全体的にキラキラフワフワしています。

僕のような一人旅ガジェットオタク野郎は使いませんが、女子ブロガーさんはぜひどうぞ。

モデル・フォト

http://model.foto.ne.jp/

女性モデルに特化したフリー写真素材サイト。

動作、シーンやアイテムから検索ができて、女性メディアなどに使いやすそうです。

ユーザー登録もクレジット表記も必要無しで、商用利用も可能です。

まとめ

今回は、「これさえ押さえておけば、写真素材で困ることは無い！」というくらいに、使い勝手の良いフリー素材サイトをまとめてみました。

まずは各サイトを実際に見てみて、実際に使ってみましょう！

全てを常に使うことはないと思うので、使ってみて合いそうなものを幾つか、ブックマークしておいてください。

 

それでは今日はこのへんで。

明日も、良い旅と良い人生を。

コチラの記事も、あわせてどうぞ。

あわせて読みたい

  1. 完全保存版！WordPressブログにおすすめのプラグイン23選
  2. WordPressアクセスアップの方法。まずは「５つの経路」について知ろう。
  3. 「ゼロからITやりたいけど何からすればいい？」という人へ。３つの基礎から固めよう！
  4. 読みやすいブログにはコツがあった！わかりやすい文章を書く５つの方法
  5. まだそのまま使ってるの？僕がGoPro（ゴープロ）を100倍便利にした10のアクセサリーを紹介します
The post 全部無料！フリー素材・写真・画像サイト全力まとめ17選 first appeared on Back Pack Hack-デジタルノマド・キラのブログ.]]> 2633 ブログデザイン、リニューアルしました。 https://kohkira.com/renewal/ Sat, 01 Oct 2016 13:21:30 +0000 http://kohkira.com/?p=1253 当ブログのデザインを、変更したのでお知らせします。 初代デザイン ブログのデザイン等をリニューアルしました。 もともと、初代のデザインはこんな感じ。↓ ただ、このデザイン、ちょっと気合入れすぎて、複雑なUIにしてしまった...

The post ブログデザイン、リニューアルしました。 first appeared on Back Pack Hack-デジタルノマド・キラのブログ.]]> 当ブログのデザインを、変更したのでお知らせします。

初代デザイン

ブログのデザイン等をリニューアルしました。

もともと、初代のデザインはこんな感じ。↓

blog1st

ただ、このデザイン、ちょっと気合入れすぎて、複雑なUIにしてしまったので、各種更新がとても大変でした（笑）あと、スマホ対応もしっかり出来てなかったんですよ。

二代目

よって、二代目のデザインに。こんな感じに、カード型に記事が並ぶようにして、個別の記事のページも１カラムで見やすく作りました。↓

[su_row][su_column size=”1/2″] screencapture-kohkira-1474104199409-1-1 [/su_column] [su_column size=”1/2″] screencapture-kohkira-grow-1474104294149-1-1 [/su_column] [/su_row]

これはけっこうお気に入りでした。スマホからも見やすかったし。

ただ、逆にシンプルにしすぎて操作性や一覧性が下がったような気もして、放置気味に。反省。

 

要は、最初は複雑にしすぎて、次はシンプルにし過ぎた、と。あるあるですね。

三代目J Soul Brothers

見出しに特に意味は無いです。やっぱ言いたくなりますねコレ。

今回、「さらにスマホから見やすく！あとパッと見でイメージ伝わりやすく！あと自己紹介とかのページも見つけやすく充実させてきたい！」と思って、このデザインに。
screencapture-kohkira-1475325219947-1

スマホからもさらに見やすくなってます。

25486-1

トップ絵も描きました

トップ絵も自分でコリコリと描きました。紙は全く使わず、Photoshopだけで描いてます。

線画でおおまかな絵を書いて…

senga

サイトカラーに合わせる形で色塗って…

iro

それを手書き風にさらに加工して、文字も付けてこんな感じに。

bloglogo

絵を描くのはやっぱ楽しいですね。

新しいデザインは、パッと見の良さ、読みやすさ、そして書きやすさ（←これ大事）重視でリニューアルしました。

これから

とりあえず、ガワがある程度できたので、以降は、自己紹介やお問い合わせなどの個別ページをサクサク作っていって、サイドバーの充実などもしっかりしてきます。

それがある程度できたら、各種SNSにもリンクしていきますね。

とりあえず、ご報告でした。

 

こちらの記事も、あわせてどうぞ。

あわせて読みたい

  1. Schooで「HTMLに一切触れたことがない初心者のための60分」の講師をしました【生放送】
  2. 【384人の講習実績】東京で、ホームページ作成（WordPress）Campの講師をしてきました
  3. 【初心者向け】バカでもわかる、ウェブサイトのしくみ
  4. WordPressでブログ＆ウェブサイトをつくるメリット＆デメリット
  5. 【記事まとめ】今年こそ、WordPressでブログ＆ウェブサイトを作ろう。
The post ブログデザイン、リニューアルしました。 first appeared on Back Pack Hack-デジタルノマド・キラのブログ.]]> 1253