記事末尾をテンプレ(定型文)化しようと思ったのは、
うちのブログも頑張ってアクセスを稼ごうと思い、
下記サイトに登録したのがそもそもの発端。
www.blogmura.com
blog.with2.net
んで、登録したのはいいものの、アクセスを
増やすには記事にバナーを設置しなければ
いけないのだが、毎回バナーを貼り付けるのは
非常にめんどくさい。
だって貼り付けるhtmlは毎回同じなんだもん。
それであれば、記事の最後に必ずバナーを
挿入する仕組みを作る方がずっと楽なのだ。
というわけで、やったことを書く。
1.フッタの編集
はてなのエントリーは、html上
<div class="entry-content">(記事内容)</div>;
でタグ付けされている。
なので、このdiv句のすぐ後に定型文を入れたい。
ダッシュボード>カスタマイズ>フッタ
に下記のスクリプトを追加。
<!-- 記事フッタ用 --> <script type="text/javascript"> $(".entry-content").after('(テンプレ化したいhtml)'); </script>
実際は、(テンプレ化したいhtml)の部分に
バナー用のhtmlを挿入する。そうすれば、
毎度毎度記事ごとにバナーを挿入せずに済む。
ただ、僕のブログでは、テーマの関係なのか
テンプレ部分がうまい位置に表示されなかったので
cssをいじって整形することにした。
2.CSSによる整形
上記の(テンプレ化したいhtml)の部分を
下記のようにさらにタグ付けする。
<!-- 記事フッタ用 --> <script type="text/javascript"> $(".entry-content").after('<div class="article_foot">テンプレ化したい内容</div>'); </script>
ここで作成したclassをcssで操作する。
ダッシュボード>カスタマイズ>デザインCSS
に下記のcssを追加。
/* 記事フッタ用 */ .article_foot{ width: 100%; max-width: 500px; padding: 20px; margin-top: 20px; margin-left: 85px; /* <--これがしたいだけ */ border: 2px outset #eee; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } .article_foot p{ font-size: 12px; }
marginを無理矢理調整して表示位置を補整する
というかなりの力技である。苦肉の策だが、
他にいい方法が思いつかなかったので仕方ない。
ちなみに、margin以外の部分はマストではない。
角丸とかborderのoutsetとか、もはや趣味の範疇だ。
若干ブサイクではあるものの、表示上はこれで
問題ないので、しばらくはこれでいこうと思う。
課題は、スマホページは未対応ってところだな…