WordPress Grazioso（グラツィオーソ） テーマのカスタマイズ（その２）
コンテンツ
Grazioso（グラツィオーソ）テーマについて
WordPressのテーマGrazioso（グラツィオーソ）のテスト版を手に入れたのでVM環境（Ubuntu Server 16.04LTS）にインストールして色々と試行錯誤をしてみた時の備忘録。
前回はインストールからカスタマイズ、Grazioso専用のウィジェット、テーマオプション（一般設定、外観設定）までを行った。
この記事では「ウィジェット背景設定」「テーマオプション（コメント設定、その他）」「ビジュアルエディタでのショートコード」を試してみた時の記録。
尚、Grazioso（グラツィオーソ）の特徴は以下の通り（前回と同内容）
有償のテーマなので継続して使い続けるには支払いが必要（19,800円）なのだけれども１０日間の返金保証制度もあるのでとりあえず試してみる事もできる。
Graziosoのホームページにはざっくりと以下の様な事が書いてあった。
- フラットデザイン &パララックス効果※
- レシポンシブデザイン
- jQueryアニメーション
- 税込み19,800円、paypal購入に限り10日間の返金保証制度
- 複数ドメインのライセンスあり。税込み49,800円
※問い合わせサポートに対する返信が全く無いとの声がありましたので確認中の為、リンクを外しています
ウィジェット背景設定
ウィジェットに背景画像、背景色の他に背景動画を設定する機能で下記のウィジェットに対して設定することができる。
- 検索
- [Grazioso] ブログ記事
- 最近のコメント
- アーカイブ
- カテゴリー
- メタ情報
- [Grazioso] YouTubeプレイヤー
検索ウィジェットで試してみる事にした。
WordPressのメニューから外観ー＞ウィジェット背景設定で呼び出す。
背景動画 | MP4形式のファイルが指定が可能
「動画を選択」から背景動画を設定する 検索ウィジェットに背景動画を設定した例（※BGM付き） |
背景画像 | 「画像を選択」から背景画像を設定する 設定例
|
色を選択 | 「色を選択」から背景色をパレットで設定する 設定例
|
テーマオプション
コメント設定
コメントシステム | 以下のコメントシステムが利用可能
※VM環境にインストールしているので各コメント機能については未検証 |
その他
JQUERYの効果
アニメーションのレベル | ウィジェットが最初に表示されたときのアニメーションのレベルをMaximum、Moderate、Minimumから選択する アニメーションレベルがMaxの例 |
スムーズスクロール | スムーズスクロール使用するかしないか 環境によっても異なるのかも知れないがスムーズスクロールにするとスムーズになる分、早くスクロールしたいときに若干もったりとして印象だったので”使用しない”を選択している（Windows10、Chrome） |
”トップへ戻る”ボタン | トップに戻るボタンの形状を複数指定できるNone（無し）以外は以下の通り Chevron
Chevron Circle
Angle
Angle Double
Circle Clear
Circle Solid
Arrow
Caret
Caret Square
|
ボタンにシャドウを追加 | ボタンに影をつけるかどうか FlatとShadowedが選べる Flat
Shadowed
|
不具合防止設定 | SMART SHORTCODEプラグインを有効化している／していないが選択できる プラグインとテーマとの干渉による不具合を避けるためのオプションとの事 |
トップページ用のSEO設定
SEO効果の為にトップページのディスクリプション、キーワードの設定を行う。
メタディスクリプション | サイトの説明文（オプション） |
メタキーワード | サイトに関するキーワードをカンマ区切りで追加できる しかしサイトの管理者が自由に指定できる「キーワード」メタタグは悪用（関係の無いキーワードを指定することが出来てしまう）ができるので検索エンジンに影響を与えることは無い（との事） |
アクセス解析(フッターに適用)
フッターにトラッキングコードを貼り付けてアクセス解析を行うための機能
トラッキングコード | トラッキングコードを貼り付ける（のだと思う、動作は未検証） Google Analyticsの例
|
ビジュアルエディタでショートコードを挿入
Grazioso専用のプラグインSmart Shortcodeで様々な表示効果のショートコードをビジュアルエディターから挿入する事ができる。
投稿の編集から下記のボタンをクリックする事により本文中にショートコードが挿入される。
尚、このプラグインはGrazioso専用の為、他のテーマでは使用できないので注意が必要。
挿入するショートコードの種類を選択した後、ショートコードに応じて値を設定する。
ヘッドライン
各種ビジュアルなヘッドライン用ショートコードを挿入する
内容 | ヘッドラインの文字列を指定する |
文字サイズ | 文字サイズを指定する |
フォントファミリー | フォントファミリーを指定する |
背景 | 背景を以下のパターンから選択する |
見出し
見出しのショートコードを挿入する
タイトル | 見出しのタイトル（内容）を指定する |
スタイル | Style1～4までを指定する ※いずれもHTML Tagはh1の例 Style1
Style2
Style3
Style4
|
HTML Tag | h1～h6を指定する それぞれのテーマで指定された見出しが適用される |
Text Align | テキスト位置を左、右、中央から指定する |
画像＆背景枠
画像と背景枠のショートコードを挿入する
Image Tag | 画像リンク用のIMAGEタグをセットする |
Frame Align | フレームの位置
から選択する |
スタイル | Style1～3から選択する Style1
Style2
Style3
|
説明ボックス
アイコン、タイトルがついた説明用ボックスのショートコードを挿入する。
タイトル | タイトルを指定する |
Icon URL | メディアライブラリからアイコンのURLを指定する |
内容 | 内容を指定する |
カラーボックス
カラーボックス（色付きの四角い箱）のショートコードを挿入する。
Box Color | ボックスの色をパレットより指定する |
タイトル | タイトルを指定する |
内容 | 内容を指定する |
ボタン
様々なスタイルのボタンのショートコードを挿入する。
Button Label | ボタンのラベルの文字列を指定する 例では”このサイトについて”を指定した | ||||||||||||||||||||||||||||||||||||||||||||||||
Button URL | ボタンをクリックした時の飛び先のURLを指定する | ||||||||||||||||||||||||||||||||||||||||||||||||
スタイル | スタイル（色）の指定
| ||||||||||||||||||||||||||||||||||||||||||||||||
Button Size | ボタンサイズを指定する
| ||||||||||||||||||||||||||||||||||||||||||||||||
Corner Radius | ボタンの角の丸み ５を指定した時
| ||||||||||||||||||||||||||||||||||||||||||||||||
Button Icon | ラベルの前または後ろに表示するアイコンを指定する
| ||||||||||||||||||||||||||||||||||||||||||||||||
Icon Position | アイコンをテキストの前／後ろに表示する 後ろに表示するパターン
| ||||||||||||||||||||||||||||||||||||||||||||||||
リンクターゲット | ボタンを押した時のリンク先を新しいタブで開くかどうか
|
Divider
区切り用のショートコードを挿入する。
区切りは４パターンから指定することができる。
Show Top Link | トップリンク（このボタンをクリックするとページのトップに戻る）の表示設定を以下より選択する
|
スタイル | Style１～４を選択する（トップリンクの表示の場合） |
スペーサー
スペース（空白）のショートコードを挿入する。
Spacer height in pixels | 空白の高さをピクセルで指定する |
引用
引用のショートコードを挿入する。
内容 | 引用元の文章を記述する |
プルクオート
強調用の文字（プルクオート）のショートコードを挿入する。
※引用と同じように見える
内容 | プルクォートの後に続く文字列を指定する |
Pullquote Alignment | プルクォートの位置を「なし」「左」「右」「中央」から指定する |
ボックスコメント
ボックスコメント（吹き出し）のショートコードを挿入する。
作成者 | ボックスコメントのコメント者を記入する |
内容 | コメントの内容を記入する |
スタイル | ４種類のスタイルを設定できる Style1
Style2
Style3
Style4
|
ハイライト
ハイライト（反転表示）のショートコードを挿入する。
背景色 | 背景色をパレットから設定する |
文字色 | 文字色をパレットから設定する |
内容 | 内容（文字列）を記入する |
ラベル
色々な種類のラベルのショートコードを挿入する。
スタイル | ６種類のスタイルをプルダウンから指定する
それぞれのスタイルは表示例を参照 |
内容 | ラベル内の文字列 |
ファンシーリンク
複数のスタイルが指定できるリンクのショートコードを挿入する。
リンクカラー | リンクの色をパレットから設定する |
スタイル | ３種類のスタイルを設定できる Style1 Style2  Style3
|
URL | リンク先URLを指定する |
内容 | リンク文字列を指定する |
ノート
ノート（注書き）のショートコードを挿入する。
色 | 文字を囲む四角枠の色をパレットから設定する |
内容 | 内容の文字列を指定する |
メッセージ
メッセージのショートコードを挿入する。
スタイル | ４種類のスタイルを設定できる 情報
Suucess
Warning
Error
|
内容 | 内容の文字列を指定する |
列
指定した列内に文字列を表示するショートコードを挿入する。
Column Size | 列のサイズを指定する
から指定が可能 |
内容 | 内容の文字列を指定する |
Youtube
指定したサイズでYouTubeのビューワーのショートコードを挿入する。
Video URL | YouTubeのURLを指定する |
幅 | 幅を指定する |
高さ | 高さを指定する |
Tweets
指定したアカントの最新のツイートを表示するショートコードを挿入する。
Twitter Username | Twitterのアカウント（＠以降）を指定する |
Number of tweets to show | 表示したいツイート数を指定する |
Tweets Style | 明るい／ダークを指定する 前述の表示例は”明るい”を指定している ダーク
|
終わり
以上でWordPress Grazioso（グラツィオーソ） テーマのカスタマイズは終了。
テーマに興味があれば下記のボタンから
※問い合わせサポートに対する返信が全く無いとの声がありましたので確認中の為、リンクを外しています
最近のコメント