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種類を用意しました。デザイン重視のモノトーンとユーザビリティを考慮したカラーのお好きな方を選んで好きな所にコピペして下さい。
シェアボタンを設置する場合は、デフォルトのシェアボタンは不要なので消しちゃってください。ページの読み込みが遅くなるので。ただ、Proではない一般ユーザーだと、デフォルトのを消すとスマホでシェアボタンが表示されないという問題が…
設置場所はダッシュボードの
デザイン → カスタマイズ → 記事 → 記事上or記事下
です。
モノトーンのシェアボタン
まずはモノトーンのシェアボタン。こちらは記事下か記事上、もしくは両方にコピペして下さい。
↑ここにコードが表示されていない場合は再度ページを読み込んでください。
ちょっと長いけど、許して。
始めに紹介したグローバルナビを入れる場合、下記のコードはすでに記述されているのでここのコードからは消して下さい。消さなくても動きますが、消さないとページの読み込みが遅くなってしまいます。
カラフルなシェアボタン
お次は色付きのカラフルなシェアボタン。こちらも同じく記事上か記事下、もしくは両方にコピペして下さい。
↑ここにコードが表示されていない場合は再度ページを読み込んでください。
始めに紹介したグローバルナビを入れる場合、下記のコードはすでに記述されているのでここのコードからは消して下さい。消さなくても動きますが、消さないとページの読み込みが遅くなってしまいます。
簡単ですよね。
スポンサードリンク
読者登録ボタンの設置
少しでも読者を増やしたいのであれば、記事下に読者登録ボタンを設置することをオススメします。こちらはブラックとレッドの2色をご用意致しました。
デザイン → カスタマイズ → 記事 → 記事下
ブラックの読者登録ボタン
読者登録ボタンは記事下がいいかな。記事下にコピペして、id と アドレスを入れるだけでOKです。
↑ここにコードが表示されていない場合は再度ページを読み込んでください。
「ここにidを入れる」「ここにブログのアドレスを入れる」を削除して、それぞれにidとアドレスを入れて下さい。
うちのブログだと、id は shiromatakumi 、アドレスは shiromatakumi.hatena.com ですね。
レッドの読者登録ボタン
お次はレッドの読者登録ボタン。モノトーン基調にレッドが目立つので、思わずクリックしたくなる？？何度も言いますが、こちらも記事下にコピペして、id と アドレス を入れるだけでOK。
↑ここにコードが表示されていない場合は再度ページを読み込んでください。
「ここにidを入れる」「ここにブログのアドレスを入れる」を削除して、それぞれにidとアドレスを入れて下さい。
うちのブログだと、id は shiromatakumi 、アドレスは shiromatakumi.hatena.com ですね。
WEBフォントの設定
軽量なフォントで評判のWEBフォントの「open sans」を使うと、ローマ字がまたいい感じになります。個人的には好きなフォントです。
これを 設定 → 詳細設定 → headに要素を追加 にコピペすれば「open sans」のフォントが利用できます。
このテーマについて
このテーマを利用するなら、ヘッダーの画像は背景が白の画像をオススメします。背景に馴染んで自然な仕上がりになります。
そして、念のためにh2要素の見出しもCSSに記述しておきました。
そして、このテーマを作るにあたって、こちらのブログの記事を参考に致しました。
とても感謝しております。
いやー、結構大変だった。このブログのカスタマイズよりも頑張ったかも。
なんなら、このブログも「Brooklyn」にしたいぜ。
Brooklyn はこちらで利用できます↓↓
http://blog.hatena.ne.jp/-/store/theme/6653586347155924442
当ブログのオススメ記事