アメブロのリンクを太字・下線消す・色をカスタマイズする方法

アメブロを運営していく上で、「リンクのデザインをカスタマイズしたい」と思うことはありませんか？

そこで今回は、アメブロのリンクを太字・下線消し・色をカスタマイズする方法を紹介していきます。

ぜひ、参考にして下さい。

アメブロのリンクのデザインをカスタマイズする流れ

まずは、ブログの管理画面にログインしたら、「デザインの変更」をクリックします。

その後、画面に出てくる「CSSの編集」をクリック。

そしたら、下の画像の様に、ローマ字だらけのコードが書かれた部分があると思います。その部分を少し下にスクロールした所に、下の画像のようなコードがあります。

今回は、ここの部分をカスタマイズして、リンクのデザインを変更していきます。

リンクの太さを変更する方法

リンクの文字の太さを変えたい場合には、「リンク」の項目のカッコ内「｛と｝の間」に、以下の様に記述をしていきます。

font-weight:700;

下の画像の様に書けば、上手くカスタマイズできると思います。ちなみに、「700」の部分は、半角数字にしなければいけません。

また、「font-weigt:700;」の「700」の部分の数字の変える事で、文字の太さを変えることができます。例えば、800にすると、より太い文字になるし、300だと細い文字になります。

リンクの下線を消したり付けたりする方法

リンクの下線（アンダーライン）を消したい場合は、以下の様に記述すればOKです。

text-decoration:none;

逆に、リンクの下線を付け加えたい場合は、以下の様に記述します。

text-decoration:underline;

例えば、普通の時はリンクに下線が引かれていないけど、マウスのカーソルを合わせた時だけ、リンクに下線を引きたい、と言う場合には、上の方法を応用して、以下の様に記述すればOKです。

リンクの色を変える方法

リンクの色を変える方法は、実はめちゃめちゃ簡単で、「color:#0066cc;」の部分の「0066cc」の6桁の部分を変えれば、色も変わります。

例えば、リンクの色を黒にしたいのであれば、「color:#000000;」と変えれば、リンクの色も黒になります。

「< href="http://www.netyasun.com/home/color.html" target="a">CSSカラーコード一覧」というサイトに、様々な色のコードが載っているので、色を決める参考にすれば良いでしょう。

まとめ

いかがだったでしょうか？

リンクは、ブログの中でも多く利用される機能なので、リンクを１つ変えるだけでも、ブログの印象は変わってきます。

地味な作業かもしれませんが、１つずつ丁寧にやることで、あなたのブログは確実に綺麗になっていきます。ぜひ、妥協せずに設定しておきましょう。

アメブロのフリースペースにリンクを貼るたった３つの手順

今回は、フリースペースにリンクを貼っていく方法を紹介していく。

ぜひ、参考にしてほしい。

１．フリースペース入力画面にいく

まずは、フリースペースの入力画面に行こう。まずは、「マイメニュー」の左サイドバーにある「設定・管理」をクリックする。

そして、「フリースペース編集」をクリックしよう。

２．リンクしたいブログのURLを貼り付ける

その後、下のような画面が出てくるので、赤線の部分にリンクを貼りたいページのURLを貼り付けよう。

具体的に説明すると、例えば、本ブログのページへリンクを貼りたい場合は、リンクしたいページを開き、画面上にあるURLを見つけよう。

その後は、下の画像のように、URLを右クリック→ドラッグをして、再度右クリック→「コピー」をクリックする

コピーをした後は、先ほどの赤線の記入欄にコピーしたURLを、右クリック→「貼り付け」で張り付ければOKだ。

上手く貼り付け終わると、上の画像のようになっているはずなので、「URL」のボタンをクリックしよう。

そしたら、下の画像のような、ローマ字だらけの文章が画面に出てくる。

この＜a href="ameblo.jp～">と＜/a＞の間に、リンクの文字を記入しよう。例えば、リンク名を「アメブロリンク」にしたい場合は、下の画像のように書けばよい。

３．サイドバーに「フリースペース」を追加する

最後に忘れずに設定しなければいけないのが、サイドバーに「フリースペース」の項目を追加することだ。

まずは最初にやったように、マイページから「設定・編集」をクリックした後に、「配置・設定」をクリックしよう。

そして、「フリースペース」を「使用する機能」の方に移すことで、設定は全て完了だ。

アメブロのリンクの貼り付け方｜初心者でも簡単にできる３ステップ

あなたは、アメブロを始めたのは良いけど、どうやって自分が思い描いているブログを作ればよいのか、悩んでいないだろうか？

アメブロ初心者が最初につまづきやすいのは、「リンクの貼り付け方」だろう。お気に入りのブログや記事を紹介したいのに、リンクの貼り付け方が分からないと、意味がない。

だが、安心してほしい。これから紹介するアメブロでのリンクの貼り付け方を実践すれば、初心者でも簡単にリンクを貼り付けができるようになる。

あなたがやる事は、ただこの記事の通りにリンクを貼るだけなので、安心して説明の通りにリンクを貼ってほしい。

では、早速行ってみよう。

１．リンクを記事内に挿入する

まずは、記事編集の画面に行こう。記事編集画面の上に、「リンク」というボタンがあるので、そこをクリックする。

その後、下の画像のような画面が出てくるので、「URL」の部分に、リンクしたい記事やブログのURLを記述していく。

やり方は、まずリンクしたいページを開いて、そのページの上の方にあるURLをコピーして貼り付けると良い。

画像の様に、URLを右クリックをした後にドラックをして、再度右クリックを押すと、「コピー」と言う項目が出るので、「コピー」をクリックしよう。

コピーをし終わったら、先ほどの画面に戻り、「URL」の記入欄の所にカーソルを乗せて、右クリック→「貼り付け」をすれば、リンクが出来上がる。

完成すると、下の画像のようになっているはずだ。

２．リンク先の表示方法の設定方法

先ほどの画像で紹介した画面に、「リンク先の表示方法」があるのが分かると思う。

この「リンク先の表示方法」とは、「新しいウィンドウ」と設定すれば、下の画像のように、誰かがリンクをクリックした後に、新しいウィンドウ（ページ）として表示されるようになる。

「リンク先の表示方法」はどちらに設定しても差し支えないが、ユーザーの事を考えると、自分のブログ内の記事のリンクであれば、「新しいウィンドウ」に。他人のブログの記事を紹介する目的のリンクであれば、「新しいウィンドウ」に設定するのが、理想的だ。

どちらの設定にするか決めた後は、画面下にある「リンク」のボタンをクリックしよう。

３．リンクの文字を記入する

「リンク」のボタンをクリックした後は、記事編集画面に、ローマ字がズラリと並んだものがが出てくる。

リンクの文字を指定したい場合は、＜a href="ameblo.jp/～"＞＜/a＞の部分の間に、文字を入力すると良い。

例えば、リンクの文字を「アメブロリンクの貼り付け方」としたい場合は、下の画面のように、書き加えると良い。

後は、通常通りに記事を書いていき、「公開」のボタンをクリックすれば、記事にリンクを貼り付けることができる。

アメブロの画像を拡大するすごくシンプルな方法

アメブロを運営している時に、画像を使うことがよくあるのではないでしょうか？

その時に、「この画像、もっと大きい方が良いのになー」と思う時が、あると思います。

そこで今回は、アメブロで画像を貼り付ける時に、その画像を拡大する方法を紹介します。

ぜひ、参考にして下さい。

まずは、ブログに画像をアップロードする

最初に、アメブロに画像をアップロードしましょう。画像のアップロードは、記事編集メニューの右上にあります。

そしたら、下の画像のような画面が出てくるので、「ファイルを選択」をクリックして、アップロードした画像を選んだ後に、「アップロード」をクリックします。

実際に画像を貼って、サイズを拡大させる

画像をアップロードした後は、その下の画面に、先ほどアップロードした画面があるので、「この画像を使う」をクリックします。

そしたら、記事編集画面に、ローマ字だらけのコードが出てきますが、その中に、「width」と「height」と書かれている部分があります。

もし、「width」などが書かれていない場合は、上の画像と同じように「width」と「height」の記述を付け加えると良いです。

今回は、この部分を編集することで、画像のカスタマイズをしていきます。

やり方は、先ほどの「width」と「height」の中に書かれている数字を変えるだけです「width」は画像の横のサイズ、「height」は画像のたての長さを示しています。

このように編集をすれば、無事カスタマイズが完了します。