Design Report

10月23日のアメブロ仕様変更について。

メブロ、また仕様変更しましたね。 クライアントワークでアメブロのカスタマイズを承ることが多いのでこういった仕様変更には結構敏感になってしまいます。Htmlを書き換えられるとカスタマイズしていたcssが効かなくなるので、仕様変更の際は対応が必要になるケースも結構・・。 とはいえ、今回の変更は個人的には良い方向の仕様変更だと思います。 今までの仕様がちょっと酷かった(失礼・・)と個人的には思ってるので・・苦笑 今回の仕様変更は今分かっているところでは2か所。冒頭の画像のページャーまわりのHtmlとページを開くと画面右下に出ている「footerNav」のHtmlに変更が加えられています。

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

ameblo3

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

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

ameblo1

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

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

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

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

ameblo4

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

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

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

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

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

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

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

このページャーエリアは

上の「画像一覧を見る」は「userLinkArea」というクラスで
下の「記事一覧」と「次へ/前へ」は「pagingArea」というクラスに分かれているうえに

  • 記事上
  • 記事最後
  • 関連記事前
  • コメント欄下
と4か所±α(記事を1ページにいくつ表示するかで変化)
かつ、記事単体ページ、トップからの遡り、一覧ページで微妙にクラス名が違っていたり、配置数が違っていたりしました。

なので、それらをすべてカバーする為に
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の$をすべて書き換えたものに変更することを忘れずに!

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

ameblo2

今回新しくなったページャーまわりのエリアは上の画像の下に表示されている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」のプロパティのリセットを忘れずに。

「footerNav」の変更

ameblonavi

以前はこのように4項目だったものが、今回の変更で

ameblonavi_n

「コメント」が追加され6項目になりました。(※単一ページ時のみ) 長いです・・。邪魔です・・。

と、「速報」的につらつらと変更点について書き綴りましたが
みなさんにとっても何かの訳に立っていれば幸いです。

アメブロも結構急な仕様変更が多くなってきましたが、僕も長らく使わせていただいていたので、なんだかんだ不満を垂れつつもこれからもちょくちょくと関わっていければ嬉しいなと思っています。

Comments

Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

認証コード * Time limit is exhausted. Please reload CAPTCHA.