アメブロのリンクの貼り方とデザインのカスタマイズ方法

   

rinkuharituke

あなたは、アメブロのリンクの貼り方が分からずに、どうしたら良いのか分からなくなっているのではないでしょうか?

ブログを運営するに当たって、リンクの貼り方やカスタマイズの方法が分からなければ、まともなブログが作れなくなるので、ぜひ、本記事を見て、リンクの貼り方をマスターしていきましょう。

今回は、

  • 記事中にリンクを貼る方法
  • サイドバーにリンクを貼る方法

の2つを紹介していきます。では、早速いきましょう。

photo credit: Elle Rae_ via photopin cc

スポンサーリンク

記事中にリンクを貼る方法

記事にリンクを貼る事で、ユーザーのブログ閲覧の利便性が向上し、ユーザーに優しいブログ作りができるようになります。

まずは、記事編集画面に入り、リンクを挿入したい箇所にカーソルを付けて、下の画像の様に「リンク」ボタンをクリックします。

rinku1

そしたら、このような画面が出てくるので、あなたが貼り付けたいリンクのURLを貼り付けます。

rinku2

URLの貼り付け方は、リンクしたいページを開き、上の方にあるURLをドラックした後に右クリックして、「コピー」を押します。その後、また先ほどの画面に戻って、URLの欄の「http://」を消して、先ほどコピーしたURLを貼り付けます。

rinku3

完成すると、このようになります。

rinku4

ちなみに、「リンク先の表示方法」では、下の画像のように、リンクをクリックした時に、新しいウィンドウを開いて、リンクページに飛ぶか、同じウィンドウでリンクページに飛ぶかを設定できます。

rinku5

先ほどの画面で、リンクのURLを貼り付けた後に「リンク」をクリックすると、このような画面になります。

rinku6

しかし、このままだとリンクの文字がないので、<a href="http:~" target="blank">と</a>の間に、リンクの文字を入れましょう。ここの例として、「ここにリンクの名前を入力」という文字を入れてみました。

記事を作成した後は、「保存」をクリックです。完成すると、このようにリンクが貼り付けられます。

rinku7

サイドバーにリンクを貼る方法

サイドバーにリンクを貼る方法は、至って簡単です。まずは、マイページに入り、画面の右上に「三」のようなマークをクリックします。その後、メニューにある「ブックマーク管理」をクリックです。

rinku8

「ブックマーク管理」の画面が出てくるので、「サイト名」「URL」「順番」を入力した後に、「追加」「保存」を順番にクリックしていきます。

「順番」とは、サイドバーのリンクが複数あった時に、どのリンクを上から順番に持ってくるかを決めるものです。一番目立たせたいリンクほど、若い数字を入れれば良いでしょう。

rinku9

設定が終われば、サイトのサイドバーにリンクが表示されていると思いますが、万が一、表示されない場合は、マイページの「三」マークをクリックし、サイドバーの項目にある「配置設定」をクリックしましょう。

そして、「使用する機能」の方に、ブックマークを追加させます。これで、リンクがサイドバーに貼り付けることに成功しました。

rinku91

リンクのデザインをカスタマイズする方法

アメブロの初期設定のリンクデザインでも、シンプルで十分良いデザインとなっていますが、「自分の個性を出したい!」と言う人は、以下の方法でリンクデザインをカスタマイズしていきましょう。

まずは、「マイページ」を開き「三」マークをクリックして、「デザインの変更」をクリックします。

rinku92

そして、下の方にある「カスタム可能」をクリックします。

rinku93

そして、「CSS編集用デザイン」を選びます。リンクデザインの設定は、このブログデザインでしかできないので、注意して下さい。

このデザインは、初期設定こそシンプルで個性がないですが、他のデザインと違い、ブログのデザインを全てカスタマイズできるので、結局は一番個性が出るデザインになります。

rinku94

ブログデザインを変更した後は、「デザインの編集」から「CSSの編集」をクリックします。そうすると、ローマ字だらけの記述がある画面になります。

今回は、ここに部分をカスタマイズしていきます。

rinku98

ちなみに、「color:#」という記述は、文字の色を示してして、「background-color」というのは、文字の背景の色を表しています。

オススメの設定方法は、上の画像を以下のように設定する方法です。上の画面の文字を全て消して、以下のコードをコピーして貼り付けてください。

/* リンク */
.skinAnchorColor,.skinBaseAnchorColor,.skinBlock a,a{
color:#0066;
}

/* 訪問済のリンク */
.skinAnchorVisitedColor,.skinBaseAnchorVisitedColor,.skinBlock a:visited,a:visited{
color:#0066;
}

/* マウスオーバーしたときのリンク */
.skinAnchorHoverColor,.skinBaseAnchorHoverColor,.skinBlock a:focus,.skinBlock a:hover,a:focus,a:hover{
color:#0066;
text-decoration:underline;
}

このように設定することで、リンクの文字は統一されて、リンクにマウスを乗せた時に、リンクの下の線が入るようになります。ブログ読者にとっては「この文字は、リンクなんだな」と直感的に理解できるようになるので、読者に優しいリンクになります。

リンクの文字の色を変えたければ、「color:#0066cc」の部分の「0066cc」を書き換えましょう。参考として、こちらのサイト様に様々な色のコードが掲載されているので、気に入った色があれば、そのコードを書けばOKです。

変更した後は、「保存」を忘れずにクリックしてください。

もし、リンクにマウスを乗せた時に、リンクの背景の色を変えたい場合は、以下のように、「マウスオーバーしたときのリンク」の部分だけ記述を直します。

/* マウスオーバーしたときのリンク */
.skinAnchorHoverColor,.skinBaseAnchorHoverColor,.skinBlock a:focus,.skinBlock a:hover,a:focus,a:hover{
color:#0066;
background-color:#00FF00;
}

 背景色も、文字色と同様「background-color:#00FF00」の「00FF00」の部分を変えることで、自分の好きな色に直せます。

スポンサーリンク

この記事をシェアする

スポンサーリンク

この記事と関連がある記事

スポンサーリンク