いつもlivedoor Blogをご利用いただきありがとうございます。
カスタマイズ担当の久野です。
本日のカスタマイズは、ちょっと中・上級者向けですが、旧環境からあるデザインの個別記事ページにもサイドバーを表示する方法を紹介します。
カスタマイズ担当の久野です。
本日のカスタマイズは、ちょっと中・上級者向けですが、旧環境からあるデザインの個別記事ページにもサイドバーを表示する方法を紹介します。
1.
ブログの管理画面上部の「ブログの設定/管理」から、左サイドバーにある「デザインの設定」をクリックし、右下の「カスタマイズ」から「個別記事ページ」を編集する画面へ移動してください。
2.
サイドバーに該当する部分のタグを書き込みます。
ここが難しいポイントなので、詳しく説明します。
トップページなどで、サイドバーを表示している部分は、<div id="links">〜</div>という部分です。
この部分を「カスタマイズ」の「トップページ」の編集画面からコピーしてきます。
簡単にトップページの構造を書くと
となってます。
しかし、個別記事の構造は
となっています。
サイドバー部分の<div id="links">〜</div>を追加する為には、トップページと同様に<div class="blog">〜</div>を<div id="content"></div>で囲む必要があります。
4.
修正後は、「この内容で保存する」をクリックして、「全ページ」を再構築してください。
5.
個別記事の表示を確認し、適宜スタイルシートなどの修正をします。
具体的には、コメント入力欄の幅をスタイルシートで狭くしたりします。
今後ともlivedoor Blogをよろしくお願い致します。
ブログの管理画面上部の「ブログの設定/管理」から、左サイドバーにある「デザインの設定」をクリックし、右下の「カスタマイズ」から「個別記事ページ」を編集する画面へ移動してください。
2.
サイドバーに該当する部分のタグを書き込みます。
ここが難しいポイントなので、詳しく説明します。
トップページなどで、サイドバーを表示している部分は、<div id="links">〜</div>という部分です。
この部分を「カスタマイズ」の「トップページ」の編集画面からコピーしてきます。
簡単にトップページの構造を書くと
<div id="container">
<div id="content">
<div class="blog">
</div>
</div>
<div id="links">
</div>
</div>
となってます。
しかし、個別記事の構造は
<div id="container">
<div class="blog">
</div>
</div>
となっています。
サイドバー部分の<div id="links">〜</div>を追加する為には、トップページと同様に<div class="blog">〜</div>を<div id="content"></div>で囲む必要があります。
4.
修正後は、「この内容で保存する」をクリックして、「全ページ」を再構築してください。
5.
個別記事の表示を確認し、適宜スタイルシートなどの修正をします。
具体的には、コメント入力欄の幅をスタイルシートで狭くしたりします。
今後ともlivedoor Blogをよろしくお願い致します。
思ったような『<div id="links">〜</div>という部分』が見つからない。
よくよく考えてみたら、サイドバーとプラグインをごっちゃにしてました。
ということで、各プラグインのタグ文はどこでみられるんでしょう？
これが解れば、フリーエリアプラグインを使って複数のプラグインをひとつにまとめたり、カレンダーを常にトップに表示される個別記事に移動させたりと、随分見た目をよくできそうなんですが。