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

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

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

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

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

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

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

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

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

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

ブログを確認する

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

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

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

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

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

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

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

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

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

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

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

※クリックで画像拡大

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

ブログを確認する

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

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

フリースペースの使い方（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１にカエラティッカーを貼り付けていきましょう。
「編集」の筆アイコンをクリックします。

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

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

ブログを確認する

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

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

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

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

管理者ページにログインして、[モバイル＞ デザイン変更] を選択します。

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

全体のスマホデザインをプレビューで確認することができます。

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

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

フリースペースとは？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

商品をブログのサイドに表示する

新しくオススメしたい商品を登録してブログに表示させてみましょう。
今回は「ダカフェ日記」という本をブログに表示させてみることにします。

まずは管理者ページへログインし、
「データ管理」から「おすすめ商品リスト」＞＞「商品の検索と追加」ページへ進みます。

ここでは、Amazon の商品検索を試してみましょう。
ジャンルを選択して、商品名を記入します。
ジャンルを「和書」、「ダカフェ日記」と記入して、検索ボタンを押します。
※ジャンルの選択が間違っていると検索結果が出てこない場合があります。

ずらっと、検索内容に関連した商品が表示されました。
ブログに表示したい商品をリストに追加しましょう。
「リストに追加する」ボタンをクリックします。

すると、登録している商品リストが表示されます。
先ほど登録した「ダカフェ日記」もリストに入っていますね。

登録しただけでは、ブログに表示されません。

サイドバー表示を「表示」に切り替えましょう。
これでブログのサイドバーに商品が表示されました。

ここが「非表示」になっている場合は、ブログに表示されません。