はてなブログのトップページは、記事をいくつか表示して、タイトルをクリックすると各ベージへ飛ぶという、いわゆる標準的なブログ仕様になっています。

当たり前なんですが、ちょっと寂しいと思うこともあり、トップページだけはもう少し変化をつけたいとか、ある特定の記事を紹介したいとか、いろいろ欲が出てきます。

その場合に利用するのが、ヘッダ > タイトル下 で、ここに好きな HTML を書けば、各記事の上に表示されます。たとえば、このブログでも「PICK UP」として Joomla! の記事へのリンクを表示するようにしています。*1

また、別ブログ「そんなには褒めないよ。映画評」では、かなりトリッキーなことをしてブログ臭さを消しています。

で、現在つくっているテーマ Hyperspace でも、各カテゴリーへのリンクをエフェクト付きでやってみようと、こんな仕様のエフェクトを考えてみました。

• 各カテゴリーは、ブロック全体に画像を配置し、その上にカテゴリー名を表示
• ブロック内のどこにマウスオーバーしても、カテゴリーの説明をスライドさせる
• ブロック内のどこをクリックしてもカテゴリーページへ飛ぶ

試行錯誤の末、こんな感じになりました。flexbox を使っていますので、対応ブラウザが限定されます。

See the Pen hover event for Hatena-blog by ausnichts (@ausnichts) on CodePen.

写真はLibrestock

実際の運用予定は下のサイトのようになる予定です。

hyperspace.hatenablog.jp