第11回『PDFファイルの作り方』『ブログに画像を貼る』

『ホームページとブログの教室』第11回は、『Seesaaブログへのリンク・画像の貼り方』です。
エクセル等をそのままネットにアップロードできる『PDF』についても学びました。

エクセルやワードをそのまま変換できるPDF

『毎日のように更新するお知らせを、HTMLの知識がなくても一番簡単にホームページにアップするひとつの方法』として、『PDF』のご説明をいたしました。

『PDF』は、Office文書(ワードやエクセルなど)で作成したファイルを変換して、インターネットでそのまま公開、印刷やダウンロードもできるファイル形式です。

講座では以下のことを行いました。

  • PDFとは何か
  • エクセルを使ってのPDF作成
  • ダウンロード
  • PDFを見るためのソフト(Acrobat Reader)の確認とインストールを行いました。

Seesaaブログへのログイン

前回作成した練習用ブログアカウント、Seesaaブログへのログインをしました。

Seesaaブログ記事の編集

PDFファイルの貼りつけ

ダウンロードページからPDFファイルをダウンロード、そのファイルをSeesaaブログの記事内にリンクとして貼り付けました。

画像の貼り付け

同様にSeesaaブログの記事内に画像をアップロードして貼り付ける方法をご説明しました。

※PDFも、画像の張り付け方と同じです。ただし、PDFの場合は画像のようにサムネイル(小さな見本画像)が出ず、ノートのようなアイコンが表示されます。

タグの見分け

画像を複数貼ると、だんだんタグでいっぱいになってきます。

いままで<a href>タグや、<img>タグを習ってきましたので、どこからどこまでが画像を貼り付けるタグかはだいぶ分かってきたのではないでしょうか?

タグの意味がわかりますか?

どれかわからなくなった場合、改行をいれたりして、タグを見やすくしましょう。

タグがわかれば、消したり、コピペで場所を変えることが自由にできるようになります。

ご質問コーナー

ページの下の方を見ると、シュットとに行ってしまう

『ホームページを閲覧中、マウスをクリックして下のページを見ようとすると、何かのタイミングでシューっと上に行ってしまう』というご質問をいただきました。

原因は、『上に戻る』ボタンを押してしまっていたことでした。

多くのホームページは、記事が長い場合、右下などに ▲ のような『上に戻る』ボタンが自動で表示されます。
ブラウザの右側に出る、スクロールバーを押しているつもりが、『上に戻る』ボタンを押してしまったり、またブラウザが古い・画面が狭いなどの理由でボタンが重なってしまっていて押してしまうと、その結果、シューっと上に戻ってしまいます。

これを防ぐには、ページの下の方を見るために、マウスのスクロールボタン(下図)をご利用いただくことをおすすめします。

ホームページは見ているパソコン等によって見栄えが違う場合があります

パソコンには様々な画面サイズがあり、それぞれの方が使っているブラウザも様々です。またタブレットやスマホでご覧になっている方もいます。
ホームページはサイズやパソコンにインストールされているフォントなどによって表示が流動的に異なります。

作成する側からすると、すべてのサイズやブラウザでの表示の確認をすることはほぼ不可能です。
(プロでも、全ての環境をそろえることは困難です。)

ですので、一般的に良く使われている、標準的な表示に合わせて作るしかありません。

全て同じ見栄えにはできない、また古いブラウザ、小さな画面のパソコンなどを使うと表示は崩れる場合があるということを頭に入れておいてください。

改行タグはいらないの?

HTMLを学習するときにつかった<br>タグや<p>タグは、Seesaaなどのブログでは自動的に挿入されるようになっています。
ですので、普通にワープロを打つように改行すればよいので、あえて<br>タグを入れる必要はありません。

次回以降、どのようになっているか確認します。

広告の削除

Seesaaブログはパソコン表示のみですが、運営側の広告を消すことが可能です。
サイドバーにある広告の消し方をお教えしました。

また他の部分の広告の消し方については次回やる予定です。

まとめ

ブログも奥が深いので、いろいろいじっているとすぐに時間が経ってしまいますね。
今回は『PDF』と『画像』を記事にはることだけできれば目的達成です。

HTMLタグを練習してきたので、タグが意味不明の文字の羅列ではなくなってきたと思います。
まずは自分の表示したい場所に画像やリンクを貼れるようになりましょう。

次回の予定

Seesaaブログの設定をさらに深めていきます。他のブログを使う際も、同じような機能があることが多いので役に立つはずです。

また、スタイルシート(CSS)というデザインの変更を出来る部分を少しさわってみる予定です。

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