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

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

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

はてなブログ

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

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

HTML5UP f:id:ausnichts:20160415171303p:plain

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

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

サイドバーは、"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. アイキャッチ画像を非表示とし、目的のコンテンツを表示する

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