3日ほどブログを書いてませんでしたが、その間テーマを作ってました。
その名も「Brooklyn」。
デモ用のブログも作成したので、どんなデザインなのか見てみて下さい。
ぜひ、スマホとPC両方で確認してみて下さい。
デモページはタイトルが英語ですが、シンプルなので日本語でもイケると思います。
テーマストア - Brooklyn -
http://blog.hatena.ne.jp/-/store/theme/6653586347155924442
タイトルに超便利って書いてますが、このテーマは何と！グローバルナビ（タイトル下のメニュー）とシェアボタン、読者登録ボタンを追加するためのCSSをすでに記述してあるのです！さらに、WEBフォントの「open sans」も記述済みです。
面倒でややこしいCSSの設定は一切不要！カスタマイズがめっちゃ簡単です！
コピペで超簡単にカスタマイズできます！
ちょっと書き換えが必要な部分はありますが…
もちろん、スマホのデザインにも対応しているレスポンシブデザインです。
あちこちで「使ってるテーマがスマホに対応してない！」とか「シェアボタンの設置がうまくいかない！」などの声が聞かれたので、スマホ対応にしてカスタマイズ用のCSSはこのテーマにぶっこんでおきました。
では、このテーマを使うことによって、コピペだけで簡単にできるカスタマイズを紹介しようと思います。
注意点！！
カスタマイズ後、グローバルナビや読者登録ボタンはリンク先に飛ぶか、ご自身でちゃんとチェックしてください！！！お願いします！！！
目次
グローバルナビの設置
まずはヘッダーのタイトル下にメニューを設置してみましょう。CSSはテーマに記述されているので、いじる必要はありません。一般ユーザー用とはてなProユーザー用の2種類があります。
なぜ別にするかというと、Pro以外のユーザーははてなブログのデフォルトのヘッダー（ブログの一番上にあるやつ）を隠すのは規約違反だからです。Pro向けのグローバルナビは上部に固定されるようにしましたので、一般ユーザーが使うと規約違反になってしまうかもしれないです。
グローバルナビの設置（一般ユーザー向け）
まずは一般ユーザー向けのコード。
↑ここにコードが表示されていない場合は再度ページを読み込んでください。
例えば、うちのブログで「WEBデザイン」のカテゴリーに飛ばしたい場合。「ここにリンク先のアドレス」には、↓↓これを記述する感じですね。
そして、「メニューの名前」を削除して「WEBデザイン」と記述すれば良いですね。
これを、ダッシュボードの デザイン → カスタマイズ → ヘッダ → タイトル下 にペーストすればOKです。
メニューは５項目までにして下さい。６項目以上入れるとレイアウトが崩れます。
グローバルナビの設置（はてなPro向け）
↑ここにコードが表示されていない場合は再度ページを読み込んでください。
例えば、うちのブログで「WEBデザイン」のカテゴリーに飛ばしたい場合。「ここにリンク先のアドレス」を削除して、↓↓これを記述する感じですね。
そして、「メニューの名前」を削除して「WEBデザイン」と記述すれば良いですね。
これを、ダッシュボードの デザイン → カスタマイズ → ヘッダ → タイトル下 にペーストすればOKです。
メニューは５項目までにして下さい。６項目以上入れるとレイアウトが崩れます。
上部に固定させるだけでなく、スマホではボタンでクリックで表示・非表示される便利で美しいメニュー（自画自賛）です。
スマホだとこんな感じです。
シェアボタンの設置
そしてシェアボタン。こちらはモノトーンとカラーの2種類を用意しました。デザイン重視のモノトーンとユーザビリティを考慮したカラーのお好きな方を選んで好きな所にコピペして下さい。
シェアボタンを設置する場合は、デフォルトのシェアボタンは不要なので消しちゃってください。ページの読み込みが遅くなるので。デフォルトのシェアボタンを消す場合はスマホにもこのデザインを反映させてください。
設置場所はダッシュボードの
デザイン → カスタマイズ → 記事 → 記事上or記事下
です。
モノトーンのシェアボタン
まずはモノトーンのシェアボタン。こちらは記事下か記事上、もしくは両方にコピペして下さい。
↑ここにコードが表示されていない場合は再度ページを読み込んでください。
上のコードの下に次のコードを貼って下さい。
このコードは記事下に貼っていれば、記事上には貼らなくてOKです。
↑ここにコードが表示されていない場合は再度ページを読み込んでください。
始めに紹介したグローバルナビ（Pro向けの方）を入れる場合、下記のコードはすでに記述されているのでここのコードからは消して下さい。消さなくても動きますが、消さないとページの読み込みが遅くなってしまいます。
カラフルなシェアボタン
お次は色付きのカラフルなシェアボタン。こちらも同じく記事上か記事下、もしくは両方にコピペして下さい。
↑ここにコードが表示されていない場合は再度ページを読み込んでください。
こちらのコードの下に次のコードを貼って下さい。
このコードは記事下に貼っていれば、記事上には貼らなくてOKです。
↑ここにコードが表示されていない場合は再度ページを読み込んでください。
始めに紹介したグローバルナビ（Pro向けの方）を入れる場合、下記のコードはすでに記述されているのでここのコードからは消して下さい。消さなくても動きますが、消さないとページの読み込みが遅くなってしまいます。
簡単ですよね。
スポンサードリンク
読者登録ボタンの設置
少しでも読者を増やしたいのであれば、記事下に読者登録ボタンを設置することをオススメします。こちらはブラックとレッドの2色をご用意致しました。
デザイン → カスタマイズ → 記事 → 記事下
ブラックの読者登録ボタン
読者登録ボタンは記事下がいいかな。記事下にコピペして、id と アドレスを書き換えるだけでOKです。
↑ここにコードが表示されていない場合は再度ページを読み込んでください。
「ここにidを入れる」「ここにブログのURLを入れる」を削除して、それぞれにidとURLを入れて下さい。URLは、http://以降です。http://を削除してください。
例えばうちのブログだと、id は shiromatakumi 、URLは shiromatakumi.hatenablog.com ですね。ここ間違える方が多いので要注意です。
レッドの読者登録ボタン
お次はレッドの読者登録ボタン。モノトーン基調にレッドが目立つので、思わずクリックしたくなる？？何度も言いますが、こちらも記事下にコピペして、id と アドレス を書き換えるだけでOK。
↑ここにコードが表示されていない場合は再度ページを読み込んでください。
「ここにidを入れる」「ここにブログのURLを入れる」を削除して、それぞれにidとURLを入れて下さい。URLは、http://以降です。http://を削除してください。
例えばうちのブログだと、id は shiromatakumi 、URLは shiromatakumi.hatenablog.com ですね。ここ間違える方が多いので要注意です。
WEBフォントの設定
軽量なフォントで評判のWEBフォントの「open sans」を使うと、ローマ字がまたいい感じになります。個人的には好きなフォントです。
これを 設定 → 詳細設定 → headに要素を追加 にコピペすれば「open sans」のフォントが利用できます。
このテーマについて
このテーマを利用するなら、ヘッダーの画像は背景が白の画像をオススメします。背景に馴染んで自然な仕上がりになります。
そして、念のためにh2要素の見出しもCSSに記述しておきました。
そして、このテーマを作るにあたって、こちらのブログの記事を参考に致しました。
とても感謝しております。
いやー、結構大変だった。このブログのカスタマイズよりも頑張ったかも。
なんなら、このブログも「Brooklyn」にしたいぜ。
Brooklyn はこちらで利用できます↓↓
http://blog.hatena.ne.jp/-/store/theme/6653586347155924442
当ブログのオススメ記事