appendChildやinsertBeforeでノードを移動させる

DOMのappendChildは子ノードの追加、insertBeforeはノードの挿入のためのメソッドですが、これを使ってノードの場所を変更できます。

appendChildで移動する

たとえば、次のようなHTMLがあったとします。

<div id="outer">
<p id="morning">おはよう</p>
<p>こんにちは</p>
<p id="night">こんばんは</p>
</div>

ここで、下のコードを実行すると「おはよう」が「こんばんは」の後に移動します。

document.querySelector('#outer').appendChild(document.querySelector('#morning'));

実行例

おはよう

こんにちは

こんばんは

実行すると「おはよう」が「idがouterであるdiv」に追加されます。その結果、元の位置から最後にずれます。「おはよう」の位置がずれたので、「こんにちは」が先頭になります。

insertBeforeで移動する

上の例のHTMLに今度は次のスクリプトを適用してみます。すると最後の「こんばんは」が先頭にある「おはよう」の前に移動します。

var outer=document.querySelector('#outer');
var night=outer.querySelector('#night');
var morning=outer.querySelector('#morning');

outer.insertBefore(night,morning);

実行例

おはよう

こんにちは

こんばんは

これを知っていると、すごく便利だと思います。このブログのコメント欄の改造はこのメソッドを多用して実現しました。

お名前グッズ最強アフィリ！ディズニー

時期としてはどうなんだろ、もう遅いのかな？入園・入学準備の「お名前グッズ」。これのアフィリエイトはないかと思って探して見た。あった。それも最強だと思われる！

どこかというと、ここ。「入園入学準備 ディズニー名入れ専門店」やっぱディズニーは最強でしょう？同じ会社だけど、このページも悪くないと思う。「お名前つけグッズパーフェクトガイド！」

ただ、楽天でもこの会社、店出してんだよな。「【楽天市場】名入れ専門店 ディアカーズ」

楽天で済むと言えば済む。けど、やっぱりディズニーが気になる。どちらにしても、うちの読者層はターゲットにならないだろうから売れそうにない。

ちなみに、楽天の前の最初の２つは「バリューコマース」に入ると、提携することが出来ます。小さなお子さんを持つ主婦層が読者に多い方、よろしければどうぞ。貼らなかったけど、バナー広告も沢山あります。

楽天 アフィリツール提供終了されるものがあります

【重要】3月31日をもって、一部アフィリエイトツールの提供を終了します

楽天アフィリエイトからのお知らせより

2013年3月31日をもって、以下のアフィリエイトツールはサービス提供を終了させていただきます。

（対象機能）

・楽天売れ筋ランキングリンク
・楽天ダイナミックアド
・リアルタイムランキングウィジェット
・楽天セレクトウィジェット
・売れ筋アイテムリンク

とのことです。

データアクティブと情報ステーションは同じ会社です

以前「データアクティブは安全か？」という記事を書きましたが、「情報ステーション」というサイトはデータアクティブと同じ運営者です。

データアクティブ

http://activector.com/company.html

情報ステーション

http://joho-station.com/contact_us.html

どちらも、
運営会社「株式会社プロフェッショナル[PROFESSIONAL]」
運営責任者「坂下 優子」
所在地「〒336-0021 埼玉県さいたま市南区別所5-15-2」
電話番号「048-700-3008」
でまったく同じ会社です。

上記どちらのサイトも、この情報は文字でなく画像で表示されているので、検索にかかりにくいですね。以上、事実だけを書きました。興味のある方は「データアクティブは安全か？」をご覧ください。

横幅に合わせ並ぶ個数を自動調整するスタイルシート

ファンブログにアップロードした画像URLの調べ方は「ファンブログでアップロードした画像の場所」に書いてあります。

上のキャプチャー画面はブラウザの表示サイズで横に並ぶ数が自動で変わります。意味がわからない方は、試しに今開いているこのページのサイズを色々と変えてみてください。画像が横に２個並んだり、１個だけになったりします。

ブラウザのサイズ変更ボタン

ブラウザのドラッグ

今回のテクニックを駆使した記事が「ゲーマーブログの収益アップにアクセストレードを強く薦める理由」です。リンクをクリックすると別画面で、その記事が表示されますので、見比べながら説明をご覧いただければ、理解が早いかと思います。

floatとwidthで横の個数を自動調整

上のキャプチャー画面は全部、横幅320ピクセルのアフィリエイトです。ブラウザの表示画面が660ピクセル以上あれば、横２個x縦2個の表示、なければ横1個x縦4個で表示します。ソースコードは以下の通りです。

<style type="text/css">
p.capture{
 float:left;
 margin-right:10px;
}
</style>

<p class="capture"><a href="リンクURL" target="_blank"><img src="画像URL" alt="" border="0" /></a></p>
<p class="capture"><a href="リンクURL" target="_blank"><img src="画像URL" alt="" border="0" /></a></p>
<p class="capture"><a href="リンクURL" target="_blank"><img src="画像URL" alt="" border="0" /></a></p>
<p class="capture"><a href="リンクURL" target="_blank"><img src="画像URL" alt="" border="0" /></a></p>
<p style="clear:left;">大きさも色々選べる。</p>

float:leftで画像を左寄せにしています。さらにmargin-right:10pxで画像の右側に10ピクセルの余白を作ります。これで2つ並んでもピッタリとくっついてしまいません。

画像自体が320ピクセルで、右に余白が10ピクセルつくと、合計330ピクセルです。ですから表示領域が660ピクセル以上あれば、横に2個並びます。しかし、足りない時には、横ではなく下に移動します。

最後にclear:leftを絶対に忘れないようにしてください。

参考記事：画像の隣に文章を配置したい

“横幅に合わせ並ぶ個数を自動調整するスタイルシート” の続きを読む