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

IMUZA.com

Joomla!によるウェブ制作, PHP, Javascript, CSS

はてなブログ

はてなブログ テーマ制作
・とことこ with Menubar
・Simple Responsive with Menubar
・Mobile-First Responsive
・Hyperspace

Joomla!

Joomla! によるウェブ制作
・テンプレート自作
・モジュール自作
・Joomla!でサイト構築

Web Tips

ウェブサイトづくりに役立つかも
・Javascript
・CSS

Windows, Linux

Windows10
Plamo Linux

CSSでホバー(マウスオーバー)エフェクト=スライドして詳細表示、クリックでリンク先へ移動

はてなブログ Web Tips

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

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

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

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

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

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

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

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

写真はLibrestock

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

hyperspace.hatenablog.jp

*1:2016/5/5現在の記事ですので、デザインが変わっているかもしれません