プラグインで3カラム化に挑戦

投稿日:

今回は3カラム化カスタマイズの最終回、プラグインを利用しての3カラム化を試みていきます。

…の前に、前回書いた記事の補足から。

 
前回の記事の中で、スタイルシートの記述の、
"width: 54.0%;"
の"%"がしゅごい!みたいな事を書いたような気がしますが、メリットばかりでは無かったので、その辺を改めてまとめてみます。

まずはこのコードにより、記事エリアの幅を割合で固定できるようになり、残りの幅(上記の例では46%)が右と左のサイドバーエリアに均等に割り当てられているのだと思います。
このおかげで、現在もやり方の分かっていない右サイドバーエリアの幅の変更が(一応)可能となりました。
ここまではまぁメリットと言っていいでしょう。

そしてこの"%"により、"px"とは異なりモニターサイズによって変化するサイト幅に合わせて、各エリアの幅が上記の割合に調整されるため、表示上のバランスが良くなったんじゃないか、とも書きました。
問題はここです。

"%"は常に設定した比率に各エリアを調整してくれるのですが、ウィンドウサイズをどんどん縮めていってみても、その比率が維持され続けるんですよね。
PC・タブレットサイズくらいまでならまだ良いかもしれませんが、スマホサイズのウィンドウになってもまだ記事エリア56%・左サイドバー22%・右サイドバー22%の比率が維持されてました。

つまり、スマホのちっさい画面でも3カラムのまま表示されてしまうんですね。
"%"だと、非レスポンシブウェブデザインになってしまったんです。
参考にしたサイトが4年前のだったのでコレはしょうがないですかね。

 

さて、それでは本題に入りまして。
AFFINGER4にカラム数変更のプラグインを使用する事でサイトを3カラム化できるのか?

もったいぶるような事でもないので結果を先に言ってしまいますと、3カラム化できませんでした
というか、プラグインでできたのはコンテンツエリア内を3カラムにして記事を3分割表示するだけでした。
AFFINGERならこんなのタグの3分割機能を使えば簡単にできそうな気もしますが。

ま、それでも今回のプラグインを導入するにあたり、使えそうなのを探して、比較検討して、日本語での使い方を調べて…と、けっこう時間かけて慎重にやってきたので、せっかくなので試したプラグイン3種を軽く載せておきます。

 
Column Shortcodes
投稿・固定ページにショートコードを追加しカラムを作成。
※記事エリア内のみ。

Shortcodes by Angie Makes』(旧名『WP Canvas – Shortcodes』)
ビジュアルエディターにカラム変更ショートコード他、多機能追加。
※記事エリア内、及び[AFFINGER管理]よりトップページ上部へも可。

Page Builder by SiteOrigin
エディター又はウィジェット画面から各カラムにウィジェット挿入可。
※投稿・固定ページ、ウィジェット配置可能エリアを3カラム化可。

 
ホントに簡単にですが、まぁザッとこんな感じです。

「Column Shortcodes」に関しては、更新もしばらく止まってるようですし、これを使うぐらいなら「Shortcodes by Angie Makes」の方が良いと思います。たぶん上位互換かと。

この「Shortcodes by Angie Makes」を試用している時に気付いたんですが、記事エリアだけじゃなくてサイト全体を3カラムにするには~と探して辿り着いた先にあった[AFFINGER4管理]のトップページ「挿入コンテンツ」。
ここのエディターに入力した文は最新投稿一覧の上部に表示されます。

ずっとスマホ用のサイトのキャッチフレーズを表示する場所を探していたので、ここは使えるかもしれません。
位置としては[トップページ上部ウィジェット]と被るんですが、あちらは"nopc"(「PCに表示しないボックス」タグ)を使うとPC表示時に入力した文のスペースだけ空欄ができてしまったんですよね。
でもここの「挿入コンテンツ」には"nopc"がちゃんと使える。

今はスマホ用キャッチフレーズは暫定で[広告・スマホ用上部のみ]ウィジェットを使っていますが、こっちはこっちで変なテキスト表示エリアが入り込んでしまっているので、どうにかしたいとずっと思ってたんですよね。
後々考えていかないといけない部分なので、自分用のメモとして。

 
そして最後は「Page Builder by SiteOrigin」。
これは上記2つのプラグインとは使い方が大きく違いまして、ビジュアル・テキストエディターに加えて「ページビルダー」という3つ目のエディターが追加されます。
これを使用してカラムのカスタマイズ等を行います。

ページビルダーでは各カラムにウィジェットを設置する事ができるのですが、その代わりに従来のエディターは利用できなくなります。
これを利用したい場合は、別途『SiteOrigin Widgets Bundle』というプラグインをインストールする事で、ウィジェットの「ビジュアルエディター」が有効化され、使用できるようになるみたいです。

 

というわけで、先月下旬ぐらいからやっていたAFFINGER4製サイトの3カラム化、の計画はこれにて終了。予想通り失敗でしたね。

正確には3カラム化そのものは大して難しくはなかったんですけどね、とにかくウィジェットの表示がおかしい。これはもうどーしよーもない。

3カラム化実装できなかったらAFFINGER4使うのやめる!!と言ったような覚えがありますが、WordPress導入前に調べていたあることを思い出したんですよね。もう5ヶ月以上前か。

WordPressの特長の一つに、テーマの変更が容易という点があったんですよね。
テーマ画面から使いたいテーマをただ有効化するだけ。

そのこともあり、このまま3ヶ月以上カスタマイズを続けてきたAFFINGER4のサイトを未完成なままにして別のテーマに切り替えて再び何ヶ月もカスタマイズをし直すよりかは、このままAFFINGER4でまずはこのサイトを完成させ、運営をしながら裏で新しいテーマへの切り替え準備を進める、ってした方がぜったい良いと思い直したんですよね。

そのためには新テーマのテストを行うローカル環境の構築が必要になってくるだろうし、AFFINGER4に施した今までのカスタマイズや設定がテーマを無効化しても保持されるのかとか、また諸々の問題は出てくるのでしょうが、いつも言ってますが、兎にも角にもまずは本公開!これを目指します。

 
ほんじゃ、一応はこれで私のしたかったカスタマイズの山場は越えたことになります。
いや、越えてはいないか。大きく迂回したってトコ?

次回は…
どうしよ?なんか細かいカスタマイズするのとかすっごい久々なので、なにから手を付ければいいのか覚えてないや(;´д`)

とりあえずはAFFINGER4を使い続けることにしたんで、アップデートしときますかね。先週出たver20170606か。
今回のアプデは私にとってもかなり有用な物が少なくないんで、いろいろと使いこなしてみたいですね~
特に「モバイル用ロゴ」!これもスマホ用キャッチフレーズに使えるかも?

-ウェブサイト作成

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