はてブ3日ほどブログを書いてませんでしたが、その間テーマを作ってました。その名も「Brooklyn」。デモ用のブログも作成したので、どんなデザインなのか見てみて下さい。Brooklynぜひ、スマホとPC両方で確認してみて下さい。デモページはタイトルが英語ですが、シンプルなので日本語でもイケると思います。sans」も記述済みです。面倒でややこしいCSSの設定は一切不要!カスタマイズがめっちゃ簡単です!コピペで超簡単にカスタマイズできます!ちょっと書き換えが必要な部分はありますが...もちろん、スマホのデザインにも対応しているレスポンシブデザインです。あちこちで「使ってるテーマがスマホに対応してない!」とか「シェアボタンの設置がうまくいかない!」などの声が聞かれたので、スマホ対応にしてカスタマイズ用のCSSはこのテーマにぶっこんでおきました。このテーマを使うことによって、コピペだけで簡単にできるカスタマイズを紹介しようと思います。注意点!!カスタマイズ後、グローバルナビや読者登録ボタンはリンク先に飛ぶか、ご自身でちゃんとチェックしてください!!!お願いします!!!グローバルナビの設置グローバルナビの設置(一般ユーザー向け)グローバルナビの設置(はてなPro向け)シェアボタンの設置モノトーンのシェアボタンカラフルなシェアボタン読者登録ボタンの設置ブラックの読者登録ボタンレッドの読者登録ボタンWEBフォントの設定このテーマについてグローバルナビの設置まずはヘッダーのタイトル下にメニューを設置してみましょう。CSSはテーマに記述されているので、いじる必要はありません。一般ユーザー用とはてなProユーザー用の2種類があります。別にするかというと、Pro以外のユーザーははてなブログのデフォルトのヘッダー(ブログの一番上にあるやつ)を隠すのは規約違反だからです。Pro向けのグローバルナビは上部に固定されるようにしましたので、一般ユーザーが使うと規約違反になってしまうかもしれないです。追記:新しいグローバルナビも作りました。SHIROMAGグローバルナビの設置(一般ユーザー向け)まずは一般ユーザー向けのコード。href="ここにリンク先のアドレス">ここにメニューの名前</a></li></ul></div>例えば、うちのブログで「WEBデザイン」のカテゴリーに飛ばしたい場合。「ここにリンク先のアドレス」には、↓↓これを記述する感じですね。https://www.notitle-weblog.com/entry/category/web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/そして、「メニューの名前」を削除して「WEBデザイン」と記述すれば良いですね。ペーストすればOKです。メニューは5項目までにして下さい。6項目以上入れるとレイアウトが崩れます。$nav.removeClass('open');}})});</script>例えば、うちのブログで「WEBデザイン」のカテゴリーに飛ばしたい場合。「ここにリンク先のアドレス」を削除して、↓↓これを記述する感じですね。https://www.notitle-weblog.com/entry/category/web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/そして、「メニューの名前」を削除して「WEBデザイン」と記述すれば良いですね。ペーストすればOKです。メニューは5項目までにして下さい。6項目以上入れるとレイアウトが崩れます。上部に固定させるだけでなく、スマホではボタンでクリックで表示・非表示される便利で美しいメニュー(自画自賛)です。スマホだとこんな感じです。シェアボタンの設置そしてシェアボタン。こちらはモノトーンとカラーの2種類を用意しました。デザイン重視のモノトーンとユーザビリティを考慮したカラーのお好きな方を選んで好きな所にコピペして下さい。シェアボタンを設置する場合は、デフォルトのシェアボタンは不要なので消しちゃってください。ページの読み込みが遅くなるので。デフォルトのシェアボタンを消す場合はスマホにもこのデザインを反映させてください。記事上or記事下です。モノトーンのシェアボタンまずはモノトーンのシェアボタン。こちらは記事下か記事上、もしくは両方にコピペして下さい。class="small-text">Pocket</span></a></div></div>上のコードの下に次のコードを貼って下さい。このコードは記事下に貼っていれば、記事上には貼らなくてOKです。'.hatebu-count');});</script>始めに紹介したグローバルナビ(Pro向けの方)を入れる場合、下記のコードはすでに記述されているのでここのコードからは消して下さい。消さなくても動きますが、消さないとページの読み込みが遅くなってしまいます。src=”https://code.jquery.com/jquery-1.11.3.min.js“></script>カラフルなシェアボタンお次は色付きのカラフルなシェアボタン。こちらも同じく記事上か記事下、もしくは両方にコピペして下さい。class="small-text">Pocket</span></a></div></div>上のコードの下に次のコードを貼って下さい。このコードは記事下に貼っていれば、記事上には貼らなくてOKです。'.hatebu-count');});</script>始めに紹介したグローバルナビ(Pro向けの方)を入れる場合、下記のコードはすでに記述されているのでここのコードからは消して下さい。消さなくても動きますが、消さないとページの読み込みが遅くなってしまいます。src=”https://code.jquery.com/jquery-1.11.3.min.js“></script>簡単ですよね。シェア数カウントのコードはこちらの記事を参考にいたしました。読者を増やしたいのであれば、記事下に読者登録ボタンを設置することをオススメします。こちらはブラックとレッドの2色をご用意致しました。記事下ブラックの読者登録ボタン読者登録ボタンは記事下がいいかな。アドレスを書き換えるだけでOKです。href="http://blog.hatena.ne.jp/ここにIDを入れる/ここにブログのURL/subscribe">読者になる</a></div>「ここにidを入れる」「ここにブログのURLを入れる」を削除して、それぞれにidとURLを入れて下さい。URLは、http://以降です。http://を削除してください。ここ間違える方が多いので要注意です。レッドの読者登録ボタンお次はレッドの読者登録ボタン。書き換えるだけでOK。href="http://blog.hatena.ne.jp/ここにidを入れる/ここにブログのURL/subscribe">読者になる</a></div>「ここにidを入れる」「ここにブログのURLを入れる」を削除して、それぞれにidとURLを入れて下さい。URLは、http://以降です。http://を削除してください。ここ間違える方が多いので要注意です。このテーマについてこのテーマを利用するなら、ヘッダーの画像は背景が白の画像をオススメします。背景に馴染んで自然な仕上がりになります。念のためにh2要素の見出しもCSSに記述しておきました。このテーマを作るにあたって、こちらのブログの記事を参考に致しました。いやー、結構大変だった。このブログのカスタマイズよりも頑張ったかも。なんなら、このブログも「Brooklyn」にしたいぜ。こちらで利用できます↓↓http://blog.hatena.ne.jp/-/store/theme/6653586347155924442おすすめ記事!!お小遣いしたいブロガー歓喜!!ブログでお小遣い稼ぎする方法大公開HTMLやCSSを勉強してみたい人は、こちらの記事がオススメです。HTML・CSS・JavaScriptを独学するのにおすすめの入門書・参考書まとめたくさんのカスタマイズ方法を紹介した記事です。(id:gattolibero)さんコメントありがとうございます。そこまで言っていただけるなんて。ありがとうございます。ただいまBrooklynを導入しようといろいろデザインを試しているところなのですが、質問があります。レスポンシブにしてスマホから閲覧すると、エントリ内の横長の画像が横幅だけ縮まって歪んでしまいます。(id:gssmboy)さんはじめまして。CSSの記述では横長の画像でも歪まないはずなのですが、何が原因なのでしょう。歪んでしまうページのURLを教えて頂ければ、コードを見て解決できるかもしれません。AMとても早い返信ありがとうございます。テーマをBrooklynに変更してみました。ぼくの携帯からだとやはり歪んでしまいます。すみませんがよろしくお願いします。(id:gssmboy)さん原因としては、imgタグ内にheightが記述されているからですね。削除すればうまくいくと思います。AMありがとうございます、解決しました。画像にalt属性を書くためにいちいちhtmlを記述しておりました。整備ができたら再度Brooklyn使わせていただきます!クールなテーマと素早い対応、感動いたしました。本当にありがとうございます。AM横幅ははてなフォトライフ内で調整していただければ問題ないはずです。オシャレなブログに私のテーマを選んでいただいて嬉しいです。PMBrooklyn換装いたしました。部分を好きな色にして、CSSに追加すればうまくいくと思います。好きな色に変えれば見出しの背景色も変更できます。;}ではないのでしょうか...?この記述だと上手くいきませんでした。#fff;}を重ねて、枠になるようにしています。#111;}のカラーコードを変更すればOKです。PMほんっとに何度も何度もお手数をおかけいたしました!Brooklyn最高です。満足いくデザインが出来ました。ありがとうございました。(id:varevo)さん返信が遅くなってすいません。200px;}のheightを変えれば、良いと思うのですが、ここの部分ははてな側が書いているコードなので、もしかしたらうまくいかないかもしれません。(id:ytugatakewo)さん読者登録ボタンのURLはhttp://なしです。書き方が分かりにくかったようなので、訂正しました。私もテーマ作る時に画像のCSSいじってみたんですが、制御されててうまくいきませんでした。大きな画像だとスマホ表示がうまくいかなくなるので、現状の大きさにしています。(id:ytugatakewo)さんhttp://blog.hatena.ne.jp/ytugatakewo/ytugatakewo.hatenadiary.com/subscribeこれを張り付けていただければ大丈夫ですよ。PMはじめまして!素敵なデザインになり大満足です。ありがとうございます!ひとつ質問なんですが、PCのグローバルメニューの「メンズファッション」の項目だけが表示されません。対処法がありましたらお時間のある時で結構ですのでご教授お願い致します。(id:rintaro95)さんご利用ありがとうございます。PM早速お返事頂きましてありがとうございます!無知をさらけ出すようでお恥ずかしい限りですが、それはどのように改善すればよろしいのでしょうか?重ねての質問で恐縮ですが宜しくお願い致します。AMとても素敵なデザインで気に入ってます。PMid:blogger-yasuさん変えられますよ。#111;}#111を好きな色にしていただければ、OKです。PM利用させて頂いております。ありがとうございます。PMid:yamapi33さん私が作ったグローバルナビだとスマホ表示の時にはてなのヘッダーを隠してしまうので、規約違反になってしまうので利用できません。PM素早い返信、ありがとうございます。#111;}で変更可能です。したデザインがカッコよかったので、ブルックリン使用させて頂いています。PMサイドメニューはデフォルトで右側に配置しております。ウィンドウサイズが狭くなると下に行きます。left;}これをCSSに追加するとサイドバーを左にすることもできると思います。PMウィンドウサイズが小さかったんですね。無知過ぎてすみません。AMおはようございます!何度も質問恐縮です。コメントを見て気付いたのですが、私も読者ボタンが機能しません。http://blog.hatena.ne.jp/ytugatakewo/ytugatakewo.hatenadiary.com/subscribeこれを貼り付けたら良いとご回答されてましたがどこに貼り付けたらいいのでしょうか?いつも初歩的な質問ばかりで申し訳ありませんが、よろしくお願いします。(id:rintaro95)さんそちらのリンク先は違う方のURLです。石井凛太郎さんの場合はコード内のrintaro95.hateblo.jp//subscribeスラッシュが1本多いので、rintaro95.hateblo.jp/subscribeこのようにすると直ります。本当にいつもありがとうございます。初歩的な質問ばかりで申し訳ありません。PMBrooklyn使用させていただきました。シンプルかつ使いやすくでカッコイイ。質問なのですが、グローバルナビを使用している場合、アドセンス広告等をタイトル下に入れる場合、ナビのCSSの前と後どちらに入れるのがいいのでしょうか。(id:Robi100)さんナビの上に広告を入れるか、下に入れるかということでしょうか?それでしたら、下に入れたほうが良いと思います。PMすいません、説明がたらなかったです。入れる際、ナビのプログラム下に、そのままコピペして入れればいいのでしょうか。何行か開けるとか必要なのでしょうか。CSSのようなプログラムをいじるのは初めてなもので、複数のプログラムを入れる場合の基本がわかりませんでした。(id:Robi100)さんCSSは、他のコードの前後どちらでも大丈夫ですよ!行を開けたりしなくても大丈夫です。PMなるほど!ありがとうございます。初心者丸出しな質問にご回答いただきありがとう御座います。ふたつ質問があります。本文中で使っていた既存のh3やh4などの装飾タグがおかしなことになってしまいます。したタグを「Brooklyn」のデザインの対象から外したいのですが、どの様なCSSを追加すればよいですか?既存で使用していた「続きを読む」ボタンに黒い縁取りがされてしまいます。(id:beauty-box)さん見出しをカスタマイズする際に、テーマのデザインを無効化するコードはこちらの記事にて書いております。http://shiromatakumi.hatenablog.com/entry/2016/02/17/144908続きを読むの枠を消したいのであれば、このコードを追加して下さい。PMちなにも現在タグに装飾を付けている方法はCSSではなく、直接HTMLで書く方法です。(id:beauty-box)さんHTMLに書いている場合でも、先ほど貼ったリンク先のコードでOKです。AMはじめまして貴殿のデザインを知って活用させていただいてます。一つ質問させてください。サイドバーにアクセスしたユーザー数を表示していますが、これはどのようにCSSを設定すればよろしいでしょうか?ご教示頂けたらと思います。