神戸グルメゲリラ

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

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

f:id:tommyoctopas:20190718182359j:plain

こちらがテーマを使用したブログです。

kobe.hatenadiary.com

1フレームブログデザインの拘りについて

1フレームブログテーマにおけるサイドバーコンテンツの並び問題というのがありまして、それを解決したブログテーマです。

僕は1フレームブログデザイン派なんですが、1フレームブログが不人気なのは、こういった問題があるのかもしれません。ならばと解決にトライしてみました。

 

ほとんどブログサイトはスマホでみると1フレームにレスポンシブしてしまうので、2フレームデザインはPC上で見たときだけの作りであって、今や閲覧数のほとんどがスマホなので、2フレームデザインの優位性は、昨今あまり無いと考えます。

 

ではPCでの2フレームデザインの優位性というと、はっきり言ってアフリエイトバナー対策で優位性があるというのが大きな選択の動機になっているでしょうか

2フレームデザインの例えば右サイドフレームにある記事一覧、本文のブログ記事を読んでる最中に目に入ります。これが気になって、途中で本文のブログを読まずに、そっちをクリックしてしまう場合もあるでしょう。この場合、2フレームデザイン効果といいましょうか、結果2ページ分をアクセスさせたということになります。つまり閲覧数を増やす可能性を高めてるとも言えます。

 

そういった効用を期待しての2フレームデザインの人気性があるでしょうか、しかしながら趣味や趣向の範疇で1フレーム派もやはり居まして、右側のフレームに、ごちゃごちゃとコンテンツが並ぶのは、鬱陶しいと思うタイプの人が、作り手側にも読み手側にも一定数いらっしゃるので、僕もそのタイプのひとりです。

 

繰り返しになりますが、昨今、スマホでの閲覧がほとんどなので、見てるブログデザインは、ほぼ1フレームにレスポンシブされ表示されているはずです。ならば1フレームのデザインに特化したデザイン性を追及した方が今の環境に適してるのではないかと、1フレームデザインに拘ってみたいという考えがあります。

 

そういった考えで、このテーマはPC向けにも特化した機能があります。沢山のブログ記事の一覧をPCの大きな画面リソースを使って、1画面でいかに大量に展開できるかとういう1フレームデザインならではの画面幅を多く使用できる記事の一覧性能に拘ってみました。全部見れれば2フレームは必要ないという発想です。

 

基本、僕はWebデザイナーではないのですが、Webデザインにおける技術面の世界に、とても興味がありまして、その範疇だけでゴソゴソするのは楽しいのですが、いざこのようなテーマを作成して、ストア向けに精度を上げ完成品にするとなると、非常に面倒な作業が数多くありまして、休みの日に、あーでもない、こーでもないと、ゴリゴリやってまして、たぶん完成しないだろなーと思ってましたが、こういうのは途中で諦めると二度と陽の目を見ることはないので、やりきりましたw

 

クロームの開発者向け機能を使ってCSSのデザインをやってしまう荒技

通常、テストでこの機能を使うのですが、この機能のみで最初からCSSデザイン実装作業をやってしまう荒技です。

ローカルにデザイン作成中のCSSファイルを置いて、こいつを自分のブログにロードするように変更します。初期のCSSファイルは現在のブログから抜き取り、CSSセクションだけ残し、変数を全部消して、素っ裸のCSSからスタートです。

CSSをペチコン、ペチコン打って、WEBデザインをしていきます。いいんじゃねとなった段階で、元CSSファイルへ反映し、また作業を続行していきます。つまり開発ソフトなど不要で、メモ帳とクロームがあれば、はてなブログテーマは開発可能です。かなり荒技です。たぶん僕しかこんな方法で開発している人はいない思われますw

 

下の画像は、ブログ記事タイトルをどんなデザインで表示するか、右のCSSフレーム内にペチコン、ペチコンとCSSコードを打ち込んでいるとこです。ありとあらゆるパーツを隅々までデザインしていきます。かなりの忍耐が必要です。これが面白いと思える変態しか完成に漕ぎ着けないと思いますw

f:id:tommyoctopas:20190718210841j:plain

 

あと途中でブログテーマを変更される方は、あまり居なくて、やはり愛着があるみたいです。なので新規ブロガーさんだと、まず最初にどのテーマにするか色々吟味されるかと思いますので、新規ブロガーさんに、このテーマが目に留まればいいなぁと思う次第でございます。

 よろしくね!!

blog.hatena.ne.jp