見出し画像

baserCMSのbccolumn改築録

本当は少しbaserCMS以外のCMSも研究してみたいんですが、GitHubでPHP製のCMSをサーバーコマンドぶっ叩いてインストールを試みるも、どうも上手くいきません。
あれこれ上手くいかない間に結局baserCMSに戻ってしまったんですが、今回はテーマカスタムの話をしたいと思います。
baserCMS4系をインストールした時、テーマはデフォルトで3つ入っているのですが、その内の1つ、bccolumnの改築録です。

burgerEditorと相性が悪い・・・

bccolumnのテーマって、結構モダンな1カラムテンプレートになっています。
第二階層へのドロップダウンメニューは自動で作成されますし、1カラムのままで良ければ、そうそう大きなカスタムは必要ありません。が、bccolumnには2つほど難点があります。

これがデフォルトの状態です(ピンクになってるところはテーマ設定で色が変わったため)。
難点は大きく分けて2つ。
①スマホだとヘッダーとフッターが途切れる
②burgerEditorと相性が悪い
これは個人ブログの画面で、先にburgerEditorの入っていたサイトの画面です。
なんと、グローバルメニューが・・・崩れます!!(T_T)
実はbaserのテーマにはたまにこういうのあるんですよ。
burgerEditor自体はプラグインなので、そのプラグインと相性の悪いテーマがあるという・・・。
で、スマホだとフッターとヘッダーが途切れる。これもスマホあるあるです。

ヘッダーとフッターを解決

まぁ試験サイトでburgerEditorはなくても良かったので、ヘッダーとフッターをなんとかします。
これはLayoutフォルダ内にあるdefault.phpの<head></head>内に、次のコードを入れれば解決しました。

<meta name="viewport" content="width=1200" />

これがスマホ版で見た画面です。
と言っても私はスマホを持っていないので、カカオトークの入ったiPadで試験的に見たらこんな感じになりました(カカオトークはiPadでスマホ版サイトを見る試験に使えます)。
次に導入したのが、オリジナルSNSボタンです。
導入手順は下記サイトが役に立ちました。
https://requlog.com/self-branding/wordpress/original-share-button/
ここのサイトで「丸っとコピー」と指南してくれているのはあくまでもWordPress用ですから、baserCMSでは一部コードを書き換える必要があります。
それが前回書いたコチラですね。
https://note.mu/century_ohashi00/n/n680a3e551cef
こうしてフッターの隙間を埋めることができ、オリジナルボタンを導入できました。PC版で見るとこうなります。

記事の開始と最後のところに大きめのSNSボタンを置き、フッターの隙間を埋めます。bccolumnは1カラムですから、ウィジェットはフッター直前に来ます。ローカルナビゲーションを置いているとは言え、多分これ直帰率高いですね。
baserCMSのテーマを扱っているクリエイターの一つ、小桃デザインは、元のデザインが全体的にオシャレなので、あんまりカスタムしまくる必要は無いかなと思っています。
逆にいじりすぎても変になりそうだし・・・。
まぁ、あとは最後にロゴを変えるだけですかね。
一通りやるべきカスタムは終わった感じになりました。

ご一読ありがとうございます。お読みいただいた記事がもし無料、あるいは価格以上の価値があると思ったら、フォローならびに、サポートいただけますと幸いです。