るうのたわごと。

[£]Stinger2をカスタマイズする -「続きを見る」のスタイルを変更する-

 

カスタマイズで検索に来て下さる方もちらほら居てくださるのが励みになっているるう(@Lugh_)です。
さて、ご無沙汰していたStinger2をカスタマイズしてみることにしてみます。
今回は、「続きを見る」のスタイルを変えたいと思います。

続きを見る

今日の作業も、style.cssです。
※作業前と書いているのはDLしてきたままの状態のCSSのことです。

修正の際のキーワードは「motto」と「more-link」。

まずは「more-link」から。

440行目あたり
フォントサイズと文字色、テキストに下線を付けるという指示がされています。

.more-link {
  font-size: 14px;
  color: #5484C8;
  text-decoration: underline;
}

文字色とテキストの下線をなくす設定にします。

.more-link {
  font-size: 14px;
  color: #653d29;
  text-decoration: none;
}

1176行目あたりから。
マウスオーバー前の状態のスタイルです。

 .motto a {
	color: #FFF;
	text-decoration: none;
	background-color: #f3f3f3;
	width: 90px;
	color: #666666;
	text-align: center;
	display: block;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
	font-weight: normal;
}

文字色、枠背景色・枠線の色、形状、太さを変更。

 .motto a {

	text-decoration: none;
	background-color: #b0e0e6; /*枠内背景色*/
	width: 90px;
	color: #653d29; /*文字色*/
	text-align: center;
	display: block;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
	font-weight: normal;
	border-style: dotted; /*枠線種*/
	border-width: 2px; /*枠線太さ*/
	border-color: #4169e1; /*枠線色*/
}

1190行目あたりから。
マウスオーバー時の状態のスタイルです。

 .motto a:hover {
	color: #FFF;
	text-decoration: none;
	background-color: #FFAAAA;
	color: #FFF;
	text-align: center;
	display: block;
}

枠背景色を変更。

 .motto a:hover {
	color: #FFF;
	text-decoration: none;
	background-color: #1e90ff;
	text-align: center;
	display: block;
}

完成図。
続きを読む変更後。

さて、Stinger3も気になるし、モバイル版も何とかしなきゃな…と思っているるう(@Lugh_)でした。

 - ぶろぐ , ,

admax300-2

admax300-2

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事

やきど。
[£]改めまして、「るうのたわごと。」です。

改めまして、「るうのたわごと。」著者のるう(@Lugh_)です。 大まかなところ …

no image
[£]ウェブマスターツールがエラー(hentry)まみれだったので修正してみた:その2

先日施したエラーの結果が思わしくなかったので、少し方法を変えてみました。 先日の …

ロリポップユーザー画面1
[£]WordPressのログイン画面にエラー発生した時の対処方法(ロリポップ)

地道なPHPソース書き込みの毎日を過ごしているるう(@Lugh_)です。 昨夜は …

だららんペンギン
[£]WordPress、上書きインストールからの生還劇(ロリポップ!)

仕事柄「バックアップはしっかり取ってください」とよく言っているるう(@Lugh_ …

no image
[£]Feedlyボタンをつけてみた

るう(@Lugh_)です。 最近使い出したFeedly用のボタンを設置してみるこ …

だららんペンギン
[£]ロリポップで運営しているWordPressの乗っ取り対策?

ロリポップユーザーのるう(@Lugh_)です。 かなり多くのユーザーのWordp …

no image
[£]とりあえずPC版!SNSボタンの形をそれとなく揃えてみたよ!

やろうやろうと思っていたことをようやくやりました。 るう(@Lugh_)です。 …

wp1
[£]Android端末でモブログ環境を整えてみたかった…

基本的に手元でできるものは手元でやりたいるう(@Lugh_)です。 以前は絵日記 …

no image
[£]Stinger2をカスタマイズする -サイドバー見出しのスタイルを変更する-

年長さんの姪っ子と全力で遊んでちょっと腰に来ているるう(@Lugh_)です。 … …

だららんペンギン
[£]「Stinger2」改造 -SNSアイコン群にFeedly・RSS追加-

「Stinger2」で運営中のるう(@Lugh_)です。 「Stinger2」は …