「続きを読む」をカスタマイズ
１．「続きを読む」のボタンを右側に寄せる １
２．「続きを読む」のボタンを右側に寄せる ２
３．「続きを読む」のボタンにマウスを置いたら変化させて魅せる
以下記事はワードプレス(WP)や、テーマのstinger3をカスタマイズ
したやり方等を忘れないために書き留めた備忘録です。
記事内にソースコードを表記してる箇所は、ダブルクリックすると
ソースコードが全選択されるので、コピーして使えます。
尚、修正したソースコードは、必ずＦＴＰソフトを使ってサーバー
にアップ。または各サーバーのオプション（ファイルマネージ
ャー）等（例はさくらサーバーです）で編集してください。
バックアップは忘れずに！！！
TOPページの記事毎にある「続きを見る」を右側へ寄せた。
個人的に「続きを見る」が右側にあったほうが、記事全文を読まれ
てもらえそうな気がしたので。
修正は、２通りあったので試してみた。
修正前の「続きを読む」の画像です。
１．「続きを読む」のボタンを右側に寄せる １
「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]
２．「続きを読む」のボタンを右側に寄せる ２
別なやり方
「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]
現在、こちらの方法でカスタマイズ中です。
記事の境界線と重ならないのでいいなと思った。
３．「続きを読む」のボタンにマウスを置いたら変化させて魅せる
「続きを読む｣のボタンにマウスを置いて変化したら「ワオー」と 思いませんか？
多分興味を持ってくれるファンが増えるかもと思い、強調してみた。
「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]
今のところこれが気に入ってます。
コメント