カスタマイズが超簡単なデザインテーマ「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

コメント

  1. kedamatoriko より:

    初めまして、けだまとりこと申します
    SOHOめちゃかっこいいですね!
    わたしのブログがオシャレになって嬉しいです!
    ページを切り替えた時、記事の右サイドバーが下に落ちてしまってます。
    たぶんわたしの手順ミスだと思うのですが、もし原因がわかるようであれば教えてください。

  2. shiromatakumi より:

    けだまとりこ (id:kedamatoriko)
    こんにちは!
    記事下の「

    スポンサーリンク」の上に、

    というタグが二つ並んでいると思いますが、それを一つ消せばおそらく治ると思います!!

  3. shiromatakumi より:

    けだまとりこ (id:kedamatoriko)さん
    コメントがおかしくなってしまいましたが、スポンサーリンクの上のを一つ消せばOKです!!

  4. kedamatoriko より:

    シロマティさま
    直りました!めっちゃ感動してます!
    お忙しい中ありがとうございました~!!

  5. take--chan より:

    お世話になっております。メインブログ、サブブログともSOHOに変えて凄く格好良くなったのですが、ブログタイトルとディスクリプションのフォントが白、バックグランドが黒固定になってしまいました。ここの変更はどのようにやればいいでしょうか。フォントは白で良いのですが、バックグランドを透過に設定したいのです。

  6. shiromatakumi より:

    たけちゃん (id:take–chan)
    タイトル及び説明文の背景は既に80%の透過となっています。
    以下の数値を変えてCSSに追加してください。
    .header-image-enable #blog-title #title a {
    background-color: rgba(0,0,0,.8);
    }
    .header-image-enable #blog-title #blog-description {
    background-color: rgba(0,0,0,.8);
    }
    .8の部分は0.8(80%)を意味していますので、この数値を下げると透明度が上がります。(1.0が不透明、0が透明)
    数値を変えてCSSに追加するとタイトル・説明文の背景の透明度を変えることができます。

  7. take--chan より:

    メインブログ、サブブログともにうまくいきました。ありがとうございました。

  8. nakanomaruko より:

    ほかのテーマで何故かグローバルバーが作動しなかった、改善のしかたも分からない初心者ですが、こちらのテーマに変えてみました!めっちゃ簡単に設置できてデザインも素敵で本当に感動☆本当にありがとうございました。

  9. clumzy より:

    初めまして、SOHOとても気に入って使わてもらっています!
    一つ質問なのですがこちらでよろしかったでしょうか?
    リンクを貼った時や既にあるリンク(例えばはてなIDなど)がデフォルトでは黄色っぽいオレンジ色になっていますがブログ全体のリンク色を変えることは可能でしょうか?

  10. ROUTE53 より:

    いつもカスタマイズでお世話になってます。
    この度SOHOにテーマ変更させていただきました。
    シェアボタンについて質問なんですが、
    タブレットのブラウザ・はてなアプリ・スマホのブラウザでは表示されるんですが、
    スマホのはてなアプリだけシェアボタンが表示されません。
    解決策が全くわからないので、お教えいただけると助かります。
    お忙しい中恐縮ですが、よろしくお願いします。

  11. kimamachan より:

    こんばんは。突然コメント失礼します。
    SOHOかっこよくてとっても気に入ってます。
    今日の昼間に、タイトル下のグローバルナビが突然、表示されなくなりました。
    タグを一字一句きちんと確認しましたが、治らなかったため、もう一度自動カスタマイズをして作り直しました。
    ですが、一向に解決しません。
    何かの不具合でしょうか?
    また、解決方法はありますでしょうか?
    超初心者が質問して申し訳ありません。

コメントする

お気軽にコメントしてください!!

名前・メールの入力は任意です。