ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

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

      2015/02/16

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

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

スポンサーリンク

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

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

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

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

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

スポンサーリンク

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;
}

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

スポンサーリンク

 - WORDPRESS

Comment

Message

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

CAPTCHA


  関連記事

WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法
WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法
WordPress[MAMP] ローカル環境へ本番環境を復元する
WordPress[MAMP] ローカル環境へ本番環境を復元する
WordPress[Yet Another Related Posts Plugin] RSSに関連記事を追加
WordPress[Yet Another Related Posts Plugin] RSSに関連記事を追加
WordPress[Revision Control] リビジョンを制御して無駄な容量を抑える
WordPress[Revision Control] リビジョンを制御して無駄な容量を抑える
WordPressにAmazonアソシエイトのプラグイン「AmazonJS」を導入
WordPress[AmazonJS] Amazonアソシエイトのプラグインを導入
wordpress優良プラグイン
wordpress優良プラグイン
WordPress[Preserve Editor Scroll Position] エディターのスクロール位置を記憶
WordPress[Preserve Editor Scroll Position] エディターのスクロール位置を記憶
WordPress[Limit Login Attempts] ログイン試行回数を制限してブルートフォースアタックを防ぐ
WordPress[Limit Login Attempts] ログイン試行回数を制限してブルートフォースアタックを防ぐ
WordPress[Acunetix WP Security] テーブル接頭辞を簡単に変更する
WordPress[Acunetix WP Security] テーブル接頭辞を簡単に変更する
WordPress[Public Post Preview] 記事を限定公開する
WordPress[Public Post Preview] 記事を限定公開する