忍者ブログ

2010年8月 再起動。

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。


皆で日記を更新して、本ブログも賑わってきました。
折角なので僕が画像を記事に載せる時のアップロード手順を紹介したいと思います。

(記事上で自動的に縮小しサムネイル化してくれます)


 


*=*=*=*=*=*=*=*=*=*=*=*=*

①画像のアップロード
記事を書く前に、管理ページ内の[ファイルのアップロード]を選択し、ファイルをアップロードする
※ブラウザのタブで記事を書いてるのとは別に管理画面を開いてアップロードしてもよい。

1.JPG

上記の画面で[参照]を選択し、アップロードしたい画像を選択してサーバに保存します。

2.JPG

↑アップロードが完了すると上記のようなイメージになります。


②日記で画像を選択する
次に編集中の記事に先程アップロードした画像を掲載します。

3.JPG

記事編集画面の[イメージ]アイコンをクリックします。
(上記画像の赤枠で囲まれたボタンです)

イメージプロパティダイアログが表示されたら、
[イメージ情報]タブ⇒[サーバーブラウザー]ボタンをクリックします。

4.JPG

アップロードされたファイル一覧が表示されるので、掲載したいファイルの[このファイルを使う]をクリックして選択して下さい。

代替テキストで入力するとここにメッセージが表示されます

選択すると、プレビューに選択した画像が表示されます。
※代替テキストはマウスカーソルが画像の上に載っている時に表示されるコメントメッセージ。

上記画像の[OK]を押下すると、記事に画像が挿入されます。


③ずれを修正する
このままの状態ですと、下図のように記事に掲載された画像ファイルが、記事テキストの横に表示されていまい、ずれが発生してしまいます。
※テキストを画像の下に来るまで改行してもよいですが、ブラウザ(FireFox等)によっては改行がずらーっと表示されてしまいます。

7.JPG

なので、上記画面赤枠で囲んである、ソースをクリックし、Htmlタグを表示します。
※実際の記事内容をhtmlで表示する機能です

<br />
<a href="http://blog.cnobi.jp/v1/blog/user/64ec0058410a6d56d421c81989cfe94b/1333678110" target="_blank"><img alt="8.JPG" src="http://blog.cnobi.jp/v1/blog/user/64ec0058410a6d56d421c81989cfe94b/1333678110?w=292&h=179" style="float: left; border-width: 0px; border-style: solid; width: 292px; height: 179px;" /></a>

表示されたソースで、画像を掲載した部分までスクロールすると、上記のようなhtmlタグで作成されたソースがあると思います。そしたらleft;という文字列を削除して下さい。

再びソースボタンを押下すれば、完成です

細かく手順を記載したつもりなので、長く感じるかもしれませんが、実際はそんな手間じゃないので是非試してみて下さい。ピッ ポッ ホイッ って感じです

PR

◎ Post your Comment
Name
Title
E-mail
URL
Comment
Pass   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
◎ 無題

そんな方法があったのか!さんきゅー!

M@RS 2012/04/06(Friday)19:49:05 Edit
◎ カウンター
◎ カレンダー
09 2024/10 11
S M T W T F S
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
◎ 画像ランダム表示
◎ 最新コメント
[03/06 ちーえむ]
[08/22 MARS]
[08/22 アカマツ]
[08/19 アカマツ]
[08/15 アカマツ]
◎ ツイッター
◎ アクセス解析
◎ バーコード
Script: Ninja Blog 
Design by: タイムカプセル
忍者ブログ 
[PR]