2013年3月31日日曜日

メモ bloggerブログのヘッダー欄全面に画像を貼りつける方法


このブログを開設した当初はヘッダー欄全面に地図画像を背景として貼り付けておいたのですが、Googleサイドの仕様が変更になり、なぜかヘッダーに貼りつける画像が自動的に縮小されるようになりました。そのため1年近く中途半端なヘッダーデザインになっていました。WEBでいろいろ調べたのですが、直す方法を見つけるまでに至りませんでした。

以前のこのブログの中途半端なヘッダー画面

最近やっとこの厄介な問題を解決しましたので、参考のためにメモしておきます。
ブログにログインした状態で「デザイン」→「レイアウト」にすすみ、ヘッダー欄の「編集」をクリックします。

bloggerブログのヘッダー欄の編集画面

以前はイメージを「コンピュータからファイル選択」していたのですが、画面下に「画像を巾○○○ピクセルに縮小します。」という文章があるとおり、大きな画像を選択しても、縮小して保存されてしまいました。(参考 WEB画面上で画像のサイズを知る方法)

そこで、「ウェブから(画像のURLを貼り付け)」にしました。

そのためには、ヘッダーの大きさと同じ画像をWEBのどこかに保存し、その画像のURLを取得しておく必要があります。(参考 私のWEB画像を貼り付例)

このような方法により、無事次のようにヘッダー全面に画像を貼り付けることができました。

ヘッダー全面に画像を貼りつけることができたブログ画面

……………………………………………………………………
参考 WEB画面上で画像サイズを知る方法

ブラウザーとしてGoogleChromeを使います。

画面上で右クリックして出てくる「要素を検証」をクリックします。
画面下に別画面が出ますので、「Resources」をクリックし、下の「Frames」の中の「Images」を開くと画像リストが出ます。このリストをクリックすると右にその画像のサイズを含む諸元が表示されます。

GoogleChromeWEB画面上の画像サイズを簡単に知ることができる

……………………………………………………………………
参考 私のWEB画像貼り付け例

私が使っているGoogleサイト(無料サイト)の一つに「新しいページ」つくり、そこにヘッダーに貼り付けたい大きさの画像を貼り付けます(「ページを編集」→「挿入」→「画像」)
貼り付けた画像を画面上で右クリックして、出てくる「画像URLをコピー」をクリックして画像URLを取得しました。

bloggerブログ、Googleサイトを使うようになってからFTPソフトを使うことがなくなりました。

■□花見川流域を歩く■□にほんブログ村■□花見川流域を歩く■□にほんブログ村■□
にほんブログ村 アウトドアブログ ウォーキングへ にほんブログ村 地域生活(街) 関東ブログ 千葉(市)情報へ にほんブログ村 科学ブログ 技術・工学へ

5 件のコメント:

  1. 海老川乱歩です。

    小生は、IEで見ていたので、IEの不具合と思っていました。
    これで見栄えが良くなりましたね。
    クロームで見ると問題ありませんが、IEで見ると、
    「7つの課題と地誌」が縦書きに表示されます。

    返信削除
  2. 海老川乱歩さん
    コメントありがとうございます。
    「7つの課題と地誌」の縦書き表示の指摘ありがとうございます。
    当方のパソコンのIEでは正常なので気がつきませんでした。
    直してみたいと思いますので、もし海老川乱歩さんのパソコンで正常に見えるようになったら教えてください。
    宜しくお願いします。
    Googleの仕様が拡張性で未熟のように感じていますが、無料の故クレームをつけることなく自分で何とかしなければならないところがつらいところです。

    返信削除
  3. 海老川乱歩です。

    不具合の結果がどうなったのか、
    E-Mail にて回答致しました内容を貼り付けます。

    ■海老川乱歩の調査環境

    ●WIN 7 Pro 64bit SP2
     IE10 64bit / IE10 32bit

    ●WIN 7 Pro 32bit SP2
    IE9 32bit

    ●WIN XP Pro 32bit
    IE8 32bit

    で調査した結果、全て再現しました。

    というのも、IE の右下のステータスバーを見れば分かるのですが、

    小生は全て、IE の表示倍率を(字が大きくて見やすいので)135%にしています。

    表示倍率を120%以下にすると正常に表示されました。
    (各自が使用しているモニターのサイズと設定ドット数で多少前後するかも知れません)

    という事で本件は、表示倍率の問題でした。

    返信削除
  4. 海老川乱歩さん
    貴重な情報ありがとうございます。
    メールで情報をいただき、早速右サイドバーに参考情報として掲載させていただきました。
    お礼申し上げます。

    返信削除
  5. このブログをinternet explorerで拡大表示すると生じたページリスト表示の不具合は文字大きさを変更することにより回避できました。お騒がせしました。(20130404)

    返信削除