« 170214 山行記録:2/12 京都北山「大悲山から峰定寺」 関西ハイク山友会№1049例会 | トップページ | 170216 灘五郷SAKEプラザと夕焼け空 »

2017.02.15

170215 Googleフォトの写真アルバムのリンク方法

【1枚ずつリンクを貼る方法】
 ブログに写真を掲載する方法としては写真を1枚ずつ指定してリンクを貼る方法が一般的ですが、掲載したい写真が何枚もあると1枚ずつ何度もリンクを指定するのはかなり手間がかかりますし、限られたブログの表示画面に大きなスペースを取ってしまいます。

 <a href="http://morii3.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/2017/02/15/170212_taihisan_bujyoji_21.jpg"> <img alt="170212_taihisan_bujyoji_21" title="170212_taihisan_bujyoji_21" src="http://morii3.cocolog-nifty.com/sanpo/images/2017/02/15/170212_taihisan_bujyoji_21.jpg" width="649" height="369" border="0" align="left" hspace="5"/> </a>

 HTMLのコマンドをご存じない方には何のことか理解していただけませんが、簡単に書くと
 1.<a href="http://morii3.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/2017/02/15/170212_taihisan_bujyoji_21.jpg"> → 表示したい写真 XXX.JPG のリンクアドレス
 2.<img alt="170212_taihisan_bujyoji_21" title="170212_taihisan_bujyoji_21" src="http://morii3.cocolog-nifty.com/sanpo/images/2017/02/15/170212_taihisan_bujyoji_21.jpg" width="649" height="369" border="0" align="left" hspace="5"/>  → 1の写真へのリンクを指定するブログ上での縮小画像イメージ
の二つのコマンドで出来ています。
 このコマンドを組み合わせると以下のような表示になります。
 170212_taihisan_bujyoji_21

【アルバムとしてたくさんの写真にリンクを貼る方法】
 1枚ずつでは手間もスペースも大変なので、外部の写真アルバム登録サービス、たとえば Googleフォトなどを使うと、そのサービスに複数枚の写真をまとめて登録し、それらの写真グループ(アルバム)に一つのアドレスが登録されるので、ブログの方ではそのアルバムへのリンクを貼るだけで済みます。
 その場合の表示は
 <a href="https://goo.gl/photos/JibGvozHGMGbb4Le8"> JibGvozHGMGbb4Le8</a>
といった形のコマンドになります。  
 Googleフォトの場合、ブログの画面には「JibGvozHGMGbb4Le8」が赤文字のアンダーライン文字列が表示されるだけなので、リンクに飛ぶにはこの赤文字をダブルクリックします。
 Googleが以前サービス提供していたPicasaWEBだと画面には小さな写真が表示されて、この写真をダブルクリックすると別窓でリンク先のアルバムが見られるようになっていましたが、現在のGoogleフォトではリンクアドレスの文字列だけで全く面白味がありません。
 画面表示はこんな感じです。
 JibGvozHGMGbb4Le8

【Googleフォトのアルバムへのリンクを改善】
 このような無愛想な表示では無く、以前のPicasaWEBのように、小さな写真を表示させる方法が無いか、と考えてネットで検索すると、判ってしまえば簡単なことで、写真の個別リンク同様に、<img alt=・・・という画面表示のコマンドを貼り付けるだけ、と判りました。

 そこでアルバムへのリンクを以下のように変更すると、ブログ画面にリンク付きの写真が表示できるようになりました。
 コマンドはこのような感じになります。
 <a href="https://goo.gl/photos/JibGvozHGMGbb4Le8"> <img alt="170212_taihisan_bujyoji_25_2" title="170212_taihisan_bujyoji_25_2" src="http://morii3.cocolog-nifty.com/sanpo/images/2017/02/15/170212_taihisan_bujyoji_25_2.jpg" width="185" height="325" border="0" align="left" hspace="5"/> </a>

 リンクを指定する写真の大きさは < img alt=・・・ の中のwidth="185" height="325"の部分を横/縦 同じ割合で数値を変えるだけなので、気に入った大きさに自由に指定できます。
 めでたし、メデタシです。
 画面表示はこのようになります。

170212_taihisan_bujyoji_25_2 【写真】
 Googleフォトの写真アルバムです。
 今回から写真アルバムに歩行軌跡図、断面図も追加しました。
 左の写真をクリックすると写真アルバムが別窓で開きます。

 最初は与えられたブログのサービスメニューだけを使ってブログを書いていましたが、十三年もやっていると次第にコマンドの意味が分かってきて、なかなか面白くなってきました。
 出来れば過去のブログ記事も修正したいところですが、自分以外には過去の記事をご覧になる方は滅多におられませんから、気が向いたら少しずつ過去の記事を修正していくようにします。

Posted on 2月 15, 2017 at 10:50 午後 |

コメント

コメントを書く