魅せるアメブロデザインテンプレート
デザインテンプレートでCSSに反映する流れ
目次
デザインテンプレートでCSSに反映する手順は下図のとおりです。
本ページを順番にすすめていってください。
事前準備
CSS編集用デザインに設定してから実施してください
【参照】CSS編集用デザインを設定する方法
すでにカスタマイズしている方は設定しているCSSの内容を全てコピーして
テキストファイルに貼り付けるなどをしてバックアップを取ってから実施してください！
<h3>1. テンプレートをダウンロード</h3>
対象のテンプレートをダウンロードしてください。<br />ファイルはご自身のパソコンに保存するなどしてお使いください。
※ダウンロードパスワードはメールにてお送りしております。
FemininePink
テンプレートダウンロード
Cute Pink
テンプレートダウンロード
Natural
テンプレートダウンロード
Tiffany Blue
テンプレートダウンロード
MordenPurple
テンプレートダウンロード
Paris Green
テンプレートダウンロード
Paris Pink
テンプレートダウンロード
2. フリースペースにメニューバーの内容をコピーして貼り付ける
2-1. ダウンロードした「メニューバー_フリースペース◯項目.rtf」のテキストファイルを開きます
テンプレートのデフォルトは５項目です。
メニューバーを４つのリンクに設置したい場合は４項目を、
６つのリンクにする場合は６項目にテンプレートを開いてください。
2-2. テキストファイルの内容を編集します
「メニュー１」と書かれた部分が実際に表示されます。
メニュー１のリンク先がURL1に入力したURLになります。
それぞれ、
メニュー１→メニュー１に表示する文言を変更
URL１→リンクするURLに変更してください。
※ “”は消さないでください
同様に５番目まで設定をします。
2-3. フリースペース編集画面を開き、貼り付けます
ブログ管理→【設定・管理】→【フリースペース編集】を開き、
先ほどコピーした内容をすべてコピーし貼付けし保存します。
3. CSSの編集をする
3-1. デザインテンプレートの内容を全て選択してコピーします
ダウンロードした「テンプレート名.rtf」と書かれたファイルを開き
内容を全てコピーします。
3-2. CSS編集画面を開き、コピーした内容を貼付けます
ブログ管理→【デザインの設定】→【CSSの編集】→CSS編集画面を開きます。
書かれている内容をすべて削除し、
3-1でコピーしたテキストファイルの内容を貼り付けます。
3-3. 表示を確認し、保存する
画面下部の［表示を確認する］をクリックして
見え方がおかしくないか確認してください。
問題なければ［保存］をクリックします。
もし表示がおかしい、など問題があった場合、
保存する前であれば［編集前の状態に戻す］をクリックすれば元の状態に戻ります。
CSSは1文字でも追加されたり削除されてしまうとうまく動かなくなってしまいます。
ファイルを開いたら何も更新せずにこのままの状態でお使いください。
【参照】
メニューバーの設置
メニューバーが表示されない
<h3>【動画で解説】テンプレートの使用方法</h3>
<a href="https://joujounet.com/ameblocustomize-seminar/faq/" role="button">
FAQページを閲覧する
</a>
<p>テンプレートを何度も試してもうまく表示がされない、<br />問題があればよくある質問（FAQ）ページでご確認ください。</p>
<a href="#0" role="button">
TOP
</a>
<a href="https://joujounet.com/ameblocustomize-seminar/" role="button">
HOME
</a>
<p><a href="https://joujounet.com/privacy-policy/">プライバシーポリシー</a> ｜ <a href="https://joujounet.com/tokushou/" data-wplink-edit="true">特定商取引法基づく表記</a></p>
<img width="800" height="180" src="https://joujounet.com/wp-content/uploads/2022/08/Ameblo-Design.png" alt="魅せるアメブロデザインテンプレートロゴ" loading="lazy" />