はてなブログテーマCappuccinoのQ&Aを作成しました

どうも！フジグチです！

当サイト製作のテーマCappuccinoのQ&Aを作成しました。

実際にコメント頂いたことや、私が思いつく疑問に思いそうな部分を挙げてみたので、カスタマイズする際や何かおかしい？と困った時にお役立て下さい。

はてなブログテーマCappuccinoのQ&A

全体
タイトル関連
- タイトル画像を調整したい
- タイトルの文字サイズを変えたい
ヘッダー関連
- グローバルナビゲーションを設置したい
- おすすめ記事のアスペクト比を変えたい
記事上関連
記事内関連
- 装飾が重なる
- 目次のマーカーを変えたい
サイドバー関連
- プロフィールのカスタマイズをしたい
- タブレット表示（768px~991px）が崩れる
フッタ関連
- トップへ戻るボタン
あとがき

全体

テーマのカラーを変えたい

カラーの変更は詳細を書いた記事があるので、そちらをご覧下さい。

CSS関数を使っているので、５行程度のコードでブログ全体のカラーを変えることが出来ます。

コピペで使えるサンプルコードも載せているのでご利用ください。

テーマのカラー変更が反映されない

「コードを正しく入れたのに反映されない」という場合はブラウザの確認をしてください。Internet Explorer（以下IE）を使っていませんか？

IEはCSS関数に非対応なので、カラーの変更が反映されません。

IEは、セキュリティ上も使用は非推奨になっており、はてなブログでの使用を推奨するWebブラウザでもIEは除外されています。

また、IEを含めると出来ることが限られてしまい、作業量もかなり増えます。

Cappuccinoをリリースした当初はIEは完全に切り捨てるつもりだったので、正常に表示することすらできませんでした。

しかし、リリース後に良心の呵責に苛まれIEのためだけにCSSを追加し、カラーの変更は反映されないが「正常に表示」だけはできるように修正しています。

シェアボタンを設置したい

オリジナルのCSSをテーマ内に組み込んでいるので、HTMLコードをコピペするだけで使用することが出来ます。記事を参考にして下さい。

日付で使用しているフォントを使いたい

テーマ内にGoogle Fontsの【Fredericka the Great】をインポートしてあるので、使用したい箇所にfont-family: 'Fredericka the Great', cursive;と指定することで半角英数字に限り使用することが出来ます。

例としてサイドバーのタイトル部分に使用したい場合は、以下のようになります。

.hatena-module-title {
    font-family: 'Fredericka the Great', cursive;
    font-weight: normal; 
    font-style: normal;/* 好みで斜体をキャンセル */
}

サイドバーのタイトルには太字（bold）の指定がされていますが、このフォントは太字で使うとかすれ具合がなくなってしまうので、font-weight: normalとしています。

また、テーマで斜体（italic）の指定がされているので、斜体を戻す方法も合わせて書いておきましたが、そのままで良ければこの行は不要です。

「年」を表示したい

デザインの都合上「年」を非表示にしています。記事が公開された年を知りたいという方も多くいらっしゃると思うので、「年」を表示するコードも用意しました。

分かりやすく「YEAR」をつけたデザインにしていますが、不要であればコメントアウトしている /*** YEARという文字の表示 ***/ から下のコードを削除してください。

また、画面幅が狭くなると「YEAR」の文字がアイキャッチに多く重なってしまうため、画面幅600px以下では「YEAR」の文字のみ非表示にするようにしています。

特に気にならない方は、このコードは不要です。

また、order: 3;を order: 1; に変更すると「年」の表示位置を一番左に変更することが出来ます。

/*** Cappuccino 年を表示する ***/
.page-index .archive-date .date-year, .entry-date .date-year, .page-archive .date-year {
    order: 3;/* １に変更すると年が一番左に表示されます */
    display: block;
    padding: 0 6px;
    margin: 0 6px 0 0;
    border: solid 1px #b7b7b7;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 1px;
    display: flex;
    flex-direction: column;
    text-align: center;
}
/*** YEARという文字の表示 ***/
.page-index .archive-date .date-year::before, .entry-date .date-year::before, .page-archive .date-year::before {
    content: "YEAR";
    font-size: 10px;
    border-bottom: solid 1px #b7afaf;
}
/*** アイキャッチが隠れるためYEARという文字を
記事一覧表示の画面幅600px以下では表示しない ***/
@media (max-width: 600px) {
.page-archive .date-year::before {
    display: none;
}  
}

ブレイクポイント

カスタマイズが比較的得意な方向けです。

CSSの切り替わるブレイクポイントは～768px、992pxとしています。カスタマイズする際は以下のように指定すると、テーマのCSSのブレイクポイントと合わせることが出来るため、表示崩れが少なくなると思います。

@media (max-width: 767px) { ～スマホ表示のデザイン～ }

@media (min-width: 768px) { ～タブレット表示のデザイン～ }

@media (min-width: 992px) { ～PC表示のデザイン～ }

インフィード広告が表示されない

インフィード広告を使用していないため、お答えすることが出来ません。

タイトル関連

タイトル画像を調整したい

テーマの乗換え時に、タイトル画像の調整が必要なこともあるかと思います。

調整方法は当サイトでも記事にしているのでこちらをご覧下さい。

タイトルの文字サイズを変えたい

ブレイクポイント毎に文字サイズを変えているので三箇所変更が必要です。

ウィンドウサイズを変えながら確認すると、簡易的に表示を確かめることが出来ます。

タイトルの文字サイズを変えたい場合は以下のコードの～remの数字を増減することで変更することが出来ます。

/***スマホ表示***/
@media (max-width: 767px) {
    #title {
        font-size: 2rem;
    }
}
/***タブレット表示***/
@media (min-width: 768px) {
    #title {
        font-size: 2.5rem;
    }
}
/***PC表示***/
@media (min-width: 992px) {
    #title {
        font-size: 3rem;
    }
}

ヘッダー関連

グローバルナビゲーションを設置したい

オリジナルのCSSをテーマ内に組み込んでいます。設置方法はデモサイト内の記事をご覧下さい。

グローバルナビゲーションの設置方法 - Cappuccino

記事上関連

記事タイトルの装飾を消したい

Cappuccino記事タイトル装飾部分

記事タイトルの装飾を消すコードは以下のようになります。

記事一覧ページタイトル装飾

/***記事一覧のタイトル装飾を消す***/
.page-archive .entry-title::before {
    content: none;
}

記事ページタイトル装飾

/***記事タイトル装飾を消す***/
.entry-title::before {
    content: none;
}

記事一覧ページタイトル装飾、記事ページタイトル装飾まとめて消す

/***記事一覧のタイトル装飾、記事タイトル装飾をまとめて消す***/
.page-archive .entry-title::before, .entry-title::before  {
    content: none;
}

この装飾部分はCappuccinoのアイデンティティのようなものになっているので、消さないほうがいいかも？

なぜか記事一覧のタイトルと記事ページのタイトルで長さを変える、という謎のこだわりを見せています…。（こだわりの強い男）

パンくずリストを表示したい

パンくずリストの最後のタイトルは、個人的に記事タイトルと重複するのが気になるためCSSで非表示にしています。

表示したい場合は以下のコードを入れてください。

.breadcrumb-child:last-of-type {
    display: block;/* パンくずリストを表示 */
}

更新日の表示が崩れる

妻のサイトでもCappuccinoを使用して更新日を表示するカスタマイズをしていますが、表示崩れは確認できませんでしたので、全ての方に当てはまる症状ではなさそうです。

そもそも更新日の表示のカスタマイズを、共通のコードで使用していなければ修正する為のコードも用意することができないのですが、私が確認した更新日の表示崩れを修正したコードを載せておきます。

/***更新日修正***/
.lastmod .date-day {
    font-size: inherit;
}
.lastmod .date-year {
    display: inline-block;
}
.lastmod .date-month {
    font-size: inherit;
}

もし表示がおかしいと思った際は試してみてください。

記事内関連

装飾が重なる

カスタマイズする際に装飾が被り、意図せぬデザインになってしまう場合があります。リセットするCSSを用意しているのでこちらの記事を参考にして下さい。

※同じ記事内にNeumorphismのリセットCSSも書いてあるので、間違わないように注意してください。

目次のマーカーを変えたい

目次の見出し前にあるL字のマーカーを消したい場合、以下のコードで消すことが出来ます。

/***目次のL字のマーカーを消す***/
.table-of-contents ul li::before {
    content: none;
    border: none;
    position: static;
    width: inherit;
    height: inherit;
}