スマホの普及によりブログやサイトといったホームページは老若男女を問わず目にするものとなりました。
こういった背景の中、政府が進める働き方改革の促進により2019年以降多くの方がネットビジネスに参入しているようです。
今回ご紹介する【THE THOR(ザ・トール)】
はそんな新規参入を考えている人にはもってこいのツールとなります。
ベテランの先輩方も作業効率があがるということでこちらに乗り換える人も多いようですよ。
そんなザ・トールの何がお勧めかを、45歳で初めてWEB制作をはじめたNEKODAが当時「???」しかなかったことを踏まえながらお届けします。
この記事で分かることをザックリいうと、
こちらの2項目となります。
HTMLってなんだ?
HTMLはそのままエイチティーエルエムと読みます。
これはHyperText Markup Languageの略でウェブページを創るために開発された言語です。
40代の方でしたら学生時代にC言語を使って簡単なゲームを作って遊んだ人もいたと思いますが、あちらはプログラミング用の言語として開発されたものです。C言語はUNIXというOSを開発するためのもので、変数を利用して様々な処理を行うことができました(計算処理とか呼び出し処理とか)。
対するHTMLはプログラム用の言語ではありません。
こちらの役割はウェブページを綺麗に見やすくするというものです。
ウェブサイトには文章や画像が配置されていますよね。
それら文章や画像をどのように配置するかの役割を決めるのがHTMLです。
ウェブページを創る人が監督だとしたら、文章や画像が演者さん、HTMLは演出家もしくは場ミリという役割ですね。
監督のイメージで集められた演者さんを監督のイメージ通りに配置したり、見え方を綺麗にします。
HTMLをもう少し詳しく
もう少し詳しく具体的に説明していきましょう。
先のイメージから「監督=WEB制作者=あなた」、「演者さん=文章、画像」とします。
この時点で2000文字の文章にはしっかり「起・承・転・結」の4構成があるものとします。
ここまで決まっていれば幾つかの手順で完成します。
ここで足りないは、題名、小見出し、目次(必要なら)ですが、これらは2000文字の文章を用意したあなたなら簡単でしょう(もしくはすでにあるかと)。
そしていよいよウェブに落とし込みます。ここでようやくHTMLの登場です。
HTMLには「タグ=印」というものがるので、それらを活用して配置していきます。ちなみにこのタグこそ配置を決める制御情報の印なので、これを間違えると正しく表示されません(場ミリが違うとおかしくなりますよね)。
さて、ここからが新しい知識を習得するところです、頑張りましょう。
タグには多くの種類がありますが基本的な分類として3種類あります。
一つはHTMLタグ、そしてコンバージョンタグとツールタグです。
文章や画像を配置していくのはHTMLタグとなりますので、今回はそれらを説明していきます。
※コンバージョンタグやツールタグはサイトの収益化には絶対に必要なことなのでそれはそれで理解した方がいいでしょう。
HTMLタグの種類
あなたがしたいWEBサイトを作るために文章や画像を用意し配置構成もイメージしたかと思います。
それらをイメージ通り配置するタグ(印)をつけていくわけですが、そもそもどういったタグ(印)があるかを簡単に把握していきましょう。なお先に説明しましたがこれはHTMLタグの一部です。
ここにさらにコンバージョンタグとツールタグが加わっていきます。
◆HTMLタグ一覧(抜粋)
| 基本構造 | <html> <head> <body> <!– –> |
| ヘッダー | <title> <isindex> <base> <meta> <link> <script> |
| ページレイアウト | <hn> <hr> <br> <p> <center> <div> <pre> <blockquote> <address> <noscript> |
| フォント | <font> <basefont> <i> <tt> <b> <u> <strike><big> <small> <sub> <sup> <em> <strong> <code> <samp> <kbd> <var> <cite> |
| リスト | <ul> <ol> <li> <dl> <dt> <dd> |
| 表 | <table> <tr> <th> <td> <caption |
| ハイパーリンク | <a> |
| イメージ | <img> <map> <area> |
| フォーム | <form> <input> <select> <option> <textarea> |
| JAVA | <applet> <param> |
| フレーム | <frameset> <frame> <noframes> |
| 特殊文字 | "e; & < > © |
※こちらは「HTMLクリックリファレンス」より引用しております。HTMLについてより詳し情報が沢山ありますよ。
どうでしょうか。
この一覧をみて「なるほどね」と一目でわかる人は天才です。
私はこれをみて「で?、これをどうしろと??」と?(ハテナ)が三つ以上はでました。
これだけ見てもなにをどう使うか分からないですよね。
簡単な説明ですが、表の二段目にヘッダーという項目があります。ヘッダーはエクセルやワードでも見たり聞いたりしたことがあると思いますが、それらとは多少活用方法は違います。まあ上の方に表示されていることは間違いありませんね。
ウェブサイトのヘッダーはロゴやサイトのタイトルなどを表す領域になります。
ここを作ろうと思った場合、仮に「猫知識2000」というサイト名であれば、一覧にあるヘッダー横列から<title>を選びサイト名を挟みます。
<title>猫知識2000<title>
これでタイトルが表示されるということです。
これを理解してもう一度一覧表をみてみましょう。
<>に囲まれているのが一つのアクションですから、ヘッダーだけで6種類はあります。その他の項目をみるとその数は…。
そして忘れてはいけません、これは大まかに分けた3種類の1つです。
結構たいへんでしょ?
まぁ、WEB制作の人でも全員が全員これを覚えているわけではないので、少しづつやりながら覚えたらいいみたいですが。
HTLMは必要?
HTLMが必要かと問われれば、現在ウェブサイトを創るときには必ず使用するものなのでもちろん必要不可欠でしょう。
ですが、これらを自分で使わなくても、極端な話まったく知らなくてもWEB制作できるのが、
この【THE THOR(ザ・トール)】 なわけです。
ここまで多少なりHTMLの情報をお伝えしていますが、自分で理解して配置していくのは初心者にはハードルが高すぎます。
それがどのくらい高いハードルかを簡単に体験する方法があるので是非試してください。
では、次の手順に従ってください。
① 右クリックしてください
② 下の方にある「ページのソースを表示」をクリックしてください
③ 下までスクロールして、ここに戻ってください
以上です。
どうですか?、いま見たのがこの記事のHTML情報です。
ゾッとしませんか?、私は初めてみたときゾゾりました。
正直これを習得しないとできないんだったら無理なんじゃないかとも思いまたし、これができる人は特別な勉強をしている人でいまからでは無理だろ、とも思いました。
ですが、ですが、
この【THE THOR(ザ・トール)】はHTMLの知識がなくてもできるんですよ。
そりゃまあトールの使い方は多少学ばないといけませんが、トールはワード入力ができればその延長みたいなものですからきっとできます。
私はWEB関係の知識はまったくなく(HTML含む)、ワード、エクセル、イラストレーター、フォトショップ、パワーポイントなどを独学でかじった程度でしたが、1カ月弱で一つのサイトを完成させることができました。
それはある企業さんが所持しているのでここでは紹介できませんが、見た人からは「いや、もうプロでしょ」という評価をいただき、そのまま制作会社に紹介されそうになってました。
これもトールのおかげです。
猫知識2000を作る
とにかくHTMLを知らなくてもサイト制作ができるトールですが、ここでは話の中にでてきた「猫知識2000」をもし作ってみたらどんな流れかを記載していきます。
ここでは、既に記事が書ける状態からスタートさせてもらいます。
※サイト立ち上げ準備やザトールサイト作成詳細は別記事にて
記事をあげるだけでしたらとても簡単にできます。
- ワードプレスを開く(ログインページをお気に入りにすれば一瞬です)
- 投稿から新規をクリック
- 記事入力(ワードからコピペでもOK)、なおここではクラシックエディタのプラグインを使用しています(別記事へ)。
- 「メディアを追加」からファイルをアップロード、ファイルを選択して投稿挿入。
- 小見出しや装飾をする。
- カテゴリやアイキャッチ画像などを入れる(なくても大丈夫ですが)
ザックリの流れはこれだけですね。
超簡単に6つほどの流れとしましたが、HTMLを自分で覚えて配置することを考えるとこの作業はかなり膨大になります。
段落をつけるのですら必要ですからね。
それをワードに入力する感覚でできるんですから、そりゃ楽です。
これが私みたいな初心者にはいいんですよ。
だって、まだまだ学ぶことは多いんです。
ここからSEOやキーワードの選定、読まれる文章構成などを考えていくと、そりゃ~もう奥の深い世界でなんです。
ですから、まずは慣れるために記事をあげてみることを強くお勧めします。
そうなんです。
WEB制作、とくにブログのような場合はまずやってみることが大切なんです。
特に初心者の場合、私もそうでしたが…、はじめは分からないことすら、分からないんですよ。![]()
なかなか致命的でしたが、やっていくうちに必ず壁にぶつかります。
それが分からないことが分かる瞬間です。
「駄目だ~、できない~、こりゃどうすりゃいいの??」
というこりゃ(これは)が分かればもう解決したようなものです。
ネットの世界には情報が溢れてますし、調べていけばまず答えが見つかります(代替え案含む)。
ただ、そういった情報には新旧や誤った情報、嘘やだましもあるので気を付けないといけませんよ。
【THE THOR(ザ・トール)】 を活用して、素早く次のステップに進みましょう。
「まず、やってみる」です。