ブログ表示速度のオーバーヘッドをデザイン面から見直し ＡＭＰの手法も取り入れ、徹底的にアカン部分を詰めた結果 パフォーマンス９５、ほぼ極限までネックとなってる部分を詰めました。 早い回線を使いオーバーロードさせ、スマホCPUでも1.4sでページロー…

ブログの表示速度を全面的に見直し極限まで詰めると、どうもSEO的に宜しいようです。

はてなブログで、画像の延滞読み込み（lazy loads）を使うには 乗り越えないといけないハードルが色々ありまして、断念されてる人も多いと思います。延滞読み込みの環境は実装できても、新規ブログ毎に画像に対して手動でlazyタグ埋め込んで下さいとか、過去…

はてなブログで画像の延滞読み込みロード（lazy loads）を動的に使う方法です。画像の多いブログはページロード時間が改善します！

縦長画像を貼ると下へ画像が超～間延びします。 この弱点の解消として、画像ファイルの高さをブラウザの高さ（７０％ほど）に自動フィットさせる。縦長画像特有の横に発生する未使用のスペースに、つまりココに文書を縦書きで書いたらいいんじゃね！そしたら…

ブログデザインの弱点、縦長画像は間延びして文書との一体感が損なわれる。解決策を模索中

見難い記事タイトルのパターン 例えばこれ、CSSのword-break: keep-allが設定されていないテーマだと、こうなります。 見やすくなったよ！Good Job！！ word-break: keep-allを設定すると日本語の単語を理解してくれ「こう折り返したら見やすいんじゃね！」…

記事のタイトルが変な場所で折り返されてしまう「CSSのword-break: keep-all」で対応可能

例えば以下はブログ本文中のコンテンツフレーム内とします。 はてなブログの文章はｐタグで囲まれてます。 ｐタグのＣＳＳ設定でボトムにマージンが設定されていまして、１センテンスが終わると自動的に空行が入る仕掛けです。これで文章の分かれ目を見易く…

ｐタグのｃｓｓ設定で読みやすいブログにしたい。研究中

はてなテーマ「FlexPhograph」をバージョンアップして、２カラムタイプにしてみました。写真系ブログは明朝が映えるのではないかの発想です。 はてなブログテーマ「The.明朝」 ●２カラム、レスポンシブデザイン（スマホは１カラムになります） ●すべて明朝で…

The.明朝　テーマストアにアップしました！

これは現在、作成中のテーマ「The.明朝」のテスト記事です。 記事タイトルをEVA風にする機能を実装してみました。 記事単体で表示した時だけ作動します。 しくみは、ブログ本文中に隠しタイトル文字を入れておいて、ｃｓｓスタイル「EVATIT」を指定します。…

第壱話 使徒、襲来

ずべて明朝で表示するブログテーマを作成しています。 ほぼ完成しました。このブログを人柱にしてテスト中です。 ２フレームタイプに挑戦してみました。 PCだのタブレットだのスマホだの何その変なスマホとか含めて、ありとあらゆるデバイスで、うまく表示で…

（仮）はてなブログテーマ「The.明朝」作成中

本日、クロームが突然、起動しなくなりました。 ちっらとウィンドウ枠が表示されるも、消えてしまいます。 タスクマネージャーで確認すると、クロームのプロセスは存在してて、うまく起動されていないようです。起動させるたびに、プロセスが増えており、だ…

Chrome(クローム)が起動しなくなった場合、ローカルデータを消す緊急の対処方法

こちらがテーマを使用したブログです。 kobe.hatenadiary.com １フレームブログデザインの拘りについて １フレームブログテーマにおけるサイドバーコンテンツの並び問題というのがありまして、それを解決したブログテーマです。 僕は１フレームブログデザイ…

はてなブログテーマ「FlexPhotoGraph2」をリリースしました。

リリースしました！ Flex PhotoGraph - テーマ ストア Flex PhotoGraph サムネイルをメインしたカード型の記事一覧表示を行う写真系のブログ向けテーマです。 どんな写真が掲載されているのか、ひと目で解る一覧をデザインしてみました。 mac safari8 2560*1…

はてなブログテーマ：「Flex PhotoGraph」を作成、テーマストアへ公開しました。

はてなブログテーマを作成しました。 tommyoctopas.hatenablog.com 設定でトップページの表示形式を一覧形式に設定している人向けの限定記事です。 なので、はてなブログpro限定の記事となります。 現在、使用しているテーマのまま、記事一覧を大きなサムネ…

トップページの記事一覧をflexboxにて、カード型２カラムのレイアウトに変更してみる。（はてなブログpro限定）

設定でトップページの表示形式を一覧形式に設定している人向けの限定記事です。 なので、はてなブログpro限定の記事となります。 この記事は、次にステップアップしております。こちらをご覧下さい。 トップページの記事一覧を超簡単に２カラムに出来ます。 …

トップページの記事一覧を２カラムにするflexboxを使った簡単な方法です。（はてなブログpro限定）

はてなブログで画像を横並びで表示できないと諦めてる人いませんか？ 簡単にできますよ！ 記事コンテンツ幅内で自動的に縮小して、２つの画像を簡単に横並びにする方法です。 応用編 スマフォでは、どうか display: flexのCSS、flexboxを積極的に利用したい …

２つの画像を簡単に横並びで表示する方法です。（ieのdisplay: flexのバグを暫定回避してflexboxを積極利用する試み）

スマフォではスクロール操作による読み手側のストレス低減が必要かと思われます。 ゴリゴリ大量にCSSを叩き込んで改善するのでなく、気になった部分だけを、ピンポイントで最小のCSSで少し改善する事にしました。 はてなブログのフマフォ向け表示が読み難い…

はてなブログのスマフォ表示のデフォルトデザインが、あまりに読み難いレイアウトなので、スマフォ向けCSSで少し改善してみました。

はてなブログは、ＳＳＬ暗号化通信(https)に対応していません。 現状のまま１０月に突入してしまうと これから起こるかもしれない問題を 技術的なことではなく 解りやすく何が問題なのか書いてみました。 Chromeによるセキュリティ警告表示の問題 この問題を…

はてなブログＳＳＬ暗号化通信(https)対応問題、１０月から起こるかもしれない問題を解りやすく書いてみました。

親ブログの写真はサムネイル中心、オリジナルは固定ページで 親ブログで使用した写真素材を固定ページでギャラリー化して写真のみ掲載する。 これにより親ブログでは写真をサムネイル程度にし、文書スペースが確保し易くなる 親ブログは文書中心のスタイルと…

はてなブログの新しい機能、固定ページの利用方法で思いついた事