テンプレートを変更しよう | JUGEM 管理者ページ・マニュアル

フリースペースの使い方（ケータイ）

「フリースペース」機能とは、アクセス解析機能やカウンターなど、
HTMLタグの入力が必要な内容を表示させることができる機能です。

テンプレートのHTMLを編集が苦手…と言った場合でも、
ブログに自分の好きなパーツを追加したり、特定のメッセージなども表示可能です。

ケータイ版フリースペースでは、挿入する場所も選択可能となっております。
試しにブログ上に、メッセージを表示させてみましょう。

今回はブログタイトルの下に、メッセージを表示させます。

管理者ページでフリースペースを編集する

管理者ページ内、「ケータイ設定」の「フリースペース」をクリックし、
①②フリースペースタイトルと、表示させるメッセージを記入します。
※ブログパーツなどを貼りつける場合は、生成されたコードを②に貼り付けます。

挿入位置、公開・非公開を設定する

③挿入位置（表示する箇所）を設定します。
※今回の場合は「ブログタイトルの下」を選択しています。
④公開・非公開を設定してから、「フリースペースの設定」ボタンをクリックします。

ブログを確認する

ブログを確認してみましょう。

上記のように、ブログタイトル下にメッセージが表示されました。

なお、同じ挿入位置に複数のフリースペースを設置した場合は、
「フリースペース01～03」の順番通りに挿入されます。

フリースペースの使い方（スマートフォン）

「フリースペース」機能とは、アクセス解析機能やカウンターなど、
HTMLタグの入力が必要な内容を表示させることができる機能です。

テンプレートのHTMLを編集が苦手…と言った場合でも、
ブログに自分の好きなパーツを追加したり、特定のメッセージなども表示可能です。

スマホ版フリースペースでは、挿入する場所も選択可能となっております。
また、headタグ内にご希望のタグを挿入することも可能です。

試しにスマホ版デザインのブログタイトルの下に、メッセージを表示させてみましょう。

管理者ページの「モバイル設定」より「▼スマートフォン設定」内「フリースペース」をクリックします

フリースペースを編集する

今回は、ブログタイトルの下に表示するため、「フリースペース２」に内容を入力します。
※アクセス解析やカウンターなどを貼りつける場合は、生成されたコードを貼り付けます。

スマホフリースペース

「状態」の公開・非公開を選択してから、「編集内容を保存」をクリックします。

記事ID：78 スマホフリースペース

ブログを確認する

ブログを確認してみましょう。
ブログタイトル下に設定した内容が表示されました。

今回は、テキストリンクをタップすると別ページが開くリンクタグを設定しましたが、「イベント出展スケジュール」の内容を文章で掲載することも可能です。

フリースペースの使い方（PC）

「フリースペース」機能とは、テンプレートのHTMLを直接編集することなく、
サイドバーにブログパーツなどの好きな内容を表示させることができる機能です。
テンプレートのHTMLを編集が苦手･･･、といった方でもブログの
サイドバーに自分の好きなパーツを簡単に追加することができます。

ティッカーを貼り付ける

今回は、JUGEMで配布している「カエラティッカー」をブログに表示させます。
「カエラティッカー」のページに、ティッカーをサイドに表示させるための
コードが表記されています。

そのコードをコピーします。

（カエラティッカーの場合、
「 <script type=”text/javascript” src=”http://jugem.jp/ticker/kaela.js” mce_src=”http://jugem.jp/ticker/kaela.js”><⁄script>」
の部分です）

管理者ページでフリースペースを編集する

管理者ページ内、「デザイン」の「フリースペース」をクリックします。
PC版フリースペースは全部で５つ使うことができます。

ID１にカエラティッカーを貼り付けていきましょう。
「編集」の筆アイコンをクリックします。

フリースペースの内容を書き込む

「タイトル」の部分に、表示させたいブログパーツのタイトルを入力します。
「内容」のエリアに、先ほど「カエラティッカー」のページでコピーしてきた
ティッカーのコードを貼り付けてください。
「状態」の公開・非公開を選択してから、「編集内容を保存」をクリックします。

ブログを確認する

「ブログを確認する」をクリックして、確認してみましょう。
（「状態」を非公開にした場合は、表示されません）

ブログのサイドに、ティッカーが表示されました。

スマートフォンのデザイン（テンプレート）を変えてみよう。

スマートフォンのデザイン（テンプレート）を変えて、ブログのリフレッシュをしてみましょう。
管理者ページから変更する事が出来ます。

管理者ページにログインして、[デザイン ― スマホデザイン変更] を選択します。

気になるデザイン見本を選んで、クリックします。

全体のスマホデザインをプレビューで確認することができます。金額ボタンをクリックすると、
決済ページに進みます。

※金額はスマホテンプレート一つのお値段です。PC・携帯電話のテンプレートは含まれません。
※金額表示がなく「設定する」ボタンがあるものについては、無料でご利用頂けます。

選んだスマホデザインが間違いないか確認したら、決済情報登録画面に進みます。

選んだスマホデザインの決済を行います。ご利用のクレジットカード情報を入力してください。
入力したら「決済情報を確認」ボタンをクリックします。

決済情報確認画面で、入力された情報が表示されます。
入力された情報を変更される場合には「登録情報の訂正」をクリックしてください。
内容に間違いない場合には「登録して決済へすすむ」をクリックします。

選んだスマホデザインの見本・金額が表示されますので、お間違いないか確認してください。
間違いなければ「購入する」ボタンをクリックしてください。

購入が完了したら、すぐにブログに設定する事ができます。
早速、スマホデザインを変更してみましょう！「設定する」をクリックします。

これで設定は完了です！
設定されたスマホデザインは右側のモック（見本）で詳しく確認する事が出来ます。

購入したスマホデザインで表示されるようになりました。

フリースペースを活用しよう

フリースペースとは？

「フリースペース」機能とは、テンプレートのHTMLを直接編集することなく、サイドバーにブログパーツなどの好きな内容を表示させることができる機能です。

テンプレートのHTMLを編集が苦手･･･、といった方でもブログのサイドバーに自分の好きなパーツを簡単に追加することができます。

フリースペースの編集方法につきましては、以下のページにてご確認ください。

テンプレートの変更（ケータイ）

管理者ページにログインし、「ケータイ設定」内のテンプレート変更をクリックします。

テンプレートを追加しましょう。

表示されているサムネイル画像から利用したいデザインを決めて
[一覧にストック]ボタンをクリックします。

「テンプレートをダウンロードしました。」というメッセージが
表示されるとダウンロード完了です。

テンプレートを適用します。

ただテンプレートリストに追加しただけでは、デザインは変更されません。
先ほど追加したテンプレートのチェックボックスにチェックをいれ、
「選択したテンプレートを使用」ボタンをクリックします。

デフォルトテンプレートを変更しました。というメッセージが表示され、
現在適用されているテンプレートに旗マークが表示されます。

現在適応中のテンプレートは、管理者ページ内でプレビューすることが出来ます。
または、サイドバーに表示されているQRコード等から自分のブログへ携帯でアクセスし
デザインをご確認ください。

続いて、ユーザー作成テンプレートを使ってみましょう。

JUGEMページの utfモバイルにアクセスします。

使用したいテンプレートをクリックします。

大きめの画像でテンプレートの詳細を確認することができます。
ログインしていない場合は、ログインフォームよりログインしましょう。

「このテンプレートを使う」ボタンをクリックするとダウンロードされます。

テンプレートのダウンロードが完了しました。

テンプレート変更ページへ
という表示がされたら、ダウンロード完了です。

さっそく管理者ページで確認してみましょう。
「テンプレート変更ページへ」をクリックし、管理者ページにアクセスします。

テンプレートリストにダウンロードしたテンプレートは追加されていましたか？

オススメ商品を紹介しよう

初めてブログを設置した時にブログのサイドバーにある「RECOMMEND」のコーナーに商品が表示されています（上の写真以外の商品が表示されることもあります）。

これはブログの管理者ページで「オススメの商品」を紹介するメニューで、好きな商品に変更することができます。
あなたのお気に入りの本やCDなどを紹介してみましょう。複数の商品を表示することも可能です。