よくある質問をまとめました。質問をクリックしますと表示されます。
まずわからない場合はこちらのページをご確認お願いたします。
1. ヘッダーの設定について
1. ヘッダーの画像を変更したい
画像をアップロードして、画像のURLを
CSS編集画面の以下の箇所に貼り付けてください。
(2-1) ヘッダー背景
.skin-bgHeader a {
background-image: url(画像URL);
URLを変更する画像URLに変更してください。
【参照】画像をアップロードしてURLを確認する方法
ヘッダー画像を自分で作る場合のサイズは？
横 1120px 、 縦 400〜600pxがおすすめのサイズです。
なお、テンプレートは全てタテ400pxの大きさにあわせていますので
タテのサイズが大きくなるとメニューバーの位置がずれる可能性があります。
ズレてしまった場合は
『メニューバーの表示がズレた』の章をご覧ください。
ブログタイトルと説明文の位置を調整したい
※Emeraldのテンプレートを使用して説明しています
ブログタイトルとブログ説明までの距離20px
上から 150px
右から 200px
に設定されています（青字）
この部分を自分の好きな位置に移動させてください。
padding-top は上からの距離
padding-left は左からの距離
padding-right は右からの距離
padding-bottom は下からの距離
設定する箇所は下記の青字部分です。
/* (2-2) ヘッダータイトル、説明文
——————————————–* /
/* ブログタイトルエリア、ヘッダー画像の下にテキストを隠す */
.skin-blogTitle {
z-index: -1;
}
/* ブログタイトル */
.skin-blogMainTitle {
color: #C2A748; /* 文字の色（ゴールド）* /
margin-bottom: 20px; / ブログ説明までの距離 /font-size: 27px; / 文字サイズを指定 /} / ブログ説明文 /.skin-blogSubTitle {color: #C2A748; / 文字の色（ゴールド） /font-size: 16px; / 文字サイズを指定 /} / ヘッダータイトル /.skin-headerTitle {text-align: right; / タイトルを右に設置 /padding-top: 150px; / 上からの距離 /padding-right: 200px; / 右からの距離 /padding-bottom: 80px;font-family: “ヒラギノ明朝 ProN”,”Hiragino Mincho ProN”; /フォントを明朝に*/}
ブログタイトルと説明文の表示を消す
CSS編集画面の一番最後に以下を追記して保存をしてください。
/* ヘッダータイトル・説明の表示を消す */
.skin-headerTitle {
display:none;
}
背景について
背景色を変更したい
以下のCSSを
メニューバーについて
メニューバーが表示されません
サイドバーの配置設定でフリースペースが
「使用する機能」になっていない可能性があります。
ブログ管理→［配置設定］でフリースペースを使用する機能に
ドラッグ＆ドロップで追加して保存してください。
【参照】動画でサイドバーの配置の設定を確認する
メニューバーの項目数を変更したい
メニューバーの項目数（リンクの数）を変更するには
下記の動画でご確認ください。
【参照】メニューバーを６項目にする
メニューバー の色を変更したい
CSS編集画面の以下の箇所を探し、
青字の部分をお好きなカラーコードに変更してください。
カラーコードはこちら
https://www.colordic.org/
(6-4) メニューバー
/* メニューバー詳細デザイン /.nav-menu li a {width: 220px ; / メニューバー1つの横幅 /line-height: 60px; / メニューバーの高さ /margin:0.5px; /メニューの隙間/border:1px solid #ffffff;/線の太さ 種類 色を指定[1px 直線 ]/background: #8EDFE1; / メニューバーの背景色 /color: #ffffff ; / 文字の色 [白]/font-family: “ヒラギノ明朝 ProN”,”Hiragino Mincho ProN”; /フォントを明朝に/}.skin-bgHeader {padding-bottom: 65px; / メニューバーの表示場所確保 /}.nav-menubar {top: -180px; / メニューバーの上下位置調整 /} / メニューバーのデザイン（マウスオーバー時） /.nav-menu li a:hover{ /カーソルが乗った時という意味/color:#ffffff; /文字色(白)/font-weight:bold; /太字 /text-decoration:underline;/下線(あり)/background-color:#ff69b4; /背景色(薄いピンク)*/}
メニューバーの表示がズレた
メニューバーの表示がずれる原因は
フリースペースで編集したときに改行が入っていることが原因です。
フリースペースのメニューバー設定箇所の改行を削除してください。
（バナーなど設置している場合、バナーなどの改行は不要です）
【参照】動画でメニューバー表示のずれの変更を確認する
メニューバーを画像にしたい
メニューバーの画像（横1120px・縦 60px）の画像を用意してください。
CSSを開き、『(6-4) メニューバー』以下の下記の箇所に
画像URLを追加してください。
/* メニューバー詳細デザイン */
.nav-menu li a {
display: block;
text-decoration: none;
}
表示される文字を変更したい
ブログ管理→［設定・管理］→［フリースペース編集］を開きます。
<span>メニュー１</span>のようにで囲まれた
青字部分がメニューバーで実際に表示されます。
ここの文言を変更してください。
リンクのURLを変更したい
ブログ管理→［設定・管理］→［フリースペース編集］を開きます。
<a href=”URL” taeget=””>メニュー1</spna></a>
青字部分がメニューバーのリンクとなっています。
青字部分のURLを変更してください。
※ ダブルクォーテーション（””）は消さないでください！
記事エリアについて
見出しを増やしたい
記事編集画面の上部にある「見出し」のところで設定します。
見出しデザインが反映されていないようですが…
プレビュー画面で見ると見出しが表示されます。
また、スマホやアプリで見る場合には見出しの設定は非表示になります。
記事タイトルのデザインを変更したい
CSS編集画面を開き以下の箇所を探し、
下記のように変更してください。
(3-2) メインタイトルの中から
.skin-entryTitle {
- 背景を変更する場合
background-color:#任意のカラー;
を追記（セミコロン;を必ず入れてください） - 文字の色を変更する場合
color:#任意のカラー;
を追記（セミコロン;を必ず入れてください）
メッセージボードについて
メッセージボードの中身を編集したい
ブログ管理→［設定・管理］→［メッセージボード］
メッセージボードのデザインを変更したい
CSS編集画面を開き、以下の箇所から変更ができます。
/* (6-2) メッセージ
——————————————–*/
/* メッセージ 背景 レイアウト */
.skin-message {
border:4px double #cbb994; ←枠線の種類を指定
background-color:#FFFBFF; ←背景色を指定
padding:20px;
color:#806C57; ←文字の色を指定
font-size:15px;
}
テンプレートによってCSSの表記は変わりますが、変更箇所は基本的に同じです。