続・STINGERのコードで3カラム化に挑戦

投稿日:

前回の記事でSTINGER PLUS+の3カラム化のカスタマイズ用コードを使用してのAFFINGER4の3カラム化を試みましたが、CSSが一切反映されずこれを断念しました。

その後、他のテーマでの3カラム化のカスタマイズ記事を読み、別の方法での3カラム化に挑戦しようとしていたのですが、その記事を読んでいた中で、気になる物がありました。

 
読んでいたのは「サイドバーの仕組み」という記事。
CSSを反映させるにあたり、その構造がどうなっているのかを解説した初心者向きの記事ですね。

サイドバーってのは最初からサイドにあるわけでなく、スマホで見た時のように全部縦一列に並んでいるそうです。
この本来コンテンツ部(記事エリア)の下に配置されているサイドバーを、CSSで"float"(回り込み)を指定してやる事でコンテンツ部の左なり右へと回り込ませて横並びに表示させている、とのこと。

で、ここからが重要。
このfloatでの回り込みの際、コンテンツ部の幅(width)が広すぎると、サイドバーが回り込むためのスペースが足らなくなり、本来のコンテンツ部の下へと配置されてしまう、と書かれていました。

思い返してみると、ネット上のカスタマイズ記事でも、CSSのコードを記載しているところには、「テーマや環境に合わせて数値を適宜変更してください」等と書かれていました。

 
私が前回CSSが反映されない、と言っていたのはコレが原因だったのではないかと!
反映されていなかったのではなく、反映させるためのスペースがサイト上に確保されていなかったので、それで表面上は何も変化していないように見えていただけなのではないのかと!

そこで試しに、前回の子テーマのstyle.cssへ加えたコードの、"width"の数値をてきとうに減らしてみると、なんとサイトが3カラムになりました!!

 
しかし、ブラウザのブックマークバーを非表示にしてフルサイズで見てみると、なんだか両端に少し空きができていて若干不恰好…

そこで前回も少しだけ手を出してみた[PC閲覧時のサイトの幅]を、デフォルトの1060pxから広げてみると、両端ギッチギチに左右のサイドバーが広がりました。
今度はちょっと広がりすぎですね…

私が今使っているPCモニターは1280px、このサイズだとここの設定は1240pxっくらいがちょうど良く見えますね。

そしてここのサイト幅やウィンドウサイズをいじってみて分かったんですが、どうやらCSSってのは見ているモニターのサイズも影響しているんですね。
AFFINGER4のスタイルシートでもPC・タブレット・スマホ用のサイズがちょくちょく出てきますしね。

私が前回使ったコードはおそらくデフォルトのAFFINGER4のサイト幅よりも圧倒的に大きいモニター、きっと1920pxですね、このフルハイビジョンモニターを使ってる人用のカスタマイズだったんだと思います。
きっと前回の時点でも、大きいPCモニターでこのサイトを見ていたら、すでに3カラムで見えていたんじゃないでしょうか?

私が今使っているのはノートPC、それも10年くらい前の型のを中古で買ったポンコツ。それまで使っていたノートPCが壊れてしまいましてね。とりあえず前のと同じくらいの性能がありゃネットくらいはできるだろうって感じで買った間に合わせです。
まさかこんなのが原因だったとは…

 

さて、ここからは3カラム表示の細かい点を修正していきます。

今回スタイルシートでいじったwidthは"content-right"という物の中に入ってました。
これはどうやらサイトを右から見た時の、右サイドバー+記事エリアの合計の横幅のようです。

カスタマイズ用コードの時点ではここは980px。AFFINGER4のデフォルトのサイト幅が1060pxだったので、残り80pxに左サイドバーを突っ込もうとしてた訳ですね。そりゃキツいわ。

テキトーにいじりながら表示を確認していくと、800pxがちょうど良く見えました。
サイト幅が大体1200pxなので、約2/3ですね。
左サイドバー400・記事エリア400・右サイドバー400pxってバランスですね。

が!1/3もサイドバーエリアに割いてる人見たこと無いですよ!!
両サイドにあるので2/3使っちゃってますよ!
記事エリアほっそいですよ!!

先のcontent-rightを広げれば左サイドバーを狭める事はできるのですが、右サイドバーはそのままなので、非常にバランスが悪い。
しかもブラウザ上のサイドにブックマークバーとか表示させちゃうとサイトの横幅がさらに狭くなり、左サイドバーが回り込むためのスペースが無くなり、記事エリア下へと戻ってしまいました。

この問題を解決する為には、右サイドバーを左サイドバーに合わせてバランス良くwidthを狭める必要があると思うのですが、そのやり方が全く分かりません…

 
問題はこれだけではありません。
左サイドバーに設置したウィジェットの表示がおかしい。すこぶるおかしい。

本来ボタン風になっている物がテキストだけになっていたり、縦並びのメニューに余計な「・」が付いていたり、右サイドバーと同じ物を設置しているはずなのに、デザインがことごとく崩れています…

でもこれは過去にも経験したことがあります。
たしかサイドバー用のウィジェットを広告エリアに設置した時や、ヘッダー画像エリアに無関係のウィジェットを設置した時など、おそらく本来想定されていた使い方と異なる場所にウィジェットを使ってしまった場合なんかにこの現象が起こった気がします。

さらに、代用にならないかと「STINGERオリジナルボタン」でボタンを作ってみても、そのボタンのデザインがサイトの右端まで貫通していってしまう始末。

さらにさらに、「STINGER最新の記事一覧」で最新の投稿記事を並べても、何故か左サイドバーに載るのは最初の1件のみ。2件目以降は記事エリア下に表示されてました。

これらは数あるウィジェットの内の一部ですが、きっと他のウィジェットも試せば試すほどにおかしな点が見えてくるだろうと思います。

正直、こちらの問題に関しては対処法が全く分かりません。
きっとCSSよりももっと前、一番始めの新規ウィジェットの定義からか、はたまたAFFINGER4そのものの仕様の部分なのか…

 

まるで解決できてませんが、今回の記事のまとめに入ります。

ネット上のコードをそのまま使えば、左にもサイドバーを作れて3カラムにすること、それ自体は可能です。サイト幅やモニターサイズに応じて多少CSSをいじるぐらいでしょうか。カスタマイズとしては簡単だと思います。

しかし、その左サイドバーのデザインを整えようとするのであれば、新規に追加した左サイドバーウィジェットだけでなく、使用しているテーマのCSSにも手を加え、デフォルトのレイアウトをカスタマイズし直していく必要が出てきます。

ウィンドウサイズを変更した時、見ている人のモニターサイズに合わせたレイアウト、スマホでの2つのサイドバーの配置などなど…
デフォルトでテーマがやってくれていたことを自分で一から設定しないといけないようです。

いや、自分で一から作るのであれば左右で合わせればいいだけなので、幾分か簡単かもしれません。
しかしこの場合は、元々あるテーマのスタイルに合わせた物を作らねばならないので、より難しいのではないかと私は思います。

テーマごとのこのスタイルシートへのコードがネットとかで手に入ればそれで良いだけの話なんですが、ことAFFINGER4に関してはありません。

なので、自分でコードが書けない、使っているテーマの構造が把握できていない、なんて人では「AFFINGER4での3カラム化のカスタマイズ方法」で情報が手に入らない限り、ウィジェットを正しく表示させた3カラム化は無理だと思います。

 
私はまだ他にも調べておいた3カラム化のカスタマイズ法が一応あるので、折角なので試してみようと思っていますが、もう3カラム化は諦める方向で考えています。
AFFINGER4のレイアウトがいじれないのであれば、おそらく他の方法でも、プラグインを使ったところで結果は今回と一緒なんじゃないでしょうか?

次回の記事はきっと他の方法も試してみたけど駄目だったーみたいな簡素な記事になると思うので、この辺の考えは次回の記事にでも載っけようかなーと。

-ウェブサイト作成

Copyright© ガンプラ気分 , 2020 All Rights Reserved.