【忍者ブログ】固定ページのサイドバーが崩れる!テンプレートをカスタマイズ編集で直そう

忍者ブログのページ機能で、サイドバーがなくなってしまう問題について

 

 

日々の作業やお勉強、お疲れさまです!

元社畜ゲーマー姉弟のアネオトです。

 

 

忍者ブログをいじっていたら、
『ページ』機能で右サイドバーが空欄になってしまい
困ったので、解決策をメモします。

 

あなたが同じところで困っていたら、
これがお役に立てれば嬉しいです!

 

 

テンプレートのHTMLをいじるので、
ちょっと勇気がいるかもしれませんが、
やってみるとカンタンなので大丈夫!

 

忍者ブログの固定ページ機能とは?その特徴

 

忍者ブログには、通常のブログ記事のほかに
URL固定の『ページ』を作成する機能がありますね。

 

 

日付の新しい順に表示されるブログ記事と違って、
単独で作れる固定ページとなります。

 

 

icon-file 『ページ』がブログ記事と違う点
  • カテゴリーがない
  • 投稿日時の設定もない
  • コメントを受け付けない
  • 記事一覧に載らない
  • 「続きはこちら」ボタンで全文を読ませる機能がない
  • ページャー(「次の記事へ」「前の記事へ」リンク)がつかない

 

 

また、忍者ブログのテンプレートによっては、
上部ヘッダーメニューの中に
固定ページへのリンクが生成される
デザインもあります。

 

 

さて、そこまではいいんですが……

 

 

 

 

問題はコレ!右カラムがごっそり消える

 

テンプレートによっては、固定ページの
サイドバーが消滅してしまうものがある

と気づきました……!!

 

 

icon-arrow-circle-downこちらのサンプルは、
忍者ブログ デフォルトテンプレートです。

 

忍者ブログのブログ記事画面のプレビュー

 

 

これが、固定ページ機能だと……
右側ががっぽり消えます!

 

忍者ブログの固定ページ機能のプレビュー画面。テンプレートによってはサイドバーがない

 

これはテンプレート作成者さんが、
よかれと思ってそうしてくれているのかな?(笑)

 

 

アネオトの場合は、固定ページにも同様に
右カラムのサイドバーが欲しかったので、
無理やりテンプレートの内容をいじってみました!

 

 

 

 

 

サイドバーを表示させる解決手順

 

ズバリこんな方法で直します。

 

「通常のブログ記事」で正しく表示されている
サイドバーのコードをコピーして、
「固定ページ」時のおかしなサイドバーのコードに
ペーストして上書きしちゃう!

 

 

それでは、順を追って説明していきますね!

 

 

 

1. テンプレート編集画面へ

 

忍者ブログの管理画面 > デザイン > PC用テンプレート

 

使用中のテンプレートの『修正』ボタンをクリック。

 

 

 

するとこんな画面が出てきます。

 

忍者ブログのテンプレート編集画面。縦向きボタンをクリックで表示が切り替わり、コードが編集しやすくなります

 

左側の『HTML編集』欄をいじっていきますよ!

 

 

狭くてやりにくかったら、
上記画像のとおりに表示切替ボタンを押したり、
枠をドラッグして拡大したりしてみてください。

 

 

icon-exclamation-triangle 念のためご注意!

間違えたら怖いので、現時点でのコード内容を
丸々コピーして、メモにとっておきましょう!

 

そして、操作のあとに表示が崩れてしまったら
すぐに元のコードに戻しましょう。

 

 

 

 

2. コードの中から目印「pluginBlock」を検索

 

キーボードのctrlFを押すと、
ページ内検索バーを呼び出せますので、
pluginBlock」と入力してenter

 

 

icon-lightbulb-oこのpluginBlockと名付けられたdivタグが、
サイドバー部分のコードにあたります。

 

 

pluginBlock」は複数あると思いますが、
<!–if_not_static_page–>のすぐ下にあるもの
を見つけだしてください。

 

忍者ブログのテンプテートHTML編集画面。PluginBlockというクラス名を検索して見つけます

 

 

 

 

3. 正しいサイドバーのコードをコピー

 

<!–if_not_static_page–>から
<!–/if_not_static_page–>の間

全て選択してctrlCでコピーします。

 

 

※「_not_」がある方です!
ややこしいですが<!–if_static_page–>と
間違えないように注意!

 

忍者ブログのテンプレートHTML編集画面。if_not_static_pageという名前で囲まれた中身のコードをドラッグで選択し、コピーします

 

 

icon-lightbulb-o<!–if_not_static_page–>で囲まれているのが、
「固定ページじゃない場合」に表示する内容。
つまり「通常のブログ記事ページの場合」に
表示されるサイドバー
の内容になります。

 

 

※テンプレートによっては、もっと下へスクロールすると
また別の<!–/if_not_static_page–>があるかもしれません。

 

※検索で見つけた「pluginBlock」から一番近い
<!–/if_not_static_page–>までにするようご注意ください。

 

 

 

 

4. おかしなサイドバーのコードへ上書き貼りつけ

 

<!–if_static_page–>から
<!–/if_static_page–>の間
を削除し、
代わりに先ほどコピーしたコードを
そのままctrlVでペーストします。

 

※今度は「_not_」がない方です!

 

忍者ブログのテンプレートHTML編集画面。if_static_pageという名前で囲まれた中身のコードを削除し、先ほどコピーしたコードを代わりにペーストします

 

 

icon-lightbulb-o<!–if_static_page–>で囲まれているのが、
「固定ページの場合」に表示する内容という意味。
これが今までうまく表示されなかったサイドバーのコードです。

 

 

 

書きかえが終わったら、
『データ保存』ボタンで反映し、修正完了です!

 

 

正しくできていれば、このようにちゃんと
サイドバーが表示されるようになったはず!

 

忍者ブログの修正した固定ページ機能のプレビュー画面。サイドバーが表示されました

 

 

中にはこの方法が効かないテンプレートも
存在するかもしれませんが、
忍者ブログの公式テンプレート複数で、
上記の解決策を試して確認済みです。

 

 

お力になれたら幸いです。

 

ではでは、最後まで読んでくださってありがとうございました!

icon-angle-double-down

ライフワークの始め方ガイドを準備中!

 

あなたにとっての趣味のような仕事
略して「趣味ビジネス」を実際に作ろう!
(オープンまで楽しみにお待ちくださいませ)

 

プレゼントコンテンツ、カミングスーン

あわせて読みたい

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です