モーリーのメモ

アプリ開発等（プログラミング、CG作成）、興味を持ったことを実践してまとめるブログです。

モーリーのメモ

はてなブログにデザインテーマのBrooklynを適用＆カスタマイズ！

はてなカスタマイズ

＜今回やること！＞

  • はてなブログにデザインテーマの『Brooklyn』を適用します。
    『Brooklyn』はテーマストアで適用出来ます。＊"ストア"ですが無料です。
    f:id:mmorley:20180830164845p:plain
  • さらに、CSSを使って見た目をカスタマイズします。
　
　以前、私が使っていた公式テーマは、記事の幅が狭いことが気になっていました。
　Brooklynは記事の幅が広い上に、ブラウザの幅に合わせて記事の幅が変わります。
　また、スマホからでもPCと同じデザインでブログを表示させることが出来ます。
　
　CSS等を使ったカスタマイズでは、下記を始めとした各部の設定を行います。
  • タイトル画像の表示幅を変更します。
  • タイトル下のメニューバーを設置します。
  • 記事・サイドバーの見出しのデザインを変更します。
  • ブログのフォントの種類、文字サイズ、行間を変更します。
    等など・・・
　
　以降で、詳しいやり方を紹介します。

目次

使用環境

　今回使用した環境です。

テスト用のサブブログを作る

　未公開設定のサブブログがあれば、じっくりカスタマイズ出来ます。はてなブログは無料版は全部で3個、Pro版は全部で10個のブログを作成出来ます。

  1. 『ブログの管理画面』の左メニューの『ダッシュボード』をクリック
    f:id:mmorley:20170816223733p:plain
  2. マイブログの下側にある『新しいブログを作成』をクリック
    f:id:mmorley:20170816223931p:plain
  3. 『ブログのURLを決めてください』に、URLを入力
    一度使用したURLは、ブログを削除しても使用できなくなります。
  4. 『ブログを公開したい範囲を選んでください』で『自分のみ』を選択
  5. 『クリックして ✔ を付けてください』にチェック
  6. 『ブログを作成』ボタンをクリック
    以上でブログが作成されます。
　既存のブログの『記事の管理』から、テスト用のブログの『記事を書く』に適当な記事をコピーする等して、カスタマイズ内容をチェックするための記事を作成します。（まるごとエクスポート→インポートする事も出来ますが、記事が多いと時間がかかります。）

カスタマイズ用のコードの場所

　今回のカスタマイズでは『デザインCSS』、『ヘッダー - タイトル下』、『記事 - 記事下』のコードを編集します。それぞれのコードは下記の場所にあります。

『デザインCSS』の場所

  1. 『ブログの管理画面』の左メニューの『デザイン』をクリック
    f:id:mmorley:20170816164358p:plain:w150
  2. 『カスタマイズ（スパナ）』のアイコンをクリック
  3. 『デザインCSS』をクリック
  4. 『デザインCSS』の入力欄をクリック
    f:id:mmorley:20170816174619p:plain:w200

『ヘッダー - タイトル下』の場所

  1. 『ブログの管理画面』の左メニューの『デザイン』をクリック
  2. 『カスタマイズ（スパナ）』のアイコンをクリック
  3. 『ヘッダ』をクリック
  4. 『タイトル下』の入力欄をクリック
    f:id:mmorley:20170901171809p:plain:w200

『記事 - 記事下』の場所

  1. 『ブログの管理画面』の左メニューの『デザイン』をクリック
  2. 『カスタマイズ（スパナ）』のアイコンをクリック
  3. 『記事』をクリック
    f:id:mmorley:20170818211129p:plain:w200
  4. 『記事下』の入力欄をクリック
    f:id:mmorley:20170816221907p:plain:w200

デザインテーマのBrooklynをインストールする

　注意：テーマをインストールすると、現在のデザインCSS、背景画像は破棄されます。

  1. 『ブログの管理画面』の左メニューの『デザイン』をクリック
  2. 『デザインテーマ』の一番下までスクロールし、『テーマ ストアでテーマを探す』をクリック
    f:id:mmorley:20170810134406p:plain
  3. 『人気順』をクリック
  4. 『Brooklyn』を探してクリック
    順位は変動しますが、上位にいるはずです。
    f:id:mmorley:20170810135048p:plain
  5. 『プレビューしてインストール』をクリック
    f:id:mmorley:20170818211859p:plain
  6. 『適用するブログを選択』で適用したいブログ名をクリック
  7. 画面左上の『このテーマをインストール』をクリック

レスポンシブデザインを有効にする

レスポンシブデザインとは？

　レスポンシブデザインを有効にすると、スマートフォンもPCと同じデザイン設定で表示されます。有効にするには、使用中のテーマがレスポンシブデザインに対応している必要があります。Blooklynはレスポンシブデザインに対応しています。
　↓スマートフォンからの見え方の違いです。

    レスポンシブデザイン：無効レスポンシブデザイン：有効
    f:id:mmorley:20170810155920p:plainf:id:mmorley:20170810155931p:plain

レスポンシブデザインを有効にする

  1. 『ブログの管理画面』の左メニューの『デザイン』をクリック
  2. 『スマートフォン』のアイコンをクリック
  3. 『詳細設定』をクリック
  4. 『レスポンシブデザイン』にチェックを入れる
    f:id:mmorley:20170810163325p:plain

タイトル下にメニューバーを設置する

　タイトル下のメニューバーは、グローバルメニュー（または、グローバルナビゲーション）と呼ばれるものです。オススメのページ等、主要なページへのリンクとなっています。
　今回設置するグローバルメニューは、メインメニューにマウスオーバーすると、ドロップダウンでサブメニューが現れるタイプです。

    f:id:mmorley:20170811215752p:plain

カスタマイズ用のコード

　カスタマイズ用のコードは、次の場所に貼り付けます。

    『デザイン』-『カスタマイズ』-『ヘッダ』-『タイトル下』
　コード内のコメントや『補足』の章を参考にして編集して下さい。

    <!-- グローバルメニュー用のリンク -->
<div id="global-menu">
    <ul class="global-menu-list sub-list">
        <li><a href="リンク先のURL①">メインメニュー名①</a>
        </li>
        <li><a href="リンク先のURL②">メインメニュー名②</a>
            <ul class="sub-item">
                <li><a href="リンク先のURL②ー１">サブメニュー名②ー１</a></li>
            </ul>
        </li>
        <li><a href="リンク先のURL③">メインメニュー名③</a>
            <ul class="sub-item">
                <li><a href="リンク先のURL③ー１">サブメニュー名③ー１</a></li>
                <li><a href="リンク先のURL③ー２">サブメニュー名③ー２</a></li>
            </ul>
        </li>
        <li><a href="リンク先のURL④">メインメニュー名④</a>
            <ul class="sub-item">
                <li><a href="リンク先のURL④ー１">サブメニュー名④ー１</a></li>
                <li><a href="リンク先のURL④ー２">サブメニュー名④ー２</a></li>
                <li><a href="リンク先のURL④ー３">サブメニュー名④ー３</a></li>          
            </ul>
        </li>
        <li><a href="リンク先のURL⑤">メインメニュー名⑤</a>
            <ul class="sub-item">
                <li><a href="リンク先のURL⑤ー１">サブメニュー名⑤ー１</a></li>
                <li><a href="リンク先のURL⑤ー２">サブメニュー名⑤ー２</a></li>
                <li><a href="リンク先のURL⑤ー３">サブメニュー名⑤ー３</a></li>
                <li><a href="リンク先のURL⑤ー４">サブメニュー名⑤ー４</a></li>    
            </ul>
        </li>
    </ul>
</div>

<!-- グローバルメニューのスタイル-->
<style type="text/css">
#global-menu { /* メニュー全体 */
    background-color: #111111; /* ⑥両サイドの背景色 */
    border-bottom: 2px solid #111111;　/* ⑦下部のラインの太さと色 */
}
.global-menu-list li a { /* 通常時 */
    background-color: #111111; /* ⑧メニューの背景色 */
    color: #FFFFFF; /* ⑨メニューの文字色 */
    font-size: 16px; /* ⑩メニューの文字のサイズ 最小値:10px */
    padding: 8px; /* ⑪メニューバーの文字の高さ 22+設定値×2 px */
}
.global-menu-list li a:hover{ /* マウスオーバー時 */
    background-color: #DDDDDD; /* ⑫メニューの背景色 */
    color: #111111; /* ⑬メニューの文字色 */
}
</style>

補足

　上記のコードは、２つのブロックから成っています。

  • グローバルメニュー用のリンク：メニューのリンク構造を作成
  • グローバルメニューのスタイル：各部の色やサイズを設定

グローバルメニューの設置手順

　グローバルメニューを設置する手順です。

  1. 『グローバルメニュー用のリンク』のメインメニューとサブメニューの数を変更
    　階層に注意して『<i>〜</li>』を切り貼りします。
    　メインメニューは５つまでです。それ以上はレイアウトが崩れます。
    　サブメニューは、表示の許す限り自由に増やせます。
  2. メイン・サブの『メニュー名』と『リンク先のURL』をそれぞれ置き換える
  3. 『グローバルメニューのスタイル』の⑥〜⑬を変更

グローバルメニューのスタイル設定

  • ⑥両サイドの背景色
    ↓の赤の部分を変更します。
    f:id:mmorley:20170815110204p:plain
  • ⑦下部のラインの太さと色
    ↓の赤の部分を変更します。
    f:id:mmorley:20170815111912p:plain
  • ⑧メニューの背景色
    ↓の赤の部分を変更します。
    f:id:mmorley:20170815112107p:plain
  • ⑨メニューの文字色
    ↓の赤の部分を変更します。
    f:id:mmorley:20170815112151p:plain
  • ⑩メニューの文字のサイズ 最小値:10px
    文字のサイズの最小値は10pxです。（0px→非表示、1〜9px→10pxと同じ）
  • ⑪メニューバーの高さ
    メニューバーの高さは『22+設定値×2 px』となります。
    例）『padding: 8px;』のとき、22+8×2=38px→メニューバーの高さ=38px
  • ⑫メニューの背景色（マウスオーバー時）
    ↓の赤の部分を変更します。
    f:id:mmorley:20170815232800p:plain
  • ⑬メニューの文字色（マウスオーバー時）
    ↓の赤の部分の色を変更します。
    f:id:mmorley:20170815232817p:plain

ブログのタイトル画像

　ブログのタイトル（ヘッダー部分）の画像の表示の仕方を変更します。
　画像のみで、文字は使用しない設定です。

ブラウザの幅に合わせて表示する

デフォルト

　ブラウザの幅によって、タイトル画像の周囲に余白が出来たり途切れたりします。

  • ブラウザ幅＞画像幅の時、周囲に余白が出来る
    f:id:mmorley:20170810222623p:plain
  • ブラウザ幅＜画像幅の時、画像が途切れる
    f:id:mmorley:20170810222728p:plain

カスタマイズ後

　ブラウザの幅に合わせて、タイトル画像の縮尺が変わります。

  • ブラウザ幅＞画像幅の時、拡大される
    f:id:mmorley:20170811231250p:plain
  • ブラウザ幅＜画像幅の時、縮小される
    f:id:mmorley:20170811231238p:plain

タイトル用の画像をアップし、アドレスを取得する

　このカスタマイズでは、デフォルトのタイトルは非表示にして、ヘッダーのタイトル下にタイトルを作り直します。
　まず、タイトル画像をアップロードして、画像のアドレスを取得します。

  1. 画面右上の『利用中のサービス』-『はてなフォトライフ』をクリック
    f:id:mmorley:20170811113539p:plain
  2. 『アップロード』をクリック
    f:id:mmorley:20170811114445p:plain
  3. 画面右の『オプション』を下記のように設定
    　アップロード時に画像サイズが変更されないようにオプションを設定します。
    • フォルダ：『Hatena Blog』を選択
    • 画像サイズ：画像の長辺（ここではタイトル画像の幅）を入力
    • 『オリジナルサイズの画像を保存』にチェック
      f:id:mmorley:20170811130451p:plain
  4. 画面左の『画像をアップロード』の『画像』の『ファイルを選択』をクリックして、タイトル画像のファイルを選択
  5. 『アップロード』をクリック
    f:id:mmorley:20170811131707p:plain
  6. 『フォルダを編集』画面の『このフォルダの写真を編集』で、アップロードした画像をクリック
  7. 『ブログに貼り付ける』をクリック
  8. HTMLタグの中の『src=』の後のURLをコピーして、テキストエディタ等に保持する
    　URLだけをドラッグしても、マウスの左ボタンを離すと全体が選択されます。
    　URLをドラッグした後、マウスの左ボタンを押したまま、キーボードの『Command + c』を押すとURLのみコピー出来ます。
    f:id:mmorley:20170811140252p:plain

カスタマイズ用のコード

　カスタマイズ用のコードは、次の場所に貼り付けます。

    『デザイン』-『カスタマイズ』-『ヘッダ』-『タイトル下』
　コード内のコメントや『補足』の章を参考にして、コードを編集して下さい。

    <!-- タイトル用の画像付きリンク -->
<h1 class="headernew"> 
    <!-- ①ブログのトップページのURL -->
    <a href="http://mmorley-test.hatenablog.com/"> 
        <!-- ②タイトル用画像のURLとブログタイトル -->
        <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/mmorley/20170810/20170810223633.png" alt="モーリーのメモ" width="100%">
    </a>
</h1>

<!-- タイトルのスタイル -->
<style type="text/css">
.header-image-wrapper {display: none;} /* 元のタイトルを非表示 */
#blog-title {display: none;} /* 元のタイトルを非表示 */
.headernew img {
    max-width:1120px; /* ③画像の幅 */
    margin: auto; /* ④画像の左右の余白を同じ幅にする */
    display: block; /* 画像の下の隙間をなくす */ 
}
.headernew a {
    display:block; /* 余白を塗りつぶすための設定 */
    background-color:#003cb5; /* ⑤余白の色 */
}
.headernew {
    margin:0px!important; /* 画像の上下の余白を削除 */
}
</style>

補足

ブラウザ幅＞画像幅の時の処理の選択

　ブラウザを広げた際に、画像を元の幅以上には拡大しないタイプと拡大するタイプを選択できます。

  • 拡大しないタイプの設定
    拡大しないタイプでは、ブラウザ幅＞画像幅の時に生じる余白を塗りつぶします。
    f:id:mmorley:20170811155821p:plain
    コード内の⑤により、画像の両端の色で余白を塗りつぶします。
    f:id:mmorley:20170811155921p:plain
  • 拡大するタイプの設定
    コード内の③、④の行と『.headernew a{ ~ }』の部分を削除すれば、元の幅以上に拡大します。
    f:id:mmorley:20170811155338p:plain

タイトル画像の設置手順

　拡大しないタイプの手順です。拡大するタイプは手順の3が異なります。

  1. コード内の『①ブログのトップページのURL 』を変更

    <a href="タイトルを付けるブログのトップページのURL">

  2. コード内の『②タイトル用画像のURLとブログタイトル』を変更

    <img src="タイトル用にアップロードした画像のURL" alt="ブログのタイトル" width="100%">

  3. コード内の『③画像の幅』を使用する画像の幅に変更
    拡大するタイプの場合は、③、④の行と『.headernew a{ ~ }』を削除して終了です。
  4. コード内の『⑤余白の色』を使用する画像の両端の色等に変更

サイドバーの見出し

　ブログの右側にあるサイドバーの見出しのデザインを変更します。

    f:id:mmorley:20170816141203p:plain

カスタマイズ用のコード

　カスタマイズ用のコードは、次の場所に貼り付けます。

    『デザイン』-『カスタマイズ』-『デザインCSS』
　コード内のコメントや『補足』の章を参考にして、コードを編集して下さい。

    /* サイドバーの見出し */ 
.hatena-module-title { /* 四角部分 */
    color: #111111; /* ①文字色 */
    font-size: 16px; /* ②文字サイズ */
    background: #FFFFFF; /* ③背景色 */
    border: 2px solid #111111; /* ④枠線:太さ 線種 色 */
}
.hatena-module-title a { /* (リンク有)の文字 */
    color: #111111;　 /* ⑤文字色 */
}
.hatena-module-title:before { /* 吹き出しの枠線 */
    /* display: none; /* ⑥非表示にする */
    border-top-color: #111111; /* ⑦枠線:色 */
}
.hatena-module-title:after { /* 吹き出しの背景 */
    /* display: none; /* ⑧非表示にする */
    border-color: transparent; /* 一度全体を透明にする */
    border-top-color: #FFFFFF; /* ⑨背景色 */
}

補足

  • 吹き出し部分をなくす
    ⑥と⑧の行の先頭の『/*』を削除すると吹き出し部分がなくなります。
    『/* display: none;』→『display: none;』
    f:id:mmorley:20170816113800p:plain
  • ①・⑤文字色
    ①は通常の見出しの文字色、⑤はリンク有りの見出し（『最新記事』等）の文字色です。
  • ②文字のサイズ
    通常・リンク有りの見出しの文字のサイズです。
  • ③背景色
    ↓の赤の部分を変更します。
    f:id:mmorley:20170816110353p:plain
  • ④枠線の太さ・線種・色
    ↓の赤の部分を変更します。
    f:id:mmorley:20170816113058p:plain
  • ⑦吹き出しの枠線の色
    ↓の赤の部分を変更します。
    f:id:mmorley:20170816134532p:plain
  • ⑧吹き出しの背景の色
    ↓の赤の部分を変更します。
    f:id:mmorley:20170816134802p:plain

見出し

　記事の見出しのデザインを変更します。

    f:id:mmorley:20170816140415p:plain

カスタマイズ用のコード

　カスタマイズ用のコードは、次の場所に貼り付けます。

    『デザイン』-『カスタマイズ』-『デザインCSS』
　コード内のコメントや『補足』の章を参考にして、コードを編集して下さい。

    /* 見出し1 */
.entry-content h3 { /* 四角部分 */
    color: #111111; /*  ①文字色 */
    font-size: 23px; /* ②文字サイズ */
    background: #EEEEEE; /* ③背景色 */
    border-left: 12px solid #111111; /* ④左側の線:太さ 線種 色 */
    border-bottom: 0px solid #111111; /* ⑤下側の線:太さ 線種 色 */
    padding: 7px 10px 5px 10px; /* ⑥文字と枠の間の余白 上右下左の順 */
}
.entry-content h3:before,
.entry-content h3:after { /* 吹き出しの背景 */
    /* display: none; /* ⑦非表示にする */
    border-color: transparent; /* 一度全体を透明にする */
    border-top-color: #EEEEEE; /* ⑧背景色 */
}

/* 見出し2 */
.entry-content h4 {
    color: #111111; /* ⑨文字色 */
    font-size: 21px; /* ⑩文字サイズ */
    background: #FFFFFF; /* ⑪背景色 */
    border-left: 6px solid #111111; /* ⑫左側の線:太さ 線種 色 */
    border-bottom: 2px solid #111111; /*　⑬下側の線:太さ 線種 色 */
    padding: 0px 10px 0px 10px; /* ⑭文字と枠の間の余白 上右下左の順 */
}

/* 見出し3 */
.entry-content h5 {
    color: #111111; /* ⑮文字色 */
    font-size: 19px; /* ⑯文字サイズ */
    background: #FFFFFF; /* ⑰背景色 */
    border-left: 4px solid #111111; /* ⑱左側の線:太さ 線種 色 */
    border-bottom: 0px solid #111111; /* ⑲下側の線:太さ 線種 色 */
    padding: 0px 6px 0px 6px; /* ⑳文字と枠の間の余白 上右下左の順 */
}

補足

  • 『見出し１』の吹き出し部分をなくす
    ⑦の行の先頭の『/*』を削除すると吹き出し部分がなくなります。
    『/* display: none;』→『display: none;』
    f:id:mmorley:20170816141227p:plain
  • ③『見出し１』の背景色
    ↓の赤の部分を変更します。
    f:id:mmorley:20170816160418p:plain
  • ④『見出し１』の左側の線の太さ・線種・色
    ↓の赤の部分を変更します。
    f:id:mmorley:20170816160837p:plain
  • ⑤『見出し１』の下側の線の色の太さ・線種・色
    デフォルトでは非表示（0px）です。
    ↓の赤の部分を変更します。（下図は、吹き出し無しの設定をしています。）
    f:id:mmorley:20170816161425p:plain
    （サイドバーの見出しにあるような吹き出し部分の枠線は設定出来ませんでした。）
  • ⑥『見出し１』の文字と枠の間の余白
    『padding: 7px 10px 5px 10px;』４つの値は順に上、右、下、左の余白の設定です。
  • ⑧『見出し１』の吹き出しの背景色
    ↓の赤の部分を変更します。
    f:id:mmorley:20170816163900p:plain
  • 『見出し２』の⑨〜⑭は、『見出し１』の①〜⑥と同様
    　『見出し２』は、吹き出しがありません。
  • 『見出し３』の⑮〜⑳は、『見出し１』の①〜⑥と同様
    　『見出し３』は、吹き出しがありません。

区切り線

カスタマイズ用のコード

　カスタマイズ用のコードは、次の場所に貼り付けます。

    『デザイン』-『カスタマイズ』-『デザインCSS』
　コード内のコメントや『補足』の章を参考にして、コードを編集して下さい。

    /* 記事タイトルと記事本文の間の区切り線 */
.entry-header {
    border-bottom: 1px solid #DDDDDD; /* ①区切り線:太さ 線種 色 */
}

/* 記事本文とサイドバーの間の区切り線 */
#main {
    border-right: 1px solid #DDDDDD; /* ②区切り線:太さ 線種 色 */
}

補足

  • ①記事タイトルと記事本文の間の区切り線の太さ・線種・色
    ↓の赤の部分を変更します。
    f:id:mmorley:20170817114638p:plain
  • 記事本文とサイドバーの間の区切り線の太さ・線種・色
    ↓の赤の部分を変更します。
    f:id:mmorley:20170817114723p:plain

フッターの色

　ページ最下部のフッターの色を変更します。

カスタマイズ用のコード

　カスタマイズ用のコードは、次の場所に貼り付けます。

    『デザイン』-『カスタマイズ』-『デザインCSS』
　コード内のコメントや『補足』の章を参考にして、コードを編集して下さい。

    /* フッダー(ページ最下部) */
#footer {
  background: #111111; /*  ①背景色 */
}

補足

  • ①フッダー(サイト最下部)の背景色を変更
    ↓の赤の部分を変更します。
    f:id:mmorley:20170817115722p:plain

記事の投稿年月日

　記事のタイトル上に表示される投稿年月日の表示を変更します。

    f:id:mmorley:20170818225015p:plain

カスタマイズ用のコード

　カスタマイズ用のコードは、次の場所に貼り付けます。

    『デザイン』-『カスタマイズ』-『デザインCSS』
　コード内のコメントや『補足』の章を参考にして、コードを編集して下さい。

    /* (記事タイトルの左上の)投稿年月日 */
.date a {
    color: #F0F0F0; /* ①文字色 */
    font-size: 14px; /* ②文字サイズ */
    padding: 3px 6px; /* ③文字と枠の間の余白 上下 左右の順 */
    background: #111111; /* ④背景色　*/
}

補足

  • ④背景色
    ↓の赤の部分を変更します。
    f:id:mmorley:20170818225310p:plain

読者になるボタン

　装飾された『読者になる』ボタンを設置します。

    読者になる

カスタマイズ用のコード

　カスタマイズ用のコードは、次の場所に貼り付けます。

    『デザイン』-『カスタマイズ』-『記事』-『記事下』
　コード内のコメントや『補足』の章を参考にして、コードを編集して下さい。
　赤と黒の２種類のボタンがあります。
  • 赤色の読者になるボタンのコード

    読者になる

    <!-- 読者になるボタン：赤 -->
<div class="reader-button color">
    <!-- 読者登録用のリンク：http://blog.hatena.ne.jp/（はてなブログID）/（ブログのURL）/subscribe -->
    <a href="http://blog.hatena.ne.jp/mmorley/mmorley.hatenablog.com/subscribe">読者になる</a>
</div>

  • 黒色の読者になるボタンのコード

    読者になる

    <!-- 読者になるボタン：黒 -->
<div class="reader-button">
    <!-- 読者登録用のリンク：http://blog.hatena.ne.jp/（はてなブログID）/（ブログのURL）/subscribe -->
    <a href="http://blog.hatena.ne.jp/mmorley/mmorley.hatenablog.com/subscribe">読者になる</a>
</div>

補足

　コード内のURL（<a href="〜">の〜の部分）を自分の読者登録用のURLに変更します。
　URLは次のような構成です。

    http://blog.hatena.ne.jp/（はてなブログID）/（ブログのURL）/subscribe

　URLは下記のように取得できます。
  1. 『ブログの管理画面へ』をクリック
    f:id:mmorley:20170822225256p:plain
    『ブログの概要』のページに移動します。
    f:id:mmorley:20170822230230p:plain
  2. 『ブログの概要』のページのURLの末尾に『subscribe』を付ける
    これが、読者登録用のURLです。
　『読者になる』ボタンを実際に配置した後、正常に動作するかテストして下さい。

フォントの種類

　ブログ全体のフォントの種類を変更します。

カスタマイズ用のコード

　カスタマイズ用のコードは、次の場所に貼り付けます。

    『デザイン』-『カスタマイズ』-『デザインCSS』
　コード内のコメントや『補足』の章を参考にして、コードを編集して下さい。
  • 角ゴシック優先

    body{ 
    font-family:  "Helvetica Neue", Helvetica, Arial, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, "MS PGothic", sans-serif; /* フォントの種類 */
}

  • 丸ゴシック優先

    body{ 
    font-family:  "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN", "HG丸ｺﾞｼｯｸM-PRO", "Helvetica Neue", "Helvetica", "Arial", sans-serif; /* フォントの種類 */
}

補足

　ブログを見に来た人の環境（OS、端末、フォントのインストール状況等）によっては、こちらが指定したフォントが表示出来ない場合があります。
　なので、優先的に表示して欲しいフォントを順番に列挙します。
　↓は表示の一例です。

    Mac Windows
    角ゴシック優先 f:id:mmorley:20170828163932p:plain
    英数:Helvetica Neue
    日本語:Hiragino Kaku Gothic Pro    		 f:id:mmorley:20170828163911p:plain
    英数:Arial
    日本語:Meiryo
    丸ゴシック優先 f:id:mmorley:20170828163851p:plain
    Hiragino Maru Gothic ProN    		 f:id:mmorley:20170828163822p:plain
    HG丸ｺﾞｼｯｸM-PRO

各部の文字サイズ・行間の高さ・余白等

　文字の大きさや行間を変更するためのコードです。

カスタマイズ用のコード

　カスタマイズ用のコードは、次の場所に貼り付けます。

    『デザイン』-『カスタマイズ』-『デザインCSS』
　コード内のコメントや『補足』の章を参考にして、コードを編集して下さい。

    /* 記事タイトル */
.entry-title {
    font-size: 24px; /* 文字サイズ */
    line-height: 24px; /* 行の高さ */
}

/* 本文の文字 */
.entry-content {
    color: #000000; /* 文字色 */
    font-size: 16px; /* 文字サイズ */
    line-height: 34px; /* 行の高さ */
}

/* 段落 */
.entry-content p {
    margin: 4px 0px 4px 0px; /* 周囲の余白 上右下左の順 */
}

/* 番号付きリスト */
.entry-content ol {
    margin: 12px 0px 12px 0px; /* 周囲の余白 上右下左の順 */
}

/* 番号なしリスト */
.entry-content ul {
    margin: 12px 0px 12px 0px; /* 周囲の余白 上右下左の順 */
}

/* 目次 */
.table-of-contents {
    font-size: 15px; /* 文字サイズ */
    line-height: 33px; /* 行の高さ */
}

/* テーブル */
.entry-content table {
    font-size: 16px; /* 文字サイズ */
    line-height: 35px; /* 行の高さ */
    margin: 16px 0px 16px 0px; /* 周囲の余白 上右下左の順 */
}

補足

　コード内の文字サイズ、行の高さ、余白等の設定値は、Brooklynのデフォルトに近い値です。

ソースコードの配色

　ブログ内でソースコードを表示する際に使用する『スーパーpre記法（シンタックス・ハイライト）』の配色を変更するためのコードです。

カスタマイズ用のコード

　カスタマイズ用のコードは、次の場所に貼り付けます。

    『デザイン』-『カスタマイズ』-『デザインCSS』
　コード内のコメントや『補足』の章を参考にして、コードを編集して下さい。

    /* ソースコード */ 
.entry-content pre{
    background-color: #3D3D3D; /* 背景色 */
    color: #CCCCCC; /* ①文字色 */
    font-size: 12px; /* 文字サイズ */
    line-height: 18px; /* 行の高さ */
    padding: 12px 12px; /* 文字と枠の間の余白 上下 左右の順 */
}
.synSpecial { color: #42A5F5 }    /* ②特殊文字・記号 */
.synType { color: #FFAB91 }       /* ③型 */
.synComment { color: #87CDDE }     /* ④コメント */
.synPreProc { color: #81C784 }    /* ⑤プリプロセッサ */
.synIdentifier { color: #CC99CC } /* ⑥識別子 */
.synConstant { color: #C5E1A5 }   /* ⑦定数 */
.synStatement { color: #F48FB1 }  /* ⑧ステートメント */

補足

　①〜⑧の文字の種類とその例です。

    種類例
    ①文字色変数名等の標準の文字
    ②特殊文字・記号JavaScriptとC言語の \n 等
    ③型C言語の int、char 等
    ④コメントコメント文
    ⑤プリプロセッサC言語の #include、#define 等
    ⑥識別子JavaScriptの var、function 等
    ⑦定数定数等
    ⑧ステートメントJavaScriptとC言語の if、for 等
　JavaScriptとC言語の表示例です。
  • JavaScript

    var myFunc = function(){
    var a = 1; // コメント
    if(a > 0){
        console.log("Hello!\n");
    }
    return;
};

  • C言語

    #include<stdio.h>
int main(int argc, char *argv[]){
    int a = 1; // コメント
    if(argc > 0){
        printf("Hello!\n");
    }
    return 0;
}

Gist

　外部サイトGitHubのGistの表示を変更します。

カスタマイズ用のコード

　カスタマイズ用のコードは、次の場所に貼り付けます。

    『デザイン』-『カスタマイズ』-『デザインCSS』
　コード内のコメントや『補足』の章を参考にして、コードを編集して下さい。

    /* Gist表示 */
.gist-data {
    max-height: 240px; /* ①最大高さ */
    /* 領域をはみ出た場合の処理, autoで通常はスクロールバーが出現 */
    overflow: auto;
}

補足

あとがき

　私がこのブログにがBrooklynをインストールして、カスタマイズをした際に調べた内容をまとめました。

おすすめの記事