ホーム > サポートメニュー > 管理者ページ・マニュアル

JUGEM 管理者ページ・マニュアル

充実のオンラインマニュアルです。管理画面の使い方から独自タグ一覧まで、詳細にご用意しています。
よくある質問集 FAQ はこちらから »

フリースペースの使い方(ケータイ)

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

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

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

  

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


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




管理者ページ内、「ケータイ設定」の「フリースペース」をクリックし、
´▲侫蝓璽好據璽好織ぅ肇襪函表示させるメッセージを記入します。
※ブログパーツなどを貼りつける場合は、生成されたコードを△謀修衂佞韻泙后

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


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

ブログを確認する


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



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

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

フリースペースの使い方(スマートフォン)

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

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

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

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

  スマホフリースペース


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


スマホフリースペース

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


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

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

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

ブログを確認する


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

スマホフリースペース


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

フリースペースの使い方(PC)

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

ティッカーを貼り付ける


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



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

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


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


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



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


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




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


ブログを確認する


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



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

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

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



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

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

全体のスマホデザインをプレビューで確認することができます。金額ボタンをクリックすると、
決済ページに進みます。
03.jpg
※金額はスマホテンプレート一つのお値段です。PC・携帯電話のテンプレートは含まれません。
※金額表示がなく「設定する」ボタンがあるものについては、無料でご利用頂けます。


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

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

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

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

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

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

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

ブログのフォントを変えてみよう。


ブログのフォント(文字の種類)を変えて、オリジナルブログにしてみましょう。
ブログのフォントは、管理者ページより変更する事ができます。


管理者ページにログインして、[デザイン ― Webフォント] を選択します。


JUGEM Webフォントの一覧ページが開きます。設定してみたいフォントの見本をクリックします。
webフォント2

ログイン画面が開きますので、フォントを設定したいブログのJUGEM IDパスワードでログインします。
webフォント3※まだ会員登録をされていない方は、先こちらから登録をお済ませください。

ログイン後、選んだフォントをプレビュー(ブログに試着)する事ができます。
選び直したい場合には「フォントを選び直す」をクリックしてください。
選んだフォントで問題なければ「購入する」ボタンをクリックしてください。
webフォント4

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

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

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

購入が完了したら、すぐにブログに設定する事ができます。
早速、フォントを変更してみましょう。
webフォント8

プルダウンの中に購入したフォントが追加されていますので、使用したいフォントを選びます。
これで設定は完了です。
webフォント9

購入したフォントでブログが表示されるようになりました。
webフォント10

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

フリースペースとは?

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



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

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

テンプレートの変更(ケータイ)

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




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


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


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


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



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


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



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






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

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




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




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





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



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


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

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



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




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

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

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


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



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

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



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



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



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

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



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

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



一言コメントを追加する



サイドバーに表示させている商品には、一言コメントを追加することができます。
ちょっとした感想や、商品の紹介に便利です。

先ほどと同じ手順で、「おすすめ商品リスト」を表示します。



「おすすめ商品[サイドバー表示] 」ページをクリックします。
サイドバーに表示している商品の一覧が表示されます。



「サイドバー表示 / ひと言コメント」の欄にコメントを記入します。
最後にメニューの「コメント更新」ボタンを押して、コメントを保存してください。



ブログで反映されているか確認しましょう。 

登録された商品を削除する





「おすすめ商品リスト」から商品を削除したい場合は、
リスト右の「×」ボタンをクリックしてください。

テンプレートの変更

ブログデザインを自分の好みのものに変更しましょう。
JUGEMでは、公式テンプレートのほかに、JUGEMユーザーが作成したテンプレートもご利用頂けます。

では、JUGEMの公式テンプレートを使ってみましょう。


管理者ページ内「デザイン」の「テンプレート変更」をクリックします。




「テンプレートの追加」に表示されているテンプレートの一覧より、
お好みのテンプレートの「一覧にストック」ボタンをクリックします。





「テンプレートを追加しました。」というメッセージが表示され、
テンプレートリストに選択したテンプレートが追加されます。





※追加したテンプレートはあなたの ストックとして保存 されるだけで、
あなたのブログにすぐに適用されるわけではありません。

それでは実際に テンプレートをブログに適用 してみましょう。


先ほど追加したテンプレートを選択します。


「選択したテンプレートを使用」ボタンをクリックします。





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





ブログを確認すると、選択したテンプレートに変更されています。




テンプレートは変更できましたか?
デザインが豊富なJUGEMのテンプレートをたくさん試してみてください。



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

JUGEMトップページ内「テンプレート」の「ユーザー作成テンプレート」をクリックします。




一覧ページより使用したいテンプレートをクリックします。




大きめの画像でテンプレートの詳細を確認することができます。
テンプレートを使用したい場合は、「このテンプレートを使う」ボタンをクリックします。




ログイン情報を入力します。


※すでにJUGEMトップページでログインされている場合は、表示されません。



テンプレート簡単ダウンロード機能をつかい、テンプレートをダウンロードします。




ダウンロードの完了メッセージが表示されます。




さっそく管理者ページで確認してみましょう。
管理者ページ:テンプレート一覧へ」をクリックします。


テンプレート一覧にダウンロードしたテンプレートは追加されていましたか?




あとは先ほどの公式テンプレートと同じ手順で、自分のブログにテンプレートを適用すれば完了です。