サイトテーマを使ってもオリジナリティは出したいから
このサイトはHUGOという静的サイトジェネレーターを使っている。また別に開いているサイトではWordpressというCMS(content management system)を使っている。どちらもある程度の外観はテーマを選ぶことで決められる。特にHUGOのサイトの方はかなり見た目がテーマに依存する。そこでのデメリットは同じテーマのサイトは似てしまうことだ。 このサイトでつかっているテーマはMainroadというテーマである。 https://github.com/Vimux/Mainroad シンプルなテーマでデフォルトでは赤を基調としている。割と使っている人も多いテーマである。それが故に他の人と同じようなサイトになりがちなのである。例えばこんなサイトたちである。（こんな形で列挙して申し訳ない限りです。）
ぱっと見かなり似ているのではないだろうか。もちろんこれらのサイト制作者様を悪く言ったりサイトを悪いと言っているわけではありません。ただ、似ている。これはテーマの主なデメリットである。 それでもみんながテーマを使うのは簡単にそこそこいいデザインのサイトがつくれて機能性も高いためである。実際に今のサイトをテーマ無しで自分で一からhtmlとcssをカタカタやってたら相当つかれるし時間も食う。テーマ製作者さんたちには頭があがりません。こんなに便利なもの無料で使わせてくれてるんだからね。
もちろん似ていることは悪いことではない。ただオリジナリティは出したくなるものだ。 ということで手軽にオリジナリティを出せる方法を考えてみた。
1 色を変えよう
Mainroadのキーカラーは赤であるがそのままではやっぱりデフォルト感が出る。このサイトでは濃い青になっている。
変え方はhugo.tomlの以下の部分を変えればいい。
[Params.style.vars]
highlightColor = "#2a4073"
指定方法がカラーコードなので原色大辞典などで色を探してみよう。
ちなみに… 私は普段chrome拡張機能でダークモードにしていますが皆さんどうでしょうか。一応自分のサイトはダークモードにしないで確認しています。
2 アイコン画像を設定しよう
このサイトでいうカエルのドット絵のことです。一番上に出てくる画像なのでほとんど確実に目に入り印象にも残りやすいかと思います。
設定方法は画像を static-img に置きます。拡張子はpngとjpgは対応していました。どこまで対応かはよくわかりません。 そうしたらhugo.tomlのこの部分のimage= を書き換えてください。
[Params.logo]
image = "img/flog.png"
title = "kero brog"
subtitle = "生物・プログラミング・ミミズ"
画像は大きすぎると上がスカスカになるので気になる人は気をつけましょう。
ちなみにカエルの絵はこちらのDOTOWON様からお借りしています。ドット絵いいね。
3 ファビコンを設定しよう
ファビコンって何か知ってますか。私はサイトについて自分でつくるまで知りませんでした。ブラウザで開いたときのタブの名前の横にある画像です。あとGoogle検索でサイト名の横にも表示されてます。お気に入りにも表示されたりします。ちっちゃいやつですね。
ファビコンジェネレーターみたいなサイトで手持ちの画像からつくれます。手持ちの画像そのままだと大きすぎたりするのでそのままは使えないんですね。
画像をつくったらこれを static におきます。.icoの画像をここにおいておくと勝手にファビコンになるみたいです。
このサイトのファビコンはアイコン画像と同じくDOTOWON様のカラスです。
雑記・感想
以上思いついた範囲内でのオリジナリティの出し方です。もちろんサイトは文章が重要要素ではありますが人と同じで見た目には気を使いたいよねってことです。イケメンではなくてもいいから清潔感があるくらいをサイトでも目指しています。ごりごりに見た目をいじったサイト作成は大変だし維持、変更も難しいからね。とはいえこの3つをやったところで骨格自体はあまり変わらないのでどこまでオリジナリティがあるのかはよくわかりませんが何もしないよりはマシということで。
時々サイト作成について調べて自分のサイトをいじって見るのが好きです。そういう意味ではサイト作成に向いているのかも。
