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 {」というワードで検索すると、すぐに見つかります。

 

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

 

だったと思います。

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

「float: right;」追加する。

 

修正後

 

[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;
float: right;
}
[/css]

st3 burogu004

 

 

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

 

別なやり方

「home PHP」を修正します。

「home PHP」を開きます。

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

 

[php]
<div class="entry-content">
<h3 class="entry-title-ac"> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a></h3>
<div class="blog_info contentsbox">
<p>
<?php the_time(‘Y/m/d’) ?>
|
<?php the_category(‘, ‘) ?>
<?php the_tags(”, ‘, ‘); ?>
</p>
</div>
<p class="dami"><?php echo mb_substr( strip_tags( stinger_noshotcode( $post->post_content ) ), 0, 100 ) . ”; ?></p>
<p class="motto"><a class="more-link" href="<?php the_permalink() ?>">続きを見る</a></p>
</div>
<!– .entry-content –>
[/php]

 

のコード内の

 

[php]
<p class="motto"><a class="more-link" href="<?php the_permalink() ?>">続きを見る</a></p>
[/php]

 

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

 

[php]
<div style="float:right;"><p class="motto"><a class="more-link" href="<?php the_permalink() ?>">続きを見る</a></p></div>
[/php]

 

変更後

 

[php]
<div class="entry-content">
<h3 class="entry-title-ac"> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a></h3>
<div class="blog_info contentsbox">
<p>
<?php the_time(‘Y/m/d’) ?>
|
<?php the_category(‘, ‘) ?>
<?php the_tags(”, ‘, ‘); ?>
</p>
</div>
<p class="dami"><?php echo mb_substr( strip_tags( stinger_noshotcode( $post->post_content ) ), 0, 100 ) . ”; ?></p>
<div style="float:right;"><p class="motto"><a class="more-link" href="<?php the_permalink() ?>">続きを見る</a></p></div>
</div>
<!– .entry-content –>
[/php]

 

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

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

 

st3 burogu010

 

 

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

 

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

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

 

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

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

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

 

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

 

[css]
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
[/css]

 

を追記する。

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

 

[css]
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
[/css]

 

を追記する。

 

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

 

[css]
.motto a {
color: #FFF;
text-decoration: none;
background-color: #0f0;
width: 90px;
color: #000;
text-align: center;
display: block;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
font-weight: normal;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.motto a:hover {
color: #FFF;
text-decoration: none;
background-color: #00f;
color: #FFF;
text-align: center;
display: block;
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
[/css]

st3 burogu011

 

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