WordPress Grazioso（グラツィオーソ） テーマのカスタマイズ（その１）
コンテンツ
Grazioso（グラツィオーソ）テーマについて
WordPressのテーマGrazioso（グラツィオーソ）のテスト版を手に入れたのでVM環境（Ubuntu Server 16.04LTS）にインストールして色々と試行錯誤をしてみた時の備忘録。
Graziosoは有償のテーマなので継続して使い続けるには支払いが必要（19,800円）なのだけれども１０日間の返金保証制度もあるのでとりあえず試してみる事もできる。
※問い合わせサポートに対する返信が全く無いとの声がありましたので確認中の為、リンクを外しています
Graziosoのホームページにはざっくりと以下の様な事が書いてあった。
- フラットデザイン &パララックス効果※
- レシポンシブデザイン
- jQueryアニメーション
- 税込み19,800円、paypal購入に限り10日間の返金保証制度
- 複数ドメインのライセンスあり。税込み49,800円
※フラットデザイン &パララックス効果
１カラムでサイドバーが無いデザインのこと。
サイドバーに広告を貼り付けたり出来ない分、シンプルで写真とかコンテンツを訴求したいサイトには向いている。
パララックスは表現が難しいのだけれども、前後の画像（レイヤー）がずれて動くことにより立体感や奥行きを演出する手法。
海外のオシャレなサイトで見るやつ。
以前このブログでも取り上げたテーマHestiaの大見出しもパララックス効果が使える。
名前について
Grazioso（グラツィオーソ）はイタリアの音楽用語で楽譜に書いてあると「優美に、優雅に」の意味らしい。
なるほど、そうゆうイメージのテーマなのか。
聞き慣れない言葉なので「どういう意味？」と思ったけど納得した。
その他
支払いがpaypalしか見当たらないのがちょっと寂しい。
paypalアカウントは簡単に作れるので「作って下さい」という事なのだと思うがクレジットカードで直接購入ができれば、より親切だと思った。
この記事の範囲
Graziosoはかなり細かい色々な設定が可能なので量が多くなってしまい１記事では収まらなかった。
この記事ではインストールから外観の
- カスタマイズ
- ウィジェット
- ロゴの設定
- テーマオプション（一般設定と外観設定まで）
までとする。
その他の設定は別記事とする。
インストール
WordPressのメニューから外観ー＞テーマから「新規追加」をクリック。
「テーマのアップロード」をクリックする。
zip形式のテスト版を入手していたので「ファイルを選択」をクリックする。
zip形式のファイルを選択して「今すぐインストール」をクリックする。
インストール完了したので有効化をクリックする。
Graziosoテーマが有効化された。
続いて推奨プラグインがあるので「プラグインをインストールする」をクリックする。
推奨プラグイン
推奨プラグインをインストールをクリックしたら、ものすごくたくさんの推奨プラグインが出てきた！？
Contact Form 7は自分も使っているので良く知っているが、見知らぬプラグインも数多い。
しかしここはVM環境で本番環境には何も影響を与えないのでとりあえず全てインストールしておいて、使い勝手については別途調べてみるつもり。
全選択して一括操作で「install」を選択して「適用」をクリックする。
以下のメッセージが表示されてインストールが終了した。
Black Studio TinyMCE Widget | WordPress ネイティブの TinyMCE エディターをベースにした新しい「ビジュアルエディター」 自分はTinyMCE Advancedを使っているけど比較してみる予定 |
Contact Form 7 | 問い合わせフォーム用プラグイン これは自分も使っている 使いやすいのでオススメ |
Fixpage TitleBackground | 投稿または固定ページ毎にタイトル背景を設定するプラグイン |
WordPress.comと連携して「検索エンジンへの更新通知」「サイトの死活監視」「CDNを使った画像の高速化」「ログイン攻撃への対応」「Analytics機能」などが利用できるようになる | |
Responsive Mailform | WordPress用のメールフォーム Contact Form 7と機能がカブるのでは？ |
Page Builder by SiteOrigin | ドラッグ & ドロップ方式のページビルダー 自分はホームページをブログにしか使っていないで使用頻度は少ないけどホームページで写真とか作品とか商品の販売とかしたい時にはこの手のビジュアルでのページビルダーを使うケースがあるのだと思う |
WP Smart Shortcode | Grazioso専用のショートコード設置用のプラグイン 説明ボックス、ラベル、見出しなどをビジュアルエィターから挿入することが出来る |
Widget Importer & Exporter | ウィジェットのインポートとエクスポートを行うプラグイン |
子テーマの作成
style.cssを直接編集するとテーマがバージョンアップされた時に編集した内容が飛んでしまう事があるので子テーマを作成することにした。
子テーマの作成については以前にHestiaの子テーマを作成した時の記事を参照。
上記記事の「子テーマ用のディレクトリーの作成」～「所有者の変更」までを実行すると外観ー＞テーマにgraziosoの子テーマが表示されるので”有効化”をクリックする。
カスタマイズ
WordPressのメニューから外観ー＞カスタマイズで表示されるメニューは非常にシンプル。
「えっ！これだけ？」というのが最初の正直な感想。
しかしWordPressの外観メニューを見ると色々とメニューが追加されている。
「ウィジェット背景設定」「テーマオプション」「ロゴの設定」の３つ（恐らく。。。というのもテーマインストール前にここのメニューをよく見ていなかったので違いがイマイチ分からなかった）
テーマの細かい設定は「テーマオプション」メニュー（後述）で行う様子。
サイト基本情報
ひとまず先にサイトの基本情報の設定をすることにした。
”souichirou”を設定した ※下記のロゴの設定を行うとタイトル欄は上書きさせる | |
キャッチフレーズ | ”そう備忘録 note to self”を設定した |
サイトアイコン |  を設定した ファビコンとして設定される |
ホームページ設定
次にホームページの設定を行う。
表示形式は以下の２パターンを選べる。
- ホームページに最新の投稿を表示する
- ホームページには別の固定ページ（トップページ）を設定して投稿ページ（ブログ）は別にする
今回は２．のパターンで作成する事にした。
固定ページの作成
WordPressのメニューから固定ページー＞新規追加で事前に以下の２種類の固定ページを作成しておく。
- ホームページ
- ブログ
共にとりえず中身は空でOK。
ホームページの設定
ホームページの表示 | ”固定ページ”を選択する |
ホームページ | 先程追加した固定ページの”ホームページ”を選択する |
投稿ページ | 先程追加した固定ページの”ブログ”を選択する |
メニュー
パソコン用のメインメニューとモバイルメニューの作成を行う。
ここから新規のメニューを追加・設定することができるが、WordPressのメニューから外観ー＞メニューで設定するのと同じなのでどちらで行っても良い。
メインメニューの新規追加方法
メニューの新規作成 | 「メニューを新規作成」をクリックする
|
メニュー名の設定とメニュー位置 |
「次へ」をクリックする
|
「項目を追加」で予め用意しておいた固定ページ「このサイトについて」と「ブログ」「ホームページ」を追加して「公開」をクリックする
| |
ドロップダウンメニューとモバイルメニューが追加された | パソコン（トップダウンメニュー）
モバイルメニュー
|
WordPressのメニューから外観ー＞メニューでも同様の設定がされている こちらで設定しても良い |  |
ウィジェット
ウィジェットはWordPressのメニューから外観ー＞ウィジェットに同様の設定項目があるのでそちらで設定することにした。
Homeウィジェット（ホームページに配置するウィジェット）とGlobalウィジェット（各ページのフッターに配置するウィジェット）が設定できる。
以上で「カスタマイズメニュー」での設定は終了。
ロゴの設定
WordPressのメニューから外観ー＞ロゴの設定でパソコンとスマートフォンのトップページの左上に表示されるロゴを指定する。
尚、ここでロゴを設定すると上記で設定されたサイトのタイトルは上書きされる。
「ロゴをアップロード」ボタンから新規にファイルをアップロードするかメディアライブラリから既存の画像を指定する 尚、その際当方の環境で手間取った所を書いておく リンクURL欄が空だと「Use as Logo」ボタンを押してもロゴ画像が反映されない 「ファイルのURL」ボタンを押すとURLが反映されるので、その後保存をするとロゴ画像が反映された
|
Grazioso専用のウィジェットについて
Graziosoはテーマがシンプルな反面、専用のウィジェットがかなり多い。
- [Grazioso]カスタムコードウィジェット #1～#3
- [Grazioso]テキストタイパーウィジェット
- [Grazioso]インフォメーションウィジェット、２
- [Grazioso]ブログ記事ウィジェット
- [Grazioso]YouTubeプレイヤーウィジェット
- [Grazioso]アクションフォームウィジェット
- [Grazioso]チームメンバーズウィジェット
- [Grazioso]ギャラリーポップアップウィジェット
- [Grazioso]テキストグリッドウィジェット
- [Grazioso]プライシングテーブルウィジェット
これらのウィジェットについて設定方法を確認する。
Home WidgetsとGlobal Widgets
ウィジェットはHome WidgetsまたはGlobal Widgetsに追加することができる。
表示する対象ページが異なる。
Home Widgets | ホームページ設定での設定により異なる
| ||||
Global Widgets | 全てのページに表示される |
[Grazioso]カスタムコードウィジェット #1～#3
HTMLタグ、Javascriptコードが使用できて広告のバナーや任意のコンテンツの表示に使用できるウィジェット。
設定方法 | 外観ー＞ウィジェットから[Grazioso]カスタムコード#1～#3を追加する
コンテンツ欄にHTMLを記述して保存する この際、文字色の設定を有効する為にはHTMLタグで囲む必要があるので注意する事 表示例
|
背景色、文字色 | 外観ー＞テーマオプションー＞外観設定タブにて背景色、文字色の設定をパレットで行う 色パレット
|
[Grazioso]テキストタイパーウィジェット
テキストをタイプライターの様なアニメーションで表示するウィジェット。
設定方法 | 外観ー＞ウィジェットから[Grazioso]テキストタイパーを追加する
| ||||||||
背景色、文字色、スパンカラー | 外観ー＞テーマオプションー＞外観設定タブにて設定を行う 背景色、文字色、スパンカラーをパレットで設定する 尚、スパンカラーはアニメーション時に強調表示される時の色
|
[Grazioso]インフォメーションウィジェット、２
テキストと画像を表示するウィジェット。
尚、＃２は画像の位置が左右逆になっている。
設定方法 | 外観ー＞ウィジェットから[Grazioso]インフォメーションウィジェットを追加する
| ||||||
背景色、文字色 | 外観ー＞テーマオプションー＞外観設定タブにて設定を行う 背景色、文字色（タイトル、テキストの色）をパレットで設定する
|
[Grazioso]ブログ記事ウィジェット
最近のブログ記事の一覧をリスト形式で表示するウィジェット。
設定方法 | 外観ー＞ウィジェットから[Grazioso]ブログ記事ウィジェットを追加する
下記の様に最新記事のタイトルと本文の抜粋が１行毎に背景色が変わって表示される
| ||||||||
背景色、代替色、ハイライト表示色、文字色 | 外観ー＞テーマオプションー＞外観設定タブにて設定を行う 各色をパレットで設定する
尚、ブログ記事ウィジェットに関しては外観ー＞ウィジェット背景設定で「背景動画」「背景画像」「背景色」を設定することができる 設定方法については別記事とする |
[Grazioso]YouTubeプレイヤーウィジェット
IDを指定する事によりYouTubeを再生するウィジェット。
設定方法 | 外観ー＞ウィジェットから[Grazioso]YouTubeプレイヤーウィジェットを追加する
| ||||||
背景色 | 外観ー＞テーマオプションー＞外観設定タブにて設定を行う YouTubeプレイヤーの背景色をパレットで設定する
|
[Grazioso]アクションフォームウィジェット
問い合わせ用のフォームを表示するウィジェット。
Contact Form 7（プラグイン）のショートコードを利用して表示する。
設定方法 | まずContact Form 7の設定を行う 問い合わせの為の項目やラベルの表示、メールの設定などはContact Form 7側にて行い、こちらのウィジェットではショートコードを使ってフォームを表示する部分だけを行う Contact Form 7の設定定方法はこちらの記事を参照。 上記設定後、外観ー＞ウィジェットから[Grazioso]アクションフォームウィジェットを追加して設定を行う
表示例
| ||||||||
背景色、文字色、フォームの色、フォームの文字色 | 色表示例
外観ー＞テーマオプションー＞外観設定タブにて設定を行う 背景色、文字色、フォームの色、フォームの文字色をパレットで設定する
|
[Grazioso]チームメンバーズウィジェット
チームメンバーや社員などを紹介する時に使用するウィジェット。
最大４名と８名の２パターンを指定する事が出来る。
また８名以上の時はウィジェットを複数追加すればOK。
設定方法 | 外観ー＞ウィジェットから[Grazioso]チームメンバーズウィジェットを追加する
スタンダード（４名）表示例
マウスオーバーすると名前、所属、SNSアイコンなどが表示される
| ||||||||||||||||
外観ー＞テーマオプションー＞一般設定タブにて設定を行う
| |||||||||||||||||
背景色、文字色、オーバーレイの色 | 外観ー＞テーマオプションー＞外観設定タブにて設定を行う チームメンバーズウィジェットの背景色、文字色（マウスオーバー時に現れる文字列）、オーバーレイ（マウスオーバー時の色）の色をパレットで設定する
|
[Grazioso]ギャラリーポップアップウィジェット
写真をギャラリー形式で表示するウィジェット。
１行表示と２行表示を選択することができる。
設定方法 | 外観ー＞ウィジェットから[Grazioso]ギャラリーポップアップウィジェットを追加する
２行表示の例
マウスオーバー時
画像をクリックすると拡大表示される
| ||||||
外観ー＞テーマオプションー＞一般設定タブにて設定を行う
| |||||||
背景色、文字色、オーバーレイの色 | 外観ー＞テーマオプションー＞外観設定タブにて設定を行う ギャラリーポップアップウィジェットの背景色、文字色（拡大表示時の文字色）、オーバーレイの色（マウスオーバー時の色）をパレットで設定する
|
[Grazioso]テキストグリッドウィジェット
アイコンとテキストを最大３✕３で表示するためのウィジェット。
アイコンはFontAwesome※のアイコンから表示する。
※FontAwesomeはアイコンを文字として扱える。文字なのでサイズや色指定が可能で無料、有料版が存在する。
設定方法 | 外観ー＞ウィジェットから[Grazioso]テキストグリッドウィジェットを追加する １－１から３－３まで最大３個✕３行の設定が可能
| ||||||||
背景色、文字色 | 色表示例
外観ー＞テーマオプションー＞外観設定タブにて設定を行う 背景色、文字色をパレットで設定する
|
[Grazioso]プライシングテーブルウィジェット
価格表を表示するためのウィジェット。
商品説明、リンク付きボタンを配置する事ができる。
１つのウィジェットで３つの商品までが表示可能で複数のウィジェットを配置する事ができる。
設定方法 | 外観ー＞ウィジェットから[Grazioso]プライシングテーブルウィジェットを追加する １つのウィジェットで３つまでの商品が設定可能
項目説明
| ||||||||||||
背景色、価格表の色、仕切り線の色、タイトル文字色、文字色、リストの背景色、リストの文字色、リストの仕切り線の色、ボタンの色、ホバー時のボタンの色 | 色表示例
外観ー＞テーマオプションー＞外観設定タブにて設定を行う 背景色、価格表の色、仕切り線の色、タイトル文字色、文字色、リストの背景色、リストの文字色、リストの仕切り線の色、ボタンの色、ホバー時のボタンの色をパレットで設定する 尚、プライシングテーブルウィジェットに関しては「背景動画」「背景画像」「背景色」を外観ー＞ウィジェット背景設定で設定することができる 設定方法については別記事とする |
テーマオプション
続いてWordPressのメニューから外観ー＞テーマオプションで設定を行う。
カスタマイズに設定項目が少ない分、こちらに設定が集中している模様。
尚、テーマオプションは「一般設定」「外観設定」「コメント設定」「その他」の４つのセクションからなっているが今回は「一般設定」と「外観設定」についての記事とする。
一般設定
テーマの一般的な設定を行う
ヘッダー
サイト名 | “souichirou”を指定した（サイトのタイトルと同じ文字列） 異なる文字列の場合、前述のサイトのタイトルよりこちらが優先されて置き換わる | ||||
固定ヘッダー | 以下の２パターンより選択する
| ||||
レスポンシブ時の設定 | モバイル時のハンバーガーメニューの表示位置
が設定可能 右側の場合
|
投稿
投稿記事の投稿日のフォーマットの設定を行う。
日付の形式 | 以下の選択肢がある
尚、記事にアイキャッチ画像を指定しないと投稿日は表示されないので注意 また細かいところだが年の後にカンマ（，）が入るのはイマイチだと思う 後、wp-days-agoのプラグインのイントールもヘルプに書いてあるが2018年12月19日現在、ダウンロードする事ができない（閉鎖された模様） |
ウィジェット
ウィジェットについては前述のチームメンバーズウィジェットやギャラリーポップアップウィジェットの項を参照。
フッター ソーシャルアイコン
フッターに表示するSNSのアイコンとリンク先を設定する。
設定をするとフッターにリンク付きSNSアイコンが表示される。
フッター
コピーライトテキスト | フッターに表示するコピーライトを指定する
|
外観設定
外観の”色”に関する設定はここで行う。
かなり項目数も多く、細かい設定ができるのが特徴。
ヘッダー
ヘッダーの色についての設定を行う。
尚、ヘルプでは下層ページタイトル部分（背景画像を設定している部分）もヘッダーと表現しているので注意が必要。
背景色 | 背景色をパレットで設定する |
背景透過 | 背景の透過率を設定する スクロールした時にヘッダーメニューが透過される なお、数値が小さいほど透過率が高い ８０を指定した例
|
枠線の色 | 枠線の色をパレットで設定する |
サイト名
文字色 | サイト名の文字色をパレットで設定する |
下層ページタイトル部分
背景色 | 下層ページタイトル部分の背景色を設定する 尚、背景画像を設定した時はそちらが優先される 前述の例では背景画像を設定している 背景画像はページ毎に設定でき、設定方法は下記参照 |
文字色 | タイトルの文字色をパレットで設定する |
ページ毎の背景画像の設定方法
固定ページ、投稿一覧の該当のページを編集で開き、下部の「このページのヘッダーに任意のタグを追加」欄に以下のコードを追加する。
画像の推奨サイズは、幅2000px 高さ400px
<style>.container-innerlead {width:100%;background: url(画像URL);overflow: hidden;}</style><style>.container-innerlead {width:100%;background: url(画像URL) repeat;overflow: hidden;}</style>
ドロップメニュー
パソコンのメニューに関する色の設定
ボタンの背景色 |  |
ボタンの文字色 |  |
ボタンのホバー時の背景色 |  |
ボタンのホバー時の文字色 |  |
ボタンがアクティブ時の背景色 |  |
ボタンがアクティブ時の文字色 |  |
モバイルメニュー
モバイル時のメニューの色の設定
ボタンの背景色 | ボタンの背景色をパレットで設定する
|
ボタンの文字色 | ボタンの文字色をパレットで設定する |
サブメニューの背景色 | サブメニューの背景色 テスト的にブログの下にHellow word!サブメニューを追加した例 サブメニューだけ色が違う
|
ホバー時の背景色 | ホバー時の背景色
|
ホバー時の文字色 | ホバー時の文字色 |
JETPACK
JETPACKプラグインで表示される項目の表示色だとは思うのだが、どこに反映されるか分からなかった。
JETPACKには複数の機能があるのでどこかの機能の事を言っているのだとは思うのだが詳細は分からなかった。
ページネーション
これも何処に反映されるのが分からなかった。
ページネーション時（複数のページにまたがる時のページ表示）の色に関する設定とは思うのだが特定のプラグインによるページネーションなのかfunctions.phpを編集して自分でページネーションを実現した時なのか分からず。
ツールチップ
これも何処に反映されるのが分からなかった。
ツールチップ（マウスオーバーで現れる吹き出し）の色の設定だと思われる。
Smart Shortcodeプラグインでツールチップが挿入できるのだと思っていたのだが見当たらず、他にGraziosoのテーマの中でツールチップを挿入する機能を見つけられなかった。
”トップに戻る”ボタン
トップに戻るボタン | 下にスクロールすると現れる”トップに戻るボタン”の表示色を設定する |
ウィジェット基本設定
「最近の投稿」「最近のコメント」「アーカイブ」等のウィジェットの色の設定を行う。
これまで紹介したGraziosoでは専用のウィジェット以外のウィジェットの基本的な色の設定。
背景色、文字色、リストの背景色、リストの文字色 | 背景色、文字色、リストの背景色、リストの文字色をパレットで設定する |
リスト ホバー時の背景色 | リスト ホバー時の背景色
|
リスト ホバー時の文字色 | リスト ホバー時の文字色をパレットで設定する |
[Grazioso]専用のウィジェットの背景色など
カスタムコードウィジェット #1～プライシングテーブルウィジェットまでのGrazioso専用ウィジェットの背景色や文字色の設定については前述の専用ウィジェットの項を参照。
フッター
フッターの色に関する設定を行う。
背景色、文字色、リンクの色 | 背景色、文字色、リンクの色をパレットで設定する |
ホバー時のリンク色 | ホバー時の色をパレットから設定する
|
アーカイブページ
アーカイブページの背景画像や色を設定する。
タイトル背景画像 | タイトル背景画像を設定する 「画像選択」ボタンをクリックした後、ファイルの選択または既にアップロード済みであればメディアライブラリから画像を選択する 尚、リンクURL欄が空だと上手く反映されないのは前述のロゴの設定と同様なのでそちらを参照のこと |
記事タイトル文字色、「続きを読む」ボタンの色 | 記事タイトル文字色、「続きを読む」ボタンの色をパレットから設定する |
スタイリング
追加CSSの設定
テーマに反映させるCSSの設定はここで行う。
外観ー＞テーマの編集でstyle.cssに修正をしたが反映されなかったのでこちらで行うのが正解なのだと思う。
つづく
記事が長くなったので一旦終了。
テーマオプションの「コメント設定」「その他（JQUERYの設定）」、ウィジェット背景設定（動画を設定できる）、ビジュアルエディターでショートコードを挿入などは別記事とする
ここまで試行錯誤してみた感想としてはシンプルな割にはかなり細かく色などの設定ができるイメージ。
テーマのデフォルト設定では無く自分でこだわって色々と設定する人や訴求したい商品、サービスがある人には向いているのかも知れない。
また別記事で調べる予定だがウィジェットの背景に動画を設定できる機能は面白いと思った。
雪や桜、紅葉の舞う動画を背景に設定すれば季節感を出せるのでは？などと思う。
ウィジェットも充実しているので興味がある人はGrazioso（グラツィオーソ）のホームページを見て欲しい。
※問い合わせサポートに対する返信が全く無いとの声がありましたので確認中の為、リンクを外しています
最近のコメント