グーペで追加したパーツをサイドバーの上部に表示させる方法【Hometown 編】

 

当ブログにお越しいただきありがとうございます。ブログ集客アドバイザー ざんぷ（@xampp_pushi）です。

グーペでホームページを作り込んでいく中で、サイドバーのデザインを変えたいなーって思うことがあります。グーペって、サイドバーの編集は出来るのですが、ちょっとばかしやりづらいんですよね。例えば、デフォルトの機能「アクセスカウンター」「モバイル用QRコード」などは通常、表示か非表示の切り替えしか出来ず、順番を入れ替えることが出来ないんですよ。更に、追加したパーツ・ウィジェットについては通常、決められた位置にしか配置出来ません。

そこで必要なのが、今回ご紹介する「html編集を活用した入れ替え」です。やったことがないと難しく感じるかもしれませんが、コツを掴んえしまえば簡単です。ミスしてしまってもすぐやり直せますので、臆せずチャレンジしてみましょう^^

変更前に必ずバックアップをとっておきましょう

 

 

【Hometownの場合】サイドバーの追加パーツを上部に移動させる方法

今回は、37種類あるテーマの一つ『Hometown』の場合をお伝えします（2019/11/07現在、デモサイトで使用しているデザインでもあります）。他のテーマだと、また若干内容が代わりますので、テーマにあった方法をとってください。今後少しずつ追加していきます。

ここを⇒こうしたい

イメージ伝わったでしょうか？サイドバーの中身を上下入れ替えたいというものです。これが出来れば、自分がPRしたい内容を、より目立つ位置に持っていけますので格段に認知されやすくなります。

次から、やり方について解説していきますので真似してやってみてください。

 

1デザインの編集ページへと進む

まずは、グーペ管理画面の「設定」＞「デザイン」と進み、デザイン一覧の中にある「Hometown」の編集ボタンを押します。

初めてのデザイン編集であれば、下の画像のようなページが表示されるはずです。矢印の先に「HTML・CSS編集」というボタンがありますので、そちらをクリックしてください。

 

 

2「HTML」の中から、該当する箇所を探す

 
HTMLの中に、たくさんのコードが書かれているのですが、その中から↑こちらの記述を探しコピーしておいてください。{navi_parts}あたりをページ内検索（control+F / command+F）すれば見つけやすいかなと思います。

そして、以下の場所に貼り付けます。もともとあった場所の記述は削除してOKです。

 

3保存をクリックして編集完了

最後に「保存」ボタンをクリックして完了！これで、追加したパーツがサイドバーの上部に移動しているはずです。もしレイアウトが崩れているようであれば、貼り付けている場所が間違っています。慎重に確認して、再度試してみてください。

 

まとめ

今回は、グーペのデザインテンプレート「Hometown」でのサイドバー編集について。デフォルトのパーツと、追加パーツの位置を入れ替える方法をお伝えしました。Hometown以外のデザインテンプレートでは若干内容が変わってきますので、（繰り返しになりますが）別のページを参照してください。