【Blogger】リンクのやり方!内部・外部リンクの貼り付け

【Blogger】記事リンクとブログカード

Bloggerで記事を作成して行く中で、記事にリンクを貼り付け記事を紹介をする事は、SEOの観点からも非常に重要です。

なぜなら、読者が記事の内部リンクから違う記事を読む可能性が大いにあるからです。

実際に、内部リンクを散りばめているUraRekishiというブログでは、ユーザー数よりもページビュー数が3倍以上あります。

それでは、記事リンクをBloggerで貼り付けるには、どのようにすれば良いのでしょうか?

記事リンクの貼り付け方

記事のリンクの貼り付け方は簡単です。

Bloggerの記事のリンクの貼り付け方

まずは、リンクにしたいテキストの範囲を指定し、右上のメニューバーのこのアイコンをクリックして下さい。

すると、違う画面が表示されます。

Bloggerの「リンクを貼り付けまたは検索」

その「リンクを貼り付けまたは検索」にリンクさせるURLを貼り付けます。

記事リンクの設定方法

記事リンクには、

  • このリンクを新しいウィンドウで開く
  • 「rel=nofollow」属性を追加する

という2つのチェックボタンがあります。

「rel=nofollow」に関しては、リンク先のページをサイトからクロールさせないようにする時に使います。

リンクに合わせて、この2つの設定をお使い下さい。

記事リンクの削除方法

記事のリンクを削除するには、リンクを貼り付けたテキストをクリックすると、

Bloggerのリンクを削除する方法

このようなメニューが表示されるかと思います。

そのメニューの右端にある「リンクを削除」をクリックしましょう。

記事リンク用のデザイン

記事リンクにデザインを付け加えたい方のために、2つのCSSデザインを用意しました。

サンプル1

.a out_link { position: relative;}
.out_link:before { font-family: 'FontAwesome'; content: '\f08e'; font-size:0.9em; margin:0 3px 0 2px;}

こちらが、「サンプル1」のCSSデザインになります。

<p><a class="out_link" href="#">サンプル1</a></p>

こちらが、「サンプル1」のHTMLコードになります。

人気記事サンプル2

.popular { font-size: 14px; color: #fff; margin-right: 10px; background-color: #EE817B; border-radius: 2px; padding: 8px 8px 7px;}

こちらが、「サンプル2」のCSSデザインになります。

<p><span class="popular">人気記事</span><a href="#">サンプル2</a></p>

こちらが、「サンプル2」のHTMLコードになります。

CSSコードは、一度貼り付ければ完了です。

一方、HTMLコードは、使いたい時にその都度貼り付けなければなりません。

以下で、CSSデザインとHTMLコードの貼り付け方について詳しく解説します。

CSSの編集画面はどこ?

Bloggerの管理画面にある左メニューの「テーマ」を選びましょう。

すると、こんな画面になるかと思います。

Bloggerのカスタマイズ画面

この画面の「カスタマイズ」と書かれているボタンをクリックしましょう。

すると、いくつかメニューが表示されます。

その中の「HTMLを編集」を選びましょう。

ひもくみ画像

すると、画面にずらーっとプログラミングコードが表示されるかと思います。

そこで、「Ctrl+F」(検索)を押して以下のコードを

  1. 「Ctrl+C」:コピー
  2. 「Ctrl+V」:ペースト

して探してみて下さい。

]]></b:skin>

このコードよりも上に、記事リンクのデザイン(CSS)を追加して行きます。

もし、このコードよりも上にコードを貼って機能しない場合は、

</style>

こちらのコードよりも上にコードを貼ってみて下さい。

HTMLの貼り付け場所

メニューバーにある左上の鉛筆アイコンをクリックして「HTMLビュー」を選びましょう。

Bloggerの「HTMLビュー」の場所

そして、「Ctrl+F」(検索)を押して画像近くの文章の言葉を

  1. 「Ctrl+C」:コピー
  2. 「Ctrl+V」:ペースト

して記事リンクのHTMLコードを挿入します。


いかがでしたでしょうか?

リンクデザインをおしゃれにする事は、記事内リンクのクリック率を上げる事にも繋がります。

なので、基本的なリンクの貼り方からデザイン方法まで、Bloggerユーザーの参考なればひもくみは嬉しいです!

コメントを投稿

0 コメント