※モバイル機器のみ作動→PC表示に切替 モバイル表示に切替

【Volar】に搭載されてるオリジナル機能に関してはデザインモードではなくデフォルトの編集画面でのご利用を前提としてます。

特に記載がない限り、ご紹介する機能は【Volar】及び【Volarデザイン】に共通搭載となります。

【Volar】は自在にベースカラーが変更可能

キャプチャ画像

SIRIUSテンプレート【Volar】のベースカラーは、設定で瞬時に色を変えられます。

 

そのため”サイトカラーが気に入らない”からといっていちいちテンプレートを交換する必要はありません。

 

設定可能なカラーはカラーホイールから選択できるので実質無制限(色)になります。

(※16進数によるカラー値の直接入力も可です)

 

また通常は色違いのテンプレートに交換するとカスタマイズした各HTMLテンプレートは元に戻っちゃいますが、色をリアルタイムで変更できる【Volar】ならその心配はありません。


万能…ではないです

【Volar】はどのテンプレートもベースカラーに指定できる色は実質無制限ではあるんですが、色の組み合わせによっては多少の弊害が生じるケースも出てきます。

 

たとえばテンプレートによっては”見出し”の背景色にベースカラーが設定されててその”見出し”テキストカラーが白という場合があります。

 

ここでベースカラーを薄い色に設定すると白の見出しテキストが見にくくなるという現象が生じます。

 

こういった場合はスタイルシート(【テンプレート】→【スタイルシート編集】)でフォントカラーを変更することで対応は可能です。

(※変更方法はマニュアルサイトに載せてあります)

 

ベースカラー変更に伴い連動して変わるもの

ベースカラーで統一表示される主な箇所は以下の通り。

  • 各見出しレベルの背景色やボーダーカラーなど(※固定されてるものを除く)
  • サイドメニュー(SIRIUSでは”メインメニュー”という呼称)タイトル周りのボーダーカラーや指示アイコンカラーなど
  • リスト形式の先頭アイコンなど
  • その他、よく見ないと気づかないところもいくつか

 

ベースカラー変更でも変わらないもの

反対に自動で色が変わらないのが”画像”で作られたアイコン等です。

 

SIRIUSの各テンプレートはそれぞれ(ベースカラー)10色分のテンプレートが用意されてます。

 

その中で用意されてる画像は基本的に共通の画像になるんですが、中にはテンプレートの色に合わせて作られてる画像もあったりします。

 

それが”ポイント1,ポイント2...”といったポイント画像。

 

当サイトで使ってる【Volarデザイン】クールは、たまたま【新】デフォルトテンプレートのcyan・2カラムをベースにして構築したため、ポイント機能を使おうと思ったらサイトカラーにどの色を指定しても(下に表示してあるような)”cyan”系で作成されたポイントカラーで表示されてしまいます。

 

アイコン背景色が”cyan”色固定のポイント1
アイコン背景色が”cyan”色固定のポイント2

 

言い換えれば”ポイント画像を使わない”というのであればベースカラーは実質無制限に設定できます。

 

【Volarデザイン】テンプレートクール・プレーン・アートレス)に関しては、こちらで指定したベースカラー(15色 or 18色)を指定することでベースカラーに合わせて作成したカラー別ポイント画像が自動表示されたり、フォント色や背景色などもベースカラーに合わせて最適化表示されるようになってます。

 

各DEMOサイトでベースカラー別のサンプル画面が確認できます。

ちなみに当サイトは【Volarデザイン】クールを使用しており、ベースカラーはブルー(カラーコード:#6588a3)を指定してます。

サイトカラーの変え方

ベースカラーとなるサイトカラーの変更は、【サイトプション】→【サイトデザイン】→【背景・文字色の設定】『サイト説明文の文字色』で指定します。

 

キャプチャ画像

 

『サイト説明文』というのは、【サイト全体設定】→【サイト説明】に書いてあるテキストのことで、デフォルトテンプレートや角丸テンプレートでは、ヘッダー画像上にテキストで表示されます。

 

キャプチャ画像

 

経験上、サイト説明文を表示させると邪魔になることが多く、あまり使ったことがありません。

 

そこで今回ベースカラーの設定用として使わせてもらうことにしました。

 

これに伴い、【サイトプション】→【サイトデザイン】→【文字サイズ・文字の位置】で、『ページタイトルの位置/表示』『サイト説明文の位置/表示』の欄はどちらも”非表示(HTMLから削除・推奨)”にしていただく必要があります。

 

※この指定はSEO的には何の問題もありません。

(SIRIUS側でも”推奨”になってます)

 

キャプチャ画像

 

上記設定により、SIRIUS付属のシンプルなヘッダー画像をそのまま選択&表示した場合は、ヘッダー画像上にサイト名やサイト説明を表示することができないため、とても殺風景なヘッダー画像になってしまいます。

 

たとえばコチラ↓はSIRIUS付属のヘッダー画像の1枚。

(※ヘッダー画像上にサイトタイトルやサイト説明文をテキストで表示させることを前提に作られたヘッダー画像かと思われます)

 

キャプチャ画像

 

もしもヘッダー画像上にロゴ画像やサイトタイトル、あるいはサイト説明文を表示させたいのであれば、テキストではなく画像としてヘッダー画像に直接埋め込むなどの加工作業が必要になってきます。

 

コチラが加工後のヘッダー画像サンプルです。

 

キャプチャ画像

 

もっとも、SIRIUSで作られた(とおぼしき)ウェブサイトをみてると、殺風景なSIRIUS付属のヘッダー画像上にサイトタイトルなどのテキストをそのまま表示させておくようなサイトはあまり見たことがありません。

 

そういう意味ではちゃんとしたヘッダー画像を作った方がサイトの見栄えも高まると思えます。

 

またヘッダー画像をあえて使わず、わざとシンプルなウェブサイトにして見やすさを優先させてるサイトも数多く見受けられます。

 

この辺はサイトで扱うジャンルにもよるでしょう。

画像編集ソフトは以前は高価なものが多く手が出しにくいものでしたが、最近は無料のソフトや安価な製品、さらには無料のオンライン画像編集ツールなども出てきてかなり敷居が低くなってます。

 

使い方もネットで検索すればいくらでもヒットするので使い方に困るということはないでしょう。

 

無料ソフトで有名なのはGIMPあたりでしょうか。

 

有料ソフトならAffinity Designerなんかがおススメです。

定期的にやってる50%OFFの時なんかに購入すれば3,000円程度で買えちゃいます。

 

無料のオンライン画像編集ツールであれば「オンライン 画像編集」とかのキーワードで検索してみてください。

「PIXLR EDITOR」や「befunky」や「Fotor」「Canva」などが比較的有名です。

(オンラインツールは英語版が多いですが簡単な編集作業であればさほど難しくはありません)

SIRIUSテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください。
 この記事をシェア 
キャプチャ画像