コンテンツの横幅設定とTwitterのタイムライン追加

Pocket

丁度一年前、2021年の5月に31.5インチの液晶モニターを買ってMacBookProの外付けモニターとして使うようになった。ワークスペースが二回りくらい大きくなって便利になり、肩凝りもかなり改善したのだが、Webブラウザーのウィンドウを目一杯拡げていると、ブログ以外のコンテンツも横に目一杯拡がって表示されるようになった。さすがにちょっと、これは両端が見づらい。

Yahoo!Japanの横幅は最大1000ピクセルくらい、Facebookの横幅は最大1200ピクセルくらい、Twitterの横幅は最大1250ピクセルくらい、BoardGameGeekの横幅は最大1500ピクセルくらいの設定になっている。大体、1200ピクセルを超えると視線を左右に動かさなければ両端が見づらい。加えて、これらのサイトは2コラム・3コラムになっていて端っこはメニューや広告になっているので、コンテンツ自体の横幅は更に短い。

逆に、ブログ(WordPressの公式テーマ)はTwenty FifteenにしろTwenty Twenty-Twoにしろ、コンテンツの横幅が狭すぎる。

そこでまず、PHPラボのCSSをいじって横幅を最大1024ピクセルに設定してみた。割といい感じになったので、次にブログ(Twenty Twenty-Twoの子テーマ)のJSONをいじってコンテンツの横幅を拡げようとしたのだが、CSSやPHPと同じ感覚でコメントを入れてしまっていてJSON自体が無効になってしまうというド間抜けなミスをやらかした。改めてJSONをいじり直し、コンテンツの横幅を最大800ピクセルに拡げた(縦長の写真が2枚横に並ぶようになった)。

次に、ウィキのCSSもいじってみたのだが、メニュー+コンテンツの2コラムのまま横幅を縮めると、ちょっと左右のバランスが悪い。PukiWikiは1.5.3で3コラムのレイアウト機能が追加されていたので、これを機会に3コラムに変更することにした。が、その3コラム目には一体何を表示するべきなのか。

思案した結果、Twitterのタイムラインを表示することにした。既存のプラグインを使って表示しようとしたが、1ツイートしか表示しない仕様な上、そもそも左右のサイドではちゃんと表示されないので、結局プラグインは使わずスキンをいじって右サイドにタイムラインを表示するようにした。

ウィキでTwitterのタイムラインを表示するようにしたので、ブログの方でもTwitterのタイムラインを表示することにした。ブログは1コラムなので、末尾に表示するようにした。

Pocket


投稿日

カテゴリー:

投稿者:

タグ: