stinger3 備忘録 11

2017年12月20日stinger3 備忘録stinger3, カスタマイズ, 続きを読むstinger3 備忘録, カスタマイズ, 続きを読む

stinger3

「続きを読む」をカスタマイズ

 

1.「続きを読む」のボタンを右側に寄せる 1

2.「続きを読む」のボタンを右側に寄せる 2

3.「続きを読む」のボタンにマウスを置いたら変化させて魅せる

 

以下記事はワードプレス(WP)や、テーマのstinger3をカスタマイズ

したやり方等を忘れないために書き留めた備忘録です。

 

記事内にソースコードを表記してる箇所は、ダブルクリックすると

ソースコードが全選択されるので、コピーして使えます。

 

尚、修正したソースコードは、必ずFTPソフトを使ってサーバー

にアップ。または各サーバーのオプション(ファイルマネージ

ャー)等(例はさくらサーバーです)で編集してください。

 

バックアップは忘れずに!!!

 

TOPページの記事毎にある「続きを見る」を右側へ寄せた。

 

個人的に「続きを見る」が右側にあったほうが、記事全文を読まれ

てもらえそうな気がしたので。

 

修正は、2通りあったので試してみた。

修正前の「続きを読む」の画像です。

 

st3 burogu008

st3 burogu009

 

 

1.「続きを読む」のボタンを右側に寄せる 1

 

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

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

 

 

だったと思います。

上記コード「.motto a {」内の最後の「}」の前の行に

「float: right;」追加する。

 

修正後

 

st3 burogu004

 

 

2.「続きを読む」のボタンを右側に寄せる 2

 

別なやり方

「home PHP」を修正します。

「home PHP」を開きます。

中間あたりに下記コードがあるので探す。

 

 

のコード内の

 

 

を下記コードに書き換える

 

 

変更後

 

 

現在、こちらの方法でカスタマイズ中です。

記事の境界線と重ならないのでいいなと思った。

 

st3 burogu010

 

 

3.「続きを読む」のボタンにマウスを置いたら変化させて魅せる

 

「続きを読む」のボタンにマウスを置いて変化したら「ワオー」と 思いませんか?

多分興味を持ってくれるファンが増えるかもと思い、強調してみた。

 

「style.css」から「.motto a {」&「.motto a:hover {」という 記述を探す。

[.motto a ]が、通常の「続きを読む」ボタンの状態を表している 部分。

「.motto a:hover」が、マウスを置いたときの状態を表す部分にな ります。

 

[.motto a ]のコードの最後に

 

 

を追記する。

次に「.motto a:hover」のコードの最後に

 

 

を追記する。

 

ついでに背景色等も修正した後のコードは以下のようになりました。

 

st3 burogu011

 

今のところこれが気に入ってます。