gosign
GosignトップCSSWORDPRESSweb素材音楽素材NEWSGAMEお問合わせデザインホームページ

Stinger3カスタマイズ「続きを見る」「もっと見る」の背景色を変更

公開日: : 最終更新日:2014/09/15 CSS, wordpress ,

スティンガー3を使い始めて、真っ先に思ったのは「続きを見る」の背景色が目立たなくて、デザインに埋もれているなって事でした。しかもデフォルト色が微妙なグレーで押してる状態がぼんやりしたピンク色。。。まあ配色自体の組み合わせはいいんですけど、サイトのイメージ色とかけ離れちゃうと、ちょっと変えたくなりますよね。

 

ってなわけで、カスタマイズです。
いじるファイルは「style.css」です。
※作業を始める前に、バックアップは取りましょう。

 実践!カスタマイズ

 

.motto

で検索すると

/*記事を読む*/

.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:hover {
color: #FFF;
text-decoration: none;
background-color: #FFAAAA;
color: #FFF;
text-align: center;
display: block;
}

っていう部分があるかと思いますが、ここをいじる事でカスタマイズが可能です。
.motto a:hover以後はオンカーソル状態です。

background-color:  「続きを見る」の背景色
width:  「続きを見る」の背景枠の幅
color:  「続きを見る」の文字色
text-align:  「続きを見る」の文字寄せ (left / center / right)

です。cssやhtmlのコーディングに慣れている方はさほどつまづくところではないと思います。全くはじめての方は、バックアップをとってトライ&エラーを繰り返してみてください。

関連記事

Stinger3カスタマイズ「favicon.ico」を置き換えてブックマークを華やかに

URLの先頭に出てくるアイコンは通称「favicon.ico」と呼ばれています。読み方はファヴィコン

記事を読む

no image

同じディレクトリ内に「index.php」と「index.html」を置いたときに.htmlファイルが優先されて表示するのを変更する方法

wordpress導入で「index.php」と「index.html」を同じディレクトリに置く必要

記事を読む

Stinger3カスタマイズ・記事タイトル色を変更して目立たせよう!

Stinger3は、そのまま使っても十分優秀なテーマなんですが、使っているとやっぱり、黒文字だらけだ

記事を読む

Stinger3カスタマイズ・サイドバーの左右位置を変える

近年左右2カラム型のCSSテーマでは左側に広い記事エリア、右側に狭めなリンクエリアを設けるものが増え

記事を読む

Stinger3カスタマイズ「JQueryスライドショーbxSlider」を入れてみよう。

トップページに動的コンテンツを入れると画面が華やいでみえますよね。今回は「Java Script」の

記事を読む

ワードプレス「続きを見る」を押しても続きが読めない現象の対処法

筆者がまだワードプレスを初めて1週間の頃。何気に自分のサイトの「続きを読む」を押してみたところ、いく

記事を読む

Stinger3カスタマイズ「サイドバーの記事タイトル下の出だし」を消去する方法

正式名称はなんて言うのかはよくわからないですが、Stinger3のサイドバーの「NEW ENTRY」

記事を読む

Stinger5カスタマイズ・サイドバーの左右を位置を変更する

いまだマイナーチェンジが続くStinger5ですが、骨子となる部分は固まってきた様子なので思い切って

記事を読む

PAGE TOP ↑