初心者がリンクのカスタマイズをしてみる!CSSコードを入れてみよう!

リンクにマウスカーソルを乗せた時文字がアニメーションする時ありますよね?

あれはきっとお高い有料のWordPressのテーマにしか備わってない機能か
HTMLだかCSSを相当詳しくないと作れないものかと思ってましたが

調べてみたら割りと簡単に作れそう??

なのでチャレンジしてみました!

WordPressでCSSはどこに入れるの?

CSSとは、HTMLのタグで囲んだ文字の色や大きさ、背景の色や配置を指定する為の言語です。

何となく理解はしてましたが本格的にいじるのはほぼ初めてに近い初心者なんでふあんー

私の場合はSimplicityさんのテーマを使ってます。
テーマによっては違う部分もあるかも知れません。



①のダッシュボードから②の外観、③のテーマを編集すると編集画面に変わりますので
右のテーマを選択します。

私の場合は子テーマを使っているので
Simplicity2 child を選択します。



右にずらっとテンプレートやらPHPやらが並んでいるので
下の方に降っていくと、スタイルシート(style.css)という項目があるので
そこをクリック!

しかしこの沢山ある項目、見てもよく分からないですが自由にいじれるようになれば
ブログのデザインもガラッと変えれるようになるんですかねっ

いつか自在にカスタマイズできるようになりたいですね(*^^*)

CSSコードを入れてみよう

テーマの編集画面から



/* Simplicity子テーマ用のスタイルを書く */
この下に

a {
color: #2098A8;
word-wrap: break-word;
transition: 1s;
}

a:hover {
color: #C03;
}

を追加。
transition(トランジション)というのは変化する時間を指定しているのでこの場合は1s(1秒)変化しているということです。

colorの部分を変えて、青から紫に変化するようにしてみます。



できました!

青文字のリンクにマウスカーソルを載せると1秒かけて紫に変化しました!

ですが・・・
記事一覧のリンクとかは変わらなかったのです。
とりあえずは投稿記事本文に書いたリンクの色だけは変わりました^^;

他のリンクの変化を付けるにはまだまだCSSの勉強が必要ですね!

まとめ

ちょっとしたCSSのカスタマイズですが
色々と勉強になりました。

リンクの文字の色や変化を変えるだけでブログのカスタマイズが楽しくなってきますね!

HTMLやCSSの勉強をしていつかは詳しく解説記事を書けるくらいになりたいと思います^^;

ブログランキングに参加しています♪
応援クリックしてもらえるととても励みになります・・・(〃∇〃)

にほんブログ村 小遣いブログへ