もっと読む、を大きく表示させる

　大きくした方が見やすいという理由なだけです。
逆に、他のコンテンツが目立たなくなるかも？

好き嫌いがある、
もっと読む/続き　等の表示です。

続きを読む、を目立たせる

　でははじめます。
テンプレート編集へいきます。

　テンプレートのCSS記入のところに

.next-reading-tag {
right: 20px;
bottom: 60px;
position: absolute;
display: inline-brock;
background:#f4cccc;
padding: 5px 5px;
margin-top: 10px;
border-top: 1px solid #DCDDDD;
border-radius: 10px;
text-align: center;
font-size:160%;
font-weight:bold;
}

を入力します。

CSSの位置に入力です。

　次に、

<div class='post-footer'>

を検索します。

おそらく2つあります。

　1つは、モバイル用なので、何も触らないでおきます。
モバイル用には、下記のコードがありません。

　もう一方がPC用です。

こちらの上に、下記のコードがあります。

それは続きを読む、のコードです。
デフォルトで入っています。
コードはこちらです。

<b:if cond='data:post.hasJumpLink'>

</div>

</b:if>

PCとモバイルテンプレートの違い

　余談ですが、

スマホ用とPC用の見分け方は、

実はよくわかりません。

今回は、上に
<b:if cond='data:post.hasJumpLink'>

がある方がPC表示用だとわかりますが、
わからない場合も多々あります。

　他のサイトを見ると、上にスマホ用があるという時もありますし、

下にスマホ用があるという時もあります。
位置では判断できません。

多分、テンプレートによって違うのではないでしょうか？

　一番確実なのは、一度テンプレートのバックアップを取って、

両方試してみる事です。

一度わかれば、

あとは自分で目印でもつけておけばOKです。

なお、私の使っているテンプレートでは、

下にPC用がありました。

　で、 <div class='post-footer'>

の上に、入力するタグについてです。

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<div class='next-reading-tag'><a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a></div>
</div>
</b:if>

に変更します。

<div class='next-reading-tag'></div>とは、
先ほどCSSに入力したもの。

これをjump-link　に指定するわけです。

他のサイトでも応用出来ると思います。

　当ブログ内の情報は、
全ての方に応用できるとは限りません。

必ずテンプレートはバックアップを取っておいて下さいね。

また、ご利用は自己責任でお願い致します。

ラビットしま子は美容ライターであり、
サイト制作のプロではありません。

個別のカスタマイズについてのご相談は、
乗ってあげたいけど、乗れません。（わからんから）

スポンサードリンク

・ツイート

・Google+1

・夜中にも出現します(-_-)zzz
Follow @rabbitshimako

・メルマガは３時のおやつ時

フィード登録

2015年5月6日
ラベル: Blogger , HTML&CSS

ページ