hyperspace の検索結果:

はてなブログのトップページに「前のページ」を実装する

はてなブログのトップページに「前のページ」を実装する はてなブログのトップページって、「全文形式」にしろ「一覧形式」にしろ、次のページへ飛びますと「前のページ」のリンクがなく、ブラウザの戻るで戻るしかないですよね。 なぜなんですかね? 必要ないですか? ブラウザにマウスジェスチャーを入れていればさほど気にはなりませんが、「前のページ」を実装する方法を考えてみました。 SessionStorage での実装 history.back() での実装 前のページがない場合 検索やブ…

はてなブログ=レスポンシブデザインの場合のスマホ UI を考えてみる

…はてなブログテーマ Hyperspace を公開しました。 - IMUZA.com はてなブログテーマ Hyperspace Javascript 版 公開! - IMUZA.com ボトムにナビゲーションがトレンド? 自分で作っておいてなんですが、このテーマ Hyperspace、デスクトップではまあ悪くないかなという感じですが、スマホがいまいちだなあと思い悩んでいた時に、rico@ココッチィさんから指摘を受け、サイトを訪問してみたところ、ボトムのナビゲーションがなかなかい…

はてなブログテーマ Hyperspace Javascript 版 公開!

…マストアに投稿した Hyperspace の Javascript 版(以下、JS 版)の解説記事です。当サイトがそのテーマの導入サイトです。(当サイトはすでに他のテーマに変わっています) なお、以下、テーマストア投稿のテーマは、CSS 版と表記します。 CSS 版 との違い 導入方法 Javascript CSS ダウンロード 注意事項 CSS 版 との違い サイドバーは固定されています。 サイドバーに表示されるコンテンツはメインコンテンツの内容によって変化します。 トップ…

Flexbox = IE9 を捨てさえすればレイアウトが圧倒的に楽になる

…アで公開しています「Hyperspace - テーマ ストア」(当サイトと同等)では、通常メインコンテンツの下に表示され、CSS でサイトブロックとして右側に持ってくる場合が多い BOX2 を左サイドに持ってきています。 省略形ですが、ソースはこんな感じで、スタイルを指定しなければ、表示は当然下のようになります*1。 <div id="content"> <div id="wrapper"> メインコンテンツです ・ </div> <div id="box2"> ボックス2で…

はてなブログテーマ Hyperspace を公開しました。

…マストアに投稿した「Hyperspace」の解説記事です。 Hyperspace - テーマ ストア デモサイト 概要 CSSオンリーバージョン 必須事項 推奨事項 カスタマイズ Javascriptバージョン デモサイト http://hyperspace.hatenablog.jp/ 概要 Mobile First のレスポンシブデザインです。 デスクトップでは、2カラム左サイドバーです。 モバイルでは、トリガーアイコンをタッチすると左からサイドバーがスライドします。 デ…

スクリプトなし :target でアニメーションをスタートさせる

…ログのテーマでは、:checked を使ってモバイルのハンバーガーメニューのトリガーにしています。 とことこ with Menubar - テーマ ストア で、まだ公開していないテーマ「Hyperspace」でも、モバイル用に何らかのトリガーが必要なのですが、:checked ではうまくいきませんので、:target を使うことにしました。 こんな感じになります。 See the Pen xVmYPa by ausnichts (@ausnichts) on CodePen.

はてなブログテーマ hyperspace (完成)

「はてなブログテーマ hyperspace」がやっと完成し、当サイトで運用をはじめました。 このテーマは、「Hyperspace by HTML5 UP」のデザインイメージに触発されて作り始めたのですが、いつのまにやら、すっかり違うものになり、むしろ「Strata by HTML5 UP」に近いものになってしまいました。 さて、これをどうやって、はてなブログのテーマストアで公開できるテーマにしますかね?

はてなブログテーマ hyperspace=クロスブラウザチェック

今回、クロスブラウザという点で決定的な問題となるのは、CSS では、 viewport calc flexbox transition transform Javascript では、 LocalStrage, SessionStorage あたりです。 Chrome, Opera, Edge(Windows)は問題なし Firefox では、line-height に calc が効かない Safari(Mac)のことがよく分からない IE9 Androidブラウザ, Sa…

はてなブログテーマ=対応ブラウザはどこまでにすべきか?

…はてなブログテーマ hyperspace を作るうえで迷っていたのですが、あらためて「はてなブログテーマ制作の手引き」を見てみましたら、そもそも公式でさえ、IE9以下は捨てられているではありませんか! Chrome, Firefox, Opera, Safari の最新版と IE11 となっています。 デスクトップ環境 モバイル環境 問題は、Androidブラウザと iOS-Safari ですね。これらのブラウザって、OS とくっついていて、古い機種を使っている限りバージョン…

hyperspace じゃなくなってきた=はてなブログテーマ hyperspace (5)

…になってきました。 hyperspace.hatenablog.jp 変わってきた理由は、このテーマはこのサイトに利用しようと思っているのですが、やはり背景に濃い色を使うと、文字が多い場合はちょっと違和感があります。やはり文字が多い場合は、背景は白系がいいですね。 ということで、現状では上のリンクのようになっています。完成までもう少しです。 ところで、過去の記事「iPhone の safari のユーザーエージェントは何だ?」の記事に一部誤りがあります。 iPhone の s…

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

…つくっているテーマ Hyperspace でも、各カテゴリーへのリンクをエフェクト付きでやってみようと、こんな仕様のエフェクトを考えてみました。 各カテゴリーは、ブロック全体に画像を配置し、その上にカテゴリー名を表示 ブロック内のどこにマウスオーバーしても、カテゴリーの説明をスライドさせる ブロック内のどこをクリックしてもカテゴリーページへ飛ぶ 試行錯誤の末、こんな感じになりました。flexbox を使っていますので、対応ブラウザが限定されます。 See the Pen ho…

iPhone の safari のユーザーエージェントは何だ?

…ようとしています。 hyperspace の検索結果 - IMUZA.com で、その位置は、片手持ちでも操作しやすい下がいいだろうと、fixed の bottom:0 にしようとしたところ、iPhone の Safari は、下のバー、ナビゲーションバーとでも言うのでしょうか、上部のアドレスバー縮小と連動して出たり消えたりします。 (2016/5/10)以下の記述には誤りがあります。「hyperspace じゃなくなってきた=はてなブログテーマ hyperspace (5)…

はてなブログに SessionStorage で「前のページ」を実装する=はてなブログテーマ hyperspace (4)

…TML5 UP の Hyperspace デザインイメージを「はてなブログ」で実現できるか?」の4回めです。 HTML5 UP で公開されているテンプレートのデザインイメージをはてなブログに移植(?)しています。 デモサイト ソース ほぼ構想通りにできてきました。あとは、index ページの「前のページ」なんですが、そもそもなぜ「前のページに戻る」がないのでしょう? などと愚痴ていても仕方ありませんので、なにか方法を考えましょう。どこかに設定があったりして…、なんてことはない…

ページによる振り分け、動的に DOM要素を作る=はてなブログテーマ hyperspace (3)

…TML5 UP の Hyperspace デザインイメージを「はてなブログ」で実現できるか?」の3回めです。 下がデモサイトです。時間が取れる時に少しずつやっていますので徐々に変わっていきます。 hyperspace.hatenablog.jp 次は、nav-panel に入れるコンテンツ作りです。javascript で動的に DOM要素をつくって入れるしかないですね。プログラミングを系統的に学んだことはなく、見よう見まねで始めたことですので、間違いや他に良い方法があればツ…

はてなブログテーマ hyperspace (2)

…TML5 UP の Hyperspace デザインイメージを「はてなブログ」で実現できるか?」の2回めです。 まず、テーマ名を決めないと記事が分かりにくいですね。元デザインの名前「hyperspace」をそのまま使って作っていきます。 左サイトバー はてなブログでは、カスタマイズ > サイドバーに表示するモジュールは id=“box2” の要素内に入ります。javascript を使わないで左サイドバーを実現するには、この box2 を左にフロートするなどの方法しかないのです…

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

HTML5 UP で公開されているテンプレートのデザインイメージをはてなブログに移植(?)してみようと思います。正確には移植ではなく、デザインを拝借(パクリ?)する行為かと思います。 ライセンスは、クリエイティブ・コモンズとなっていますので、制作者のクレジット表示は必要です。 HTML5UP このテンプレートをふっと見て、シンプルで、暗めのトーンでありながら印象は暗くありませんし、このところ右サイトバーのデザインに飽きてきていますので、俄然創作意欲(?)を刺激されました(笑)…