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

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

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

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

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

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

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

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

  スマホフリースペース

 

 

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


 

 

 

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


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

 

※クリックで画像拡大

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

 

 

 

ブログを確認する


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

 

 

 

 

スマホフリースペース

 


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

 

 

 

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

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

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

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

  

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


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




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

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


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

ブログを確認する


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



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

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

フリースペースの使い方(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版フリースペースは全部で5つ使うことができます。



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


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




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


ブログを確認する


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



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

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

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

 


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

 


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


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

 


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



 

 

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

フリースペースとは?

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



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

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

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

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

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

 

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



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

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



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



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



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

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



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

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

 

 

一言コメントを追加する

 


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

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



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

 

 

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



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

 

 

 

 

 

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

 




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

 

 

 

 

 

 

 

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

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

 

 

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


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


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

 

 

 

 

 

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



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

 

 

 

 

 

 

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



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






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

 

 

 

 

 

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


 

 

 

 

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


 

 

 

 

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





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

 

 

 

 

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


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

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

 

 

 

 

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


 

 

 

 

 

 

テンプレートの変更

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

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

 

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

 

 

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

■PC版テンプレート

 https://jugem.jp/design/template.php?ref=manage_template

 

 

 

 

 

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

 

※ダウンロードしたテンプレートは、一覧の一番上に表示されます。

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

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

 

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

 

 

 

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

 

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


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


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

 

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

 

 

 

検索条件を設定することで、絞り込みの検索が可能です。

 

 

「サムネイルビュー」にて、一覧を画像つきで確認することができます。
テンプレートを使用したい場合は、右端の「使う」ボタンをクリックします。


 

 

 

 

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

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

 

 

 

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


 

 

 

 

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




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

 

 

 

 

 

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




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

 

 

※正常にダウンロードできない場合※

 

Google Chromeで「テンプレートデータをダウンロード」をクリックした際に、下図のエラー表示がされる場合、XSS(クロスサイト・スクリプティング:脆弱性攻撃)防止のため、同ブラウザのセキュリティ機能が表示させているものかと存じます。

 

 

この画面が表示されてしまう場合は、戻るボタンにて前のページに戻っていただき、「HTML・CSSよりコピーして使う」よりソースコードをコピーしていただく形にてご利用いただきますよう、お願いいたします。

 

 

※現在持っているテンプレートの中で不要なテンプレートのソースにコピー&ペーストで上書きする形にて、ご利用いただけます。