モッピー!お金がたまるポイントサイト

WordPressテーマ「Stinger3」の「続きを読む」を右側へ移動する方法

2015/02/16

WordPressテーマ「Stinger3」の「続きを読む」を右側へ移動する方法

Stinger3を導入してから少しずつカスタマイズを行っていますが、今日はTOPページの記事ごと出てくる「続きを読む」ボタンを右側へ移動して見た目をスッキリさせる方法を備忘録として残したいと思います。

[adsense]

「続きを読む」ボタンを右側に移動

Stinger3はデフォルトだとこのように「続きを読む」のボタンが左側にあり…

、その下に記事の区切り線を入れて記事ごとの表示を分かりやすくする方法を備忘録として残しておきたいと思います。

自分的には少し違和感があったのでこのように右に移動しようと思います。

WordPressテーマ「Stinger3」の「続きを読む」を右側へ移動する方法

[adsense]

style.cssを開いて「続きを読む」ボタンの設定を変更

例:ダッシュボード→外観→テーマ編集から→スタイルシート(style.css)
自分は編集にTransmit4を使っています。

[修正前] 839行目から854行目を抜粋

/*記事を読む*/

.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;
	float: right;
}

ここの15行目「font-weight: normal;」の部分を「float: right;」に変更します。最終的にこのようになっていれば問題ありません。

[修正後]

/*記事を読む*/

.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;
        float: right;
}

いかがでしょうか?これでとりあえず問題なく右側に移動しました。読んで頂いてありがとうございました。

[adsense]

この記事を書いた人

ディーエムガジェット 

非IT系エンジニア。日々の出来事や自分の好きな物などの紹介をメインに色々発信していきます。2012 年から禁煙を開始して68キロぐらいだった体重が2012年6月には75キロまで増加。ヤバい!と感じてダイエットを開始。一回65キロまで落としましたが、2018年8月現在また72キロまで増加。こんな身体でもトライアスロンに出場予定「プロフィールはこちら

このエントリーをはてなブックマークに追加

WORDPRESS

Posted by dmgadget