フジブロっ!

HTML、CSSを独学で楽しく学ぶガテン系のブログ

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

どうも!フジグチです!

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

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

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

全体

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

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

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

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

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

「コードを正しく入れたのに反映されない」という場合はブラウザの確認をしてください。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)の指定がされているので、斜体を戻す方法も合わせて書いておきましたが、そのままで良ければこの行は不要です。

ブレイクポイント

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

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

おすすめ記事のアスペクト比を変えたい

おすすめ記事の推奨アスペクト比(縦横比)は 16 : 9 ですが、アスペクト比を変えたい場合はCSSで変更できます。

.c_recommend-thumb {
    padding-top: 56.25%;/* おすすめ記事アスペクト比 */
}

56.25%の数値を増減させることでアスペクト比を変えられます。

具体的な数値の出し方は、デフォルトでは 16 : 9 の対比なので
9 ÷ 16 = 0.5625 = 56.25%となっています。

2 : 1 の対比なら 1 ÷ 2 = 0.5 = 50%

4 : 3 の対比なら 3 ÷ 4 = 0.75 = 75%

というように、使っている画像サイズの 高さ÷幅 という計算式で求めることが出来ます。

もし幅380×高さ500という縦長の画像を使う場合でも
高さ500 ÷ 幅380 = 1.3157... = 131.57%
という指定をすれば、アスペクト比を合わせることが出来ます。

記事上関連

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

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;
}

content: none;の部分のみで消すことは出来ますが、カスタマイズで疑似要素を使用するというパターンにも対応するため、色々と打ち消すよう指定をしています。

サイドバー関連

プロフィールのカスタマイズをしたい

デモサイトに設置しているプロフィールのカスタマイズ方法を公開したので、記事を参考にしてください。

タブレット表示(768px~991px)が崩れる

タブレットでの表示が崩れる原因のほとんどはHTMLモジュールの使用によるものだと思われます。

ご自身でHTMLモジュールを使用しカスタマイズした際に、タグの閉じ忘れがあるためにそれ以降のモジュールが子要素として扱われてしまうために、表示が崩れてしまいます。

テーマが正常に反映されている時のタブレットでの表示▽

f:id:utoutosara:20210222002049j:plain

終了タグの入れ忘れで、デザインが崩れを起こしているタブレットでの表示▽

タブレット表示時のデザイン崩れを再現

このような症状になる方は、実はタブレット表示だけでなく全てのデバイスでの表示が崩れています。

表示崩れの確認方法

Cappuccinoではモジュールが独立している状態で表示されるのが正常ですが、画像のように独立していない状態だと、HTMLモジュール内のタグの閉じ忘れを確認してください。

表示崩れに当てはまる方はHTMLモジュール内の最後に、</div>という終了タグを入れ忘れていますので入れてみてください。

カスタマイズする際に終了タグを入れ忘れると、サイトが正常に表示されないという重大なことも起こりえますので、関連記事も合わせてご覧下さい。

 関連記事
ブログが消えた!?落ち着いて原因と対処法を確認する
ブログが消えた!?落ち着いて原因と対処法を確認する
 関連記事
CSSが反映されない?そんな時に確認すべき6つのこと
CSSが反映されない?そんな時に確認すべき6つのこと

フッタ関連

トップへ戻るボタン

質問には挙がっていませんでしたが、Cappuccinoのデザインに合う「小洒落たデザイン」のTOPに戻るボタンのカスタマイズも公開していますので良かったらお使いください。

あとがき

質問の重複やテーマに関係ない質問の防止の為、この記事の公開をもって当サイトのコメント欄を承認制に変更いたします。

あまりにも個人的なカスタマイズの質問やおかしな言動などは、承認しない可能性もあるのでご了承ください。

ご覧になった方が記事内とコメント欄の往復になってしまわないように、この記事では回答のみを書いていきたいと思います。

お手数ですが、テーマの質問はテーマ紹介記事のコメント欄にて集めようと思いますのでそちらにお願いします。

質問を私のほうで選定し、回答をこの記事内にまとめていきます。

承認制にはなりますが、質問はこれ以降も受け付けていますので、お気軽に聞いてくださいね。

トップへ戻る