Bloggerでリンクの作り方を検証してみた！

今回は Bloggerで リンクの作り方を検証したいと思います

Bloggerで、リンクを作る場合

  • 他のブログ記事へのリンク
  • 同じブログ内の他の記事へのリンク
であれば通常記事を書くときの「作成」モードだけで出来ますが
  • 他の記事の途中の見出し（途中の文章など）へのリンク
  • 同じ記事内の途中の見出し（途中の文章など）へのリンク
を作りたい場合は「HTML」モードでの編集が必要となります
そこで実際に作業しながら工程をメモしていきたいと思います

検証する環境は


  • パソコン
  • Chrome

検証する内容＜目次＞

１．ブログ内＞他の記事へのリンク

ここでは、同じブログ内の記事タイトル「パソコン版ChromeでBloggerの使い勝手を検証してみた！」へのリンクを作ってみます

別の記事へのリンクなので、別ウィンドウで開く想定です

リンク先のURLを確認する

リンク先の記事を「編集」で開き、右側のメニューから「パーマリンク」を選択
アドレスが表示されるのでコピーします
（今回は下記のアドレスが表示されました）
https://sync-hrd-blog.blogspot.com/2018/08/chromeblogger.html

リンク先の作業はこれで終わりなので閉じて大丈夫です

リンク元にURLを貼り付ける

リンク元の記事に戻り　リンクを作りたい行にカーソルを移動させ
上側のメニュー「リンク」を選択
下記画像のウィンドウが開くので
「リンク先のURLを指定してください」の欄にコピーしたアドレスを貼り付けます
「表示するテキスト」の欄には、リンク元に表示したい内容を書きます
ここでは「他記事へのリンク」としました
また、「このリンクを新しいウィンドウで開く」をチェックします

これで「OK」すると↓のリンクができました
他記事へのリンク
（クリックすると「パソコン版ChromeでBloggerの使い勝手を検証してみた！」の記事が別ウィンドウで開きます）

２．ブログ内＞他の記事＞途中の見出しへのリンク

ここでは、前項でも使用した記事タイトル
「パソコン版ChromeでBloggerの使い勝手を検証してみた！」の中にある
「写真（画像）の貼り付けについて」という見出しへのリンクを作ってみます
これも別の記事へのリンクなので、別ウィンドウで開く想定です

リンク先の見出しを編集

リンク先の記事を「編集」で開き「HTML」モードにします
（モードの切り替えは画面の左上）

見出し「写真（画像）の貼り付けについて」の場所を探します
-------------
<h3>
写真（画像）の貼り付けについて</h3>
-------------
↑このように書かれている場所を発見しました

ここで　<h3>　の中に　id="anchor1"　（半角）を追記します
-------------
<h3 id="anchor1">
写真（画像）の貼り付けについて</h3>
-------------
↑このように追記しました

" " でくくったのがリンク先の名前（目印、ID）となります
この名前は　anchor1　ではなく、任意の名前（半角英数）で大丈夫です
ただし最初の文字はアルファベットにする決まりがあります

リンク先のURLを確認する

右側のメニューから「パーマリンク」を選択
アドレスが表示されるのでコピーします
（前項目でやった時と同じアドレスが表示されました）
https://sync-hrd-blog.blogspot.com/2018/08/chromeblogger.html

リンク先の作業はこれで終わりなので更新して閉じて大丈夫です

リンク元にURLと名前（目印、ID）を貼り付ける

リンク元の記事に戻り　リンクを作りたい行にカーソルを移動させ
上側のメニュー「リンク」を選択

「リンク先のURLを指定してください」のウィンドウが開くので
コピーしたアドレスを貼り付け
更に、今回はアドレスの後に名前（目印、ID）を追記します
名前を追記する際に頭に　#　（半角記号）を付ける決まりです

↓アドレスを貼り付けただけ
https://sync-hrd-blog.blogspot.com/2018/08/chromeblogger.html


これに　#　と　名前（目印、ID）を追記して下記のようにします

https://sync-hrd-blog.blogspot.com/2018/08/chromeblogger.html#anchor1




「表示するテキスト」の欄には、リンク元に表示したい内容を書きます
ここでは「他記事途中へのリンク」としました
また、「このリンクを新しいウィンドウで開く」をチェックします

これで「OK」すると↓のリンクができました
他記事途中へのリンク
（クリックすると「パソコン版ChromeでBloggerの使い勝手を検証してみた！」の記事の「写真（画像）の貼り付けについて」という見出しを先頭にした別ウィンドウが開きます）

３．この記事内の見出しへのリンク

ここでは、この記事の頭の方にある見出し　検証する内容＜目次＞　へのリンクを作ってみます
これは記事内へのリンクなので、別ウィンドウで開かないようにします

リンク先（この記事）の見出しを編集

この記事を「HTML」モードにします
（モードの切り替えは画面の左上）

見出し「検証する内容＜目次＞」の場所を探します
-------------
<h2>
検証する内容＜目次＞</h2>
-------------
↑このように書かれている場所を発見しました

ここで　<h2>　の中に　id="anchor1"　（半角）を追記します
-------------
<h2 id="anchor1">
検証する内容＜目次＞</h2>
-------------
↑このように追記しました

" " でくくったのがリンク先の名前（目印、ID）となります
この名前は　anchor1　ではなく、任意の名前（半角英数）で大丈夫です
ただし最初の文字はアルファベットにする決まりがあります

リンク先（この記事）のURLを確認する

右側のメニューから「パーマリンク」を選択
アドレスが表示されるのでコピーします
（今回は下記のアドレスが表示されました）
https://sync-hrd-blog.blogspot.com/2018/08/blogger.html


リンク元にURLと名前（目印、ID）を貼り付ける

リンクを作りたい行にカーソルを移動させ
上側のメニュー「リンク」を選択

「リンク先のURLを指定してください」のウィンドウが開くので
コピーしたアドレスを貼り付け
更に、今回はアドレスの後に名前（目印、ID）を追記します
名前を追記する際に頭に　#　（半角記号）を付ける決まりです

↓アドレスを貼り付けただけ
https://sync-hrd-blog.blogspot.com/2018/08/blogger.html


これに　#　と　名前（目印、ID）を追記して下記のようにします

https://sync-hrd-blog.blogspot.com/2018/08/blogger.html#anchor1




「表示するテキスト」の欄には、リンク元に表示したい内容を書きます
ここでは「目次に戻る」としました
また、「このリンクを新しいウィンドウで開く」のチェックは外します

これで「OK」すると↓のリンクができました
目次に戻る
（クリックするとこの記事の「検証する内容＜目次＞」という見出しに移動します）


注意事項

記事の内容などを編集する際に「作成」モードでは、［元に戻す］というアイコンがあるので　何かを間違って消したりしても戻せます。
しかし、「HTML」モードにすると　このアイコンがなくなるので注意が必要です。
私も作業中に間違ってコードを消してしまい　とても焦りました
もしそのような自体になった場合は

  • 「ctrl」＋「z」（win）
  • 「command」＋「z」（mac）
で戻せる可能性があるので念のためメモしておきます
（編集は自己責任で行いましょう）


0 件のコメント :

コメントを投稿