ヒデ@RKのブログ一覧

前回の続きです^^

＜その２＞はフォトギャラリー・スタイルシート用画像・掲示板などの画像も簡単にサムネイル表示です。みんカラ外のご自身のHPや画像サイト等、web上ならどれでもこいです(笑)

例としてスタイルシート用画像を使いました。
では手順を(^^)/


1.皆さんご存知だと思います。UPしたい画像URLを表示させます。




2.そのまま載せるだけなら、画面上部の『画像』ボタンをクリックすると、『画像のURLを入力して下さい』とURLを入力するタブが現れますので、先程コピーしてきたURLを貼り付けるのですが、ここでポイントが一つ(　・∀・)ｂ
タグの最後部にwidth="200"と追加記述します。
これは前回でも説明した通り、表示させるサムネイルの大きさを表してます。



一度このままで確認画面を開いてみて下さい。画像が小さくなってるでしょ？でもクリックしても大きくなりません。



3.これをスタイルシート用画像とリンクさせる必要があります。なので次は『リンク』ボタンをクリックします。




4.今回のブログに使用したのはスタイルシート用画像なので、ブログ作成画面はそのまましておいて、別ウィンドーでこの画面を開きます。



5.掲載したい画像を選択。選んだ画像が表示されましたか？？表示されたらそのウェブページのアドレスをコピー。画像の矢印の部分です。（IEの場合）



6.アドレスをコピーしたら、再びブログ作成画面に戻ってリンクボタンをクリックした際に出てきた『リンク先のURLを入力して下さい』とURLを入力するタブがありますので、そこに貼り付けます。



7.完成!!手順は以上です。これも超簡単ですね(´▽｀*)ｱﾊﾊ
＜その1＞と同じく、左寄せはalign=left・右寄せはalign=rightと追加記述するだけ。

必ず追加記述しないといけないのはwidth="200"だけです。数値はサムネイルの大きさなので変えてブログに変化を付けるのもアリかと(^^ゞ


この方法だとフォトギャラと違ってブログUP前にネタバレしないメリットがあります（爆）

久しぶりのブログはタイトルの通りの内容です。最近、自身のブログにて活用しています『拡大画像のサムネイル表示』です^^



みんカラメッセージにて問合せがありましたのでブログにUPする事にしました。自分への備忘録にもなりますし(^^ゞ


結果的にブログ内にて掲載した複数の画像を拡大表示せるだけなら、様々な方法があります。
その中で自分が活用している方法を紹介します。自分の場合は基本的にフォトギャラリーにて事前にUPした画像を使用しています。これを使うメリットとしては300KBの画像である事と画像クリックで開いた画像が閉じる事です。

何故画像をサムネイル表示させるのか？ですが、画像が多いブログ内容にすると非常に重くなって掲載した画像全て表示するのに時間が掛かる。PC環境によってはメモリー消費が大きくなってしまう事。掲載した画像を出来るだけ綺麗な状態で表示させたい。等の思いからです。


では、早速手順を。



1.　リンク先のフォトギャラリーを開く。表示タブから『ソース』をクリックします。







2.　OS付属のメモ帳が開きます








3.　フォトギャラで付けた名前を目印に、画像の記述部分を探し出しで画像の赤線の部分からドラックしてコピーします。

『＜a href～』で始まっている部分からコピー。







4.　3で示した赤線の部分から右端の画像の部分までをコピー。


3.で説明した『＜a href～』から『～/＞＜/a＞』までをコピーです。







5.完成　『4』でコピーした記述をそのままブログ内に貼り付けます。位置を指定せずにサムネイル表示させるだけなら、これで完成です。めっちゃ簡単だったでしょ(´▽｀*)ｱﾊﾊ


ブログ作成画面はこんな感じになってると思います。赤線の『A href～/＞＜/a＞』までがサムネイルのタグです。ソースを開いてリンクさせたい画像のタグをコピーしてそのまま貼り付けるだけで完成(^^)v


※赤線は説明用に加工したものです。実際のタグに赤線はありません。



画像を左端にしたり右端にするには引き続き↓の『6』から紹介してますので参考までに♪



=================================================================================



6.まずコピーしてきたサムネイルの記述を貼り付けます。


　






この部分と表示した場所に追加記述しました。左端に表示の場合は『align=left』と記述します。












7.今度は6で説明した『align=left』と追加記述した場所に『align=right』と記述を換えるとブログ内の右端の表示となります。

当然、右端表示の場合の記述はこうなりますね(　・∀・)ｂ










どうですか？複数画像のサムネイル表示は出来ましたでしょうか？？
出来なかったぞ!!て方はメッセージを頂ければ、もう少し詳しく説明できるかと思います(^^ゞ

ちなみに記述内の" width="200"ですが、サムネイル表示させる画像サイズを表していますので数値を変更するとリサイズ可能です。
↓" width="200"の200を400に変更すると、こんな感じに表示されます。








反対に200を50に変更すると…





ちっちゃくなりましたね(　・∀・)ｂ
でも、画像をクリックするとリンク先でUPした画像のサイズまで拡大します。



以上、Let'sスタイルシート弄りでした～♪

最近みんカラを徘徊してて気になってた事が…
ブログに貼ってある複数の画像をクリックしたら、拡大画像に!!(＠_＠;)

通常ブログ内でクリックして拡大画像を張りつけれるのは一枚のハズ。2枚目.3枚目と画像の掲載はできるけど、サイズは小さくしないとUP出来ないし、大きな画像はスタイルシートが崩れますよね。ましてデジイチで撮った写真はファイルサイズが大きいのでドエライ大きな写真になります（汗）

それでも、綺麗に撮れた力作はできるだけノイズの少ない画像で見てもらいたい。
そんな切ない気持ちを解消してくれます(笑)


これはパクるしかない!!是非参考にさせて頂こう♪って事で、自分もやってみました。あーだ、こーだと試行錯誤の末、フォトギャラにUPした画像を使って掲載した画像拡大する事がなんとかできました(；´▽｀A``




拡大表示してないぞ！って方がいましたら修正しますのでコメントお願いします(^_^;)







←画像を左側にするにはalign=left。







　　　　　　　　　　　　　　　　　　当然、右寄せはalign=right。→














掲示板にブログ掲載用としてて画像UPする必要が無いので便利ですね。また、リンク先がフォトギャラなので300kbの画像です(　・∀・)ｂ

ブログ内の天気予報が表示されてません（驚

こんなお知らせがあったんですね…


みんカラ後の洗車に活用してたのに…

夕方からスタイルーシート弄り^^

背景画に自分のレガには付いてませんが、ど真ん中に水平対抗のカタツムリ付きEg画像を持ってきました(^^)/
ようやく納得の行く感じになったんで一先ず保存(´∀｀*)ｳﾌﾌ

手持ち素材が少なかったんで、素材探しと画像編集・合成で気が付けば休憩する事もなく3時間は余裕で経ってます（汗

　　　この集中力が仕事でも発揮できればいいんですけどね～ﾍ(ﾟ∀ﾟﾍ)ｱﾋｬ