新管理画面では、サイドバーに挿入する「フリースペース」が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