2015年5月6日

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

スポンサードリンク

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

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


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



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



 テンプレートの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 + &quot;#more&quot;' 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 に指定するわけです。

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




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

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


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

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

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


スポンサードリンク