「Stinger3カスタマイズ」続きを見る(続きを読む)を右側へ移動させる方法

WordPress無料テーマである、「Stinger」シリーズの「Stringer3」のカスタマイズを行いました。

カスタマイズした場所は、TOPページの記事毎にある「続きを見る」を右側へ移動させました。

個人的に「続きを見る」が左にあると、違和感がありましたので・・。

修正は、とても簡単です。

 

参考にしたサイト

参照：【Stinger2】「続きを読む」ボタンを右下に設定する方法｜Oh-Blog

 

カスタマイズ手順

カスタマイズ手順を紹介致します。

※バックアップは必ず行ってください。

１．修正するファイルを開く

ファイル名：style.css

「style.css」をテキストエディタで開きます。

 

２．「続きを見る」で使用しているクラスを検索する

「style.css」から「 .motto a 」というクラスを探す。

「.motto a {」というワードで検索すると、すぐに見つかります。

 

こちらがstyle.cssの修正するソースの場所です。

■修正前

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

14行目に記述している「float: right;」追加する。

 

３．FTPソフトを使い、修正したソースファイルをアップする

修正したソースを、FTPソフトを使いサーバーへアップし完了です。

※バックアップは必ず取ってくださいね。

 

これで、「続きを見る」が右側へ移動しているはずです。

以上、私のカスタマイズ方法でした。参考程度にどうぞ。