CMSクラウドHP楽々専科・お助けガイド

HP楽々専科では変更を元に戻す方法が「1.直前の変更を元に戻す方法」「2.いくつか前の変更まで元に戻す方法」
「3.バックアップ時点まで戻す方法」と３つの方法が準備されております。

この3つの方法を順番に紹介していこうと思います。

直前の変更を元に戻すのはとても簡単です。

コントロールパネルの「元に戻す」ボタン をクリックします。



出現するメッセージを確認し、「OK」ボタンをクリックすると直前の変更が元に戻ります。



簡単楽々ですね♪

いくつか前の変更まで元に戻す方法は、実は２通りのやり方があります。今回は両方ご紹介しますので、使いやすい方法をご利用ください。

右クリックからの方法は、言葉通りの方法です。

HP楽々専科の編集モードに入り、ページのどこかで右クリックをしてみてください。
右クリックする場所によりメニュー項目が増減しますが、「元に戻す」という項目が一番下にあるはずです。

そこからいくつか前の変更まで元に戻せます。また、一番下の「すべての変更を見る」をクリックすると、下記のような変更履歴画面が現れをクリックするとその時点まで変更を戻すことができます。かなり前の変更まで戻せます。
※直前の再構築、もしくはバックアップデータのリストアまで戻すことができます。

コントロールパネルからの方法は、コントロールパネルのadminタブ→システム→変更履歴と進み、
変更履歴一覧から戻る方法です。

こちらから、先ほど右クリックからの方法ですべての変更を見るを選択した時と同じ画面に移動できます。

最後にバックアップ時点まで戻す方法をご紹介します。

コントロールパネルのadminタブ→システム→バックアップと選択するとバックアップ管理画面に移動できます。

HP楽々専科では初期設定で「ログアウト時自動バックアップ」をするように設定されておりますので、こちらの設定を変更しない限りはログアウト時に自動でバックアップが取られるようになっております。

また、タイトルの欄に好きなファイル名を記入し「バックアップ開始」ボタンを押すと、その時点のバックアップを取ることもできます。ご自身のホームページの大幅な変更をする前にはバックアップを取っておくことをオススメします。

このバックアップ画面のリストアの下にあるをクリックすると、そのバックアップを取った時点の状態にホームページを戻すことができます。

HP楽々専科ではバックアップはお客様のPCにではなくクラウド上に保存しておりますので、お客様のPCが壊れた場合も安心です！それでも心配な場合はDLよりバックアップデータをご自身のPCにダウンロードしておくとより安心でしょう。

以上の３つの方法で、変更を戻すことができます。とても便利な機能ですよね！
ですが注意しなければいけないことがあります。

変更を元に戻すと、それ以降の変更履歴は消えてしまうということです。
言葉で説明してもわかりにくいと思いますので、下記の画像を見てください。

画像を見てもわかりにくいかもしれませんね・・・
変更日時に注目してもらうとわかりやすいかもしれません。
2017年9月12日の14時14分17秒時点の状態に戻したら、それ以降の分（9月12日の14時14分17秒より時系列が後の分）は履歴が消えてしまい、消えてしまった時点には戻れなくなります。

なので、自分が思っていた時点より前の時点を誤って選択して「あれ？戻りすぎた！？」となったら面倒なことになるのです。

一番安心なのはバックアップをとっておくことなので、編集作業が終わったあとにはログアウトをするクセをつけましょう！また、先ほども言いましたが、ホームページの大幅な変更をする前にはバックアップを取るようにしましょう！！

今回はHP楽々専科での地図の配置方法について紹介していきたいと思います。

それでは早速地図を追加していきましょう。
HP楽々専科を使って地図を配置するには、まず配置したい場所にマウスカーソルを移動し右クリックをして
コンテンツパーツ→パーツの追加と選択します。


次に右上のその他のタブをクリックし、「GoogleMaps-新規作成」を選択します。



すると、地図が追加されました！

しかし、このままでは縮尺が広域すぎて日本の東京ということくらいしかわからないですね。
サンプルとしてこれから弊社秋葉原オフィス近くにある神田明神を良い感じに表示されるように設定変更していきます。

まずは今追加した地図の上で右クリックをして、GoogleMaps→プロパティと選択します。

その後、下記のように設定画面が出現しますので、各項目を入力しましょう。
ポイントとしては「自動的に緯度経度を取得を行う」のチェックを忘れないことと、縮尺を変更することです。



上記のように入力した結果が以下の地図になります。

無事、神田明神を表示することができました！

ちなみに各項目に入力したものがどのように表示されるかというと

・タイトル→マウスカーソルをマーカー（赤い矢印）の上にもっていくとタイトルが表示されます。

・吹き出しコメント→マーカー（赤い矢印）をクリックすると吹き出しコメントが表示されます。

・地図下コメント→地図の下に表示されます。
「ポニーのあかりちゃんもいます！！」という部分です。

HP楽々専科ではこのように地図の配置も簡単にできますので、ぜひご活用ください！

無料体験版のお申し込みはこちらから

前回に引き続き、今回もスライダーのコンテンツパーツ（部品）について取り上げていきます。

今回もレスポンシブデザインに対応している「bxSlider」というスライダー部品を中心にご紹介していきたいと思います。

下記のスライダーが「bxSlider」のスライダー部品を使用したスライダーです。

スライダーのオプション設定を変更するには、配置したスライダー部品の上で右クリックをして
スライダー→オプションと進みます。

すると下記のような画面が表示されてるのでこちらから設定していきます。

オプションの各項目の内容の大まかな説明はの部分をクリックすると出てきますが、今回は各項目についてもう少し詳しく説明していきたいと思います。

・タイトル→スライダーパーツに名前を付けます。一度作成したスライダーパーツはコンテンツパーツのその他カテゴリーに登録され、同様のものを簡単に設置できます。わかりやすいタイトルを記入しておけば探しやすくなります。

・エフェクト→画像切り替え時のエフェクト（動き）を設定できます。水平移動・垂直移動・フェードの3種類ありますので、実際に試してみてお好みのものに設定しましょう。ちなみにこのページの最初の方にあったスライダーは垂直移動に設定されています。

・イージング→エフェクト（動き）に加速、減速など強弱のついた動きを設定できます。簡単にいうとサーッとスムーズに切り替わるようにしたり、シュッと一瞬で切り替わるようにしたり、ガクガクッと揺れながら切り替わるようにしたりできます。こちらも実際に試しながら自分好みの設定を探しみてください。

・自動再生→スライドを自動再生するかどうかを設定できます。オフにするとスライダーの端にあるや
スライダーの下にあるで自分で切り替えない限り、画像が切り替わらなくなります。基本的には自動で切り替わるようにオンにしておくのが良いかと思います。

・停止時間→スライドが停止している時間をミリ秒単位で設定できます。1000msで1秒です。初期設定では3000ms（3秒）に設定されていますが、7000ms（7秒）くらいがちょうどよいのではと管理人は思います。こちらもお好みで色々試してみるとよいかと思います。

・移動間隔→次のスライドへ移動する間隔をミリ秒単位で設定できます。簡単に言うと切り替わるのに何秒かかるかで、長く設定するとノロノロと時間をかけて切り替わり、短く設定すると一瞬で切り替わります。

・ティッカー→オンにするとスライドが停止せずに流れ続けます。停止時間で設定したものは無視され、移動間隔の秒数で流れ続けるので、移動間隔を短く設定したままオンにすると結構大変なことになります。基本的にはオフのままで良いかと思います。

・左右のナビゲーション→スライダーの端にある画像切り替えボタンを表示するかしないかの設定です。

・ページャー→スライダーの下にある画像切り替えボタンを表示するかしないかの設定です。

・ページャー形式→スライダーの下にある画像切り替えボタンを全表示か簡易表示に変更できます。は全表示の場合で、簡易表示にすると1/2など今何番目のスライドが表示されているか数字で表現され、スライドの切り替えはできなくなります。なので管理人としては全表示のままが良いかと思います。

・開始/停止コントロール→スライダーの右下に開始停止ボタンを表示するかしないかの設定です。

・ラベル→ラベルに設定した文字をスライダー下部に表示するかしないかの設定です。下記はスライダー→編集からラベルに「しまうま」と設定した場合の例です。

・高さ自動調整→スライドの高さが異なる場合、その高さに合わせたサイズに自動で調整するかどうかを設定します。基本的に同じサイズの画像をスライドに設定していれば変更してもなにも変わりません。

・高さ調整の間隔→高さの自動調整がONの場合の間隔をミリ秒単位で設定します。

・ブラウザサイズによる自動調整→こちらの設定をオフにするとレスポンシブデザイン対応ではなくなります。必ずオンにしておきましょう！

各項目の説明は以上となりますが、結局はご自身で納得のいくまでいろいろ設定を変更してみるのが一番だと思います！！スライダーをホームページのトップページ等の目立つ場所に配置しておくと、ホームページが一気に格好良くなりますので、スライダーを設置してライバルに差をつけちゃいましょう！！！




スライダーの設置も簡単にできるHP楽々専科の無料体験版のお申し込みはこちらから

HP楽々専科では、ホームページ内に簡単に設置できるスライダーの部品（コンテンツパーツ）を
3種類ご用意しております。

それぞれの特徴をまずは紹介していきたいと思います。

最初にご紹介するのは「Skitter」というスライダー部品です。
主な特徴
・画像切り替え時のエフェクト（動き）が38種類あり他の2種類に比べよりダイナミックな表現ができる。
・ページャー（画像切り替えボタン）を数字やサムネイル（縮小された画像）や丸などに切り替えできる。

次にご紹介するのは「bxSlider」というスライダー部品です。
主な特徴
・レスポンシブデザインに対応しており、モバイル端末からでも正常に表示される。
・開始・停止ボタンを設置できる。

最後に「Destaque」のご紹介です。
主な特徴
・設定したタイトル・テキストをいっしょに切り替えできる。



以上が各スライダーの特徴です。
それぞれ特徴があり、「結局どれを使ったらいいの？」と思うかもしれません。

ホームページをスマホから見る機会が増えた昨今、携帯端末から見た場合のことも当然重要になります。Google検索でもPCページ重視からモバイルページ重視に移行されてきていますからね！！特に切り替え時の動き（エフェクト）にこだわりがないのであれば、スマホでもタブレットでもパソコンでも自動で各画面に合うよう調整されて正常に表示される「レスポンシブデザイン」対応の「bxSlider」をオススメします。

ということで、今回は「bxSlider」を例に配置方法を説明していきたいと思います。

まずはスライダーを設置した場所で右クリックします。
すると下記のように選択肢が出現するので、コンテンツパーツ→パーツの追加
と選んでいきます。


すると下記のような画面が表示されるので、右上の「その他」のタブをクリックし、「新規スライダー　-　bxSlider」をクリックします。

はい、これでスライダーの部品がホームページに追加されました！
ですが、初期状態ではサンプル画像が表示されるように設定されています。これでは追加した意味がありませんね。
次にこの部品の設定を変更して、自分の好きな画像を表示させましょう！！

追加されたスライダーの部品の上で右クリックをすると、下記のように選択肢が出現するので、
スライダー→編集と選んでいきます。

すると下記のような画面が表示されるので、サーバーブラウザの部分をクリックします。

すると画像置き場が表示されるので、表示したい画像を選択しましょう。
ちなみに画像置き場に画像を置く（アップロードする）方法はこちらで紹介しています。

はい、これで選んだ画像が表示されるようになりました！

あとは同様に下のほうにあるをクリックして2番目に表示される画像を、をクリックして3番目以降に表示されれる画像も追加して設定できます。

ここでサーバーブラウザ以外の項目の説明も記載しておきますね。

alt属性　  →画像の名前みたいなものです。この場合は「しまうま」等を入力します。
リンク　　→この画像の上でクリックした場合にリンクに設定したページに移動するように設定できます。
ターゲット→リンクを設定した場合に同じウインドウでそのページを表示するか、
新たにウインドウを開いてページを表示するか設定できます。
ラベル　　→ラベルの表示設定をオンにすると下部に表示されます。ここにも画像の名前等入力しておきましょう。

ここでひとつ注意事項ですが、スライダーに設定する画像はすべて同じサイズにしないと下記のようにおかしな感じになってしまいます。

なんか格好悪いですよね？このようになってしまうのであれば、スライダーを設置しない方が良いくらいですよね！？
このようにならないよう、以前ご紹介した「Page Ruler」でサイズを測って、画像のサイズをスライダーに
合うように調整してから設定してくださいね！ちなみにですが、しまうまの画像や象の画像は横幅765px縦幅280pxで作成しています。最初はこのサイズを参考にしても良いかもしれません。

また、ラベルのオンオフの設定も含めてスライダーはオプションの設定でもっと細かい設定が可能です。



次回はスライダーのオプション内について詳しく紹介していきます。
是非次回もご覧ください。

前回はホームページ上の色を調べるツール「Color Picker」についてご紹介しましたが、
今回はホームページ内の長さを測れるツール「Page Ruler」をご紹介したいと思います。

前回にも触れましたが、ホームページ上の色を調べるツール「Color Picker」と
ホームページ内の長さを測れるツール「Page Ruler」は両方ともGoogleChromeでの機能になります。

もし違うウェブブラウザを使用している場合はGoogleChromeをダウンロードしないと
両ツールは使えませんので、ご注意ください。

それでは早速Page RulerをGoogleChromeに追加しましょう。

こちらから追加できます。

無事追加できましたか？
問題なく追加できていれば、画面の右上にこんなアイコンが増えているはずです。

使い方は簡単！そのアイコンをクリックして、測りたい部分をマウスカーソルで指定するだけです！

上の画像はクリックすると拡大し見やすくなります

HP楽々専科ではコンテンツパーツ（部品）として簡単に画像を配置できますが、その際に「ここにはめ込む画像はどのくらいのサイズで作成したら良いんだろう」などと思ったときにも、PageRulerは大活躍します！

下記の画像は、HP楽々専科で使用できるコンテンツパーツ（部品）で、画像を横に二つ並べるパーツです。実はこのパーツ、元の画像サイズがどんな横幅でも、自動で横幅をこの長さに変換して表示してくれます！すごいですよね！？

しかし、横幅は自動で合わせてくれても縦横比率は維持されたまま表示されるので、縦幅はバラバラになってしまいます。簡単にいうと、縦長の画像と横長の画像を並べて表示するとあまり見た目がよろしくない感じになってしまうということです。ちなみに下記の画像をクリックすると使用している元の画像の大きさで表示されます。もともと大きなサイズの画像だったものを、自動で画面サイズに合うようにHP楽々専科のシステムが調整してくれているのです！

横長の画像と縦長の画像を調整せずにそのまま指定するとこんなふうに表示されてしまうのです。これではなんか格好悪いですよね？

それではどうすれば良いかというと、左の猫の画像のサイズに右の子供の画像のサイズを合わせてみましょう。そこで登場するのが今回ご紹介した「PageRuler」と以前の記事でご紹介した「pixlr」というHP楽々専科に搭載されている画像編集ツールです。

ではまずは「PageRuler」で左の猫の画像のサイズを測ってみましょう。

Width（横幅）が375px、Height（縦幅）が250pxということが分かりました！
このサイズに右側の子供の画像のサイズを合わせることにします。

とはいえもともと形の違う画像です。サイズを合わせるといっても余白を追加して合わせることになります。

では左側の子供の画像を「pixlr」で開いてみましょう。
まずは画像の縦幅を猫の画像と同じ250pxに合わせます。

画面上部の画像→画像サイズと進み画像の高さを250pxに変更します。「縦横比を固定」のチェックはつけたままにしておきます。

次に画面上部の画像→キャンバスサイズと進み、幅を375に、高さを250に指定し、アンカーの部分を中央に指定します。



すると子供の画像の左右に余白が追加され、猫の画像と同じサイズの画像にすることができました！こちらを保存して配置したのが下記になります。

画像サイズを調整する前と比べると、配置のバランスが良くなりましたよね！

こんな感じで、画像の縦横比を調べるのにも「PageRuler」はとても便利です。
是非使いこなして、ご自身のホームページをより良いものにしてくださいね！！

ホームページを編集している中で、「このページのこの色を自分も使いたいなあ」とか
「この画像の長さに他の画像の長さも統一したいなあ」と思うこと、よくありませんか？

当サイト管理人はこういうことがよくあり、実際に色や長さを調べています。

今回は実際に管理人が使っている、ホームページ内で使われている色を調べられるツール「Color Picker」
とホームページ内の長さを測れるツール「Page Ruler」をご紹介したいと思います。

さて、この便利なツールを使う前に、皆さんはどのウェブブラウザをいつも使用していますか？

最近はシェア1位のGoogleChromeを使用している方が多いかと思いますが、
昔から慣れ親しんでいるInternetExplorerを使用している方もまだまだ多いのではないでしょうか。


InternetExplorerでHP楽々専科をご利用頂いている方はご存知かもしれませんが、
HP楽々専科ではInternetExplorerは推奨外となっており、以下のようなメッセージが出てきます。
動作環境についてはこちらから

InternetExplorerでも動作しないことはないのですが、ちらほら動作がおかしくなるので、HP楽々専科をご利用いただく場合はFireFoxかGoogle Chromeを使用して頂ければと思います。

そしてこれから紹介するColor PickerとPage RulerはGoogleChromeでの機能になります。
現在InternetExplorerをメインで使用している方も、これからはHP楽々専科でも推奨されていて便利な機能も追加できるGoogleChromeに乗り換えてみてはいかがでしょうか。

GoogleChromeのダウンロードはこちらから

それでは早速Color PickerをGoogleChromeに追加しましょう。

こちらから追加できます。

無事追加できましたか？
問題なく追加できていれば、画面の右上にこんなアイコンが増えているはずです。

使い方は簡単！そのアイコンをクリックして、色を調べたい部分にマウスカーソルを移動するだけです！

クリックすると16進数のカラーコードをそのままコピーできます。

無事カラーコードを取得できましたか？このカラーコードは、文字の色や画像の色などを変更したい場合に利用出来てとても便利です。是非「Color Picker」を利用して、ご自身のホームページを思い通りの色に変更してみてくださいね！

次回はホームページ上の長さを測れる「Page Ruler」について紹介していきます。
是非ご覧ください！！