逆に、他のコンテンツが目立たなくなるかも?
好き嫌いがある、
もっと読む/続き 等の表示です。
続きを読む、を目立たせる
でははじめます。
テンプレート編集へいきます。
テンプレートの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 class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</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 に指定するわけです。
他のサイトでも応用出来ると思います。
当ブログ内の情報は、
全ての方に応用できるとは限りません。
必ずテンプレートはバックアップを取っておいて下さいね。
また、ご利用は自己責任でお願い致します。
ラビットしま子は美容ライターであり、
サイト制作のプロではありません。
個別のカスタマイズについてのご相談は、
乗ってあげたいけど、乗れません。(わからんから)
スポンサードリンク