神戸グルメゲリラ

ぬっこぬこ、たま~にグルメブログ

ブログ技術

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

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

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

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

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

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

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

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

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

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

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

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

第壱話 使徒、襲来

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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