« 第26回:サイドバーに「アクセス解析ツール」を設置してみよう | トップページ | カスタマイズ・サンプル<No.1:sugar cube> »

2006/04/15

基本3:記事欄への画像の挿入

「IMG(イメージ)ボタン」を使った記事欄への画像挿入方法を説明します。

  1. 「記事の作成」画面「本文」中の任意の場所にカーソルを置いて、「IMG(イメージ)ボタン」(画像の挿入) をクリックする
  2. 「画像の挿入」ウィンドウが別に表示される。
  3. <1.画像の選択>で挿入する画像を選択する。
  4. <2.画像オプション>で【カスタム設定】を選択する。
  5. 設定項目が表示されるので、自分が表示したいように各項目を設定する。
    ※設定の詳細については下記を参照して下さい。
  6. 画像の挿入ボタンを押す

5.の各設定項目の詳細は下記のようになります。

  • 《テキストの回り込み》
    画像の後に書いたテキスト(文字列)がどの位置に来るかを制御します。

    ■「画像を左に」
    →左端に画像、その右余白にテキストが表示されます。
    ■「画像を右に」
    →左側がテキスト、右端に画像が表示されます。
    ■「回り込み指定なし」(チェックを外す)
    →画像の横の余白にはテキストは表示されません。
  • 《サムネイルの作成》
    画像を縮小表示します。
    幅をピクセル、またはパーセントで指定すると元画像と同じ縦横比で縦も縮小された画像が記事上には表示されます。
    これを選択すると自動的に元画像へのリンクが張られ、記事上ではこの縮小画像をクリックすることで元画像が開く設定となります。
  • 《ポップアップウィンドウ》
    画像、または文字列をクリックすると元画像をポップアップ画面で表示します。

元画像の大きさと《サムネイルの作成》、《ポップアップウィンドウ》のON(チェックあり)、 OFF(チェックなし)の組み合わせによって投稿記事への画像表示状態が変わってきます。
それぞれの組み合わせ時の表示状態について表にまとめましたので参考にして下さい。

【A.元画像の大きさ(幅)が記事表示欄よりも小さい場合】

No

サムネイルの作成

ポップアップウィンドウ 画像の表示状態
1

ON

ON

サムネイルで指定した大きさの画像が挿入されポップアップへのリンクが張られる
→画像をクリックすると原寸の写真がポップアップで表示される
2

OFF

ON

画像は表示されず「この写真を見る」の文字とポップアップへのリンクが貼られる
→リンクをクリックすると原寸の写真がポップアップで表示される
3

ON

OFF

サムネイルで指定した大きさの画像が挿入されポップアップへのリンクが張られる
→画像をクリックすると原寸の写真がポップアップで表示される
4

OFF

OFF

画像が記事中にのみ原寸で表示される
※ リンクはなし

【B.元画像の大きさ(幅)が記事表示欄よりも大きい場合】

No

サムネイルの作成

ポップアップウィンドウ 画像の表示状態
1

ON

ON

サムネイルで指定した大きさの画像が挿入されポップアップへのリンクが張られる
→画像をクリックすると原寸の写真がポップアップで表示される
2

OFF

ON

画像は表示されず「この写真を見る」の文字とポップアップへのリンクが貼られる
→リンクをクリックすると原寸の写真がポップアップで表示される
3

ON

OFF

サムネイルで指定した大きさの画像が挿入されポップアップへのリンクが張られる
→画像をクリックすると原寸の写真がポップアップで表示される
4

OFF

OFF

自動的に記事欄の幅に合うように縮小された画像が挿入されポップアップへのリンクが張られる
→画像をクリックすると原寸の写真がポップアップで表示される

上記より、「IMG(イメージ)ボタン」(画像の挿入)を使った場合、ポップアップなしで画像を挿入出来るのは

  • 画像が記事欄の幅よりも小さい
  • 「サムネイルの作成」、「ポップアップウィンドウ」 の設定がどちらもOFFになっている

の条件のときのみとなります。
※ HTMLタグを自分で成形すれば可能ですがここでは説明しません。
※ご自分で下記のページなどを参考にご確認下さい。
「TAG index」 様内 『HTMLタグリスト/イメージタグ』

ココログ公式ヘルプ「使い方ガイド」内の下記のページも参照して下さい。
3: ブログへの画像/ファイルのアップロード


*この記事にコメントを書く*

|

« 第26回:サイドバーに「アクセス解析ツール」を設置してみよう | トップページ | カスタマイズ・サンプル<No.1:sugar cube> »

基本」カテゴリの記事

カスタマイズ」カテゴリの記事

エントリー部分」カテゴリの記事

画像処理」カテゴリの記事

ウェブログ・ココログ関連」カテゴリの記事

コメント

はじめまして。
大変参考になりましたが、小生の使っているココログフリーでは、

><2.画像オプション>で【カスタム設定】を選択する。

の画像オプションが表示されないのですが、どこか、設定が
おかしいのでしょうか?

おわかりでしたら、ご教示ください。

投稿: miyatan | 2015/03/25 21:47

■miyatanさん

こんにちは。管理人です。
記事の閲覧とコメントありがとうございます。

なにしろ大昔(10年近く前)に書いた記事で、その後修正もしていないので現状のココログの仕様とはかなり違っています。
申し訳ありません。

「画像の挿入」をクリックすると別窓が表示されるのは以前と同じですが、現在は<画像オプション>などの表記はなくなりました。
ただ、設定項目は(まったく同じというわけではありませんが)残っています。
※表示された別窓内「キャンセル」「画像の挿入」ボタンが並んでいる下のグレーの部分です。
ここで希望の内容に設定して「画像の挿入」ボタンを押せばOKです。

試してみてください。

投稿: tako | 2015/03/25 22:22

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/2654/1413337

この記事へのトラックバック一覧です: 基本3:記事欄への画像の挿入:

« 第26回:サイドバーに「アクセス解析ツール」を設置してみよう | トップページ | カスタマイズ・サンプル<No.1:sugar cube> »