ｓんごのブログ一覧

みんカラブログを充実させる会（第１回）の「画像表示サイズの指定」、
コメントやメッセージ、ありがとうございました。
お返事ついでに、第２回を書き上げてみました。

---

「クリックで拡大」についてのネタバラし。

みんカラの「ブログ」や「フォトギャラリー」では、
自分の投稿した画像や写真が画面上に縮小表示されていて、
画像をクリックすると大きいサイズの写真が表示される機能が付いてます。
今回は「この機能を自分で貼った画像にも実装してしまおう」というのが目的です。

さて、前回説明した方法で、「縮小画像」の表示までは出来ていると思います。
ここからは「前回作った『縮小画像』」をクリックするだけで、
「本来の大きさの画像（元画像）」が表示されるようネタを仕込みます。

「リンク機能」は、みんカラの標準機能で提供されている機能なので、
自分のブログから外へのリンクに使用している方も多いと思います。
（手順→リンクさせたい文字列を「グリッ」と囲って、リンクボタンを押し、URLを打ち込み。）
画像の時も考え方は同様で、「画像のタグ」を囲ってリンクを張る手順です。

それじゃ今回の素材を。↓JPEG Image 800px x 600px 96dpi 24bits color

今回は「元画像」と「縮小画像」との違いが
わかりやすいよう「800 x 600」という
ちょっと大きめの画像を用意しました。

左の画像は、用意した素材を前回の手順に従って
横幅：200ピクセルに縮小表示したものです。
（↓のタグの赤文字は縮小のために追記した部分）

【貼り付けに使用したタグ】
<img src='img src='https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/1165037/p1.jpg' border='0' width=200>


では次に、この「縮小画像」からリンクの結びつけを行います。
まずは、「縮小画像」のタグをマウスで「グリッ」っと囲ってください。

<img src='img src='https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/1165037/p1.jpg' border='0' width=200>
このタグ全体を…
　　↓　　↓　　↓
<img src='img src='https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/1165037/p1.jpg' border='0' width=200>
こんな感じで全部囲みます。

タグが囲めたら「リンク」ボタンを押しましょう。※キチンと全部囲まないとタグが壊れますよ～
ダイアログが表示され、リンク先のURLを求められます。

ここで入力したURLが、画像をクリックした際の飛び先になります。
今回は「縮小してない『元画像』」を表示させたいわけですから、
「縮小画像」のタグの中から、元ネタになっている「元画像」のURLを
コピってもらってきましょう。

【ダイアログに貼り付けたURL】
https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/1165037/p1.jpg

ダイアログ入力後「OK」を押すと、組み上がったリンクタグが表示されるハズです。

【出来上がったリンクタグ】
<a href='https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/1165037/p1.jpg' target='_blank'><img src='https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/1165037/p1.jpg' border='0' width=200></a>

このタグを「投稿」や「確認画面」で見てみるとこんな感じになってると思います。↓

どうでしょう？画像にカーソルを乗せると
「人差し指」にカーソルが変わりますか？

変わるのが確認出来たら、
画像をクリックしてみてください。
元の大きさ(800x600)の画像が
画面上に表示されるはずです。

縮小画像からのリンクはコレが基本パターンになります。（あとは画像の数分だけ繰り返し）
どうでしょう？おわかり頂けましたでしょうか？


※リンク先は作り手の考え方次第なので、
　１．フォトギャラリーの１画像そのもの（今回の説明に使用したパターン）
　２．フォトギャラリーの１画像のページ
　３．フォトギャラリーのトップページ
　４．みんカラ以外の外部webスペースの画像
と、色々なパターンがあると思います。
オイラの場合は「クリックで開いて、クリックで閉じる」という
ラクな操作が好きなので、ほとんどの場合「２」を使用してます。

オイラのあらびきなブログを見てくれている皆さん。
いつもどうもありがとうございます。m(_ _)m
皆さんのメッセージ、コメント、足跡なんかが、
ものぐさなオイラをつなぎ止めてくれているといっても過言ではございません。
今年も１年が終わろうとしている訳ですし、ここで何か恩返し出来ることはないか？

そういえば「どうやって作っているの？」なんて聞かれる事が多いんですが、
別に隠す事じゃないし、このへんの情報を公開してみようかな？

というわけで、みんカラ純正の機能だけでは作り出せない、
ブログに「ピリッとひと味加えるスパイス」を公開していこうかと思ってます。
（とは言っても、ボリュームはたいしたこと無いんで、おそらく２～３回で終わってしまうと思いますが…。）

---

さて記念すべき第１回は「ブログへの画像の貼り付け」について。

毎度見てくれている皆さんはご存じかと思いますが、
オイラのブログは写真が山ほど貼ってあります。（重くて申し訳ない…）
写真の数が多くなると雑然とした感じになりがちですが、
並べ方を工夫すると「あら不思議」。結構見栄えが良くなるんですね～♪
今回はこの辺のネタを公開しちゃいます。

ただ貼るだけなら、ブログ記入画面の「画像ボタン」を押して
画像のURLをコピペすれば簡単に貼り付けることができるんですが、
この方法だと、元の画像が原寸のまま表示されるので、
あらかじめ素材を加工しておく必要があるんですね…。コレはいささか面倒くさい。
そこで今回は、表示サイズを強制的に指定するタグをご紹介。

まずは素材画像はこちら。↓JPEG Image 480pixel x 360pixel 96dpi 24bits color

【貼り付けに使用したタグ】
<img src='https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/1193989/p7.jpg' border='0'>

コレは「画像ボタン」を押して、出てきたダイアログにURLを貼っただけ。
今回の素材は運良く画面からはみ出さなかったですね…。
それじゃあ、これがハミったっと仮定して縮小してみましょう。
やり方は簡単。先ほどのタグの最後に「width=表示させたい横幅の数値」を記入するだけ。


【貼り付けに使用したタグ】
<img src='https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/1193989/p7.jpg' border='0' width=240>

先ほどの画像の横幅が480pixelだったので、半分の240pixelにしてみました。
ちなみに今回の「width」のみ指定する方法は、元画像のアスペクト比（縦横の比率）
にあわせて縦幅が決定されるので、画像が崩れません。

あと、「width（横幅）」とは別に、「height（縦幅）」の指定もできます。
個別に大きさを指定することで、アスペクト比を変更するような拡大縮小にも対応できます。


【貼り付けに使用したタグ】
<img src='https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/1193989/p7.jpg' border='0' width=360 height=120>


【貼り付けに使用したタグ】
<img src='https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/1193989/p7.jpg' border='0' width=120 height=240>

まあ、こんな無茶な変形は実際使われないないでしょうけど、
文字スペースとの兼ね合いで微調整したい時なんかは結構使えたりしますよ。

ちなみにオイラがよく使うのが、幅170ピクセルの画像を横に３つ並べる配置。
ポイントは画像のタグ同士を改行せずに半角ペースでつなぐどころ。


【貼り付けに使用したタグ】
<img src='https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/1193989/p7.jpg' border='0' width=170> <img src='https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/1193989/p7.jpg' border='0' width=170> <img src='https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/1193989/p7.jpg' border='0' width=170>

編集画面上ではちょっと不格好ですが、できあがりはイイ感じでしょ？
ちなみに改行ありだと、縦に並びますのでご注意を～（´Д`;）

と、こんな感じで簡単なことしかやってません。
みんカラブログは「１記事に対して１枚の写真」しか貼れませんから、
「あと１，２枚写真があるとイイ感じにレポがまとまるのに…」という状況の時に
知っていると助かる機能ですね。（画像はフォトギャラリーになんぼでもアップできますし♪）

※注意事項
今回の方法は、元画像を縮小して表示しているだけなので、
伝送されるデータ量は大きい画像の時と変わりません。
（一般的なWebでは、縮小版の画像はサムネイル用として別に小さな画像を持っています）
ですから、調子に乗ってたくさん貼りすぎるとページが重くなります。
ご利用は計画的に～。(^-^)v