画像を貼ってみよう!②/無料ブログ作成マニュアル

無料ブログ作成マニュアル

Google
 

◆スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

役に立ったと思っていただけたらポチッと応援お願いします。
FC2 Blog Ranking

◆画像を貼ってみよう!②

画像を貼る時は、まずその画像をブログサーバー内にアップロードしておく必要があります。

◆画像の貼り方

記事を書いている際に、ツールバーの画像の挿入を押すと、ファイルアップロードのページが別窓で開きます。

ファイルの選別

ページに上のアップローダーがありますので、参照でアップしたい画像を選択し、ファイルのタイトル(alt属性。画像にマウスのポインタを持っていくと表示される文字で、音声ブラウザなどでは目の不自由な方に画像の情報を教えてくれます。これは半角英数字じゃなくても大丈夫。)を決めて、アップロードを押します。

するとページの下にアップされた画像の縮小が表示されます。

画像の縮小表示

WEB上ではファイルの名前は半角英数字しか認識されません。
ファイルの名前(画像はFC2で使えるものなら拡張子がjpg(jpeg)、gif、pngのファイル)が半角英数字ではなかったら、「修正」で直してください。
また、同じ名前のファイルは重複できません。
ホームページ用のフォルダを作っておいた方がいいのはこの為でもあります。

そして「記事を書く」を選択すると、本文の一番下に画像を表示させるタグが表記されます。

<a href="画像のURL" target="_blank"><img src="画像のURL" alt="画像のタイトル" border="0"></a><br clear="all">

プレビューで確認してみましょう。

◆サムネイルと元画像

記事に画像を貼る時に選択する「サムネイルを使用」と「元画像を使用」の違いは、表示させる大きさの違いです。

■サムネイル
猫の親子

小さく表示させて、クリックすると実際の大きさの画像があるページに行けるというものです。
画像のファイルが重くて表示に時間がかかる場合やサイズが大きすぎて表示しきれない場合などに使います。
記事の幅より大きな画像は、表示させると横のメニューが下に落ちます。
気をつけましょう。
かく言う当サイトも800×600だとちょっとやばいです。横に広げれば大丈夫なんですが……

■元の画像
猫の親子

こちらは大きさは実際の画像サイズと同じ。
ただ、画像を使用していてその画像のページにいくリンクって意味が無いですよね?
上の画像をクリックしてみてください。なんだ?と感じると思います。
リンクを外しておきたい場合は、

<a href="画像のURL" target="_blank"><img src="画像のURL" alt="画像のタイトル" border="0"></a><br clear="all">

上記画像タグの赤い部分を消去すればリンクは消えます。

猫の親子
画像は空に咲く花さんの写真素材を使わせていただきました。

<img src="画像ファイルのURL" alt="画像のタイトル" border="0">

これが画像を表示するタグです。
ちなみに border="0" は、画像の周囲の枠線の太さ。0は枠線なし。
<br clear="all"> は改行のタグで、Enterでの改行で代用できますからこれは消しちゃってもいいです。
横に画像を並べたい時は <br clear="all"> を消して、改行せずに画像のタグを置けば出来ます。

役に立ったと思っていただけたらポチッと応援お願いします。
FC2 Blog Ranking

トラックバック
この記事のトラックバックURL
http://hpmanual.blog81.fc2.com/tb.php/11-45b67bc3
この記事へのトラックバック

Copyright 無料ブログ作成マニュアル 簡単FC2入門 All rights reserved.
Template by 無料ホームページ作成講座ブログ
アクセスアップは相互リンクで 相互リンクドクター!アクセスアップ ホームページ登録(サーチエンジン登録) ホームページ作成 ランキング ページビューランキング 幸福の羅針盤ランキングに参加してね
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。