今回は記事の後に自動で追加される定型文を設定してみたいと思います。
既に色々な方のブログで設定しているのをよく見かけますね。
記事毎に自動で表示される内容ですので、アピールしたい内容を分かりやすく
設定する事により、そのエリアへの誘導がしやすくなりますね！
なお、アメデコでは「カスタム可能」な中にある「CSS編集用デザイン」を元に
記事を書かせて頂いておりますので、そちらをご了承頂いた上でご覧ください。
今回もjQueryとフリープラグインを使用するので事前に「jQueryでフッターを作ってみよう」を見てアメブロでのjQueryの使い方を見ておいてくださいね。
それでは早速やっていきましょう。
<script type="text/javascript">
$(".articleText").after('定型文として表示したい内容');
</script>
これが基本の形だと思ってください。
これは、オレンジ色の箇所の要素の後に赤色の内容を追加するというjQueryです。
以前紹介した「jQueryでフッターを作ってみよう」と基本は同じですね。
つまり、管理画面から書いた記事の後に内容を追加すると言うことになります。
※赤色の内容は基本、テキストでも画像でもHTMLでもOKです。
例がないとどの様な感じになるのか分かりにくいかと思いますので、
私が実際に設定している物を例にして記事を書いていきたいと思います。
フリープラグインに追加する内容
<script type="text/javascript">
$(".articleText").after('<div class="articleTemplate"><a href="リンク先のURL" title="アメブロの集客でお悩みは御座いませんか？"><img src="表示する画像のURL" alt="アメブロの集客でお悩みは御座いませんか？"></a></div>');
</script>
赤い部分が実際に記事の後に追加される内容になります。
URL等は省略しましたが、私の場合はCSSで「articleTemplate」というクラスで画像の位置の調整をして、画像にリンクを設定している簡単な物になります。
※赤い部分は必ず1行にして上のような形でフリープラグインに追加してください。
上記で設定したものがこの記事の後に表示されていますので
そちらでどのように表示されているか確認してみてくださいね。
皆様も記事エリアの定型文をカスタマイズしてみてはいかがでしょうか？
最後まで記事を読んでくれてありがとうございました！