IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / はてなテーマ / はてなブログテーマ=HTML5 UP の Hyperspace デザインイメージを「はてなブログ」で実現できるか?(1)

はてなブログテーマ=HTML5 UP の Hyperspace デザインイメージを「はてなブログ」で実現できるか?(1)

2016/04/17 はてなテーマ, はてなブログ

HTML5 UP で公開されているテンプレートのデザインイメージをはてなブログに移植(?)してみようと思います。正確には移植ではなく、デザインを拝借(パクリ?)する行為かと思います。

ライセンスは、クリエイティブ・コモンズとなっていますので、制作者のクレジット表示は必要です。

HTML5UP

このテンプレートをふっと見て、シンプルで、暗めのトーンでありながら印象は暗くありませんし、このところ右サイトバーのデザインに飽きてきていますので、俄然創作意欲(?)を刺激されました(笑)。

サイドバーはどうなっている?

サイドバーは、”position:fixed” で固定され、インナー要素に “display:flex;flex-direction:column;justify-content:center;” を指定して縦中央に表示しています。サイドバーのメニューコンテンツをクリックすると、メインのコンテンツがスムーススクロールします。

後は、読み込み時のアニメーションがきれいですから、できればこれも取り入れたいですね。

サイドバーに何を表示するかがキモですかね…。

はてなブログのページ構成を見て考える

はてなブログは、表示するベージよって body タグに次のようなクラス属性をつけていますので、ページ内容によってサイドバーに表示するものを変えることはできます。

  1. トップページ(body のクラス属性:page-index)
    設定で指定した記事数を次のページヘで順次表示するが、前のページヘはない
  2. 記事ページ(body のクラス属性:page-entry)
  3. カテゴリーページ(body のクラス属性:page-archive page-archive-category category-カテゴリー名)
  4. 月間等アーカイブページ、検索結果ページ(body のクラス属性:page-archive)
  5. アバウトページ(body のクラス属性:page-about)

サイドバーに表示するコンテンツの構想

トップページ

  1. メインコンテンツから表示分のタイトルを取ってきて、スムーススクロールのリンクを貼る
  2. 「次のページヘ」を表示する
  3. 可能なら、「前のページヘ」を表示する
    以下は全てのページ共通
  4. 「ページトップへ」にスムーススクロールのリンクを貼る
  5. カテゴリー、月間アーカイブ等は、はてなブログ標準のサイドバー(id=box2)に表示し、スムーススクロールのリンクを貼る

記事ページ

  1. 関連記事(同カテゴリーの記事)を表示する
  2. 「戻る」でひとつ前のページに戻す

その他のページ

  1. 「トップページ」へのリンクを表示する

ファーストビュー

トップページ

  1. カテゴリー、またはシリーズものなどの検索結果をアイキャッチ画像で表示する

その他のページ

  1. アイキャッチ画像を非表示とし、目的のコンテンツを表示する

こんな感じで進めてみましょう。

CSS拡張メタ言語 LESS で calc が使えない件(解決)
はてなブログテーマ hyperspace (2)
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/09/14

GDPRを設定する

2023/08/30

scroll-behavior:smoothは履歴に残る

2023/08/22

要素がトップにきたことを感知する-IntersectionObserver

2023/08/8

ホームページとは別に投稿一覧ページをつくる方法-WordPress

2023/07/28

WordPress:シングルページにループはいらない

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ215
  • WebTips110
  • javascript100
  • Joomla!88
  • Wordpress78
  • Windows68
  • CSS64
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google36
  • Plamo33
  • はてなプラグイン25
  • php23
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • Git入門6
  • ConoHa WING6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • Xserver3
  • Firefox3
  • 静的サイトジェネレーター3
  • SSD3
  • Docker3
  • Blankslate3
  • Twitter2
  • Mactype2
  • GitHub2
  • youtube1
  • はてなブクマ1
  • rails入門1
  • 映画1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com