デザインテーマ「smart」を登録しました。

ブログデザインに関する記事です。

f:id:nuruta:20170714165208j:plain
ブログテーマ「smart」を公開いたしました。
smart - テーマストア
~~非公開に設定しました。~~

多くの先達がパソコン版の横幅の狭さに異を唱えてらっしゃるので、あまりお勧めは出来ません。
一時はそれで非公開にしてましたが、「これも個性」だと思い直して再配布する事としました。

2017.07.17追記
ブログテーマ「BigThumb」も同ページを参照下さい。
BigThumb - テーマストア

現在どのブログもそうだと思うのですが、7割以上の人がスマホ経由でブログを閲覧しています。
僕のこのブログだって同じ。

元々3カラムの場合は、この限りではないと想像します。
一度ご自身のアクセス記録をご確認してみて下さい。

こんなに割合が高いと正直パソコン版って必要ないんじゃないかと感じてたんです。

そこで、スマホ準拠でググッと横幅を狭めた1カラムテーマを作成しました。
iphoneの375pxを基準としています。

特長はでっかいサムネイル。
375px四方の画像をどんと配置しています。

一応当ブログでのページスピードは以下の結果。
f:id:nuruta:20170714170340j:plain
スマホが64点。
パソコンが77点です。
記事数を12にしていてこの数字なので、記事数を減らせばもう少し改善されるんじゃないかなと思います。

個人的に使用する為に作った為、至らぬところ、ココ嫌だなという部分があるかと思います。
細部でご迷惑おかけするかもですが、お気に召しましたらご使用ください。

インストールしましたら、最低限次のことを行って下さい。

1.　設定⇒詳細設定から「トップページの表示形式（PC版）」を「一覧形式」にする。
2.　デザイン⇒スマートフォン⇒詳細設定から「レスポンシブデザイン」にチェックを入れる。

これでご使用いただけるかと思います。

見出しはこのブログがh4とh5タグしか使っていない為、h4とh5のみ設定してあります。
その他の見出しは、以下を参考にして設定して下さい。
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

このテーマには、ヘッダ画像をフィットするように画像を縮小・拡大するCSSが組み込まれています。
画像の縦横比を計算して、以下の2行をCSSに追加して下さい。

.header-image-only #blog-title #blog-title-inner:before {
  padding-top: ～%;
}

「～%」のところに縦横比が入ります。
例えば横幅「650」、縦幅「350」の画像では、縦横比が約54%となるので、54を入れて書き加えて下さい。
ゴトーのブログさんの記事を参照しています。
はてなブログのヘッダー画像を挿入している方のための適切なCSSスタイリング - ゴトーのブログ

ひつじの雑記帳さんのスライドメニューなどスマホ用のスライドメニュー（グロナビ）がフィットします。
【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳

一先ず作りたいものが作れたので満足です。
個人的に気に入らない部分が出てきたら、前のテーマに戻そw

Mangaism