- 記事や写真が映える白を基調としたテンプレート「ホワイトプレス」
- 記事の上部に大きな画像を配置してアクセントにすることができる
- カスタマイズの例を紹介している(CSS・HTML編集はサポート対応の範囲外)
「ホワイトプレス」は新聞や雑誌の一ページのような、 記事や写真が映える白を基調としたテンプレートです。
(例)
主な特徴
ページ上部に大きな画像を配置してアクセントにすることができます。
カスタマイズについて
ブログデザインのCSS・HTML編集は、 サポートガイドライン記載の通り
サポート対応の範囲外です。 お客様ご自身にてご確認・操作をお願いします。
また、ブログデザインのCSS・HTML編集はPC版のみ可能であり、
スマートフォン版や携帯版は編集できません。
デザイン保存機能を利用して、編集前に保存してください。
また、ブログ崩れが発生しても弊社では対応いたしかねますので、予めご了承ください。
・ブログデザインのカスタマイズについてのヘルプページはこちら
・カスタマイズしたデザインの保存についてのヘルプページはこちら
項目一覧
(確認したい項目をクリックしてください)
1.h1~h3で指定した見出しの下線の太さを変える
サンプルイメージ
※手順※
1.ブログ管理画面にログイン
2.「ブログ設定」をクリック
3.デザイン/ブログパーツ設定の「PC」をクリック
4.「カスタマイズ」タブをクリック
5.「CSS」タブをクリック
6.下記変更後①、②のようにタグを書き換える
7.「保存する」をクリック
【▼変更前①】
- CSS
.article-body-inner h1,
.article-body-inner h2,
.article-body-inner h3 {
border-bottom:3px solid #7f7f7f;
}
【▼変更後②】
- 記述例
.article-body-inner h1,
.article-body-inner h2,
.article-body-inner h3 {
border-bottom:1px solid #7f7f7f;
}
※border-bottom:1pxの「1」は適宜数値を変更してください。(数値が大きくなるほど線が太くなります)
2.h3で指定した見出しの下線のみ太さを変える
サンプルイメージ
「1.h1~h3で指定した見出しの下線の太さを変える」の手順と同じです。 変更点は以下になります。
【▼変更前①】
- CSS
.article-body-inner h1,
.article-body-inner h2,
.article-body-inner h3 {
border-bottom:3px solid #7f7f7f;
}
【▼変更後②】
- 記述例
.article-body-inner h1,
.article-body-inner h2 {
border-bottom:3px solid #7f7f7f;
}
.article-body-inner h3 {
border-bottom:1px solid #7f7f7f;
}
3.h1~h3で指定した見出し文字の大きさを変える
サンプルイメージ
「1.h1~h3で指定した見出しの下線の太さを変える」の手順と同じです。 変更点は以下になります。
【▼変更前①】
- CSS
.article-body-inner h1,
.article-body-inner h2,
.article-body-inner h3 {
border-bottom:3px solid #7f7f7f;
}
※変更前のh1~h3で指定した見出し文字の大きさは20pxで指定されています。
【▼変更後②】
- 記述例
.article-body-inner h1,
.article-body-inner h2,
.article-body-inner h3 {
border-bottom:3px solid #7f7f7f;
font-size: 16px;
}
※font-size: 16px;の「16」は適宜数値を変更してください。(数値が大きくなるほど文字が大きくなります)
4.h3で指定した見出し文字のみ大きさを変える
サンプルイメージ
「1.h1~h3で指定した見出しの下線の太さを変える」の手順と同じです。 変更点は以下になります。
【▼変更前①】
- CSS
.article-body-inner h1,
.article-body-inner h2,
.article-body-inner h3 {
border-bottom:3px solid #7f7f7f;
}
【▼変更後②】
- 記述例
.article-body-inner h1,
.article-body-inner h2 {
border-bottom:3px solid #7f7f7f;
}
.article-body-inner h3 {
border-bottom:3px solid #7f7f7f;
font-size: 19px;
}