【詳しく解説】はてなブログの記事編集画面が分かる！

はてなブログの開設について別記事で説明致しましたが、今回は実際に投稿を行う際に使用する「記事編集画面」について説明致します。

無料版で使える機能についての説明になりますが、全体の流れが理解できるようになっておりますので、こちらを参考に、ブログを作成してみて下さい。

以下、目次です。ご覧下さい。

はてなブログ記事編集画面について

記事編集画面の概要

記事編集画面を開くと、最初に下画像のような画面が表示されます。

記事の編集はこの画面で全て出来る様になっています。

画面の各機能については下画像の通りです。

各機能の詳細は後ほど解説しますが、簡単にまとめた内容は以下の様になります。

[st-mybox title=”ポイント” fontawesome=”fa-check-circle” color=”#FFD54F” bordercolor=”#FFD54F” bgcolor=”#FFFDE7″ borderwidth=”2″ borderradius=”5″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

①　編集画面切り替えタブ

「見たまま」　実際に公開されたときに表示される画面に近い形で編集が出来る画面です。

「HTML編集」HTMLタグやスクリプトを使用し、専門的な細かい設定が出来る編集画面です。

「プレビュー」実際に公開された時に表示される完成形が確認できます。

②　タイトル

記事のタイトルを入力する欄です。読者が読みたくなる記事のタイトルをつけましょう。

③　入力補助ツールバー

文字の大きさや色、リスト、引用など、文章を装飾する為のツールが配置されています。

④　記事入力エリア

このエリアに文字や画像を入力します。

⑤　サイドバー切り替えボタン

⑥のサイドバーの表示・非表示切り替えや、表示される機能を切り替えるボタンです。

⑥　サイドバー

ヘルプ画面・画像投稿・カテゴリの設定・オプションの設定が出来ます。最初はヘルプ画面が表示されています。

[/st-mybox]

各機能の詳細は以下に記載します。

①　編集画面切り替えタブ

見たままモード

特に設定の変更を行っていない場合、ブログの開設時に標準で設定されている編集モードがが「見たままモード」です。記事を入力しながらフォントの変更を行うことが出来たり、見出しの設定やリスト、箇条書きなどを適用した際に、実際の文章のどこにどのスタイルが適用されているのかが「見たまま」で確認できます。

HTML編集タブ

HTMLタグやスクリプトを直接記述して編集できる画面です。また、「見たまま」モードで入力した本文が、実際にどのようなHTMLに変換されているのかを確認することが出来る様になっています。

HTML編集タブへの切り替えは、「HTML編集」タブをクリックして下さい。

「HTML編集タブ」では「編集」タブで入力した本文が、HTMLではどのように変換され、表記されるのかを確認することが出来ます。

現在はテキストのみの入力なため、「<p>タグ」で本文が囲まれているだけとなります。

例えば、本文にアンダーラインを適用してみます。

そうすると、HTML編集タブで確認しますと、「<span>タグ」で本文が囲まれているのがおわかり頂けると思います。

プレビュータブ

「プレビュータブ」への切り替えには、プレビュータブをクリックして下さい。

「プレビュータブ」では、公開された場合にブログが実際にどのように表示されるかが、PC表示とスマートフォン表示とで確認できます。

②　タイトル

ブログ記事のタイトルを入力する欄となります。特に注意点はありませんが、読者の目を引くタイトルを設定するのが、アクセスアップのコツです。

③　入力補助ツールバー

入力補助ツールバーは、配置の上段はレイアウトに関わる部分、下段は文字の書式や装飾に関わる部分を変更できます。

それぞれについて、一覧表で簡単な説明を、その後具体的な使い方の解説を行っていきます。

上段ｰ入力補助機能

ボタンをクリックすることで、見出しの設定や箇条書きの追加、引用、脚注といった、レイアウトに関わる部分を変更できます。

ボタン	名前	機能
	書式	記事の本文に３種類の大きさの見出し(大見出し・中見出し・小見出し）を挿入できます。
	箇条書き	番号なしリストを挿入できます。
	番号付きリスト	番号付きリストを挿入できます。
	リンク	URLを入力することで、リンクを挿入することができます。
	続きを読む	「続きを読む」記法を挿入し、記事を折りたたむことができます。
	引用	引用を意味する記法を挿入できます。
	目次	見出しに対応した目次を自動的に作成してくれます。
	脚注	文中に脚注を挿入できます。

見出しボタン

上から順に、「標準」「大見出し」「中見出し」「小見出し」の大きさ比較になります。

（標準設定での比較になります。「デザインCSS」で設定を変更した場合はこの限りではありません）

また、はてなブログの各見出しに対応するｈタグは以下のようになります。

[st-mybox title=”メモ” fontawesome=”fa-file-text-o” color=”#757575″ bordercolor=”” bgcolor=”#fafafa” borderwidth=”0″ borderradius=”5″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

大見出し＝h3
中見出し＝h4
小見出し＝h5

[/st-mybox]

箇条書き

番号なしのリスト（順不同リスト）を作成するときに使います。

番号付きリスト

番号付きのリスト（順序が決まっているリスト）を作成するときに使います。

リンク

URLを指定すると、対象のWebページや画像、動画などの様々なWeb上のコンテンツを適した形式で貼り付けができる機能です。

詳細は下の記事に紹介してありますので、よろしければご覧下さい。

[st-card myclass=”” id=”924″ label=”” pc_height=”” name=”” bgcolor=”” color=”” fontawesome=”” readmore=”on” thumbnail=”on” type=””]

続きを読む

長い記事を書いた時など、トップページでは途中までを表示し、続きは「続きを読む」ボタンから読めるようにする機能です。

詳細は別記事で紹介致します。

引用

引用とは、「文章をわかりやすく説得力のあるものとするために、書籍やインターネット上の他の著作物から文章をその通りに記述することです」が、その際に自身の著作物と他人の著作物を分けるために、他人の著作物に関しては、「引用ブロック」でハッキリと引用である事を明示する必要があります。

その引用ブロックを設定する機能が、「引用」です。

脚注

脚注とは、文章内の単語等に補足説明を加えたい時、本文に記載するのではなく、本文の下に、別に説明を記載することです。脚注を設定したい場合、補足したい単語等のあとに挿入する形で記載して設定します。

下の画像では、「アルベルト」がドイツ語読みである事を説明として挿入したかったので、「アルベルト」の後にカーソルを合わせ、「脚注ボタン」を押し、説明を挿入しています。

その後、プレビュー画面に映りますと、実際の脚注がどのように表示されるかが確認できます。

下段 – 文字装飾機能

各ボタンをクリックすることで、文字の太さや色、大きさなど、文字の装飾機能に関わる部分を変更できます。

ボタン	名前	機能
	太字	文字を太字にすることができます。
	斜体	文字を斜体にすることができます。
	打ち消し線	文章に打ち消し線を引くことができます。
	アンダーライン	文章にアンダーラインを入れることができます。
	文字の大きさ	文字の大きさを大、中、標準、小から選ぶことができます。
	文字の色	文字の色を30色の中から選ぶことができます。