2023/1/11でブログ開設から1年が経つ。えらい。
特に振り返るわけでもなく、次の1年のためにサイトデザインを一新したので今回はそういう話。
軽く作る流れも紹介しているのでこれからスキンを自作したいって人は同じく初心者である私でどこまでやれるのかの参考にしてくれ。
完全あまめのぐ仕様のスキン
あまめのぐ(当サイト)のためだけに今回は作成した。例えば一般的なブログには存在するプロフィール欄は使う予定がないのでその部分には一切手を加えてない。
様々な利用バリエーションが想像されるボタンは外部サイトへ飛ぶためだけを想定したデザインになっていたり。(フロントページのボタン)
とても一般に公開できるものではない。汎用性がなさすぎる。
また”動けばいい”理論のもとなので私の環境で見た限りで想定した見た目になっていればそこまでの記述しかしていない。ブラウザの違い、解像度の違いなんて全く考慮されていない。
CSSの記述も素人の自分で見てもわかるくらい汚いが無視した。なぜなら動いてはいるから。
なので今回はこういったフォームも用意した。些細なことでももし変な表示があれば報告してほしい。絶望的な個人のセンスによる仕様という場合もあるが。
シンプルに
デザインセンスはほとんどないので、下手なことせず白とテーマカラー数色だけ、動きもシンプル、簡素なものに仕上げた。
なによりも、見にくいということはないようにした。
オリジナリティが十分に生まれているかは微妙だがとにかく被ることはなくなった。
一年経ってもサイトのロゴやアイコンなどはなんのアイデアも浮かばなかったので新しく用意できていないのが心残りだが今後もちょくちょく更新していくつもり。
サイトの大まかな変更点
見た目以外のサイトの変更点をここでお伝えする。
活動先一覧をフロントページに
活動先の、いわゆるリンク集のページがあったのだが、フロントページにしてしまった。
amameno.netを開くといきなり活動先一覧である。
これがホームページ、またブログサイトとしていいものなのかは微妙だけど活動先一覧のページはそもそもブログとは別にホームページを作成しようとした理由なので当初の目的どおりではある。
イラストページの新設
これもホームページでやりたかったことの一つ。
イラストを抜粋して載せておくGallery(ギャラリー)はポートフォリオ的に使おうとしている(求められる予定もないけど)ほか、今まで心の内にしまって公開されることのなかったセルフ解釈を密かにここで公開する場にもしてやった。
ギャラリーだけじゃイラストページを作る理由がないためガイドラインのページと現状募集すらしてない依頼ページまで作成した。Guidelineじゃ長いからTeamsにしたけどネイティブ的に違和感あるのかな。
そんなところ。
最強無料テーマCocoonのいいとこだけ吸う
このホームページが成り立っているのは言わずもがなWordPressのおかげなのだが、見た目や内部情報の部分の根幹となるのがテーマと呼ばれるもの。
テーマは世界の有志が無料から有料まで様々公開しているのでそれを使わせてもらうという形になる。このサイトで使っているテーマは国産、無料、最強のCocoonである。
最初はテーマを自作してやろうかと思ったけど見た目の機能以上に、SEOの設定など内部情報や管理画面の充実などとても現実的ではないために断念。Cocoonのいいとこだけ吸って見た目だけ変更しよう、というのがスキンの自作。
もちろん公式も奨励しておりでテンプレートまで用意してくれている。ありがたい。
Cocoonの利用者の多さの利点と一番の欠点
Cocoonの利用者は多い。無料とは思えないほどの質の高さ、機能の充実さ。これ一つあればブログ執筆に不自由しないからだ。
利用者が多ければ情報も多く集まる。不明な点、こうしたい！と思ったことも「cocoon ○○」で検索すればスグに答えが得られる。初心者にもオススメ。
ただ利用者の多さが一番の欠点となるのが見た目である。
多くのCocoonユーザーがデフォルトに入っているスキン(デフォルトに入っている種類もかなり多い上に更新されていくのだが)をそのまま使っているためにサイトのデザインがほぼ一緒なんてこともあり得る。
もちろんデフォルトで入っているスキン自体が悪いわけではない。公式にも認められた秀逸なスキンで、どれも使いやすい。
ただ、たまに被る。被らなくても同業者にはなんとなくわかるからCocoonだな、と変な探りを入れられたりである。
なにを隠そう私もデフォルトで入っていたスキンをほぼ未改造で使っていたところ同じスキンを使っている、似たジャンルのサイトに出会ってしまい、これはオリジナリティが危ないと、スキン作成を思い立ったというわけである。
ちょびっとなら自作までしなくても
追加CSSという機能があるので、見出しの色を変えたいだとか、いらない要素をちょっと消したいだとかの改造は追加CSSの部分に書き加えれば適用されるので簡単。
既に設定されているものをここで上書きする感覚。
今回はガラッと変えたいので一から自作する。
簡単な制作の流れ
ここではホントに軽くしか説明しないがスキンを自作しようとしてる人以外にはわけわからん記事なので飛ばしてくれ。
かといって自作しようとしてる人に対しては詳しいやり方は調べてくれとかいう微妙さ。
軽い気持ちで読んでほしい。
ローカル環境にWordPressを導入する
制作にあたっては実際にそのスキンが適用されたサイトを見ながらになるが、今現在公開しているサイトでテストするわけにもいかないので、パソコン上にパソコン上でしか動かない環境を構築する。
方法はいろいろあるのだけど今回はLocalというサービスを使用した。たぶん一番わかりやすい。
CocoonとCocoon Childをインストールする
先程導入したWordPressは素のWordPressなので、テーマもデフォルトのまま。
Cocoonと、加えてCocoon Childをインストールする。Cocoon Childは子テーマと呼ばれるもので、中のファイルがCocoonの更新の影響を受けない点で必須。
私も最初Cocoon直下でスキン作成中にCocoonの更新が来てスキンフォルダごと削除されてしまった。
Cocoon Childの下でスキンを作っていくことになる。
スキンのテンプレートフォルダをコピペして新たに作るとWordPressの管理画面からスキンが選択できるようになるため適用させる。
後はそのフォルダ内のstyle.cssをいじって保存してサイトの更新ボタンを押すとちゃんとCSSの内容が反映されている。
いじってCtrl+S、F5の繰り返し。
テンプレートスキンの改造品とも言える
一から自作するとはいっても[スキンなし]のCocoonに手を加えて自分好みにしていくだけである。
先述の追加CSSを大量に行う、大雑把に言えばそれだけ。多分今回作成したスタイルシートを追加CSSをにコピペすればだいたいはそのまま適用されるはず。
なにも難しくない。
CSSの情報なんてインターネットの海で大陸になるほど溢れてるので見よう見まねでやればいいだけ。コピペOKならありがたくそうすればよい。
覚えておくべきは検証モードだろうか。Chromeを使用しているなら、サイトのコンテンツ上で右クリック、一番下の検証というボタンを押せばそのコンテンツを表示するためのHTML、CSSの情報なんかが細かく出てくる。
これで要素の名前、現在適用されているCSSの内容なんかが判明するから同じように書いていけばいい。
このサイトにもよくお世話になった。CSS辞典みたいなサイト。
アップロード
完成したらFTPだのFFFTPだのでフォルダごと使用しているホームページに送って、管理画面で適用すれば完了。ローカルで見た時と若干違ったりする部分があれば適宜追加CSSだとかで調節しよう。
スマホでの確認も忘れずに。
後から自作したCSSに変更を加えたい場合は書き換えた新たなCSSを作成して再度送ることで上書きしてやればいい。
適宜更新
使っていく上で感じた不満次第でちょくちょく予告なく更新はされていくだろう。大まかに変更するのはとりあえず一段落付いた。
では一年、あまめのぐをありがとうございました。また一年よろしくお願いします。
