第13回『タブの使い方』『ブログデザインの変更』

今回の授業のメインは、Seesaaブログのデザインについてでしたが、『ブログ記事に記述するタグについて』と、『管理画面・プレビュー画面・公開画面(ブログ本体)』のブラウザタブの操作についてご質問がありましたので、そちらを丁寧にご説明させていただきました。

パソコン上とネット上の違い

ブログは、あなたがパソコンから入力したデータや、アップロードしたファイルを、ブログ会社のコンピュータ(サーバ)に保存し、別の誰かが、あなたのブログのアドレスにアクセスした(開いた)ときに、あなたの記事や画像をデザインに合体させてブログとして表示してくれます。

パソコンの中のhtmlファイル

今までメモ帳で作ってきたhtmlファイルや、画像は、すべてあなたのパソコン上にあります。

フォルダを開くと、フォルダのアドレス欄は、『C:\Users(ユーザ名)\Desktop\hp\20170620』のようになっていたり
『デスクトップ>hp>20170620』等のようになっています
(人によって違います)

ご自分のコンピューターの中にある『html』ファイルをブラウザで開くと、、

このようなアドレスになります。

ブログのアドレス

次に、ご自分のブログのアドレスを開いてください。

ブログのアドレスは『http:// (またはhttps://)』から始まるものになります。

(画像は、サンプルのアドレスです。実際はご自分が設定したアドレスが表示されます。)

人に知らせる場合、ブログのアドレスを、メールやSNSにコピー&ペーストして教えてください。

ポイント
長い期間、ブログをやっていると、検索でブログにたどり着く人が出てきます。
ブログのタイトルだけで検索してもらうには、他にはない独特のタイトルをつけるとたどり着きやすくなります。

ネット上のアドレスは、1ページずつ、世界でひとつだけになっています。
テキストファイル(メモ帳)でつくるhtmlファイルは、1つ1つファイルの名前を自分でつける必要がありますが、ブログは記事を書くと自動でついてきます。

アドレスについては、説明すると長く難しくなるので、おいおい知っていきましょう。

  • パソコン内のアドレスと、ネット上(ブログ)のアドレスは違う

ということだけ、まずは意識してください。

管理画面・プレビュー画面

ブログやホームページを更新する作業をしているときは、ブラウザのタブ使いが上手になることが肝(キモ)です。

ブログ記事を新規または更新して、『プレビュー』を見る場合。

記事を書く場所の下のほうにプレビューボタンがあります。

プレビューボタンをクリックすると

『新しいタブ』が開いて、画面がプレビューに切り替わります。

管理画面と入れ替わったのではなく、管理画面は下に隠れているだけです。

下になっている(暗い色になっている)タブをクリックすると、

管理画面に戻ります。そしてプレビュー画面は下に隠れたままです。

常に、タブに表示されている文字や、アドレスバーのアドレスを見て、ご自分が見ているのが何のページなのかを意識するようにしてください。

必要なタブは開いて、不要なタブは閉じて
タブがいっぱい開くと、だんだんブラウザの動作が重くなりますので、不要なタブは閉じるようにしましょう。
逆に、作業中のタブは、いちいち閉じると面倒なので、開いたまま並行作業ができるようになりましょう。
どのタブが何を開いているのか、意識してみるようにしていくと、慣れてきますよ。

ブログの記事は<body>の中

ネットが不安定になったり、パソコンの電源が切れたり、閉じてしまったりすると、ブログの記事が消えてしまう場合があります。
ですので、長文を書く場合、ブログに直接書いていくよりも、メモ帳に保存しながら書くのはおすすめです。

ただし、メモ帳で作ったhtmlファイルの中身を、ブログの記事欄に直接コピペしてはいけません。

<body>から</body>の間だけを記入。

HTMLの基本構造は、以前もお伝えしました。
第4回『Google Chromeで開く』『ZIPファイルを展開する』

もう一度、画像を貼りますね。

ブログの記事は、『<body>~~</body>』に挟まれた部分です。
ですのでその中の部分だけをコピペするようにしてください。
一番下にある</body></html>も必ず忘れずに消してください。

余計なタグ、間違ったタグが入っていると、ブログの表示が壊れる原因になります。

画像・リンクはそのまま使えない

メモ帳で作ったhtmlの中にある画像リンクタグは、パソコンの中のファイルのアドレスを指定しています。
ブログに画像を掲載する場合、ネット上からあなたのパソコンの中身を見ることができませんので、画像をブログ会社のコンピュータ(サーバ)にアップロード(保存)して、そのアドレスを指定する必要があります。

といっても、難しい事はありません。
ブログは自動で画像をアップロードしてタグを作ってくれるので、画像を入れたいところにタグを入れればOKです。

このようなタグが埋め込まれます。

プレビューして画像が貼られているか確認してください。

保存・公開と非公開

ブログは、プレビューするだけだと、保存されません。
その状態で閉じてしまうと、せっかくの記事が消えてしまいますので、必ず保存してください。

保存はしたいけど後悔したくない場合

まず下書きをして、明日また見直そうといったようなとき、保存はしたいけど、公開して人には見せたくない。と言う場合があると思います。
そのような場合、『非公開』にして保存してください。

Seesaaブログのデザイン変更

ブログは、簡単にデザインの着せ替えができるのが最大の特徴です。
(テキストファイルで一枚一枚作るホームページでは、デザインの着せ替えは本当に大変な作業です)

どんなブログデザインがいいの?

Seesaaブログも様々なデザインがありますが、中には古いHTMLの文法でかかれた、今ではよろしくないデザインのものもあります。
画像をふんだんにつかった豪華なデザインが一見良いように見えますが、ブログデザインはできるだけ新しくシンプルなものを選ぶようにしましょう。

カラムはどの位置がいいの?

おすすめは、右にカラムがあるものです。
両側にカラムがあるものは、少し流行遅れです。

さらに最近のトレンドは、カラムなし(下のフッターと言う部分にメニューを置く)ですが、まだ一般には普及していないので、初心者の方は2カラム右で選んでおくのが良いでしょう。

スマホのデザイン変更

スマホのデザインも変更することが可能です。

まとめ

本日習った内容は以下です

  • 常に『アドレス』を意識しましょう
  • タブ使いに慣れましょう
  • ブログ記事は『BODY』の中のみ
  • デザインを変えてみよう

たくさん習うことがありますが、全部を覚える必要は全くありません。
大切なことは何度も何度も使いますので、そのたびに思い出せば大丈夫。

らせん階段を上るように、繰り返し繰り返し少しずつ上がっていきましょう^^

次回のお知らせ

次回はデザインとブログの使い方をさらに進めていきます。

また次回で、新郷さとの家の授業は最後になります。
11月よりの会場については、受講者さまにお知らせいたします。

ご質問がありましたら、ご遠慮なくお知らせください。

タイトルとURLをコピーしました