質問用ページ

のアイキャッチ画像

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

はてなブログのデザインテーマ「Brooklyn」の記事(上の記事)のコメント欄がいつの間にか質問コーナーに…。だいぶコメント欄が長くなってしまったので、新しくページを立てます。

「Brooklyn」に関する質問、カスタマイズに関する質問などはこちらにどうぞ。答えられる範囲で返信いたします。原則としてデザインテーマ「Brooklyn」利用の方でお願いします。

すぐに返信はできないかもしれませんので、ご了承ください。

当ブログおすすめカスタマイズ記事

コピペで簡単!CSSではてなブログの見出しをカスタマイズ! – NO TITLE

コピペで簡単!はてなブログのシェアボタンをカスタマイズ – NO TITLE

はてなブログのカテゴリーが縦に長くなるのを解消する – NO TITLE

はてなブログをカスタマイズしてる人向け。jQueryの読み込みを速くするためにコードを変えてみた – NO TITLE

コメント

  1. dasBrezelbacken より:

    はじめまして。クールなBrooklynを使わせていただいてます。ありがとうございます!
    質問なのですが、読者登録ボタンを押すと別ページに移遷するようですが、デフォルトボタンのように(ページ内に枠が出てくるように)変更はできますか?

  2. rai-mishima より:

    こんにちは、シェアボタンの件でご相談したらいです。
    前回のコメントの通り54pxのところを53にしたら、ボタンが一列に並ぶようになりました!
    ずっとビミョーに気になっていたのでうれしいです(^^)
    お手数かけてすみませんでした&丁寧に有難うございました!

  3. shiromatakumi より:

    紗弥 (id:dasBrezelbacken)さん
    ご利用ありがとうございます。
    読者登録ボタンはページ遷移のみで、デフォルトのような挙動に変更することはできません。ご了承ください。

  4. nepinepikun より:

    はじめまして。Brooklyn非常に気に入っています。質問なのですがブログのタイトル部分の文字色の変更とその周りのカラーの変更はできますでしょうか?
    背景を黒にしてタイトル(私のブログの場合、CENTPEDEとその下の説明)を白にしたいのですが…

  5. shiromatakumi より:

    nepinepi (id:nepinepikun)さん
    はじめまして。どこかで見た覚えのあるブログですね。
    これをCSSに追加するとOKです。
    #container #blog-title {
    background-color: #111;
    }
    #blog-title #title a {
    color: #fff;
    }
    #blog-title #blog-description {
    color: #fff;
    }
    黒のヘッダー、カッコイイですね。

  6. dasBrezelbacken より:

    ご回答ありがとうございました。

  7. ryohei_j より:

    はじめまして。オシャレで見やすいデザインが気に入って使わせていただいています。
    以前あった質問への回答を参考にグローバルナビの色を変更したのですが、上下に入るラインの色が変わりません。
    これを変えるにはどうすればよいでしょうか?

  8. shiromatakumi より:

    id:ryohei_jさん、はじめまして。
    グローバルナビのラインの色は以下のコードをCSSに追加して、#111の部分を好きなカラーコードに変えると変更できます。
    #global-menu {
    border-bottom: 2px solid #111;
    }
    #blog-title {
    border-bottom: 2px solid #111;
    }

  9. ryohei_j より:

    早速のご回答、ありがとうございます。
    色を変えることができました!

  10. simple-mile より:

    初めまして、質問お願いします。WEBデザインにあたる場所に、ここにリンク先のアドレス を削除して単発ページのリンクは正常に反映されるのですが、カテゴリーにまとめたURLを貼ると、
    Category not found
    お探しの記事は見つかりませんでした。
    になってしまって原因がわからず困っています。超初心者なのですがアドバイスを下さい。
    これを貼ると表示OK 単発記事のURL

  11. 初心者必見
  12. これを貼るとエラー(複数の記事をまとめたカテゴリURL

  13. 初心者必見
  • shiromatakumi より:

    リモーラ (id:simple-mile)さん
    こんばんは。リモーラさんのブログが現在未公開になっていますので、原因を調べることができません。
    公開できる状態になった時に、もう一度コメント頂ければ、調べてみます。
    宜しくお願いします。

  • simple-mile より:

    失礼しました。公開に変更したので是非助けてください。宜しくお願いします。

  • shiromatakumi より:

    リモーラ (id:simple-mile)さん
    カテゴリー「初心者必見」の最後にスペースが入ってしまってます。
    ダッシュボードの「カテゴリー」から「名前を変更」でスペースを消せばOKです。

  • simple-mile より:

    出来ました!本当に有難うございます。スペースは駄目なんですね。もっと勉強します、有難うございました!

  • nepinepikun より:

    いつもお世話になっています。1つ質問があるのですが、本文とサイドバーの間にあるグレーの線の太さや、色を変える事は可能でしょうか?

  • shiromatakumi より:

    nepinepi (id:nepinepikun)さん
    #main {
    border-right: 1px solid #f0f0f0;
    }
    #f0f0f0のカラーコードを変更するとラインの色が変わります。
    アドセンス下のラインは、
    .entry-header {
    border-bottom: 1px solid #ddd;
    }
    これもカラーコード変更すると好きな色に変えられます。

  • samuraism より:

    はじめまして。
    カッコイイので使わせて頂きたいのですが、ヘッダーですが、かなり縦幅がある画像を入れたいのですが、ヘッダーの縦幅を変えることはできるのでしょうか?

  • shiromatakumi より:

    id:samuraismさん
    はじめまして。
    画像のサイズを具体的に教えていただければ、それに合ったCSSを作成いたします。
    (縦:〇〇px 横:○○px)

  • samuraism より:

    ご返信ありがとうございます。
    縦380px、横1100px
    初心者なので、どの箇所を修正(追加?)したらいいかもご指示頂けたら助かります。
    お手数かけて申し訳ありません。
    よろしくお願いします。

  • shiromatakumi より:

    銀鯰 (id:samuraism)さん
    返信遅くなって申し訳ありません。同じサイズの画像で試してみましたが、縦横の比率は変えられないようです。

  • Shinogasa より:

    はじめまして.Brooklyn使わせていただいております.
    質問なのですが,ある程度小さいウィンドウでもサイドバーを下ではなく横に表示させるためにはどのようにしたらよろしいでしょうか?
    よろしくお願いいたします.

  • shiromatakumi より:

    id:Shinogasaさん
    私も1カラムになる横幅を変えようと思っていたので、テーマのCSSを修正しました。
    ある程度横幅が狭くても2カラムになっていると思います。
    ご確認ください。

  • Shinogasa より:

    早速のご対応ありがとうございます.
    問題なく2カラムになっておりました!

  • gssmboy より:

    お世話になっております。
    PCから表示した際に、グローバルナビがズレる、ぼくの環境から言うと「BICYCLE」の項目だけ改行されたような状態になっています。
    デザインに関してはここしばらくいじっていないのですが急に発生しました。
    原因は何でしょうか?

  • shiromatakumi より:

    ハル (id:gssmboy)さん
    大変失礼しました。昨日テーマの修正をしたのが原因でしたので、再度修正しました。
    今後は変更は基本的に行わないようにいたします。

  • tippofree より:

    初めまして宜しくお願いします。
    非常に格好良く出来上がって満足しています。
    サイドメニューはデフォルトで右側に配置しております。
    ウィンドウサイズが狭くなると下に行きます。
    下記の設定で確かに左側にサイドバーが移るのですが、表示が左に寄りすぎてしまい。スマホで見ると左橋が切れてしまします。
    対応方法はあるでしょうか?
    #main {
    float: right;
    }
    #box2 {
    float: left;
    }
    これをCSSに追加するとサイドバーを左にすることもできると思います。

  • shiromatakumi より:

    はしさん (id:tippofree)
    はじめまして。左サイドバーでも綺麗に表示されるように修正いたしました。ご確認宜しくお願いします。

  • shiromatakumi より:

    念のため。今回の修正は右サイドバーの方には影響はありません。

  • tippofree より:

    ありがとうございます。綺麗に表示されています。
    感動ものの対応スピードで驚きです。
    本当にカッコいいテーマで末永く使わせて戴きます。

  • kzt0313 より:

    はじめまして!かっこいいデザインだったので即決でした!一つ教えていただきたいのですが、タイトルとプロフィールに同じ説明が表示されてしまいます。ブログタイトルの下の文章だけ削除もしくは編集するにはどうしたらいいでしょうか。ご教示くださいm

  • shiromatakumi より:

    id:kzt0313さん
    設定→ブログの説明 の中は空欄になっていますか?タイトル下の文章はそちらで設定できます。

  • kei-lmnop より:

    初めまして。素晴らしいテーマを作っていただきありがとうございます。
    1つだけ質問させてください。
    当ブログのトップ画像ですが、横長であるため、スマホ表示だと両端が見切れてしまい、うまく表示されません。
    レスポンシブ設定にするCSSがあればご教授いただければと思います。
    http://www.keikawakita.com/
    タイトル画像のサイズ:801×188

  • shiromatakumi より:

    id:kei-lmnopさん
    以下のコードをデザインCSSに追加してください。
    @media screen and (max-width:800px){
    .header-image-only #blog-title #blog-title-inner {
    background-size: 100% auto;
    height: 188px;
    }
    }
    @media screen and (max-width:600px){
    .header-image-only #blog-title #blog-title-inner {
    height: 150px;
    }
    }
    @media screen and (max-width:400px){
    .header-image-only #blog-title #blog-title-inner {
    height: 100px;
    }
    }
    はてなのヘッダー画像は、HTMLの仕様上、横幅に合わせて縦幅を自動にすることができません。
    なので、ウィンドウサイズが800pxならヘッダーの高さ188px。600pxなら150px。400pxなら100pxと変かするコードを書きました。
    値はご自身で微調整してみてください。

  • kei-lmnop より:

    ありがとうございます!無事できました!
    本当にありがとうございます!

  • hyo-ta より:

    はじめまして!こちらのテーマを使用させて頂いております。
    質問させて頂きたいのですが、タイトル下のHTMLに入力すると左寄りになってしまうのですが中央固定するにはどうすれば良いのでしょうか?

  • shiromatakumi より:

    氷太 (id:hyo-ta)さん
    返信が遅くなってしまい申し訳ございません。
    現在、containerを1500pxにカスタマイズされているようですが、これを削除して、
    .ninja-recommend-block {
    width: 1500px;
    margin: 0 auto;
    }
    このコードを追加するとさらに綺麗に表示されるかと思います。

  • hyo-ta より:

    わあ!ありがとうございます!キレイになりました!

  • kzt0313 より:

    ありがとうございます!無事にできました!初歩的な質問ですいませんでしたm 引き続きよろしくお願いします

  • bbb_network より:

    はじめまして! 本日、こちらのテーマに変更させていただきました。質問させていただきたいのですが、Brooklynを適用してからサイドバーに入れている項目のタイトルが表示されなくなってしまいました。
    例>最新記事など
    こちらはどのように対処すればいいのでしょうか。以前のテーマでは問題なく表示されていました。
    すみませんがよろしくお願い致します。

  • shiromatakumi より:

    バンブルビー通信 (id:bbb_network)さん
    こんばんは。
    設定→詳細設定→headに要素を追加
    この中に以下のコードがあると思います。
    .hatena-module-title {
    display: none;
    }
    これを削除すると直りますよ。ご確認下さい。

  • bbb_network より:

    シロマティ (id:shiromatakumi)さん
    早々にご確認いただき、ありがとうございました!
    コードを削除したところ、表示されるようになりました。
    本当に助かりました。
    よろしくお願いします。

  • yoshimatsutakeshi より:

    はじめまして!質問失礼します。
    テーマ設定し、ヘッダー画像を設定しているのですが、タブレットやスマートフォンでみたときに横が見切れてしまいます。
    初歩的なことかもしれませんが、対応方法ありましたら教えていただけると幸いです。
    よろしくお願い致します。
    http://www.yoshimatsutakeshi.com/

  • shiromatakumi より:

    こんにちは。
    以下のコードをCSSに追加すれば、横幅はうまく調整さるはずです。
    @media screen and (max-width:910px){
    .header-image-only #blog-title #blog-title-inner {
    background-size: 100% auto;
    background-position: center center;
    height: 180px;
    }
    #blog-title {
    padding-bottom:0;
    }
    }
    @media screen and (max-width:600px){
    .header-image-only #blog-title #blog-title-inner {
    height: 150px;
    }
    }
    @media screen and (max-width:400px){
    .header-image-only #blog-title #blog-title-inner {
    height: 100px;
    }
    }
    細かいpx数などはご自身で調整してみて下さい。

  • yoshimatsutakeshi より:

    ありがとうございました!!うまく行きました!ご丁寧にありがとうございます!!!

  • bbb_network より:

    シロマティ (id:shiromatakumi)さん
    こんばんは。
    スマホでの画像表示につきまして、質問させてください。
    〜引用始め〜
    以下のコードをCSSに追加すれば、横幅はうまく調整さるはずです。
    @media screen and (max-width:910px){
    .header-image-only #blog-title #blog-title-inner {
    background-size: 100% auto;
    background-position: center center;
    height: 180px;
    }
    #blog-title {
    padding-bottom:0;
    }
    }
    @media screen and (max-width:600px){
    .header-image-only #blog-title #blog-title-inner {
    height: 150px;
    }
    }
    @media screen and (max-width:400px){
    .header-image-only #blog-title #blog-title-inner {
    height: 100px;
    }
    }
    細かいpx数などはご自身で調整してみて下さい。
    〜引用終わり〜
    僕の持っているヘッダー画像は700*300pxというサイズのものなのですが、その場合は高さをどのように調整すればいいのでしょうか。
    どうもイメージしている最適な表示にならないので、恐れ入りますがご教示頂きたく、よろしくお願い致します。

  • hisamatsuaya より:

    初めまして!
    とってもかっこいいので、一目惚れで、Brooklynを今日から使用させていただいてます。
    シェアボタンのカスタマイズについて、質問があります。
    プレビューでは出てくるのですが、いくら保存しても、実際のページにボタンが出てきません。デフォルトのも全て解除しています。
    proにしてないからなのでしょうか?

  • shiromatakumi より:

    バンブルビー通信 (id:bbb_network)さん
    700×300の画像で試してみたのですが、このサイズだとどうしても画面サイズによっては中央からズレて表示されてしまうようです。
    これははてなの仕様上そのようになっているみたいです。
    画像を700×200だと綺麗に中央に配置されるようです。

  • shiromatakumi より:

    久松あや (id:hisamatsuaya)さん
    今ブログを見たところ、ちゃんと表示されているようでしたが、いかがでしょうか??

  • gamiura より:

    はじめましてこちらのテーマを利用させていただいております。
    シロマティさんのブログ「NO TITLE」のように、左右の余白を多くとって記事スペースの幅を少し短くしたいのですがやり方を教えていただけないでしょうか。
    よろしくお願いします。

  • hisamatsuaya より:

    シロマティ (id:shiromatakumi)さん
    早速のご返答ありがとうございます。
    私はMAC を使用しているのですが、
    それが原因かわかりませんが、
    もしかしたら、私のPCからは見られないだけなのかもしれませんね。
    何回見ても、何も表示されないんです。
    なんでだろう。
    どうもありがとうございました!

  • shiromatakumi より:

    久松あや (id:hisamatsuaya)さん
    おそらく、TOPページを見ているからだと思います。記事ページに行けば表示されると思います。

  • hisamatsuaya より:

    シロマティ (id:shiromatakumi)さん
    すごいです!
    その通りでした〜!!
    ご丁寧に本当にありがとうございます!
    また何かあったらよろしくお願いいたします!

  • bbb_network より:

    シロマティ (id:shiromatakumi)さん
    サイズをご教示いただき、ありがとうございました!スマホでも無事に表示されるようになりました。
    また宜しくお願いします。

  • shiromatakumi より:

    id:gamiuraさん
    返事がおそくなって申し訳ありません。以下のコードで横幅が調整できます。
    #container #content {
    width: 1100px;
    }
    #main {
    width: 760px;
    }
    @media (max-width: 919px) {
    #wrapper {
    width: 100%;
    float:none;
    }
    #main {
    width: 100%;
    }
    #box2 {
    width: 100%;
    }
    }
    これを「デザイン」→「カスタマイズ」→「デザインCSS」に入れてpxの値はご自身で調整してみて下さい。
    #mainが記事内の横幅です。これの値を減らすと狭くなります。減らした分は、上の#contentからも引いて下さい。
    @media以降のコードはスマホ、タブレット対策なのでそのまま貼り付けてください。

  • gamiura より:

    シロマティ (id:shiromatakumi)さんありがとうございます。
    何度試してみてもうまいこといかなかったのが、ドンピシャに決まりました!感謝です。

  • shiromatakumi より:

    id:gamiuraさん
    すいません、ちょっとだけ微調整します。
    今貼っているコードを↓に貼り換えて下さい。こっちの方がタブレットでも綺麗に表示されると思います。
    /*ブログの横幅*/
    #container #content {
    width: 1040px;
    }
    #main {
    width: 700px;
    }
    @media (max-width: 919px) {
    #container #content {
    width: 93.75%;
    }
    #main {
    width: 100%;
    }
    #box2 {
    width: 100%;
    }
    }
    宜しくお願いします。

  • gamiura より:

    シロマティ (id:shiromatakumi)さんタブレットの表示までチェックしていただいてありがとうございます。早速修正しました。また何かあったら宜しくお願いします。

  • hisamatsuaya より:

    シロマティ (id:shiromatakumi)さん
    いつもお世話になってます。
    またのご相談なんですが、
    topページの時は現れないのですが、
    記事ページに行くと、
    タイトル
    カテゴリー の後に、

    と表示されてしまいます。
    全記事そうなってしまいます。
    解決方法をお時間のある時にお教えいただけると嬉しいです。よろしくお願い致します。

  • shiromatakumi より:

    久松あや (id:hisamatsuaya)さん
    デザイン→記事→記事上に < が入っちゃってるのだと思います!

  • hisamatsuaya より:

    シロマティ (id:shiromatakumi)さん
    その通りでした。(お恥ずかしい。。)
    いつもありがとうございます!

  • namaketiger より:

    シロマティさん、はじめまして。おかげさまでステキなデザインにできて満足しております。
    iphoneやandroidで私のページを見てみたところ、クリックしてもグローバルメニューが表示されないという現象が変わりません。
    これはどうしたら解決できますでしょうか。
    宜しくお願いします。

  • shiromatakumi より:

    なまけタイガー (id:namaketiger)さん
    記事上のコードに23~50の数字が入っちゃってるのが原因かと思います。
    ご確認ください。

  • shiromatakumi より:

    なまけタイガー (id:namaketiger)さん
    記事上ではなく、ヘッダーでした。

  • hyo-ta より:

    度々恐れ入ります。質問させて頂きます。
    ブログのタイトルを中央に固定しようとした所、ブログの説明文がどうしても左に固定されていて動きません。
    以下のコードでは不十分なのでしょうか?
    #blog-title {
    text-align: center;
    }
    #blog-description {text-align: center;
    }

  • shiromatakumi より:

    氷太 (id:hyo-ta)さん
    #blog-title {
    text-align: center;
    }
    ##blog-description {
    max-width: 100%;
    }
    このコードで大丈夫だと思います。ご確認ください。

  • shiromatakumi より:

    氷太 (id:hyo-ta)さん
    訂正します。
    #blog-title {
    text-align: center;
    }
    #blog-description {
    max-width: 100%;
    }

  • namaketiger より:

    シロマティさん、ありがとうございました。
    数字は入っていてはいけなかったのですね(^^;)

  • kyu_com より:

    ブログ始めてから2ヶ月間シロマティさんのテーマを使わせて頂いてます。
    本日の記事でシロマティさんのココのブログリンクを勝手に貼らせて頂きました。
    もし駄目なようでしたら即刻削除しますのでお知らせください。
    一応本日の21時頃にアップする予定です。
    お知らせが遅くなって申し訳御座いません。

  • shiromatakumi より:

    キュウ (id:kyu_com)さん
    お知らせいただきありがとうございます。
    最近仕事が忙しいので、こちらの質問コーナーを一旦ストップしようかと思っています。
    現在は質問の受付を停止している旨を記載していただけないでしょうか?
    お手数ですが宜しくお願いします。

  • shiromatakumi より:

    最近ちょっと忙しいので、こちらの質問の受付は一時的に停止させていただきます。
    当記事コメント欄、
    及び下記コメント欄のQ&Aを参考にしてください。
    http://shiromatakumi.hatenablog.com/entry/2016/02/04/171538

  • takkun241109 より:

    初めまして。このかっこいいテーマに惚れ込んで使おうとしている者です。
    初心者丸出しで申し訳ないのですが、このグローバルメニューをプルダウンして小メニューが表示されるようにすることはできますか?

  • reilst より:

    初めまして。
    またいつか質問の受付があるかもしれないと信じて、質問をおいておこうと思います。
    2点質問がございます。
    ①現在、シロマティさんのブログでグローバルナビにカーソルを合わせると赤いラインが下からホバーされますが、こちらのカスタマイズ方法をご教授願えないでしょうか?
    ②グローバルナビのバーのサイズを太くしたいのですが、こちら可能でしょうか?
    コメント欄にて確認した所、上記質問が見当たりませんでしたので、質問させていただきました。よろしくお願いいたします。

  • コメントする

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

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