編集画面の使い方 - はじめの一歩

3回目の投稿です。

ブログ開設から30日以内に３記事以上投稿することで、「ようこそブログ」に掲載されるということです。必ず掲載を約束するものではないそうですが、掲載を目標に３０日以内に３本書き上げました。自分一人では見逃してしまいそうで心配です。もし見かけましたら是非ご一報ください。

今回は１番よく使う編集画面の使い方です。

編集画面の使い方

ずいぶん長くなってしまいましたので、通読には時間がかかってしまいます。目次から必要な見出しに飛んでご利用ください。

カスタマイズなど高度な内容は含んでいません。

初心者の方で思うように操作できない方はご連絡していただければ、できる範囲で調べて更新していきます。よろしくお願いします。

全体の構成
1.ヘッダーメニュー
2.ブログ名
3.編集タブ
- 「見たまま」モード
- 「編集はてな記法」および「編集Markdown」モード
4.タイトルバー
5.入力補助ツールバー（上段）
6.入力補助ツールバー（下段）
- 文字装飾機能一覧表
7. [お題}・・・・・・・X　
８.メッセージバー
9.テキストエリア
10.フッターメニュー
11.編集サイドバー
反省

全体の構成

下図が編集画面です。

図中の①～⑪が見出しのナンバーに対応しています。

① ヘッダーメニュー

② ブログ名

③ 編集タブ

④ タイトルバー

⑤ 上段 - 入力補助機能

⑥ 下段 - 文字装飾機能

⑦ [お題}・・・・・・・X

⑧ メッセージバー

⑨ テキストエリア

⑩ フッターメニュー

⑪ 編集サイドバー

1.ヘッダーメニュー

はてなブログの各画面に共通するヘッダーメニューは、ブログの操作やナビゲーションを簡単にするための便利なツールです。以下のように各画面へのナビゲーションになっています。

HatenaBlogロゴ: トップページに戻るリンク。
記事を書く: 新しい記事を作成するためのリンクで、編集画面に直接アクセスできます。
購読リスト: 他のユーザーのブログを購読し、更新情報をチェックするためのはてなのトップ画面に直接アクセスできます。
お知らせ: はてなの管理画面（ダッシュボード）に直接アクセスできます。はてなブログからの通知や更新情報が表示されます。
アカウントアイコン: アカウント設定やログアウトなどのオプションが含まれるサブメニューが開きます。

これらのメニューは、どの画面からでもアクセス可能で、ブログの管理や閲覧をスムーズに行えるよう設計されています。

詳しくは

iamtamatama.hatenadiary.jp

2.ブログ名

この記事のブログ名が表示されます。

左端の「＜」

「ブログ管理画面（ダッシュボード）」の、このブログの「概要」タブへ移動する
ブログへのアクセスや最近書いた記事が表示される

3.編集タブ

編集のプルダウンメニューを開くと下のようなメニューが選択できます。

いったん作成した記事の編集モードを、後から変更することはできません。

「見たまま」モード

フォントを変更したり、見出しや箇条書きなど、文章のどこがどのスタイルになっているかをだいたい確認できる
プレビュータブをクリックすると実際の表示を見ることができる
「プレビュー」タブを選択すると、直下に「PC」、「スマートフォン」ボタンが表示され、それぞれの表示に切り替えることができる
「スマートフォン」のプレビュー画面は横幅が320ピクセルに固定されているので、機種や表示の仕方によっては実際の表示とは異なる

プレビュータブの右のプルダウンメニューから別ウィンドウでの表示も可能
編集画面を変更したときは上のような「別ウィンドウのプレビューを更新」（プレビュー）タブで更新する
プレビューを確認したら、プレビューウィンドウの「閉じる」ボタンかテキストエリアに表示される「プレビューウィンドウを閉じる」ボタンを押す

カスタマイズなどで記事中にHTMLコードやスクリプトを埋め込むときには「編集見たまま」から「HTML編集」に切り替える

初心者なのでデフォルトの「見たまま」モードを使っていきます。

「編集はてな記法」および「編集Markdown」モード

テキストエリア内の右上にある「リアルタイムプレビュー」ボタンをクリックすると、テキストエリアの右半分でリアルタイムプレビューが可能
HTMLコードも直接記述できる

4.タイトルバー

タイトル欄右端の「AIタイトルアシスト」をクリックするとAIがタイトルを提案してきます。

実行するボタンを押すといくつか提案してくるのでいいものがあれば選択する
気に入らなければ自分で考える

5.入力補助ツールバー（上段）

選択は段落単位で、一部でも含まれていればその段落は選択されます。

入力補助機能一覧表

カーソルを合わせたりタップするとツールチップ（Tooltip）が表示され、わかりやすくなっています。

ボタンをクリックすると、見出しや箇条書き、引用といった文書のレイアウトを変更できます。

ボタン	名前	機能・使用例
	見出し（書式）	見出しを作成するカーソルのある段落を3種類の大きさの見出しに変換する
	箇条書き	番号無しのリストを作成するもう１度押せば、普通の文に戻る
	番号付きリスト	番号付きのリストを作成するもう１度押せば、普通の文に戻る
	リンク	「リンクを挿入」ウィンドウを開く
	続きを読む	記事を折りたたむ記事を途中で区切り、トップページをスッキリとさせることができる「続きを読む」をクリックすれば記事の続きが表示される
	引用	引用を挿入する多分使う必要がない（編集サイドバーの引用貼り付けを使う）
	目次	見出しに連動した目次を挿入する最初の大見出しの直前に入れるとよい
	脚注	文中に脚注を挿入する本文の最後に補足説明を付けて、文章中には補足説明へのリンクを表示するパソコンで記事を読んでいる場合、脚注にカーソルを合わせると説明文が表示される
	ツールバーの開閉	クリックすると下段が閉じ、もう一度クリックすると、下段を表示する

「リンクを挿入」ウィンドウの使い方

「リンク」ボタンをクリックしなくても、URL（画像リンク）をコピペするだけで「リンクを挿入」ウィンドウが開く
「プレビュー」をクリックすると、URLの種類によって「埋め込み」「画像」「タイトル」「URL」などの形式が表示されるので選択する
「URLを貼り付けたときにこのウィンドウを開く」のチェックボックス

ON：URLを貼り付けたときにこのウィンドウを開く

OFF：URLを貼り付けても「リンクを挿入」ウィンドウを表示しない

「リンクを挿入」ウィンドウを利用したいときは、入力補助ツールバーの「リンク」ボタンから「リンクを挿入」ウィンドウを表示する

「リンクを新しいタブで開く」のチェックボックス

ON：内部リンクはそのまま、外部リンクは新しいタブで開く

OFF：新しいタブは開かない

ウィンドウ下の「選択した形式でリンクを挿入」をクリックして挿入する

リンクの形式

形式	説明
URL	URLをそのまま挿入する
タイトル	ページのタイトルを自動取得し、テキストリンクとして挿入する
選択範囲	URLをコピーし、選択した記事編集画面のテキストにペーストする
画像	画像そのもののURLをコピペする
埋め込み	動画や音楽などのコンテンツを、サイトごとに最適形式で埋め込む一般的なWebページを貼り付けた場合は、ブログカードが利用できる

「ブログカード」とは、記事のタイトルや概要、アイキャッチ画像などをコンパクトにまとめてカード形式で表示する埋め込み形式のリンク

視覚的にわかりやすい: 画像やタイトルが含まれるため、読者にとってリンク先の内容が一目でわかります。
デザイン性が高い: 通常のテキストリンクよりもおしゃれで、ブログ全体の見た目を向上させます。
クリック率の向上: 視覚的に目立つため、リンクのクリック率が上がることが期待されます。

引用

この方法は引用元などを別に貼り付ける必要があり、編集サイドバーの引用を使うのと比べて使用しずらい。

引用を貼り付けたい位置をクリックする
引用ボタンを選択すると引用のマークが表示される
コピペで張り付ける

または、

引用したい部分をコピペで張り付る
引用ボタンを選択する
引用のマークが段落全体に表示される

２つの引用を続けると1つの引用のように表示されてしまうので１行開けた方がよい

脚注

文章中に脚注にしたい部分があれば、その部分を選択する
「脚注ボタン」をクリックする
二重丸カッコが付く

これをプレビューで見ると、

二重丸カッコの部分が「*1」のように表示される
マウスオーバーすると二重丸カッコの部分が吹き出しとして現れる
文末には脚注が「*1：選択部分（二重丸カッコ内の部分）」と表示される

脚注を追加する場合は、

脚注を挿入したい部分をクリックする
脚注ボタンをクリックすると「*1」と表示される
脚注にしたい文章を入力する

6.入力補助ツールバー（下段）

選択は行単位で、カーソルがある行が選択されます。

範囲選択した場合は選択した範囲が選択されます。

文字装飾機能一覧表

ボタンをクリックすると、太字や打ち消し線といった文字の書式や修飾を変更できます。もう一度選択すると普通の文字に戻せます。

ボタン	名前	機能・使用例
	太字	文字を太字にする
	斜体 ITALIC3　 italic	英数字を斜体にする
	打消	打ち消し線を引く訂正する時に使用￥10,000 → ￥8,000 (20%OFF)
	アンダーライン	アンダーラインを入れるアンダーラインがついているとリンクと紛らわしい
	文字の大きさ	文字の大きさを変更する大(200%) 中(150%) 標準(100%) 小(80%)
	文字色	パレットの30色の中から選択して文字の色変更するパレット下の「リセット」ボタンをクリックすると、選択した範囲すべての装飾・大きさ・色が無効になる

文字の位置を揃えて見やすくします。

ボタン	名前	機能・使用例
	左揃え	データが左端に揃えられ、右側に余白ができるデフォルト
	中央揃え	データが中央に揃えられ、左右均等に余白ができるタイトルや見出し、短いデータに有効
	右揃え	データが右端に揃えられ、左側に余白ができる桁数を揃えて比較しやすくするため数値データや金額の整列に有効