2012年3月2日金曜日

Bloggerで400px以上の大きさの画像をぼけないように表示する

Bloggerの投稿画面で記事内に画像をアップロードすると 画像が大きい際は自動的に縮小が掛かってしまうようです。 どうやらその大きさの閾値は縦横共最大幅が400pxでもあるようです。 また自動的にリンクが設定されて記事内の画像をクリックすると 元の大きさの画像が表示されるようになってもいるようです。

前回の投稿(Bloggerを再開して新ブログからくり手帖を開始してみる)ではそれを嫌ってHTMLタグを直接書き換えました。画像を投稿すると以下のようなHTMLソースが生成されますから前後のリンクタグを外し、CSSスタイルの幅と高さを元の数値に置き換えたのです。

<a href="http://3.bp.blogspot.com/-bwGrUj0xefE/T0-ls9I2-xI/AAAAAAAAAMo/oROO2LxUy6Q/s1600/restart_blogger4.120302.gif"><img style="width: 400px; height: 346px;" src="http://3.bp.blogspot.com/-bwGrUj0xefE/T0-ls9I2-xI/AAAAAAAAAMo/oROO2LxUy6Q/s400/restart_blogger4.120302.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5714968643900996370" /></a>

具体的には上のソースを下のソースのように書き換えました。

<img style="width: 430px; height: 300px;" src="http://3.bp.blogspot.com/-bwGrUj0xefE/T0-ls9I2-xI/AAAAAAAAAMo/oROO2LxUy6Q/s400/restart_blogger4.120302.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5714968643900996370" />

しかしこの方法では縮小された画像を無理矢理引き伸ばしていることになりますから必然的に画像はぼけて眠いものになってしまいます。この方法でいくならば画像のソースリンクも換える必要があったわけです。リンクタグ内のソースリンクをイメージタグ内のソースリンクと置き換えたものが以下になります。

<img style="width: 430px; height: 300px;" src="http://3.bp.blogspot.com/-bwGrUj0xefE/T0-ls9I2-xI/AAAAAAAAAMo/oROO2LxUy6Q/s1600/restart_blogger4.120302.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5714968643900996370" />

どうやらソースリンクのパスの途中、s400をs1600と書き換えればいいようです。

この方法で前回の投稿の画像表示を差し替えた記事が以下になります。

最近Bloggerが大変使い勝手がよくなっていると聞いてどれほどよくなっているのか確かめたくなりました。数年前にひとつ拵えたきりですけれどもそれとは別に今回改めて新規にブログを公開してみようと思います。

最初のお題は今やろうとしているそのもの、Bloggerでのブログの新規作成方法にしてみます。

Googleでアカウントを持っていればBloggerは直ぐに開始出来るのが良い処ですね。下の図はGmailに於いて上のメニューのもっと見るをプルダウンしてみた場面です。確りBloggerもメニューに入ってくれていますので選択します。

するとBloggerダッシュボードという管理画面に遷移します。下の図がそれです。以前拵えたブログが確り残されています。

右上にあるブログを作成リンクをクリックすると愈々ブログ作成開始です。先ずは名前とURLを決める作業です。その画面が下です。

名前はからくり手帖としました。URLはbloggerで与えられるドメインであるblogspot.comの前の所謂ホスト名に当たる部分です。ブログ名に合わせてkarakuriとして念のため、使用状況をチェックリンクをクリックしたらこのブログアドレスは使用できませんと表示されてしまいました。一般的過ぎたようです。

手帖の部分を補ってkarakuribookとしたら緑の矢印で示すようにこのブログアドレスは使用できますと了承されたので認証キャプチャを入力して次へ矢印をクリックします。そして表示されたのが下のテンプレート選択画面です。

最初のテンプレートを選択しますのように最初とありますから、後で変更が可能な訳で、カスタマイズの容易だろう右下のシンプルを選択しました。そしてまた次へ矢印をクリックすると下の図の様にブログが作成されました画面に遷移します。これで新たなブログが作成されたことになります。今やどのブログシステムでもブログ作成はとても簡単です。新規ブログを作成するとき一番大変なのはブログ名を決めることになると言っても良いかも知れません。

上の画面でブログを開始するアイコンをクリックします。 すると下の図の様なブログ記事投稿画面に遷移します。既に名前は先ほど決めたばかりのからくり手帖が使われています。

本記事はこの投稿画面に向かって書き始めたものです。

確り元画像と同じ表示となってくれたことで閲覧者の皆さんに眠い画像をお見せしなくて済みそうです。

0 件のコメント:

コメントを投稿