超お手軽に『続きを読む』を実装する

アメブロのトップページは複数記事を表示できるようになっていますが、『続きを読む』が無いせいで、長い記事を書くとその下の記事が読まれなくなってしまうことが多々あります。
そこで今回は、超手抜きな方法で手っ取り早く『続きを読む』を導入する方法を書いてみます。

●注意する点

jQueryを導入してあること、新スキンであること、フリープラグインが右側のカラムにあること、が条件です。
アイキャッチ画像を使っている方はその画像の高さを調べておいてください。
あとは、記事の書き方に規則性がまるで無いと導入後の見栄えが悪いので、そういうブログにはオススメしません。

●jQueryの導入方法

フリープラグインの先頭に、以下のコードを貼り付けてください。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript" >
(function($){
  var JQ17 = $;
  JQ17(function(){window.$=window.jQuery=JQ17;});
}(jQuery));
</script>

これでバージョン1.7が使用可能です。

●『続きを読む』導入方法

フリープラグインに以下のスクリプトを書いてください。

<script type="text/javascript">
(function($){
  (location.href.search('entry-') === -1 && $('.articleText').length) && (
    $('article').each(function(){
      $('.articleText:eq(0)',this)
      .css({'height':'404px','overflow':'hidden'})
      .after(
        '<h3 class="tuduki"><a href="'+
        $('a:eq(0)',this).attr('href')+
        '">続きを読む</a></h3>'
      );
    })
  );
}(jQuery));
</script>

『404px』の数字の部分はそれぞれの記事の高さになります。
各自自分のブログに合うように設定してください。
要するに一定の高さまで表示して、後は隠してしまっているだけなんですねｗ

これは記事に使うフォントのサイズやアイキャッチの大きさが一定であれば、記事の文字が上半分だけ見える、ということなく綺麗に隠れてくれます。
綺麗に隠れない方はCSSで記事に枠線などを入れると違和感が大幅に減るのでオススメです！

次に、CSSで『続きを読む』の部分を装飾しましょう。
ユーザーCSSの一番下に以下のCSSを追記してください

h3.tuduki{
padding:5px;
border:1px dotted #cacaca;
background-color:#ececec;
}

CSSがわかる方はお好きなようにカスタマイズしちゃってください！

●左カラムにプラグインがある方は・・・

本文より先にフリープラグインが読み込まれるので、あまり綺麗に表示できません。
それでもどうしてもやってみたい方は、スクリプトを以下のように変えてみてください。

<script type="text/javascript">
(function($){
  $(function(){
    (location.href.search('entry-') === -1 && $('.articleText').length) && (
      $('article').each(function(){
        $('.articleText:eq(0)',this)
        .css({'height':'404px','overflow':'hidden'})
        .after(
          '<h3 class="tuduki"><a href="'+
          $('a:eq(0)',this).attr('href')+
          '">続きを読む</a></h3>'
        );
      })
    );
  });
}(jQuery));
</script>

しかし、アメブロはホント便利機能が少ないですね・・・。
コストを宣伝費にばかりまわしてるのか～！？