forLifeMap

仕事、投資、技術メモ、オカルト、その他クソミソな趣味や日常についてあれこれ綴る、日記帳というより雑記帳。忘却の彼方に置き忘れた夢と情熱を求めて彷徨中。

記事末尾のテンプレ化記録

記事末尾をテンプレ(定型文)化しようと思ったのは、
うちのブログも頑張ってアクセスを稼ごうと思い、
下記サイトに登録したのがそもそもの発端。

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とか、もはや趣味の範疇だ。


若干ブサイクではあるものの、表示上はこれで
問題ないので、しばらくはこれでいこうと思う。

課題は、スマホページは未対応ってところだな…