スポンサーリンク

もっとCocoon

前回の記事、

から、10日が過ぎ。カミさんから「wordpressはデータベースじゃないよ」と言われた。「あれ、そう言ってなかった?」「言ってない」。
で、何やらPHPでMySQLを……とか言ってますが、良く分からないんで、とりあえず今のところ「WordPress+Cocoon」使えてるからまあ良いか。いや、CSSも含めて、そのあたりはおいおい学ぶとして。 “老い老い” か。

サイトのデザインを考えるにも記事がないと話にならないので、まずは毎日記事を書いた。そんな10日間だった。
12話ほど書いたところで、いよいよデザインをつめていこうと思うわけ。

ブログの構成は

まず、各部の名称から。

ヘッダーグローバルナビメニューアピールエリアメインカラムサイドバーフッター……なんて、あたりまえの事なのかもしれないけど。ちょっと待ってくださいよ。メインカラムは、ボディーとかコンテンツと呼ぶこともあるようだし。そもそもメインカラムの「カラム(column)」は「列」って意味で。だったら、サイドバーじゃなくて、サイドカラムとか、右カラム、左カラムにするとかしていただければ、もっと早く理解できたかも。
カルーセルと呼ばれるクルクル回る仕掛けもあるらしい。回転木馬という意味らしいけど、カルーセルというとどうしても「麻紀」のイメージの方が強く、まだ手をつけていない。

で、問題はウイジェット。これがなんなのかを理解するのが僕には難しかった。
これが、Cocoon設定ではなく、WordPress側の外観メニュー内にあるし。

こうして並べて見ると、なんとなく理解できるけど。いろんな機能がある部品と言ったらいいか。いやまだ良く理解できてない。

スマホで見ると

では、サイドバーにどのウィジェットを入れようか。
なんだけど、グローバルナビメニューとサイドバーは、スマホで見ると畳まれてアイコン化してしまう。というか、スマホで見やすいようにアイコン化してくれる。

畳まれた後、どこに表示するかはCocoon 設定モバイルタブで選べる。
「フッター・モバイルボタン」にしてみた。

フッターモバイルボタンの設定方法
スマホ画面のフッターに表示されるスライドインメニューボタンのカスタマイズ方法の解説です。

このあたり、かなり細かく設定できるみたい。ネットで検索すると説明が出てきてくれて、そこがCocoonの良い所。Cocoonにして良かった。

画面いろいろ

そもそも、デスクトップPCだってモニタのサイズはいろいろで。今は24インチでフルHD(1920×1080)あたりが標準か?
ノートPCだと14インチか15インチで、やっぱりフルHD(1920×1080)か。
画面サイズと解像度はまた別というところもポイントですな。
同じ解像度フルHD(1920×1080)でも、14インチだと文字は小さくなってしまう。
読めなければ、Windowsの設定で125%くらいに拡大して使っているかな。
と、環境は人それぞれなんで、webサイトのデザインをどうするかって、難しいですよね。
となると、この際、スマホで見るのがメインと考えた方が良いのかも。

で、スマホにしても、画面いろいろ。縦横比もいろいろだからなぁ。
今SONYのXperiaなんか1080×2520とかすごい縦長、21:9ですよ。
デザインは難しいなぁ。
印刷物と違って、公開したあとも試行錯誤できるので、ボチボチやっていこう。
まずは、記事を書く、毎日書く。と。

やっぱシンプル

というタイミングで、『KAZI online』が始まった。
こちら、

舵オンライン│船遊びの情報サイト(舵社)
舵オンライン(KAZI online)は、『Kazi』、『ボート倶楽部』を刊行する舵社が運営する、船遊びに関する情報サイト。ヨット、ボート、ボート釣り、クルージング、ボート免許、カヌーなど、プレジャーボートや海に関するさまざまなニュースをお届けします。

そもそも、自分のwebサイトを作ろうと思ったのは、月刊『Kazi』の連載が1つ終わったからなんだけど。なら、やっぱネットだろ、と思ったわけで。『Kazi』の方でも同じように考えていたようで。……って、話は聞いてたんですけどね。
そして、いよいよ『KAZI online』オープンってことで、編集長から「宣伝してね」と言われたので宣伝しときます。こっちが宣伝して貰いたいくらいなんですけどね。

『KAZI online』、そのデザインは……シンプル。
デスクトップPCで見るとなんかシンプルすぎてボヨーンとしているのは、サイドバーが無いからか。そうか、どうせスマホで見たらサイドバー無いんだから、これで良いのか。
なんたって『KAZI』は専門のデザイナーをたくさん抱えていて、良い写真も売るほどあるんだから、そりゃ目を魅くページが作れますよね。

うちにはあんなに良い写真無いし、デザインセンス無いし。俺にできるのは原稿書きだな。原稿書こう。毎日書こう。

で、『KAZI online』の “KAZI” のロゴが、雑誌『Kazi』のロゴと違うの、気がつきました?

コメント

タイトルとURLをコピーしました