るうのたわごと。

[£]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


  関連記事

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

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

danbou
[£]”するぷろ”既存エントリーBANからの生還劇

Androidではモブログし難いよね、と思っているるう(@Lugh_)です。 う …

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

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

no image
[£]Xperia SX(Android) でモブログ環境を作ってみた!(試行錯誤中)

最近、Wordpress公式アプリでブログ更新をしているるう(@Lugh_)です …

no image
[£]STINGER3、ウィジェットがうまく編集されない場合はテーマを変えてみるといいかも?

と、言うことを書こうと思ったら事象が再現しなかったるう(@Lugh_)です。 い …

no image
[£]Stinger2をカスタマイズする -個別記事ページ各種見出しのスタイルを変更する-

日中もマニュアルを作っていた気がするるう(@Lugh_)です。 いろいろ大変です …

Xperia SX with Danbou
[£]WPTouch(フリー版)をAndroid4.1に対応させてみた

一つ進んだら一つ問題が起きてる気がするのはきっと気のせい…と思いたいるう(@Lu …

no image
[£]Stinger2をカスタマイズする -ヘッダタイトル画像にリンクをはる-

Stinger2を自分なりにカスタマイズしているるう(@Lugh_)です。 本来 …

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

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

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

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