HTMLを使ってブログ超初心者でも「読みやすい」文章構成を作る

HTMLを使ってブログ超初心者でも「読みやすい」文章構成を作る

 

 

思い通りの文章構成にしたいけれど、HTMLの使い方が分からない。

 

 

 

HTMLを勉強するなんて難しそう。

 

 

 

そんな風に悩んでいませんか?

 

 

 

HTMLを施さない文章は見栄えが悪く、読みにくいサイトでは、読者さんが集まらないかもしれませんよね。

 

 

 

読者の少ないサイトでは収入もあがりにくいかもしれませんよね。

 

 

 

せっかく、素敵な内容の記事になっても、見出しがはっきりせず、文章構成が見にくいとそれでだけで読み手は去っていきます。

 

 

 

せっかく素敵な文章を書けるのなら、見出しもはっきりし、読みたい箇所に飛ばせる記事にして、記事をたくさん読んでいって頂きたいですよね?

 

 

 

そして、ブログで収益を上げられたらうれしいですよね?

 

 

 

素敵な文章構成にするには、実は初心者さんでもHTMLをすぐに、カンタンに、使いこなせるのですよ。

 

 

 

その方法をこのページをご覧の方にだけにこっそりお教えしちゃいますね。

 

 

 

 

 

 

WEB上で文章構成を整えるのに必要なスキルとは?

 

WEBで文章構成を整えるのに必要なスキルとは、HTML言語です。

 

 

 

HTML言語が必要なのは、見出しをわかりやすく強調したり、改行したり、リンクで飛ばしたり、引用句や引用元を載せる時です。

 

 

 

つまり、読み手はあなたの記事を見て、読みやすそう、読みたいと思った時にクリックするので、見出しに興味を持っただけでなく、ぱっと見の文章構成、印象がHTML言語で強調されている必要があるのです。

 

 

 

人は、読みたいという感情と読みやすそうという印象で読むという行動を起こすので、まず、読者さんの記事を見た瞬間の、「感情と印象」をイメージする能力が必要です。

 

 

 

これは、これから情報発信のビジネスをしていくのに欠かせないスキルです。

 

 

 

たとえ、シンプルなサイトであっても、サイト全体の構成を整えれば、人の興味・好奇心を掻き立てられるブログになるからです。

 

 

 

超初心者のわたしが、かんたんに使いこなしたHTML言語と作成方法があるのです。

 

 

 

初心者でもかんたんにHTML言語を使いこなす方法とは?

初心者でもかんたんにHTML言語を使いこなす方法とは、適切な箇所に、HTMLをコピペして、正しく置き換えることです。

 

 

 

HTMLはたくさんありますがこのページでは代表的な4つのHTMLを使ってご紹介します。

 

1.head(ヘッド) タグ

 

2.paragraph(パラグラフ)タグ

 

3.anchor(アンカー)タグ

 

4.quote(クオート)タグ

 

 

4つの機能について簡単に解説しますね。

 

1.head(ヘッド) タグは6種類の見出しを付けることができます。

 

2.paragraph(パラグラフ)タグは段落ごとに改行をしてくれます。

 

3.anchor(アンカー)タグは指定した言葉や文章を他のページの言葉や文章へリンクしてくれます。

 

4.quote(クオート)タグは他のページから文章などを引用する時に使います。

 

 

 

 

タグとは?

タグとは、   <h1>ほにゃらら</h1>  この内の括弧  <>  </> で包む部分 のことです。

 

 

 

括弧も括弧内の語も半角英数字で書きます。

 

 

 

タグは  <>  で始まり、  </>  で締めます。

 

 

 

タグを使った文章は、「テキスト」ページ上に書いて投稿します。

 

 

 

ブログによって「テキスト」ページとは言わず、別名で表示されていることもあります。

 

 

 

ワードプレスの場合は、「テキスト」

 

seesaaブログの場合は、「リッチテキスト」

 

FC2ブログの場合は投稿記事の上段「本文の編集」

 

 

へ書きます。

 

 

 

他のブログに関してはわかりませんのでご自分のブログでご確認ください。

 

 

 

➊ head(ヘッドタグ) = 見出しタグの設定方法

 

headタグ(ヘッドタグ)とは↓こういうものです。

 

<h1></h1>

<h2></h2>

<h3></h3>~

<h6></h6>まで使用可能。

 

上記枠内をコピペして使用すると手間が省けます。

 

 

 

headタグは、headのhをとってhタグといい、見出しを意味します。

 

 

 

headタグを使うと、自動的に斜体や太字に変換されます。

 

 

 

さらに詳しい解説はこちら↓↓↓のページに移りました。

 

ヘッドタグの設定方法


 

❷ paragraph(パラグラフ)タグ =(段落タグ)の設定方法

Paragraph(パラグラフ)タグとは↓こういうものです。⇓⇓⇓

 

 

 

<p>ほにゃらら</p>

 

 

 

上記枠内をコピペすると手間が省けます。

 

 

 

Paragraphタグは略してPタグと呼ばれます。

 

 

 

パラグラフとは「段落」のことです。

 

 

 

「段落」とは文書内で”ひと塊”になっている文章のことです。

 

 

 

Pタグを使うと、次の文章との間が1行空きます。

 

 

 

さらに詳しい解説はこちら↓↓↓のページに移りました。

 

パラグラフタグの設定方法

 

 

 

 

 

❸ anchor(アンカー)タグ = リンクタグの設定方法

anchor(アンカー)タグの使い方例はこちら↓↓↓

 

 

 

<a href=”http://example.example.net/”>こちらのページへなど</a>

 

 

 

上記枠内をコピペすると手間が省けます。

 

 

 

anchor(アンカー)タグは、頭文字aをとって、aタグとも呼ばれます。

 

 

 

aタグの役目は、指定したページ外にリンクを張ることです。

 

 

 

そのため、リンクタグとも言われます。

 

 

 

さらに詳しい解説はこちら↓↓↓のページに移りました。

 

 

 

 

 

 

 

❹ blockquote(ブロッククオート)タグとcite(サイト)タグ = 引用タグ

 

blockquote(ブロッククオート)タグとcite(サイト)タグの使い方はこちら↓↓↓

 

 

 

<blockquote>
<p>引用文章。引用文章。引用文章。</p>
<cite><a href=”https://example.com”>引用元の文書名や署名</a>より</cite>
</blockquote>

 

 

 

上記枠内をコピペすると手間が省けます。

 

 

 

blockquote(ブロッククオート) の block とは「一続き、一かたまり」の意味で、quote とは「引用」の意味。

 

 

 

したがって、「まとまった文章レベルを引用する」時に使います。

 

 

 

blockquoteタグは、外部のサイトや文献から「引用」していることを表すタグです。

 

 

 

cite もまた「引用」の意味で、citeタグは「引用元」を表すタグです。

 

 

 

つまり、著者名や書籍名についてはciteタグで表します。

 

 

 

さらに詳しい解説はこちら↓↓↓のページに移りました。

 

 

 

 

 

 

まとめ

専門用語が分からなくても、必要なHTMLをコピペして使うことで誰にでもすぐ使えますし、使っていくうちになんとなくでも理解出来るようになります。
1日に、1つマスターしようとすれば、1週間後には出来るようになりますね。

 

 

 

このページでご紹介するHTMLを読んだら手を動かして、文章を作ってみてくださいね。
さらに、このページで解説したタグ以外のタグについては、HTMLタグ辞典 からご覧くださいね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です