2016年6月25日土曜日

アンカー・リンクでブログに索引をつける

このエントリーをはてなブックマークに追加 Evernoteにクリップ
blog

今回はアンカーリンク(ページ内ジャンプ)についての備忘録です。参考にしたのは、How to create anchor links in wordpress & Blogger – Jump links (wordpressとBloggerでのアンカーリンクの設定方法)ですが、アンカーリンクは、wordpress や Blogger に特化したものではありません。

ということで、アンカーリンクを使ってインデックス付きの記事を書いてみました。

Index:

アンカーリンクとは

Anchorアンカー(anchor)とは、船を固定するための錨(いかり)のことです。アンカーを下すことで船を固定できるので、固定した場所にリンクすることなのだと理解しています。

HTMLではaタグ(アンカー・タグ)を使ってアンカー・リンクすることでページ内の特定の場所にジャンプさせることができます。



索引としてアンカーリンクを使う

書籍や辞書では目的の内容を読むために索引を参照してページをめくりますが、ブログやネットの記事なら索引から直接目的の場所にジャンプさせることができます。またジャンプした場所の章の最後に「索引に戻る」リンクを付けておけば、スクロールせずに索引を行き来しながら記事を読むことができます。

何より記事の先頭に索引(目次)があると何が書かれているかを俯瞰することができるので読み手としては便利です。

アンカーリンクの設定方法

ジャンプ先であるアンカー名とジャンプ元のリンクの設定方法についてです。

リンク場所(アンカー)の設定

もともとはaタグのname属性でアンカーを指定するようになっていたようですが、HTML5からID属性だけで認識されるようになったようです。この記事ではh3の見出しにID属性でアンカーの設定をしています。

<h3 id=”アンカー名”>テキスト</h3>

例えば、この章の「アンカーリンクの設定方法」では、h3タグの中でid属性を使ってアンカー名を下記のように設定しています。

<h3 id=”how_to_set”>アンカーリンクの設定方法</h3>

下記は、aタグを使う場合です。

<a id=”アンカー名”>テキスト</a>

リンクの設定

リンクの設定は、aタグで外部ページにリンクするときと同じようにhref(Hypertext Reference)を使いますが、URLではなく#アンカー名 を設定します。別ページのアンカーにジャンプさせるのであれば、<a href="https://walking-elephant.blogspot.com/2016/06/flickr.html/#アンカー名">のようにURLを指定します。

<a href=”#アンカー名”>

Indexのアンカーリンクの設定方法 には、

<a href=”#how_to_set”>アンカーリンクの設定方法</a>

と設定しています。

ページの先頭に戻す

リンクの設定で下記のように#の後ろにアンカー名を付けなければページの先頭に戻ります。

<a href=”#”>


Bloggerでの注意事項

Bloggerの場合、リンク元の設定で <a href="#アンカー名"> としても、勝手に下記のように <a href="https://draft.blogger.com/……/#アンカー名"> とドラフト(プレビュー用)のURLがついてしまいます。

image

もちろんリンク元で正確なURLを設定してもいいのですが、Bloggerの場合だと、PostするまでブログのURLがわからないので、公開する前にもう一度リンク先を下記のように#アンカー名に書き換えてください。

URLを書き換える場合は、HTMLモードで変更してそのまま投稿する必要があるようです。作成モードに変更してしますとURLが書き換わってしまいますので注意を。公開後も内容を変更するのであれば、面倒ですが公開後にURLを確認して#の前にURLを追記しましょう。


2016年6月18日土曜日

Flickr の画像でブログを彩る

このエントリーをはてなブックマークに追加 Evernoteにクリップ
Fli
ckr Logole
ブログも写真があると引き締まりますが、ブログの内容によっては、なかなか記事にあった写真がない場合があります。そんなときには、Flickrで写真を探してみましょう。差し込み用のタグも用意されているので利用も簡単です。Flickrにアップされている写真には クリエイティブ・コモンズ・ライセンス(CC) で写真の利用を許可しているものがあります。営利目的でも利用できたり、加工して二次利用可能な写真も多数ありますので、ライセンスに従ってFlickrにアップされている写真をブログで使ってみましょう。もちろん、著作権で保護されている写真(© All Rights Reserved)は利用できませんのでご注意を。

クリエイティブ・コモンズ・ライセンス の写真の探し方

まずは、Flickrでクリエイティブ・コモンズ・ライセンスとなっている写真を探してみましょう。Search | Flickr - Photo Sharing! の Any license でパラメーターを指定します。

image

この中でクリエイティブ・コモンズとなっている写真を探すのであれば、下記の4つの中から指定します。
  • All creative commons (すべてのクリエイティブ・コモンズ・ライセンス)
  • Commercial use allowed (商用利用可)
  • Modifications allowed (二次利用可)
  • Commercial use & mods allowed (商用利用可かつ二次利用可)
検索キーワードは日本語でも可能ですが、英語で検索した方がより多くの写真がヒットします。

クリエイティブ・コモンズ・ライセンスの種類

Flickrの検索結果から写真を選択すると写真の右下にライセンスについてのロゴ(黄色アンダーライン)があります。

image

Flickr: Creative Commons にクリエイティブ・コモンズのロゴについての説明がありますが、英語表記となっているので、クリエイティブ・コモンズ・ライセンスとは | クリエイティブ・コモンズ・ジャパン と合わせて説明を記載します。


Attribution Attribution License (表示)
原作者のクレジット(氏名、作品タイトルなど)を表示することを主な条件とし、改変はもちろん、営利目的での二次利用も許可される最も自由度の高いCCライセンス。

原作者のクレジット(氏名、作品タイトルなど)を表示すれば、商用利用もできますし、また加工して二次利用も可能です。

by Paul Downey - Flickr logole

加工をしないのであれば、Flickrが提供する差し込み用のタグを利用すれば簡単に利用できます(Flickrの画像を簡単に利用する方法を参照)。

Attribution No Derivative Works Attribution-NoDerivs License (表示-改変禁止)
原作者のクレジット(氏名、作品タイトルなど)を表示し、かつ元の作品を改変しないことを主な条件に、営利目的での利用(転載、コピー、共有)が行えるCCライセンス。

こちらは、加工が禁止されている画像なので埋め込みタグで利用しましょう(Flickrの画像を簡単に利用する方法を参照)。

Attribution Noncommercial No Derivative Works Attribution-NonCommercial-NoDerivs License (表示-非営利-改変禁止)
原作者のクレジット(氏名、作品タイトルなど)を表示し、かつ非営利目的であり、そして元の作品を改変しないことを主な条件に、作品を自由に再配布できるCCライセンス。

営利目的の利用と加工が禁じられていますので、アフィリエイト・ブログでの利用も避けましょう。

Attribution Noncommercial Attribution-NonCommercial License (表示-非営利 )
原作者のクレジット(氏名、作品タイトルなど)を表示し、かつ非営利目的であることを主な条件に、改変したり再配布したりすることができるCCライセンス。

こちらは非営利目的であれば利用可能です。

Attribution Share Alike Attribution-ShareAlike License (表示-継承)
原作者のクレジット(氏名、作品タイトルなど)を表示し、改変した場合には元の作品と同じCCライセンス(このライセンス)で公開することを主な条件に、営利目的での二次利用も許可されるCCライセンス。

ShareAlike Licence(継承)とは、この表示がされている作品を二次利用して利用した場合には、原著作物と全く同一の条件下でライセンスしなければならないということです。

Attribution Noncommercial Share Alike Attribution-NonCommercial-ShareAlike License (表示-非営利-継承
原作者のクレジット(氏名、作品タイトルなど)を表示し、かつ非営利目的に限り、また改変を行った際には元の作品と同じ組み合わせのCCライセンスで公開することを主な条件に、改変したり再配布したりすることができるCCライセンス。

最後がクレジットの表示、営利目的の禁止、継承というパターンです。

Flickrの画像を簡単に利用する方法

Flickrが提供するEmbed(埋め込みタグ)を使えば簡単にFlickrの画像が利用できます。サンプルで使用した画像は Attribution Attribution License なので原作者のクレジットを表示すれば営利目的での利用も加工も可能です。

① 右下のオレンジで囲った共有アイコンをクリックします。

image

② Embedタグでソースをコピーします。

image

後は、コピーしたソースをブログに張り付けるだけです。オプションには Header(下図①)  Footer(下図③) 、Slideshowがあります。Slideshowは作者の他の写真をスライドショーとして見せるためのオプションです。写真のサイズも選択できますが、ブログ上で変更することも可能です。下図 のFacebook、Tumblr、Twitter、Pinterest での共有アイコンについては写真をマウスオーバーすると現れます。また写真をクリックするとFlickrの該当ページが開きます。

image

Flickrを活用しましょう!

Flickr icon