カスタマイズが超簡単なデザインテーマ「SOHO」を公開しました

カスタマイズが超簡単なデザインテーマ「SOHO」を公開しましたのアイキャッチ画像

こんにちは。

久々にはてなブログのデザインテーマを作成しました。

その名は「SOHO」。デモ用のサイトを作ったのでご覧ください。

soho.hateblo.jp

時間があればPCとスマホの両方を見ておくれ。

インストールは下記ページから行えます。

ポイント1. カスタマイズが超簡単

なんと、コードを一切編集する必要がない、HTMLコード出力ツールを作成しました!

これを利用すれば、HTMLの書き換えなどを行うことなく、グローバルナビ(ヘッダーのメニュー)、フォローボタン、シェアボタンを簡単に設置することができるのです!

こんな感じのツール↓↓

f:id:shiromatakumi:20170707232021j:plain

現在できるカスタマイズは、

グローバルナビ(メニュー)の設置。

フォローボタンの設置。

シェアボタンの設置。

フォントの変更。

できる限り楽にしたので、頑張ればスマホからでもカスタマイズできると思います。

ポイント2. シンプルなデザイン

今回はかなりシンプルでデザインにしました。

シンプルな方が汎用性高くてみんなが使えますからね。

ポイント3. スマホのデザインにこだわり

カテゴリーをハッシュタグっぽくしてインスタ風に。

f:id:shiromatakumi:20170707225349j:plain

コメントは吹き出しにしてDM風に(スマホのみ)。

f:id:shiromatakumi:20170707225151j:plain

ボタンの配置はアプリっぽく。

f:id:shiromatakumi:20170707225528j:plain

ポイント.4 画像の表示にこだわり

「SOHO」は画像表示にこだわっているので、写真をメインコンテンツにしている人にオススメしたいです。

画像に影を入れる、スマホ閲覧時に画像を横幅いっぱいに広げるなどのカスタマイズを行うことができます。

リンク先でやり方を説明しています。

www.notitle-weblog.com

追記:

はてブにもコメントいただきましたが、上で紹介したカスタマイズはjQuery不要で実装できます。jQueryを利用するとサイトの速度に影響が出るので、できる限り速度に影響が出ないようにしています。

まあ、こんな感じです。

表示がおかしいとかあったら教えて下さい!

他にもBrooklynっていうテーマもあります。

Brooklyn – テーマ ストア

はてなブログの超便利なデザインテーマ「Brooklyn」を作りました – NO TITLE