読者です 読者をやめる 読者になる 読者になる

ポジティブ心理学研究所

幸福度(EQ)アップの研究所です。ポジティブ心理学に出会う前の古い記事はネガティブなので注意。

新しくなったはてなブログのページャーを見やすく整形する

はてな村 プログラミング インターネット はてなブログカスタマイズ

以前までのはてなブログでは、記事の下部にあるページャーが「前の記事»」「«次の記事」とあるだけで、前後の記事がなんなのかわかりづらく、クリックしてみようという意慾も喚起しにくく離脱の原因となりうる仕様でした。

目的の記事にたどり着きやすくなるよう、前後の記事へのリンクと記事一覧ページを修正しました - はてなブログ開発ブログ」のアップデートにより、それが解決され、次の記事の見出しと、前の記事の見出しが表示されるようになりました。

しかし、私としてはまだ不満があり、それをCSSで解消してみました。

ビフォー

f:id:lettuce0831:20140302131147p:plain

これが

アフター

f:id:lettuce0831:20140302131159p:plain

こうなります。

ちなみにこのカスタマイズしたのはこのブログじゃなく別のブログです。ここのは標準のまま。

全文

.pager{
    overflow: hidden;
}

.pager .pager-prev,.pager .pager-next{
    display: block;
    margin: 1em 0;
}
.pager-arrow{
    display: none;
}

.pager .pager-prev {
    float: right;
}
    .pager .pager-prev:before {
        content: "ひとつ次の記事「";
    }
    .pager .pager-prev:after{
        content: "」 »";
    }
    
.pager .pager-next {
    float: left;
}
    .pager .pager-next:before {
        content: "« ひとつ前の記事「";
    }
    .pager .pager-next:after{
        content: "」";
    }

解説

画面認識の不一致

まず第一に不満だったのが、画面認識の感覚です。

はてなブログの標準では、新しい記事が左に、古い記事が右に配置されています。

f:id:lettuce0831:20140302131742p:plain

webページは横書き、つまり左から右に読むことがほとんどです。そしてはてなブログでも横書きです。

横書きの本は左から右にページを読み進めていきますよね?ということは私は古い記事が左で、新しい記事が右に配置されているのが感覚として自然に思います。

.pager .pager-prev,.pager .pager-next{
    display: block;
    margin: 1em 0;
}
.pager .pager-prev {
    float: right;
}
.pager .pager-next {
    float: left;
}

floatを使い左右を逆に配置しました。

.pager{
    overflow: hidden;
}

overflow:hidden;は、floatでなくなった高さを出してレイアウト崩れを防ぐためです。

f:id:lettuce0831:20140302133201p:plain

overflow:hidden;がないとこうなる。

参考:あなたがコーディング初心者を脱する方法|WEB Drawer

言語感覚の不一致

そして、言語感覚の不一致です。CMSの大元となった英語圏の人間の感覚なのか知りませんが、たいていのCMS(ブログサービス)では、新しい記事が「前、prev」、古い記事が「次、next」となっています。

これがどうにも相容れませんし、私はよく混乱の元となっています。

日本語の感覚でいったら、「前」が古い記事、「次」が新しい記事になるほうが自然ではないでしょうか。

「前にこんなことがあってさー」という会話があったら「前」とは過去のことです。

「次あれやろう」の「次」といったら未来のことです。

この「前の記事」に新しい記事を、「次の記事」に過去の記事が割り当ててあるのですごく混乱します。

そこで.pager .pager-prevに対してcontent: "ひとつ次の記事「";を、.pager .pager-nextに対してcontent: "« ひとつ前の記事「";という、本来の記述と逆の表記をつけたしました。

    .pager .pager-prev:before {
        content: "ひとつ次の記事「";
    }
    .pager .pager-prev:after{
        content: "」 »";
    }
    
    .pager .pager-next:before {
        content: "« ひとつ前の記事「";
    }
    .pager .pager-next:after{
        content: "」";
    }

beforeafter擬似要素で、キャプションを付け足し、括弧でくくっています。

括弧に元あった«マークが内包されてしまわないように

.pager-arrow{
    display: none;
}

で非表示にして、content要素で再記述するようにしています。

「次」「前」問題はいい加減どうにかしてほしい

「次」は未来。
「前」は過去で統一してほしいですねー。

押さえておきたい書籍

はてなダイアリーガイドブック―ウェブログでつながる新しいコミュニティ

はてなダイアリーガイドブック―ウェブログでつながる新しいコミュニティ

CSS3 スタンダード・デザインガイド【改訂第2版】 (Web Designing Books)

CSS3 スタンダード・デザインガイド【改訂第2版】 (Web Designing Books)

CSS3 スタンダード・デザインガイド

CSS3 スタンダード・デザインガイド

  • 作者: エ・ビスコム・テック・ラボ
  • 出版社/メーカー: 毎日コミュニケーションズ
  • 発売日: 2011/06/14
  • メディア: 単行本(ソフトカバー)
  • 購入: 11人 クリック: 178回
  • この商品を含むブログ (12件) を見る

CSS辞典 第5版  [CSS2/3/4対応]

CSS辞典 第5版 [CSS2/3/4対応]