FC2ブログで画像リンクを行う方法

この記事を書くにあたり、途中で システムの変更 に気づきまして。うぅぅーーん… これはアカンやつや、と。大幅に記事内容を修正しましたのでそのあたりも含めて説明しようと思います。

画像と画像を囲うリンクの間に関連性はありません

まずは「画像リンク」の説明です。「画像をリンクにする」というのは以下のようなhtml内容になります。

<a href="リンク先アドレス">
  <img src="画像アドレス" alt="">
</a>

必要最小限の内容に留めています。逆に言えば最低でもこれらは必要ということですね。要は通常のテキストリンク(ハイパーテキスト)と同じです。テキスト部分が画像に変わっただけ。表示されている内容とクリックして取得できる情報を結びつけるのがハイパーリンク(Hypermedia Reference, Hyperlink Reference)です。

ソース内には「アドレス」が2つ含まれています。

1. リンク先アドレス href属性
2. 画像自体のアドレス src属性

このhref属性の値となる「遷移先ページアドレス」と、src属性の値となる「画像アドレス」との間には特に関連はありません。どんなアドレスにしようと自由です。

元画像リンク

<a href="画像と同じアドレス">
  <img src="画像アドレス" alt="">
</a>

上記なら画像クリックで表示されているものと同じ画像が開かれます。

特定ページへリンク

<a href="誰かのサイトのアドレス">
  <img src="画像アドレス" alt="">
</a>

「画像ハイパーリンク」と言われて思い浮かぶのはこの形かもしれません。ランキング各社のバナー などもそうですね。が、どの形も同様に「画像ハイパーリンク」ではあるんですね。「画像クリックでどこかのサイトへ行く = 画像ハイパーリンク」というわけではありません。「画像にリンクが設定されている」状態はどれも等しく「画像ハイパーリンク」です。

別画像へリンク

<a href="表示画像とは別の画像アドレス">
  <img src="画像アドレス" alt="">
</a>

これでも構わないですよ。クリックしたら表示されているものとは違う画像が開かれる、という形。単に「画像がリンクになっている」のが「画像ハイパーリンク」です。

画像をリンクにするかどうかは個人設定で予め決められます

みなさんが新旧投稿画面のツールバーを利用して画像を掲載した際に、その画像を「リンク付き(ハイパーリンク状態)」にするのか、それとも単に画像表示だけを行うのか、自身の方針に合わせて事前に決めておくことができます。

下の画像をクリックすると個人設定のページに飛ぶようになってます。つまりこれが画像ハイパーリンク。

この個人設定で選択できるのは

1. アルバムページにリンクさせて 挿入
2. 元画像にリンクさせて 挿入
3. 画像タグのみ 挿入

画像は必ずしもリンクが必要なわけではない

この章の内容は特性上スマートフォン閲覧では理解しづらいかもしれませんのでご容赦くださいね(画面サイズの関係)

例えばこんな ↓

画像上に文字がありますがこれだと何が書いてあるのかさっぱりわかりません。クリックするとオリジナルサイズの画像が表示されますので読めますよね。ですからこの画像リンクは十分に意味を持っています。

ではこの場合はどうでしょうか ↓

何のために開かせた？？意味ねーやん、と。意味不明にページが遷移したり別タブが開いたり、というのは結構イラっとするものなので、自身の画像掲載の状態と相談しながらその都度リンク設定の有無を決める、というのが本来は一番良い方法ではないかと思います。そしてこのパターンでは「文字が読めるような対処をしておけ」つまり「表示画像をより大きなサイズで見られるようリンクを設けておけ」ということになります。そして必要が無ければ闇雲にリンク設定をしなくとも良い、ということですね。

FC2ブログで闇雲画像リンクになるとしたら 元画像にリンクさせて 挿入 を設定している場合です。特定ページにジャンプさせるためのリンクはほぼ間違いなく意味がありますので該当しないはず。

けれども対象が例えば絵文字的なものであれば開く必要などどこにも無いわけです。

旧投稿画面利用者におすすめの設定

旧投稿画面を利用するならばなんだって良いと思います。htmlが見えているのですから、リンクが不要ならチャチャっと削除あるいはページ指定先があるならば文字列を変更するだけ。htmlが目に見えているというのはそういう利点があります。もちろんタグ・要素の意味をある程度理解しておく必要はあります。

何かを付け加えるよりも何かを削除する方が簡単なので、「元画像にリンク」にしておくと良いかもしれませんね。元画像ではなく特定ページに変更したい場合はhref属性の値になっているURLを書き換えるだけ、最小限の手間で済みます。

さらにおすすめは ツールバーを利用せず辞書登録を利用する ことです。その方が作業効率が上がります。リンクのhtml の内容はほぼ定形ですから、例えば『りんく』で登録しておくとか。旧投稿画面を中級者さんが利用する場合は 辞書登録の使い倒し が鍵になるかなぁ、と思います。上級者はやりやすいように好きにやってください。

辞書登録用雛形(画像)

<a href="リンク先" target="_blank" rel="noopener noreferrer"><img src="画像URL" alt="代替テキスト"></a>

記事に内容が張り付いた後に変更するのは緑色の箇所。別タブで開く必要が無い場合は紫の内容を削除。画像でなくテキストならばimg要素を削除してテキストに置き換え。画像の場合はもし余力があれば、画像の縦横サイズ width="横" height="縦" を追加しておくと良いでしょう。width, height属性はレンダリング時に領域確保に用いられますので意外と重要です。とはいえCSSの内容が優先されますので絶対無くてはいけないわけでもない。画像のサイズはアップロード画面ですぐに参照できます。border属性 (border="0") とimg要素末尾の / (closing slash) はhtml5テンプレートでは不要です。closing slashについてはxhtmlであれば必須。

旧投稿画面の利点はURLの差し替えが簡単にできることです。画像ハイパーリンクの場合、表示させる画像(src属性)はサムネイルにしておき、クリックで開く画像(href属性)は高解像度にするなど、表示スピードの対策もできます。hrefで開く画像は クリックするまでデータの取得を行いません ので、リンクで開く側の画像ファイル容量が大きめでもページ自体のローディングには影響しません。

新・旧投稿画面共におすすめしない設定は「アルバムリンク」

アルバムページへのリンクは おすすめしません。これは先々のことを考えて、もしかしたらオリジナル画像を開くのに ajaxや滞在中コンテンツを保持したまま拡大表示 をしたくなるかもしれません。こういうの ↓

「こんな面倒なこと絶対しないわ…」と思っていてもそのうちやりたくなるのが人情。FC2はそれができてしまうサービスですから、そらやりますわね。その時が来たとして、一番苦労するのが「画像をアルバムページにリンクしている人」です。リンクを全て書き換える必要が生じます。あと掲載画像をアルバムを通して見たいという人がそもそもそんなに居ないような。たぶん。

「ページ内容を保持したままその場で拡大」というのは自己の満足のみに留まらず、閲覧者にとってもその方が楽だと思いますのでおすすめ。別タブを閉じたりブラウザバックの手間が無いというのはユーザビリティに貢献しているはず。私の説明記事でも説明画像がいちいち全て別タブで開かれたらみなさん嫌になっちゃいますよね (∵`)
(つってもこの記事はこういう主旨なので我慢してくださいね)

新投稿画面利用者は「元画像へリンク」一択

これなー (´・ω・｀)
ここから大幅に内容修正した後の内容です。修正理由は 仕様が変更になっている からです。

新投稿画面はβ版扱いなので発展途上だと思った方が良いですよね。現にちょこまかとシステム調整が行われています。以前「ちょっとまだ問題あるなぁ」と結論づけた 画像の掲載サイズ指定(または変更) についてもここ数日で変更されています。こちらはまた改めて記事にします。本記事はあくまでも「リンク」についての説明。

新投稿画面利用者は個人設定を「元画像にリンクさせて 挿入」にしておいたほうが賢明 と結論。今の所。現システムを考えるとそれが一番良いのではないかしら。あくまでも私個人の意見ですが。

元画像リンクをすすめる理由

新投稿画面の仕様のせい、というのが理由なんですが、その説明(笑)

ここで問題になるのは 画像ハイパーリンク です。テキストリンクはちょっとここでは置いといて。

WYSIWYGエディターというのは「簡単」である反面非常に「融通がきかない」という性質も持っています。ともかくWYSIWYGを使いこなすポイントは htmlが目に見えない状態でいかに上手く裏でhtmlを操るか にかかっているんですね。勘違いが生じないよう説明しておくと、「WYSIWYGエディターを利用している = htmlを使っていない」ということではないんです。web上に何かしらの情報を記すにはhtmlを必ず使わなければいけません。WYSIWYGはhtmlを「見せない」「バックグランドで処理している」というだけです。

で、みなさん画像をリンクにしたい時ってどんな感じで作業します？あまり深く考えたことが無いという人の方が多いかな。

目に見えないものを操作するのって実はものすごく難しいことなんですよね。なので画像をリンクにしようと思えば まず画像を掲載しておき、その後でリンクを設定する というのが一番効率が良いと思いませんか。画像掲載前に先にリンクを指定するということはこの状態で作業をするということです ↓

新投稿画面利用者のみなさん、これ意味わかりますか (´・ω・｀)
上記スクショでは 既にリンク設定は終わっています。後はテキストなり画像なりをリンクのa要素の間に挟むだけです。でも何も見えないですよね。「間」ってどこなのさ。何も見えねーじゃん、と。リンクというのは表示させるもの(つまりクリック対象)が存在しないとリンク自体有るか無いか見当すらつけられない、という性質のものです。

ここから画像を掲載するとその画像がリンク状態になるんですが、一度でも文字を打ったり改行したりなどを行うともう失敗です。カーソル移動不可 です。

こんなんで作業ってできます？ (∵`)
お釈迦様じゃあるまいし見えないものをどうやれというのか。

という事情で通常はこの方法を取るはずです ↓

先に画像を掲載しておけば、この画像を 選択状態 にしてリンクの付加ができる、と考えるのが普通。それが普通(笑)
これなら画像が目に見えてますから作業難易度は遥かに下がります。

で、WYSIWYGエディターの使い方のコツ・攻略法は ドラッグ選択 です。htmlタグというのはある特定の内容を 挟む ことで意味を持ちます。例えばリンクならば

<a href="">ここに挟まれているものがリンク対象です</a>

これがhtmlの大原則なので、この「挟む あるいは 挟まれる」を考えた時に最も効率が良いのが 挟まれる対象をドラッグ選択しておく ことなんですね。フォントの色を変えたいならば変えたい対象文字列をドラッグ選択してからツールバーを利用。太字にしたい箇所があればその対象文字列をドラッグ選択してから〜以下同文。

htmlはその名の通り「標し」ですから、「どこからどこまで」という 範囲指定 が非常に重要。一応よくある誤解に触れておくと、htmlは何も命令はしません。単なる標しです。

こうして挟む対象が明示されているとエディター的にも「開始タグ」「終了タグ」の標しをつける場所がすぐにわかる、というわけです。逆に上手く範囲が伝えられないと結果「ミス」「できない」「思ってたんとちゃう」ということに。

WYSIWYGの欠点というのはまさにここ。htmlタグが目に見えない 点。初心者には歓迎できる点ではあるんですが、htmlを「識っている」人間からするとなんと効率の悪いものだろうか、と(笑)
こういうのは常に表裏一体ですよね (´・ω・｀)

というわけで、画像をハイパーリンクにする場合には画像掲載を先にするであろう、と仮定して進めます。で、「画像をどうやって選択状態にするか」がわからなければお話になりません。カーソルを画像の右横あるいは左横に合わせて左クリックしながらドラッグ、という方法でも良いんですが効率が悪いので簡単な方法を取りましょう。画像にマウスを充てて少し引っ張る だけで選択状態になります。グイっと大きく動かす必要はありません。ほんの少し移動させる感じでOKです。

画像全体が青く反転して選択状態になっているのがわかります。これが意外と初心者さんはできなかったりするんですね。上記のスクショのように画像が記事編集画面の横幅いっぱいを占有している場合などに カーソルがどこにあるのかわからない あるいは カーソルを画像の横に置けない, 置けているかわからない といったところ。なので先に記した方法を取られると簡単だと思います。

今この画像は「元画像リンク」になっている状態ですが、ここから「リンクの削除」と「リンクの編集」を行うのはとても簡単にできます。「リンクの作成」については既にリンクが付いている状態ですから使用することはありません。

リンクの編集

ここから画像リンクの個人設定と新投稿画面の仕様が絡んでくるので重要。

目的は「リンクの編集」つまり 遷移先の変更 であり 指定URLの変更 ですから、URL の欄に希望するアドレスを指定してください。

タイトル というのはマウスオーバーした時にユーザーに期待できる動作をお知らせするために使う title属性 のことです。なのですが、このパターンでは利用できません。この「タイトル」についてはまっさらな状態でないと指定できないようです。まっさら、というのは 挟まれる内容がまだ表記されていない場合 のことを指します。

結論を言うとこの「タイトル」については テキストリンク限定 でしか使えないと思ってください。現時点では無理だ。いろいろやってみたが無理だ

というかよくよく「編集」という単語の意味を考えると「既存の内容を書き換える」ということですよね。ということはつまり「存在しない内容は編集ができない、つまり追加も削除もできない」ということになりますね。まるで言葉遊びのようだけれど。単語の意味を知れ、と言われればまぁ渋々納得はできます。

個人設定でtitle属性を自動出力する方法はありませんので、ツールバーを利用して画像を掲載した場合はtitle属性は ありません。無いのですから編集対象にはできない、と思えば良い… んですかね？運営さん (´・ω・｀)

そして今進めているのは「画像リンク」ですから テキスト の項目も無視してください。仮に内容を入力したとしてもテキストは「既存ではない」のですから編集(変更)できません。今この作業中に「既存」なのは画像です。テキストはありません。

というわけで

• 画像ハイパーリンクである
• 個人設定を「元画像にリンクして 挿入」に設定している

という条件下、このポップアップで入力できる項目は URL と Target のみです。

個人設定で「元画像リンク」を設定していると自動的に target="_blank" の指定になるはずです。この意味は「別タブで開く」です。Target項目に記されている _blank を削除することで「同タブで開く」ことができます。

「リンクの削除」についてはワンクリックで済みますので説明を省きます。

ここで起こり得るかもしれないパターンについて。リンクを削除した後に気が変わってやっぱりリンクを再設定しようと思った場合。結論から言うと 新投稿画面のデフォルトモード上ではできません。以降の内容で何故できないのかお伝えします。

新投稿画面デフォルトモード(WYSIWYG)では画像ハイパーリンクの「作成」は不可

リンクの「編集」はできても「作成」はどうもできなさそう。つか、できない。「画像ハイパーリンク」の話ですよ。テキストでなく。説明の意図と目的が不明にならないよう念押ししておきます。

現時点の仕様では画像を選択状態にして操作したとしても、リンク作成を利用すると画像のimg要素の「前」にリンクのhtmlが出力されてしまいます。

正しい画像ハイパーリンク

<a href="リンク"><img src="画像URL" alt=""></a>

「リンクの作成」を利用した場合

<a href="リンク"></a><img src="画像URL" alt="">

終了タグ </a> の位置がimg要素よりも先に記されています。要するに画像が「挟まれていない」状態です。htmlの基本は「標しで挟むこと」なのですからこれではリンクとして機能しません。

運営さん、これは修正しないとダメじゃないだろうか。この仕様ではWYSIWYGの使いこなしの基本「ドラッグ選択」も活かせません。リンクはテキストだけじゃなく画像で行う場面も多くあるのですからこの仕様ではカバーできません。

これが「個人設定『元画像へリンクして 挿入』一択」である理由です。削除はできても作成はできないとなると、予めリンクを出力させておく必要がある、ということです。

うーん。これはどう考えてもダメだ。ちょっともうさ、アメーバみたくモニターを募ったらどうだろう。

アメーバスタッフ『大募集！Ameba リニューアル版アプリ 先行体験ユーザー募集のお知らせ』

 いつもAmebaをご利用いただきありがとうございます。Amebaのプロダクトマネージャーの樋口です。今回リニューアルするアプリ版Amebaの先行体験ユーザー…

ameblo.jp

これまでのように「ある日突然本番環境でGO(人柱デバッグ)」ではなくユーザーをモニターにして整備してから導入ってのはどー？というかアメブロのPC版がアホほど重たくてびっくりなんですが…。

まとめ

新投稿画面はβ版です(よね？)から、今後の調整に期待しますが、とりあえず現時点ではこんな不備があります。あまり良い提案はできませんでしたがまとめると

• 画像の個人設定は「元画像にリンクして 挿入」に設定しておく
• 画像掲載を先に行い、ドラッグ選択を上手く利用する

旧投稿画面に慣れている方からすれば「HTML表示でやれば良いだけじゃん」という感覚でしょうが、新投稿画面のデフォルトモードを利用する方は「htmlタグを見たくない」「html全然わかんない」という方ですからそれは酷というものです。ピークは過ぎたかもしれませんがYahoo!ブログ終了まで新規流入はあるはずで、恐らく多くの方が「初心者」にカテゴライズされるでしょうから迅速に整備して頂きたいところです。ガンバ (∵`)

またシステム変更など生じれば記事にしようと思います。