共有テンプレートとカスタマイズ方法をちょっとだけ紹介。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

リンク部分の文字色を変える

~まずやってみよう~

※共有テンプレート「asagi-simple01」を使った例です。
スタイルシートで↓の部分をさがす。(上のほうにあります。)

/* リンクの設定
------------------------------------------ */
 a {color : #3300cc;text-decoration : none;}
 a:hover {	color : #660099;text-decoration : underline;}

赤い文字の部分を9900ff、青い文字の部分をCC3333に書き換えて、プレビューを押して下さい


~解説~

本文中と、両サイドのカラム内の(他のリンク部分については後ほど説明します)、リンク文字が紫色に、カーソルを当てると文字色があずき色になりますか?

 a {~} リンクのある箇所の指定
 a:hover {~} カーソルを当てた時の指定

{~}の中をスタイルシートで指定することで、該当箇所が変化します。
色を変えるには、colorを指定します。色についてはこちらを参考にして下さい。

このテンプレートでは使用していませんが、下記を追加することでさまざまな変化させることもできます。
 a:link {~} 未閲覧のリンク部分の指定
 a:visited {~} 閲覧済のリンク部分の指定
 a:active {~} リンク部分をアクティブ状態にした時(クリックした時)の指定

また、「text-decoration」の部分で文字の変化を指定できます。一例をあげておきます。
 none 指定なし
 underline 下線
 overline 上線
 line-through 打ち消し線

★このテンプレートでは、リンク部分の色を個別に指定している箇所があります。(ブログタイトル・記事タイトル・記事右下)
これらの箇所の色を変えるには、↓の部分を変更して下さい。

/* タイトル・サイトの説明部分の設定
------------------------------------------ */
	/* タイトル */
 ~中略~
 .blogtitle a {font-weight : bold;color : #333333;text-
decoration : none;}
 .blogtitle a:hover {font-weight : bold;color :
 #333333;text-decoration : none;}
 ~中略~

/* 中央カラム(Primary-Column)の設定
------------------------------------------ */
 ~中略~
	/* 記事のタイトル部分 */
 ~中略~
 .entry-header a {color : #333333;text-decoration
 : none;}
 .entry-header a:hover {color : #333333;text-
decoration : underline;}

 ~中略~
	/* フッター部分(コメントやトラックバックなど) */
 ~中略~
 .entry-footer a {color : #333333;text-decoration : 
underline;}
 .entry-footer a:hover {color : #333333;text-
decoration : none;}

★カスタマイズについて★

カスタマイズはご自由にどうぞ。
再配布も○ですが↓のことを守ってください。

・ページ下部の「Template designed by SYU_ASAGI」のリンクは削除しないで下さい。

・カスタマイズした場合、「arranged by ●●」と追記してください。

プロフィール

浅葱 愁

管理人  浅葱 愁(あさぎ しゅう)

▽ブログ名▽
浅葱愁のつれづれなるままに
▽URL▽
http://syuasagi.blog95.fc2.com/


当ブログはリンクフリーです。

MENU

◆共有テンプレート◆
「asagi-simple01」
「asagi-simple02」
注意事項も記載してますので、ご利用前にそれぞれ目を通してください。
コメントナンバーの表示について(01.02共通)
検索バーを非表示にする
◆テンプレートカスタマイズ◆
「asagi-simple01」を使った簡単なカスタマイズ方法を紹介。
はじめに
準備
色について
■文字のカスタマイズ
文字の色を変える
リンク部分の文字色を変える
本文を左寄せにする
■幅のカスタマイズ
幅を広げる
■枠のカスタマイズ
線の種類を変える
■背景のカスタマイズ
背景を変える

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。