【画像付き】Bloggerでの「アンカーを作成 / 編集」の使い方
どうも、おはこんばんにちは、ぽんぽこりんです（@ponpokorin_24）。
追記：2020年10月13日
なんかできなくなっちゃいましたね。ただ、左端のHTMLをいじれば手動で同じことはできますので、昔のアンカーを付けた記事のHTMLビューを参考にしてみてください。
===追記終わり===
最近BloggerのUIが新しくなって、「リンクを挿入または編集」という部分に「アンカーを作成 / 編集」という部分が出現しました。
 |
| 拡大しないと見づらいですが赤枠のとこです |
これの使い方と、そもそもアンカーってどうゆう機能なの？ということについてまとめました。
目次
アンカーとは
今、真上の目次でアンカーを利用しています。要はアンカーとは
ページ内の特定の場所にジャンプするためのツール
のことです。試しにこの「実験」を押してみてください。
実験
「実験」を押してくれた方はここにジャンプしたと思います。ここで、ご自身の使っているブラウザでURLを確認してみてください。最後に「#実験」がついていると思います。こんな感じで、ページ内を簡単に移動してもらうためによく使う機能がアンカーです。
また、
（このブログの他記事が別タブで開きます）
のように他のページの特定のテキストに飛ぶリンクをつくれるようにもなります。
使い方
アンカーの作成
まず先に、ジャンプ先のテキストを選択して「アンカーを作成 / 編集」を押すと
こういう画面になります。
「名前」の部分に任意の文字や数字を入力します。ここの「名前」の部分が後々、#の後につきます。僕は分かりやすくするために、選択したテキストをそのまんま入れます（日本語でもそのまんま）が、好みによってheadline01とかhl01とかにしてもいいと思います。
「名前」欄に入力し終わったら、右下のOKを押します。
OKを押した後、元の画面に戻るのですが、ここでひとつポイントが。アンカーをつけたテキストの色を黒にしてください。なぜかデフォルトでは青になっていてこうなってしまいます。
 |
| プレビューを見れば確認できます |
また、エディタ側ではアンカーをつけたテキストにはアンダーラインがつきますが、上のプレビュー写真でも確認できるように、投稿時には反映されないので安心してください。
アンカーを利用する
アンカーの作成が終わったので、最後にアンカーを使います。
例えば目次で使いたいときは、目次の該当する見出しを選択して
 |
| エディタ画面です |
「URLを作成 / 編集」をクリック。
「リンク先URL」の欄に「#＜先程設定したアンカーの名前＞」の形で入力します。ここでの#は半角です。
 |
| 先程 headline01 にしていれば #headline01 とします |
入力が終わったら、右下のOKを押せば完了です。ここでもデフォルトでは、URL挿入時と同じ青色になるので、変えたい方はお好みの色に変えてください。
おまけ：他のページの特定のテキストに飛ぶリンクを作成するには
ジャンプ先の記事で先にアンカーを作成し、上の写真で赤枠で示した「リンク先URL」の部分に「＜ジャンプ先のページのURL＞#＜自分で決めたアンカーの名前＞」とすればOKです。
おわりに
今回のUI変更でアンカー機能が使えるようになったおかげで、読んでくれる方にとって、より便利な記事を作成できるようになりました（追加で時間もかかるケド）。
その一方で、個人的にはHTMLビューが超絶見づらくなったのだけは元に戻してもらいたいです。以前はエディタの改行を反映してくれていて見やすかったのに、1行でまとまるようになってしまって、ちょっと怪しげな挙動をした時のチェックが大変になりました。
一行で書いてある方がクローラーにとって読みやすい、とかあるんでしょうか？
ご意見・お問い合わせ的なところに書いてみようかなぁ…
それでは～
コメント
コメントを投稿