アメブロ記事内のリンクの文字色を変えるには(既存のデザインの場合) | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…

こんにちは、パソコンインストラクターの川上雄大です。

 

 

過去記事に、このようなご質問のコメントをいただきました!

 

 

 

4. 無題
お久しぶりに訪問させて頂きました。

最近、過去記事を見て頂くのに「リンク」を付ける事が度々あるのですが、そのリンクはこちらと言う文字が
「薄くて」目立ないのに気が付きました。

色々調べてやって見たのですが、解らずじまいでした。
リンクの文字をカラーにするにはどうしたらいいのか教えて頂くと助かります。

ほんと難しい(ToT)/~~~
ラパン

 

 

ラパンさんのブログを拝見しますと、デザインが「CSS編集用デザイン」にはなっていませんので、いらしていただいた過去記事のようにはできないです^^;

 

 

で、

 

アメブロが用意しているデザインでも、本文のリンクの色を変える方法をお伝えしますね。

 

 

・記事内のリンクの色を16px、太字、青色(#0000ff)

・リング後の色を濃い青色(#000080)

・リンク文字にマウスを乗せた時の色を赤色(#ff0000)

 

にした場合、

 

次のコードを

 

プロフィール写真が四角い新デザインの場合、

(ラパンさんはこちらです)

 

<style type="text/css">.articleText a{font-size:16px;font-weight:bold;color:#0000ff;text-decoration:underline;}.articleText a:visited{text-decoration:none;color:#000080;}.articleText a:hover{text-decoration:none;color:#ff0000;}</style>

 

 

プロフィール写真が丸い最新デザインの場合、

 

<style type="text/css">.skin-entryBody a{font-size:16px;font-weight:bold;color:#0000ff;text-decoration:underline;}.skin-entryBody a:visited{text-decoration:none;color:#000080;}.skin-entryBody a:hover{text-decoration:none;color:#ff0000;}</style>

 

 

 

 

 

フリースペース編集欄の最後にコピペしてください。

 

 

マイページの右上の「設定▲」をクリック(①)し、「フリースペース編集」をクリック(②)します。

 

 

フリースペース編集欄が表示されます。

 

 

 

一番下に先ほどのコードをコピペして、「保存」をクリックします。

 

 

 

あとは、ご自分のブログを表示して、更新(F5キー or command+Rキー)して確認してみます。

 

 

 

なお・・・

 

 

「そのリンクはこちら」の文字だけのリンクの色等を変えたい場合は、

 

フリースペース編集欄ではなく、

 

「ブログを書く」内の「HTML表示」欄で、

 

 

直接このようなタグをコピペして、修正されるとよいです。

 

 

<a style="font-weight:bold;color:#00ff00;text-decoration:underline;" href="リンク先のURL" target="_blank">そのリンクはこちら</a>

 

 

 

 

そのリンクはこちら

 

 

※注意!ここの例では、リンクの色を緑色(#00ff00)にしていますので、青色(#0000ff)に変更するなりしてください。さらに、リンク先は「リンク先のURL」に指定してください。

 

(記事のURLの取得方法は過去記事を→『どうすれば、記事URL(アドレス)がわかるの?』)

 

 


以上、リンクの文字色を変えるには、でした。

 

Instagram

 


LIDS札幌・ライフデザインスクール
川上 雄大

 

 

 

 

川上雄大