MENU

【暫定】 フリースペースを増やしてみる

新管理画面では、サイドバーに挿入する「フリースペース」が1つのみ。
以前は、「カスタムプラグイン」が3つあり、サイドバーだけではなく、
記事の上や下にも挿入することができましたよね。

今回は、この「フリースペース」を2つ、3つ・・・と増やしてしまおうというもの。

方法は単純なのですが、HTMLとCSSを多少イジることになるので、
作業をする際は、慎重に行ってください。

 作業を始める前に準備するもの

まずは、「フリースペース」に入れたいブログパーツなどのコード。
これがないと、何にも始まりませんよね(当り前かw)

あらかじめ用意しておきましょう。
そのコードを発行しているウェブサイトのページを表示させたままでもいいですし、テキストエディタなどにコピーしておいても構いません。お好みで準備しておいてください。

 自作「フリースペース」の準備

それでは、自作の「フリースペース」を設置していきましょう。
ここからテンプレートのカスタマイズになりますので、慎重に進めましょう!

(1)同じように設置したいブログパーツなどのコードを準備する。

(2)PCのテキストエディタ(メモ帳・ワードなど)に、以下を貼りつける。

 <div class="sidetitle">フリースペースのタイトル</div>
 <div class="side">
 <div class="sidebody">
  ここに用意したコードを張り付けてください
 </div>
 </div>

(3)コード内の「フリースペースのタイトル」を任意で記述。

(4)用意しておいたコードを「ここに用意したコードを張り付けてください」に記述。

(5)保存する。

これで、自作「フリースペース」の準備は完了です。
では、設置してみましょう。

 自作「フリースペース」を設置しよう

(1)「マイブログを管理」を開く。

(2)上部タブメニュー「デザイン設定」をクリック。

(3)一番下の「テンプレートのカスタマイズ」内、
   現在使用しているテンプレートの「編集」をクリック。

(4)ここからさらに慎重に!!
   「トップページ」のHTML内に、準備しておいたコードを貼る。
   うまく探せない場合は、[Ctrl]+[F]で検索してください。

【右サイドメニュー】

   <div id="links2">
    ここに挿入すると、右サイドメニューの一番上に表示されます
   <%PluginListRight%>
    ここに挿入すると、右サイドメニューの一番下に表示されます
     </div>

【左サイドメニュー】

   <div id="links2">
    ここに挿入すると、左サイドメニューの一番上に表示されます
     <%PluginListRight%>
    ここに挿入すると、左サイドメニューの一番上に表示されます
     </div>

お好みの場所に設置したら、最後に必ず【登録】をクリック。
このとき、プレビューで確認したくなると思いますが、現在の仕様では一度プレビューをクリックすると、正常に保存されないので、【登録】してから実際の表示を確認してください。

同じように、「個別記事」・「アーカイブ」にも貼りつけてください。

うまく設置できましたでしょうか?

この方法で、管理画面の「フリースペース」・左メニュー上下・右メニュー上下、
計5つのスリースペースをサイドメニューに設置できることになります。
一気にオリジナルのサイドメニューができますね♪

今回は以上です。
くれぐれも慎重に作業を進めてください。
途中で混乱してしまった場合も、慌てずにテンプレート編集画面の【キャンセル】をクリックするかブラウザを閉じると、編集が保存されないままになります。
再度、設定しなおしてください。

不測の事態のために、今使っているテンプレートと同じものを予備で用意しておくのもいいかもしれないですね!!

#リニューアルTips

この記事を書いた人