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

スポンサーリンク

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ちなみに、「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」の部分を変えることで、自分の好きな色に直せます。

スポンサーリンク

この記事をシェアする

こちらの記事もおすすめ！