ページャー付近の以前の仕様と新しい仕様の違い

なにせ、以前のこのページャーまわりときたら・・
こんな感じのテキストリンクによくわからないアイコン画像という・・「いつの時代だよ？」的なデザイン（デザインという言葉を使うのも躊躇する・・）でした。

それが、今回「ようやく」テキストリンクから下記のようなボタンアイコンに変更になった次第です。

デフォルトではこんな感じでした。

と、本来なら特に記事にするほどのことではありませんが
ちょっと今回のこの仕様変更に際し、若干の怒りがあったためその腹いせ（笑）に記事にしてみました。

なぜかと言うと、この仕様変更のある本数日前のこと
あるクライアント様のアメブロカスタマイズを行ったのです。

当然、この「気に食わない部分」に手を加えない訳がありません。

フードコーディネーター佐藤恵美の「３０代になったからこそ覚えたい料理」

こんな感じにカスタマイズしていました。
※cssではこのようにはならないのでJavaScriptでHtmlを動的に書き換えてこんなかたちにしていました。

・・と、まぁ元のHtml（提供側の意図）を完全に無視したデザインで作成していた訳です。

といっても単なる反発心ではなく、絶対こっちのほうが使いやすいし意味上のまとまりもあって良い、という理由あってのものですよ！

こんなものを上げたすぐ後の変更だったので
なんとも・・笑（←被害妄想）

ボタンアイコンに変わりかつ項目が整備されたので、いいのはいいのですが
思いっきりクラス名まで書き変えてくれた上に、良く分からないスタイルまで適用してくれたおかげで この部分を完全につくりかえなければならなくなりました。苦笑

実のところ、このかたちを仕様変更前のアメブロで全ページを意図通りに綺麗に表示させるにはちょっとしたコワザが必要だったのです。

なので、それらをすべてカバーする為に
JavaScriptでこのページャーを取り囲んでいる親ボックスの数をページロード毎に取得して
その何番目に対し、○○といった処理を行う

といった二段階のプログラムを組んでいました。

この答えに行きつくまでに結構頭をひねったので 使えなくなった腹いせにちょっと公開してやろうかと・・笑

$(window).load(function(){
	var i=$('.pagingArea').length;
	$('.pagingArea').first().children('.skinPagingListColor').appendTo('.imagelistLink');
	for (var n=1 ; n<=i ; n++){
		$('.pagingArea').eq(n).children('.skinPagingListColor').remove();
		}
});

jQueryを併用しているので結構簡単な記述ですね。

アメブロではもう使えなくなってしまいましたが、ページ毎に同名の要素数が変わる際、全ページでそのn番目に対して何らかの処理をしたい・・という時に使えるかな・・？というところと
そんな時に思い出してもらえたら＋備忘録的な意味も兼ねて掲載しておきます。

上記の説明としては、
今回は一番目の要素とそれ以降の要素で処理を分けたかっただけなので

1. $(window).loadで
2. 2行目：ページャーを囲っているボックスのクラス(pagingArea)が現在開いているページにいくつあるかを.lengthで取得→「i」という変数に代入。
3. 3行目：（今回は）その一番目に対しての処理
4. 4行目：新たに「n」という変数を作成し、for文で「n」が「i」と同じになるまで（現在のページのその要素の個数分）5行目の処理を繰り返し

という構成です。
・・・あんまり汎用性ないか・・？苦笑

ちなみに、アメブロでjQueryを使用する際は他のjsファイルと「$」のコンフリクトが起きるので

jQuery.noConflict();var j$ = jQuery;

などでコフリクト回避をする必要があります。
※$を何に書き変えるかは任意でOK。この記述以降のjQueryの$をすべて書き換えたものに変更することを忘れずに！

新しいページャーまわりのカスタマイズ方法

今回新しくなったページャーまわりのエリアは上の画像の下に表示されているHtmlのように
「globalLinkArea」というボックスの中にリスト形式でリンクエリアが並ぶようになりました。

このエリアの構造としては
「globalLinkArea」というdivのボックスの中にul要素の「globalLinkAreaInner」があり、
各ボタンには

• ブログトップに「blogTopBtn」
• 記事一覧に「articleListBtn」
• 画像一覧に「imageListBtn」（※これは以前のままですね）

ちなみに、「globalLinkArea」と「globalLinkAreaInner」には以下のスタイルが適用されています。

/*親ボックス*/
.globalLinkArea{
position: relative;
overflow: hidden;
padding: 10px 0;
}

/*ul要素のスタイル*/
.globalLinkArea .globalLinkAreaInner {
float: left;
position: relative;
left: 50%;
margin: 0;
padding: 0 0 0 5px;
}

各ボタンは前述のクラスと一緒に与えられている「skinImgBtnS」（※サイドバーのボタンと同じクラス）が適用されているので デフォルトではサイドバーのプロフィールに表示されるボタンと同じスタイルになっています。

なので、これらのデフォルトで適用されているスタイルとぶつかるところはリセットするなりしていくと任意のスタイルが適用できます。
※ポジショニングを変えたい際は「float」や「left」のプロパティのリセットを忘れずに。