アメブロ続きを読むやり方・設定

アメーバブログ(アメブロ)には、通常ですと「続きを読む」が設定できません。ワードプレスなどならmoreタグを設定すればいいですし、FC2ブログなら「追記の編集」部分に記載すれば、自動的に「続きを読む」仕様になるのですが、アメブロは簡単には出来ません。

アメブロ続きを読むやり方・設定


◆アメブロ続きを読むやり方・設定方法

アメーバブログにログインし。設定・管理をクリックします。

アメブロ設定管理


「プラグインの追加」をクリックします。

アメーバブログプラグイン追加


フリープラグインに以下を記入します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#nexttext").css("display", "none");
$("#nexttextPush").click(function(){
$("#nexttext").toggle();
});
});
</script>

アメーバブログフリープラグイン


設定は「こちら」をクリックします。

アメブロ設定は「こちら」


使用する機能に「フリープラグイン」をドラッグ&ドロップ で移動させます。
移動させたら、「保存」をクリックします。

アメブロ使用する機能


そして、記事を書く際に以下のタグを記入します。

<div id="nexttextPush">続きを読む</div>
<div id="nexttext">
ここに隠す文章を入れます。
</div>

アメブロ記事を書く


そして、記事を公開すると、以下のように「続きを読む」と表示され、「ここに隠す文章を入れます。」の部分は見えない状態でアップされます。

アメブロ続きを読む


実際に「続きを読む」をクリックしてみると、以下のように隠されていた文章が表示されます。

アメブロ続きを読んだ後


id指定のままですと、最新記事にしか「続きを読む」が機能しません。
最新記事のみに「続きを読む」を使用する場合は、このままでOKです。

他の記事にも「続きを読む」を設定したい場合のやり方・設定は、id指定をclass指定に変更すればOKです。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".nexttext").css("display", "none");
$(".nexttextPush").click(function(){
$(".nexttext").toggle();
});
});
</script>

<div class="nexttextPush">続きを読む</div>
<div class="nexttext">
ここに隔す文章を入れます。
</div>

というclass指定にすると、他の記事でも使用できます。

id指定=特定のidは、1ページに1度しか使用できない。
class指定=1つのページで何度でも使用できる。

Advertisement

よろしければ応援して下さい(^v^)

PINGOO!カテゴリ日記 ブログランキング・にほんブログ村へ fc2 people