最新情報

  • 2019/10/15
    ブログを更新しました。
    2018/04/30
    冷やし中華...じゃなかった、Twitterはじめました。

このサイトに関して



当サイトご利用上の注意

  • 記事へのリンクはご自由になさって結構です。
    但し、画像等、記事内のコンテンツの無断転載、画像への直接リンクによるまとめサイト等他サイトへの転載は固くお断りします。

    2019/04/14現在、コメント欄の認証方法やNGワード設定等、時々変更しています。メールアドレスの入力が求められる場合、とりあえずメールアドレスの形をしていれば(@の前は適当でも)OKです。

    上記に関し、詳しくは下記バナーから「当サイトについて」をお読み下さい。



    このブログの趣旨など。コメント欄はゲストブックとしてご利用下さい。


    記事についてご不明な点などはメールでは回答しかねますので、各記事のコメント欄にお願いします。




特設コーナー

  • Banner_kanan_fund


















外部サイト(その他)

  • 台湾の名前で東京オリンピック参加を!署名活動


    憲法改正を実現する1,000万人ネットワーク 美しい日本の憲法をつくる国民の会









管理人ポータル

大師小同窓会関連












  • 画像を提供、あるいはオリジナル写真を貸して下さる方は管理人までご連絡ください。


我が町!大師の情報

  • 大師の歴史・町名の由来

各種ノウハウ集



私家版スクラップブック

  • ブログ主の個人的スクラップブック集です。

    100円ショップの木箱やディスプレイケースなどを利用したドールハウスのまとめページです。

    メンテナンス中のため一時アクセスを制限しています。

友達の輪・お薦めSHOP

  • CHITIのボディデザイン
    魅せるボディデザイン/カラダ作りの本質とは!?
    川崎市在住のインストラクターが近隣のスポーツ施設や公園・ご自宅でのパーソナルトレーニング受け付けます。




    かわさき楽大師

    ファッション・雑貨の店 「+R」

    ヘアーサロンE'(イーダッシュ)


« 【ドールハウス工作】 No.49 100円ショップのコレクションボックスで“球春到来!” | トップページ | 【WBC2013】スカパー!オンデマンド/J SPORTS LIVE+オンデマンド(ライブストリーミング開始) »

2013/02/28

【ブログの楽しみ方】バナー画像のサイズを微調整する【ココログ】

この記事の目的

この記事は、HTMLタグの知識があまりない方でも『HTMLの編集』で簡単なタグの編集ができるように説明するものです。前提として、このブログのカテゴリ『cocologの楽しみ方』の過去記事を理解しているものとします。

 

バナー画像のアップロード

以下に公式FAQを提示します。

  1. ファイルマネージャーでファイルを管理する方法を教えてください
  2. バナー画像によるリンクをブログのサイドバーに表示する方法を教えてください

1はファイルマネージャーにファイルをアップロード方法で、バナー画像をアップロードする場合に参考になります。2はバナー画像を「メモ」タイプの「マイリスト」を使用してサイドバーに表示する方法を説明しています。

画像のアップロード方法については、あまりお薦めはしませんが、ダミーのブログ記事やwebページを使用して行うこともできるので下に示します。

新規記事を作成し、通常の方法でバナー画像をココログ上にアップロードします。この時、「ページに表示する画像サイズ」は「アップロードした画像をそのまま表示する」を指定します。

Img03

記事に貼り付けた画像をバナーとして使用する方法は『【ブログの楽しみ方】リンク先を別タブまたは別ウィンドウで開かせるには?【ココログ】』の「画像にリンクを貼る」で既に説明したので省略します。

この方法で画像をココログにアップロードした後でこの記事を削除しても、画像が削除されるわけではありません。

あまりお薦めできないと書いたのは、記事を使って画像をアップロードすると、ブログに掲載した画像が混在ししてしまい、この画像を差し替えるのが面倒(「マイフォト」の「ブログにアップロードした画像」は一覧性が低い)なためです。

「ファイルマネージャー」を使用すれば、自分で、例えばバナー用のフォルダやアイコン用のフォルダなどを自由に作成できるので管理しやすく、既存のファイルと同じ名前でアップロードしようとすると一度警告が出てファイルの差し替え(上書き)が可能だからです。

 

画像サイズの微調整

下は「アップロードした画像をそのまま表示する」でバナーをこの記事に貼り付けたものですが、

Banner_hallo

この部分のHTMLタグを見てみると、下のようになっています。

<img border="0" alt="Banner_hallo" title="Banner_hallo" src="http://daishi100.cocolog-nifty.com/photos/uncategorized/2013/02/28/banner_hallo.png" />

 

■ブログ記事と画像は別々に存在する

「src="~"」という記述がありますが、これは画像名を指定するものです。ここで理解する必要があるのはブログ記事に画像を貼り付けても、あくまでも「banner_hallo.png」という画像自体は背景色を付けた「http://daishi100.cocolog-nifty.com/photos/uncategorized/2013/02/28/」という場所にあるということです。(この背景色の部分を「パス」(path)と呼びます。つまり、画像に辿り着くための道筋です。)

「src="~"」タグによってその記事に画像が表示されているだけなので、記事を削除してもアップロードした画像が削除されるわけではありません。

<img>タグ内のその他の要素を簡単に説明すると、「border」は画像の周囲に表示する境界線の太さで、「0」(ゼロ)なので、境界線は表示されません。「alt」は代替文字で、画像を誤って削除した場合などで表示する画像が存在しないときに画像の代わりに表示される文字です。「title」は画像の上にマウスを置いたときに表示される文字です。(下図参照)

Img04

 

■画像の表示上のサイズを変更する

ブログ上に画像をアップロードする際、画像の横幅を指定することができますが、例えば「220ピクセル」とした場合、『HTMLの編集』で見ると「 width="220" height="272"」のように記述されています。これは、横幅(width)を220にしたために、縦横比を維持するために高さ(height)が自動的に272に設定されたためです。

バナーをサイドバーに表示する場合、予め適切なサイズに縮小しておく方がいいのですが、実際にサイドバーに表示してから他のバナーとのバランスで、サイズを微調整したくなるケースがあります。

その時は、この横幅と高さの数字を変更するのですが、横幅と高さは片方だけを指定することが可能で、例えば横幅だけを指定すると、縦横比を崩さないように自動的に高さを調節してくれます。

「ご挨拶&ゲストブック」のバナーは実際は「192px × 58px」のサイズなのですが、例えば横幅を150ピクセルに変更する場合は、「width="150"」という記述を手入力で追加します。

<img width="150" border="0" alt="Banner_hallo" title="Banner_hallo" src="http://daishi100.cocolog-nifty.com/photos/uncategorized/2013/02/28/banner_hallo.png" />

Banner_hallo

高さを指定していないにもかかわらず、自動的に高さも変わっていることが分かります。

 

実際のサイズより拡大すると画質が落ちるので避けた方がよいのですが、少しだけ縮小したい場合、「width」と「height」を知っておくと便利です。

  

■マイリスト(「メモ」)の使い方補足

マイリストには項目を複数作成できますが、項目を複数作成すると新しく作成したものが上に表示され、順序を変えられないのがやや使いづらい点です。

下の画像は、この記事を書いている時点での「このサイトに関して」というマイリストの一部を切り取ったものですが、「ご訪問ありがとうございます。...」と書かれている画像は単純に画像を表示しただけ、「ご挨拶&ゲストブック」と書かれた画像はバナーとしてリンクを貼っています。

Img02

このマイリストでは、一つの項目だけを使っており、実際の記述は下のようになっています。

<img src="http://daishi100.cocolog-nifty.com/buhin/hallo.png" border="0"  width="200" >
<br /><br />

<a href="http://daishi100.cocolog-nifty.com/blog/hallo.html"><img src="http://daishi100.cocolog-nifty.com/banner_hallo.png" /></a>
<br /><br />

色を付けた部分はここまでに既に説明したので省略しますが、要素と要素の間の行を開けるためには、改行タグ「<br />」を使用しています。

「メモ」では、キーボードの改行キー(Enterキー」で見た目に改行しただけでは改行されないので、明示的に改行タグを記述する必要があります。

このテクニックを使えば、複数要素を一つの「項目」内に記述することが可能です。

 

web拍手 by FC2

(拍手はブログ主のモチベーション維持程度の目的です。面白かった、役に立った、等々、宜しければクリックしてください。)

« 【ドールハウス工作】 No.49 100円ショップのコレクションボックスで“球春到来!” | トップページ | 【WBC2013】スカパー!オンデマンド/J SPORTS LIVE+オンデマンド(ライブストリーミング開始) »

コメント

コメントを書く

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

« 【ドールハウス工作】 No.49 100円ショップのコレクションボックスで“球春到来!” | トップページ | 【WBC2013】スカパー!オンデマンド/J SPORTS LIVE+オンデマンド(ライブストリーミング開始) »

counter since 2018/12/25

  • Flag Counter

    FLAG Counterのロゴをクリックすると、更に詳しい分析結果が表示されます。
    ココログのアクセス解析よりは少ない数字になるようです。
サイト内検索
ココログ最強検索 by 暴想
2019年11月
          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

sponsored link


ドールハウス工作おすすめ参考図書

ドールハウス工作おすすめアイテム(材料・工具)

カテゴリー

無料ブログはココログ