DIVを使ってブログパーツを強制編集

簡単なコードをブログに埋め込むことでいろんな情報を表示してくれるブログパーツって便利ですよね。なかには余計な情報が便乗して表示されたりしますが、パーツ提供者としては
営利活動をしている以上、広告などを表示してもらい収益につなげなければいけないので仕方のないことです。でもそういったことに関係のないブログパーツの場合でも導入を簡単にするために埋め込みコードだけしかなく、 レイアウトの変更などができないものは多いです。またクラスを指定して色調だけでも合わせようと思ってもスタイルに「!important」指定がされていて変更できないようにされてたりもします。

今回はそういった場合に少し便利な方法をご紹介(^-^)/

これはブログサーバーやブログパーツのサーバーから情報を受け取って画面に表示された後にJavascriptを使って画面上でDIVタグの中身を編集する方法なんですが、文字を書き換えたり、画像を変更したりぐらいの簡単な調整ならば可能なので臨機応変に使えば便利ですよ( ￣∇￣)ゞ

ちなみに私のBloggerブログの投稿日付の表示も画面表示時に「1/28/2012」で受け取ったものをJavascriptで「2012年1月28日」に書き換えてます。

まずは変更したい箇所を囲んでいる<div>タグを探しましょう。<div>タグが見つかったらタグの中に「id=◯◯」という部分がないか探してください。状況によっては「class=◯◯」でもいけるかもしれませんが配列やエラートラップの処理が増えるので今回はidの場合のみ解説します。

注釈：
「id」と「class」の違いについてですが<div id=”test”>となっているとtestと名前のついた<div>タグはページ上に１つしか存在しないユニークなもので、<div class=”test”>となっているとtestと名前のついた<div>タグはページ上に何個でも存在することができるという違いです。したがって「id」だとピンポイントで加工することができるのに対し、「class」だと同じ<div>タグが複数存在する可能性があるため影響範囲を吟味して加工する必要がでてきます。

では早速その方法について。

Javascript

<div id=”◯◯”>××△△</div>の中身を弄るJavascriptを記述しましょう。

//DIVタグの中身編集用関数
function hogehoge (div_id) {

//divタグのidからオブジェクトを取得
var div = document.getElementById(div_id);

//結果を返す変数を宣言し処理を記述（今回はDIVタグの中の記述を消す処理）
var result = “”;

//divオブジェクトの中身を書き換える
div.innerHTML = result;

}

</script>

出力の瞬間に加工できる場合

bodyタグの出力の途中にJavascriptを呼び出して記述
※私のブログの日付変更はこの方式です。

<body>
<script type=’text/javascript’>hogehoge(‘divのidを指定’);</script>
</body>

ページ出力後に加工する場合

bodyタグ画面表示時にJavascriptの呼び出しを行う

スタイルシートやCSS、Javascriptに詳しくないととっつきにくいですが、
意外と簡単ですよ(^-^)/