アメブロのリンクの貼り方とデザインのカスタマイズ方法
あなたは、アメブロのリンクの貼り方が分からずに、どうしたら良いのか分からなくなっているのではないでしょうか?
ブログを運営するに当たって、リンクの貼り方やカスタマイズの方法が分からなければ、まともなブログが作れなくなるので、ぜひ、本記事を見て、リンクの貼り方をマスターしていきましょう。
今回は、
- 記事中にリンクを貼る方法
- サイドバーにリンクを貼る方法
の2つを紹介していきます。では、早速いきましょう。
あなたは、アメブロのリンクの貼り方が分からずに、どうしたら良いのか分からなくなっているのではないでしょうか?
ブログを運営するに当たって、リンクの貼り方やカスタマイズの方法が分からなければ、まともなブログが作れなくなるので、ぜひ、本記事を見て、リンクの貼り方をマスターしていきましょう。
今回は、
の2つを紹介していきます。では、早速いきましょう。
スポンサーリンク
記事にリンクを貼る事で、ユーザーのブログ閲覧の利便性が向上し、ユーザーに優しいブログ作りができるようになります。
まずは、記事編集画面に入り、リンクを挿入したい箇所にカーソルを付けて、下の画像の様に「リンク」ボタンをクリックします。
そしたら、このような画面が出てくるので、あなたが貼り付けたいリンクの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」の部分を変えることで、自分の好きな色に直せます。
スポンサーリンク