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

はてなブログの超便利なデザインテーマ「Brooklyn」を作りましたのアイキャッチ画像

3日ほどブログを書いてませんでしたが、その間テーマを作ってました。

その名も「Brooklyn」。

デモ用のブログも作成したので、どんなデザインなのか見てみて下さい。

Brooklyn

サンプルエントリー – Brooklyn

ぜひ、スマホとPC両方で確認してみて下さい。

デモページはタイトルが英語ですが、シンプルなので日本語でもイケると思います。

テーマストア - Brooklyn –

タイトルに超便利って書いてますが、このテーマは何と!グローバルナビ(タイトル下のメニュー)とシェアボタン、読者登録ボタンを追加するためのCSSをすでに記述してあるのです!さらに、WEBフォントの「open sans」も記述済みです。

面倒でややこしいCSSの設定は一切不要!カスタマイズがめっちゃ簡単です!

コピペで超簡単にカスタマイズできます!

ちょっと書き換えが必要な部分はありますが…

もちろん、スマホのデザインにも対応しているレスポンシブデザインです。

あちこちで「使ってるテーマがスマホに対応してない!」とか「シェアボタンの設置がうまくいかない!」などの声が聞かれたので、スマホ対応にしてカスタマイズ用のCSSはこのテーマにぶっこんでおきました。

では、このテーマを使うことによって、コピペだけで簡単にできるカスタマイズを紹介しようと思います。

注意点!!

カスタマイズ後、グローバルナビや読者登録ボタンはリンク先に飛ぶか、ご自身でちゃんとチェックしてください!!!お願いします!!!

グローバルナビの設置

まずはヘッダーのタイトル下にメニューを設置してみましょう。CSSはテーマに記述されているので、いじる必要はありません。一般ユーザー用とはてなProユーザー用の2種類があります。

なぜ別にするかというと、Pro以外のユーザーははてなブログのデフォルトのヘッダー(ブログの一番上にあるやつ)を隠すのは規約違反だからです。Pro向けのグローバルナビは上部に固定されるようにしましたので、一般ユーザーが使うと規約違反になってしまうかもしれないです。

追記:新しいグローバルナビも作りました。

Brooklynのグローバルナビをドロップダウンにする方法 | NO TITLE

グローバルナビの設置(一般ユーザー向け)

まずは一般ユーザー向けのコード。

<div id="global-menu">
<ul class="global-menu-list">
<li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li>
<li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li>
<li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li>
<li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li>
<li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li>
</ul>
</div>

例えば、うちのブログで「WEBデザイン」のカテゴリーに飛ばしたい場合。「ここにリンク先のアドレス」には、↓↓これを記述する感じですね。

そして、「メニューの名前」を削除して「WEBデザイン」と記述すれば良いですね。

これを、ダッシュボードの デザイン → カスタマイズ → ヘッダ → タイトル下 にペーストすればOKです。

メニューは5項目までにして下さい。6項目以上入れるとレイアウトが崩れます。

グローバルナビの設置(はてなPro向け)

<div id="trigger-point">
</div>
<div id="global-menu">
<div id="mobile-head">
<div id="nav-toggle">
<div>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<ul class="global-menu-list">
<li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li>
<li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li>
<li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li>
<li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li>
<li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li>
</ul>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function (){
// 変数に代入
var $nav = $('#global-menu');
var $content = $('#content');
var $offsetTop = $('#trigger-point').offset().top;
// 固定メニューの設定
function fixedNav() {
if($(window).scrollTop() > $offsetTop){
            $nav.addClass('fixed');
} else {
            $nav.removeClass('fixed');
}
};
    $(window).scroll(fixedNav);
    $('body').on('touchmove', fixedNav);
// Toggle メニューの設定
    $('#nav-toggle').click(function (){
        $nav.toggleClass('open');
});
    $('#content').click(function (){
if($nav.hasClass('open')){
            $nav.removeClass('open');
}
})
});
</script>

例えば、うちのブログで「WEBデザイン」のカテゴリーに飛ばしたい場合。「ここにリンク先のアドレス」を削除して、↓↓これを記述する感じですね。

そして、「メニューの名前」を削除して「WEBデザイン」と記述すれば良いですね。

これを、ダッシュボードの デザイン → カスタマイズ → ヘッダ → タイトル下 にペーストすればOKです。

メニューは5項目までにして下さい。6項目以上入れるとレイアウトが崩れます。

上部に固定させるだけでなく、スマホではボタンでクリックで表示・非表示される便利で美しいメニュー(自画自賛)です。

スマホだとこんな感じです。

シェアボタンの設置

そしてシェアボタン。こちらはモノトーンとカラーの2種類を用意しました。デザイン重視のモノトーンとユーザビリティを考慮したカラーのお好きな方を選んで好きな所にコピペして下さい。

シェアボタンを設置する場合は、デフォルトのシェアボタンは不要なので消しちゃってください。ページの読み込みが遅くなるので。デフォルトのシェアボタンを消す場合はスマホにもこのデザインを反映させてください。

設置場所はダッシュボードの

デザイン → カスタマイズ → 記事 → 記事上or記事下

です。

モノトーンのシェアボタン

まずはモノトーンのシェアボタン。こちらは記事下か記事上、もしくは両方にコピペして下さい。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!--シェアボタン-->
<div class="share-button">
<div class="share-inner">
<!--はてブ-->
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br> <span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Facebook-->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="facebook-button "><i class="fa fa-facebook-square lg"></i><br><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" class="twitter-button "><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>
<!--ググタス-->
<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button "><i class="fa fa-google-plus"></i><br><span class="small-text">Google</span></a>
<!--Pocket-->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button common" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="small-text">Pocket</span></a>
</div>
</div>

上のコードの下に次のコードを貼って下さい。

このコードは記事下に貼っていれば、記事上には貼らなくてOKです。

<!-- シェアボタン数のカウント -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
//Facebookのシェア数を取得
function countFacebook(url, selector) {
$.ajax({
url:'https://graph.facebook.com/',
dataType:'jsonp',
data:{
id:url
}
}).done(function(res){
if ( res.share && res.share.share_count ) {
$( selector ).text( res.share.share_count );
} else {
$( selector ).text( 0 );
}
}).fail(function(){
$(selector).text('0');
});
}
//はてなブックマークではてブ数を取得
function countHatebu(url, selector) {
  $.ajax({
    url:'https://b.hatena.ne.jp/entry.count?callback=?',
    dataType:'jsonp',
    data:{
      url:url
}
}).done(function(res){
    $(selector).text( res || 0 );
}).fail(function(){
    $(selector).text('0');
});
}
$(function(){
  countFacebook('{Permalink}', '.facebook-count');
  countHatebu('{Permalink}', '.hatebu-count');
});
</script>

始めに紹介したグローバルナビ(Pro向けの方)を入れる場合、下記のコードはすでに記述されているのでここのコードからは消して下さい。消さなくても動きますが、消さないとページの読み込みが遅くなってしまいます。

<script type=”text/javascript” src=”https://code.jquery.com/jquery-1.11.3.min.js“></script>

カラフルなシェアボタン

お次は色付きのカラフルなシェアボタン。こちらも同じく記事上か記事下、もしくは両方にコピペして下さい。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!--シェアボタン-->
<div class="share-button">
<div class="share-inner">
<!--はてブ-->
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button color" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br> <span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Facebook-->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="facebook-button color"><i class="fa fa-facebook-square lg"></i><br><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" class="twitter-button color"><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>
<!--ググタス-->
<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button color"><i class="fa fa-google-plus"></i><br><span class="small-text">Google</span></a>
<!--Pocket-->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button color" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="small-text">Pocket</span></a>
</div>
</div>

上のコードの下に次のコードを貼って下さい。

このコードは記事下に貼っていれば、記事上には貼らなくてOKです。

<!-- シェアボタン数のカウント -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
//Facebookのシェア数を取得
function countFacebook(url, selector) {
$.ajax({
url:'https://graph.facebook.com/',
dataType:'jsonp',
data:{
id:url
}
}).done(function(res){
if ( res.share && res.share.share_count ) {
$( selector ).text( res.share.share_count );
} else {
$( selector ).text( 0 );
}
}).fail(function(){
$(selector).text('0');
});
}
//はてなブックマークではてブ数を取得
function countHatebu(url, selector) {
  $.ajax({
    url:'https://b.hatena.ne.jp/entry.count?callback=?',
    dataType:'jsonp',
    data:{
      url:url
}
}).done(function(res){
    $(selector).text( res || 0 );
}).fail(function(){
    $(selector).text('0');
});
}
$(function(){
  countFacebook('{Permalink}', '.facebook-count');
  countHatebu('{Permalink}', '.hatebu-count');
});
</script>

始めに紹介したグローバルナビ(Pro向けの方)を入れる場合、下記のコードはすでに記述されているのでここのコードからは消して下さい。消さなくても動きますが、消さないとページの読み込みが遅くなってしまいます。

<script type=”text/javascript” src=”https://code.jquery.com/jquery-1.11.3.min.js“></script>

簡単ですよね。

シェア数カウントのコードはこちらの記事を参考にいたしました。

nelog.jp

スポンサーリンク

 

読者登録ボタンの設置

少しでも読者を増やしたいのであれば、記事下に読者登録ボタンを設置することをオススメします。こちらはブラックとレッドの2色をご用意致しました。

デザイン → カスタマイズ → 記事 → 記事下

ブラックの読者登録ボタン

読者登録ボタンは記事下がいいかな。記事下にコピペして、id と アドレスを書き換えるだけでOKです。

<div class="reader-button">
<a href="http://blog.hatena.ne.jp/ここにIDを入れる/ここにブログのURL/subscribe">読者になる</a>
</div>

「ここにidを入れる」「ここにブログのURLを入れる」を削除して、それぞれにidとURLを入れて下さい。URLは、http://以降です。http://を削除してください。

例えばうちのブログだと、id は shiromatakumi 、URLは www.notitle-weblog.com ですね。ここ間違える方が多いので要注意です。

レッドの読者登録ボタン

お次はレッドの読者登録ボタン。モノトーン基調にレッドが目立つので、思わずクリックしたくなる??何度も言いますが、こちらも記事下にコピペして、id と アドレス を書き換えるだけでOK。

<div class="reader-button color">
<a href="http://blog.hatena.ne.jp/ここにidを入れる/ここにブログのURL/subscribe">読者になる</a>
</div>

「ここにidを入れる」「ここにブログのURLを入れる」を削除して、それぞれにidとURLを入れて下さい。URLは、http://以降です。http://を削除してください。

例えばうちのブログだと、id は shiromatakumi 、URLは www.notitle-weblog.com ですね。ここ間違える方が多いので要注意です。

WEBフォントの設定

軽量なフォントで評判のWEBフォントの「open sans」を使うと、ローマ字がまたいい感じになります。個人的には好きなフォントです。

<link href=’https://fonts.googleapis.com/css?family=Open+Sans:400,600,800′ rel=’stylesheet’ type=’text/css’>

これを 設定 → 詳細設定 → headに要素を追加 にコピペすれば「open sans」のフォントが利用できます。

このテーマについて

このテーマを利用するなら、ヘッダーの画像は背景が白の画像をオススメします。背景に馴染んで自然な仕上がりになります。

そして、念のためにh2要素の見出しもCSSに記述しておきました。

そして、このテーマを作るにあたって、こちらのブログの記事を参考に致しました。

とても感謝しております。

いやー、結構大変だった。このブログのカスタマイズよりも頑張ったかも。

なんなら、このブログも「Brooklyn」にしたいぜ。

Brooklyn はこちらで利用できます↓↓

http://blog.hatena.ne.jp/-/store/theme/6653586347155924442

おすすめ記事!!お小遣いしたいブロガー歓喜!!

HTMLやCSSを勉強してみたい人は、こちらの記事がオススメです。

HTML・CSS・JavaScriptを独学するのにおすすめの入門書・参考書まとめ

たくさんのカスタマイズ方法を紹介した記事です。

必見!はてなブログのカスタマイズを一気に紹介する

コメント

  1. mt-cedar より:

    ブログ開設からデザインテーマがデフォルトのままだったので、「Brooklyn」使わせていただきます!
    ありがとうございます!

  2. shiromatakumi より:

    リベロー (id:gattolibero)さん
    コメントありがとうございます。まさかそこまで言っていただけるなんて。ありがとうございます。
    カスタマイズの記事はさらに強化していきます\(^o^)/

  3. shiromatakumi より:

    Shun (id:mt-cedar)さん
    ご利用ありがとうございます!頑張って作った甲斐がありました!

  4. gssmboy より:

    はじめまして。
    ただいまBrooklynを導入しようといろいろデザインを試しているところなのですが、質問があります。
    レスポンシブにしてスマホから閲覧すると、エントリ内の横長の画像が横幅だけ縮まって歪んでしまいます。
    これの対処法はございますか?

  5. shiromatakumi より:

    ハル (id:gssmboy)さん
    はじめまして。
    CSSの記述では横長の画像でも歪まないはずなのですが、何が原因なのでしょう。
    歪んでしまうページのURLを教えて頂ければ、コードを見て解決できるかもしれません。

  6. gssmboy より:

    とても早い返信ありがとうございます。
    テーマをBrooklynに変更してみました。
    ぼくの携帯からだとやはり歪んでしまいます。
    たびたびすみませんがよろしくお願いします。
    http://gssmboy.hatenablog.jp/entry/2016/02/12/174941

  7. shiromatakumi より:

    ハル (id:gssmboy)さん
    原因としては、imgタグ内にheightが記述されているからですね。通常の画像挿入ではheightは記述されないはずなので、htmlをご自身で書かれているのでしょうか?
    width=”672 “height=”416” を削除すればうまくいくと思います。

  8. gssmboy より:

    ありがとうございます、解決しました。
    画像にalt属性を書くためにいちいちhtmlを記述しておりました。
    整備ができたら再度Brooklyn使わせていただきます!クールなテーマと素早い対応、感動いたしました。本当にありがとうございます。

  9. shiromatakumi より:

    横幅ははてなフォトライフ内で調整していただければ問題ないはずです。
    オシャレなブログに私のテーマを選んでいただいて嬉しいです。

  10. gssmboy より:

    Brooklyn換装いたしました。
    サイドバーのタイトル部分、見出しh3に入るふきだしのとんがり部分の色の指定はできますか?
    たびたび申し訳ありません…

  11. shiromatakumi より:

    .entry-content h3::before {
    border-top-color: #eee;
    }
    #eee の部分を好きな色にして、CSSに追加すればうまくいくと思います。
    .entry-content h3 {
    background-color: #eee;
    }
    これで#eee を好きな色に変えれば見出しの背景色も変更できます。

  12. gssmboy より:

    見出し部分はうまくいきました!
    サイドバータイトル部分は
    .hatena-module-title::before {
    border-top-color: #eee ;
    }
    ではないのでしょうか…?この記述だと上手くいきませんでした。

  13. shiromatakumi より:

    サイドバーはの吹き出しは
    .hatena-module-title::before {
    border-top-color: #111;
    }
    の上に
    .hatena-module-title::after {
    border-top-color: #fff;
    }
    を重ねて、枠になるようにしています。
    全体の枠は、
    .hatena-module-title {
    border-color: #111;
    }
    のカラーコードを変更すればOKです。

  14. gssmboy より:

    ほんっとに何度も何度もお手数をおかけいたしました!
    Brooklyn最高です。満足いくデザインが出来ました。
    ありがとうございました。愛用させていただきます!

  15. shiromatakumi より:

    Liab (id:varevo)さん
    返信が遅くなってすいません。
    画像の大きさは、
    .header-image-only #blog-title #blog-title-inner {
    background-repeat: no-repeat;
    position: relative;
    height: 200px;
    }
    のheightを変えれば、良いと思うのですが、ここの部分ははてな側が書いているコードなので、もしかしたらうまくいかないかもしれません。

  16. shiromatakumi より:

    奴が岳魚 (id:ytugatakewo)さん
    読者登録ボタンのURLはhttp://なしです。書き方が分かりにくかったようなので、訂正しました。

  17. shiromatakumi より:

    そうですよね。私もテーマ作る時に画像のCSSいじってみたんですが、制御されててうまくいきませんでした。大きな画像だとスマホ表示がうまくいかなくなるので、現状の大きさにしています。

  18. shiromatakumi より:

    奴が岳魚 (id:ytugatakewo)さん
    http://blog.hatena.ne.jp/ytugatakewo/ytugatakewo.hatenadiary.com/subscribe
    これを張り付けていただければ大丈夫ですよ。

  19. rintaro95 より:

    はじめまして!素敵なデザインになり大満足です。ありがとうございます!ひとつ質問なんですが、PCのグローバルメニューの「メンズファッション」の項目だけが表示されません。対処法がありましたらお時間のある時で結構ですのでご教授お願い致します。http://rintaro95.hateblo.jp/

  20. shiromatakumi より:

    石井凛太郎 (id:rintaro95)さん
    ご利用ありがとうございます。
    元々のカテゴリ「メンズファッション」の最後にスペースが入っちゃってますよ!(^^)!

  21. rintaro95 より:

    早速お返事頂きましてありがとうございます!無知をさらけ出すようでお恥ずかしい限りですが、それはどのように改善すればよろしいのでしょうか?重ねての質問で恐縮ですが宜しくお願い致します。

  22. shiromatakumi より:

    石井凛太郎 (id:rintaro95)さん
    ダッシュボードの「カテゴリー」で「メンズファッション」の「名前を変更」でスペースを消せばOKですよ!

  23. rintaro95 より:

    出来ました。ありがとうございました!

  24. koumori23 より:

    とても素敵なデザインで気に入ってます。ありがとうございます!

  25. shiromatakumi より:

    まさ (id:koumori23)さん
    ご利用ありがとうございます!
    頑張って作った甲斐がありました!

  26. blogger-yasu より:

    とてもすてきなデザインありがとうございます!
    メニューの背景色を黒から自分の好きな色コードに変更はできますでしょうか?

  27. shiromatakumi より:

    id:blogger-yasuさん
    変えられますよ。
    #global-menu {
    background-color: #111;
    }
    .global-menu-list li a {
    background-color: #111;
    }
    #mobile-head {
    background-color: #111;
    }
    #111を好きな色にしていただければ、OKです。

  28. shiromatakumi より:

    これを デザイン→カスタタマイズ→デザインCSS に記述してください。

  29. yamapi33 より:

    利用させて頂いております。ありがとうございます。
    質問なのですが、グローバルナビ(一般ユーザー)の場合は、スマホでの表示はできないのでしょうか?

  30. shiromatakumi より:

    id:yamapi33さん
    私が作ったグローバルナビだとスマホ表示の時にはてなのヘッダーを隠してしまうので、規約違反になってしまうので利用できません。
    Proだとはてなのヘッダーなくせるんですよね…

  31. yamapi33 より:

    素早い返信、ありがとうございます。
    承知しました。はてなの規約違反になってしまうなら仕方ないですよね…
    Proの検討もしてみます!ありがとうございました!

  32. blogger-yasu より:

    丁寧なお返事ありがとうございます!
    変更できました:D
    あと日付周りの色と、フッターの色も変更したいのですが、教えていただけないでしょうか?
    質問ばかりでごめんなさい!

  33. shiromatakumi より:

    id:blogger-yasuさん
    日付の背景色
    .date a {
    background-color: #111;
    }
    フッターの背景色
    #footer {
    background-color: #111;
    }
    で変更可能です。

  34. sodoppu3 より:

    はじめまして。
    すっきりしたデザインがカッコよかったので、ブルックリン使用させて頂いています。
    初心者すぎて申し訳ないのですが、サイドメニューを右側に配置変更することは可能でしょうか??

  35. shiromatakumi より:

    サイドメニューはデフォルトで右側に配置しております。
    ウィンドウサイズが狭くなると下に行きます。
    #main {
    float: right;
    }
    #box2 {
    float: left;
    }
    これをCSSに追加するとサイドバーを左にすることもできると思います。

  36. sodoppu3 より:

    ウィンドウサイズが小さかったんですね。
    無知過ぎてすみません。ありがとうございます!

  37. rintaro95 より:

    おはようございます!何度も質問恐縮です。コメントを見て気付いたのですが、私も読者ボタンが機能しません。
    http://blog.hatena.ne.jp/ytugatakewo/ytugatakewo.hatenadiary.com/subscribe
    これを貼り付けたら良いとご回答されてましたがどこに貼り付けたらいいのでしょうか?いつも初歩的な質問ばかりで申し訳ありませんが、よろしくお願いします。

  38. shiromatakumi より:

    石井凛太郎 (id:rintaro95)さん
    そちらのリンク先は違う方のURLです。石井凛太郎さんの場合はコード内の
    rintaro95.hateblo.jp//subscribe
    スラッシュが1本多いので、
    rintaro95.hateblo.jp/subscribe
    このようにすると直ります。

  39. rintaro95 より:

    出来ました。本当にいつもありがとうございます。初歩的な質問ばかりで申し訳ありません。

  40. Robi100 より:

    Brooklyn使用させていただきました。シンプルかつ使いやすくでカッコイイ。とても満足しています。
    質問なのですが、グローバルナビを使用している場合、アドセンス広告等をタイトル下に入れる場合、ナビのCSSの前と後どちらに入れるのがいいのでしょうか。

  41. shiromatakumi より:

    虎寅 (id:Robi100)さん
    ナビの上に広告を入れるか、下に入れるかということでしょうか?
    それでしたら、下に入れたほうが良いと思います。

  42. Robi100 より:

    すいません、説明がたらなかったです。入れる際、ナビのプログラム下に、そのままコピペして入れればいいのでしょうか。何行か開けるとか必要なのでしょうか。
    CSSのようなプログラムをいじるのは初めてなもので、複数のプログラムを入れる場合の基本がわかりませんでした。

  43. shiromatakumi より:

    虎寅 (id:Robi100)さん
    CSSは、他のコードの前後どちらでも大丈夫ですよ!
    行を開けたりしなくても大丈夫です。

  44. Robi100 より:

    なるほど!ありがとうございます。
    初心者丸出しな質問にご回答いただきありがとう御座います。

  45. beauty-box より:

    こんにちは。ふたつ質問があります。
    本文中で使っていた既存のh3やh4などの装飾タグがおかしなことになってしまいます。こうしたタグを「Brooklyn」のデザインの対象から外したいのですが、どの様なCSSを追加すればよいですか?
    既存で使用していた「続きを読む」ボタンに黒い縁取りがされてしまいます。
    これも出来ればどうにかしたのですが・・・

  46. shiromatakumi より:

    色即是空 (id:beauty-box)さん
    見出しをカスタマイズする際に、テーマのデザインを無効化するコードはこちらの記事にて書いております。
    http://shiromatakumi.hatenablog.com/entry/2016/02/17/144908
    続きを読むの枠を消したいのであれば、このコードを追加して下さい。
    .entry-content .entry-see-more,
    .entry-content .entry-see-more:visited {
    border: none;
    }

  47. beauty-box より:

    ちなにも現在タグに装飾を付けている方法はCSSではなく、直接HTMLで書く方法です。
    ここにテキストを入力します

  48. shiromatakumi より:

    色即是空 (id:beauty-box)さん
    HTMLに書いている場合でも、先ほど貼ったリンク先のコードでOKです。

  49. beauty-box より:

    謝謝!無事解決しましたm(_ _)m

  50. kou1026 より:

    はじめまして
    貴殿のデザインを知って活用させていただいてます。
    一つ質問させてください。
    サイドバーにアクセスしたユーザー数を表示していますが、これはどのようにCSSを設定すればよろしいでしょうか?
    ご教示頂けたらと思います。
    よろしくお願いいたします。

  51. takepontan より:

    はじめまして。昨日デザインを入れさせてもらいました。とてもかっこいいですね。ひとつ聞きたいのですが、Twitterのフォローボタンを作ることはできますか?よろしくお願いします。

  52. shiromatakumi より:

    最近仕事が忙しくてコメント残せてないので、明日には順次返信いたします。

  53. shiromatakumi より:

    id:kou1026
    現在は表示していないようなので、確認ができないですね。
    表示していれば、コードを確認できるのですが。

  54. shiromatakumi より:

    たけぽん (id:takepontan)さん
    Twitterのフォローボタンのカスタマイズについては、他のブログで書かれていますので、そちらを参考にしていただければ良いかと思います。
    http://www.ituore.com/entry/sns-follow-button

  55. kou1026 より:

    回答ありがとうございます。
    サイドバーのBOOKMARKLANKINGなどに表示されているusersの事でした。
    確認は出来なさそうですか?

  56. shiromatakumi より:

    id:kou1026 さん
    今確認してみましたが、これはいじれないみたいです。

  57. takepontan より:

    ありがとうございます。早速試してみたいと思います。

  58. rai-mishima より:

    初めまして。
    Brooklynを利用させてもらっています。
    素敵なテーマで気に入っているのですが、スマホで見るとシェアボタンが一列に並ばないのが気になっています。
    POCKETのボタンがブクマのボタンの真下に配置されてしまうんです。
    もし直し方などご存知でしたら教えていただきたくてコメントしました。
    よろしくお願いします。

  59. shiromatakumi より:

    らい (id:rai-mishima)さん
    私のiPhone で見たときは大丈夫なんですが、機種によってはレイアウトが崩れてしまうんですね。
    デザインCSSに以下のコードを追加してみて下さい。おそらくこれで大丈夫なはずです。
    @media (max-width: 380px) {
    .share-inner a {
    width: 54px;
    height: 54px;
    }
    }
    ちなみに使っているスマホは何でしょうか?

  60. rai-mishima より:

    >シロマティさん
    早速の返答、ありがとうございます!
    教えて頂いたコードを貼ってみたのですが、見え方は変化なしです…。
    因みに、Brooklynを使った他のブログのシェアボタンは崩れず、一列に並んでいる状態です。
    コードの貼り方が悪いんでしょうか…お手数かけてすみません(>_<)

  61. rai-mishima より:

    スマホの機種書き忘れました…
    Xperiaz1fです。

  62. shiromatakumi より:

    らい (id:rai-mishima)さん
    他のブログは大丈夫なんですね。古い機種でもないですし…。らいさんのブログのコードを見ても怪しい所が特にないように思えます。iPhoneで確認してもウィンドウサイズを狭めても、私が見るとちゃんと一列に表示されています。
    先ほど貼ったコードの 54px の部分を53…52…と少しづつ小さくしていけば、レイアウトが崩れない大きさにはなると思います。

  63. shiromatakumi より:

    コメント欄が長くなってしまったので、これ以降は下記のページのコメント欄を利用して下さい。
    http://shiromatakumi.hatenablog.com/entry/2016/04/09/181614

  64. hodie-non-cras より:

    Blooklynを使わせていただきました。
    ありがとうございます。
    記事内にAmazonのリンクがうまく貼れないのですが(URLの羅列になってしまう)、私だけでしょうか?
    ご教示頂けると助かります…
    よろしくお願いいたします。

  65. hodie-non-cras より:

    たびたび失礼します。
    馬鹿でした!
    (単に使い方がわかっていませんでした)
    解決しましたので上記コメントは無視なさって下さいませ。

  66. shiromatakumi より:

    シエル (id:hodie-non-cras)さん
    Amazonの貼り方は2通りあります。
    1.はてなブログの記事編集画面の右にあるAmazon商品紹介を使って貼る方法。これが簡単な方法です。
    アカウント設定→外部サービス連携でAmazonと連携することで収益を得ることもできます。
    2.AmazonアソシエイトのHTMLをコピーして貼り付ける方法。この場合、編集モードを「HTML編集」に切り替えてコピペして下さい。
    余談ですが、「カエレバ」「ヨメレバ」というサービスもあるので興味があれば調べてみると良いと思います。

  67. shiromatakumi より:

    シエル (id:hodie-non-cras)さん
    コメントがかぶってしまいましたね。了解です。

  68. shiromatakumi より:

    コメント欄が長くなってしまったので、これ以降は下記のページのコメント欄を利用して下さい。
    http://shiromatakumi.hatenablog.com/entry/2016/04/09/181614

  69. shiromatakumi より:

    只今、質問の受付を一旦ストップしています。

  70. takkuya84 より:

    新しく作ったブログにBrooklyn、使わせてもらってます。かなりかっこいい感じにできて満足しています。
    http://wallstreet.hatenablog.jp/

  71. lemonSato より:

    こんにちははじめまして、サトシといいます。
    こちらのテーマをずっと使わせていただいています。
    最近見出しのカスタマイズをしたところ、このようになりました。
    http://www.rabotiku-sato.com/entry/mujirushi-lether-0
    こちらのテーマのデフォルトで入っているチョボの色が変わらず、困っています。解決方法をご存じでいたら、おしえていただけませんでしょうか。
    お手数をおかけしますが、よろしくお願いします。

  72. lemonSato より:

    こちらの記事を参考にさせていただき、自己解決いたしました。お騒がせいたしました。失礼いたします。
    http://shiromatakumi.hatenablog.com/entry/2016/02/17/144908#スマホの見出し変更方法

  73. lemonSato より:

    はじめまして、シロマティさん。サトシと申します。
    私のブログでBrooklynを使わせていただいています。ありがとうございます!
    一つお聞きしたいことがありまして、コメントさせていただきました。
    こちらのテーマはデフォルトでパンくずリストが表示されるようになっていますでしょうか。
    最近パンくずリストをカスタマイズしようとしたところ、どうしても重複してしまっていたんです。パンくずリストに関するソースコードを消去し、はてなの公式設定のパンくずリストの設定も外した後も、パンくずリストが表示されていたままだったんです。それで、Brooklynのデフォルト設定かなと思った次第です。
    お手数ですが、ご回答お待ちしております。ありがとうございます。

  74. milejournal より:

    シロマティ様
    デザインテーマではお世話になっております。
    1つ質問なのですがこちらのBrooklynでは
    サイドバーのカテゴリを縦1列にすることは可能でしょうか。
    またhttp://blog.wackwack.net/entry/2016/09/11/004731
    こちらで紹介されています階層化は可能なのでしょうか。
    お手数ではございますがご返答頂けたら幸いです。

  75. hurueru-misoji より:

    はじめまして◎突然すみません(>_<) まだまだカスタム初心者でもわかりやすくてホントありがとうございます◎ 記事下の下に関連記事とか、読者ボタン使わせていただきました。 お伺いしたかったのですが、シェアボタンのカウント数を表示しないようにするためにはどうしたらいいでしょうか? 調べてもなかなかわからず、すみません。。 お忙しいところお手数ですがよろしくお願いします(^^)

  76. allegoripapa より:

    シロマさん
    デザイン「Brooklyn」を使用させていただきました。このデザイン、気に入っております。シェアボタンのカスタマイズも、取り入れてみました。今は、プレビューで表示されるものの、ブログそのものに反映されないので悩んでいる最中です。もしよろしければ、アドバイスいただけると幸いです。

  77. eight88eighter88 より:

    昔の記事にコメント失礼します。
    本日はてなブログを開設しまして「Brooklyn」を使わせて頂きました。
    同時にこちらの記事を参考にシェアボタンのカスタマイズをしたのですが最初はてブの数字だけがくるくると回り続け数を取得出来ない状態になり、最終的に他Blogで配布されていたコードとこちらで配布されているコードを合体させて何とかはてブの数も取得することが出来たのですが本来アイコンの下に表示される取得数がアイコンの真横に表示される形になってしまい困っています。
    どの部分にカウントを表示させるのかはコードのどこの部分で設定すればよろしいのでしょうか?
    何かとお忙しい事と存じますがお手隙の際にでもご教示頂けましたら有り難いです。
    よろしくお願い致します。

  78. kiyoka-1204tan より:

    すいません。brooklyn入れたのですが、横画面にしないと、サイドバーが横にでて、縦画面にしたときには、下の方に表示されます。解消は可能ですか?

  79. kaakiko より:

    シロマ (id:shiromatakumi)さん、Brooklynのデザインをインストールいたしました。手作り感満載だったブログが一気におしゃれになり、とても感謝しております。また、カスタマイズの仕方も丁寧に記載しており、HTMLが全く分からない私でもついていけました。今後も記事を楽しみにしております!

  80. nokonoko144 より:

    Brooklynのデザインがドストライクだったので愛用したいと思います。

  81. あかり より:

    Brooklynを使わせていただいて3年目でとても気に入ってます。
    ステキなテーマを作成してくださりありがとうございます!

    SSL化の作業の途中で、タイトルとグローバルナビが表示されなくなりました。
    headタグの編集で何かを消してしまってからのように感じているのですが、もし何か対策方法がありましたらご教示いただけるとありがたいです。
    お忙しい所恐縮ですが、よろしくお願いします。

コメントする

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

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