WordPress Ashe （アッシュ）テーマのカスタマイズ・インストールからおすすめリンクまで ～前編～
コンテンツ
Ashe（アッシュ）について
VM環境（Ubuntu Server 16.04LTS）上のWordPressに海外製のテーマAshe（無料版）をインストールしてみた時の備忘録。
Asheを選択した理由は全体的にシンプルなデザインで５つ星だった事と説明文に「個人と複数投稿者向けの・・・」の文言があった事。
複数の人が投稿して作ってゆくCGM（Consumer Generated Media）みたいなものが作れるなら面白いかもと思ってインストールしてみたが、結論から先にいうと特に複数投稿者の機能が充実しているテーマでは無かった。
なのでこの”複数投稿者向け”を期待してインストールすると肩透かしにあうかもだけど、無料版でも必要最低限な機能が揃っている事とドキュメントが充実しているので初心者には使いやすいと感じた。
説明文にはざっくりと以下の様な事が書いてあった
- 個人と複数投稿者向けの無料ブログテーマ
- 個人や中小企業のサイトに最適
- WooCommerce（ECサイト）に対応している
- ドキュメントが充実していて初心者でも使いやすい
- レシポンシブデザイン
- SEO対応
- カスタマイズが豊富
ちなみにこのブログは（2019年2月19日現在）Huemanを使用しているのでAsheではない。
インストール
WordPressのメニューから外観ー＞テーマー＞新規追加ー＞テーマを検索欄で”Ashe”を検索する。
マウスオーバーすると”インストール”ボタンが現れるのでクリックする。
インストールが完了したら”有効化”をクリックするとテーマが適用される
「Asheを利用開始」をクリックすると最初の説明ページに飛ぶ。
はじめに
「ようこそAsheへ」をクリックするとデモのプレビュー、ドキュメンテーション（英語）、動画チュートリアル（英語）を見ることができる。
ドキュメンテーションが英語だけどGoogle翻訳を使えば何とかなるし、動画も簡単な英語なので画面の操作の動きと合わせて見れば大体分かる。
英語のテーマでこの様にドキュメントが充実しているのは結構ありがたい。
動画チュートリアル
動画は全て英語だが簡潔な説明なので分かりやすかった。
フリー版とプロ版の比較
以下は無料版に無い機能の一覧。
尚、今回は無料版で検証をしているが、それぞれの設定でちょいちょい有料版の追加機能が欲しくなった。
例えばスキンカラーの追加であったりおすすめスライダーの設定であったり。
基本的なブログページを作る分には無料版でも良いのだが、もし自分のブログページのテーマをAsheに変えるのであれば有料版を買うと思う。
価格はレギュラーライセンスで２９ドル（１回のみ、毎月、毎年の支払いは無しで５０日間の返金保証）。
拡張ライセンス（サイト数が無制限）で７９ドルだった。
子テーマの作成
style.cssを直接編集するとテーマがバージョンアップされた時に編集した内容が飛んでしまう事があるので子テーマを作成することにした。
子テーマの作成については以前にHestiaの子テーマを作成した時の記事を参照。
上記記事の「子テーマ用のディレクトリーの作成」～「所有者の変更」までを実行すると外観ー＞テーマにAsheの子テーマが表示されるので”有効化”をクリックする。
カスタマイズ
この記事では”Skins”から”おすすめリンク”までの記事とする。
ブログページ以降については別記事とする。
WordPressのメニューから外観ー＞カスタマイズでAsheのカスタマイズメニューを表示する。
Skins
スキンカラーを指定する。
テーマのスキンを選択 | 無料版では下記の3種類のスキンが選択できる。 有料版では多数のスキンカラーが選択できる模様（未検証）
| ||||||
ダークモードスイッチャーを表示 | フロントページのメインナビゲーションの右側にデフォルトとダークモードを切り替えるアイコンが表示される。
|
色
色の設定を行う
Video Guide | 各設定の右上にビデオガイドへのリンクがあり、クリックするとビデオで使い方を説明してくれる 英語なので最初は「うっ！」と思うけど画面操作の映像なので英語が分からなくてもほぼ問題なし この手のドキュメンテーションが充実しているのは海外のテーマの場合はとてもありがたい
|
アクセント | メニューや各種リンクにマウスオーバーした時の色の設定 色パレットから設定する
|
ヘッダーテキスト色 | ヘッダーテキストの文字色
|
ヘッダー背景 | ヘッダー背景の色 但しヘッダー画像（後述）を指定してる時は背景色を指定しても意味が無い
|
Body Background | Body部のバックグラウンドの色
|
背景画像 | Body 部（上と同様の位置）に画像を指定することができる 設定をすると下記の「プリセット」以降の項目が設定可能になる
|
プリセット | 画像の表示方法について以下から選択する
|
画像の位置 | 画像の位置を指定する
|
画像サイズ | 画像のサイズを以下から選択する
|
背景画像の繰り返し | チェックをすると背景画像が繰り返される |
ページと一緒にスクロール | チェックをするとページと一緒に背景もスクロールする チェックをしないと背景画像が固定される |
レイアウト
General
サイドバーの幅 | サイドバーの幅を指定する
|
スティッキーサイドバーを有効する | チェックをするとサイドバーがステッキーサイドバー※になる ※下スクロール時にサイドバーが一番下までスクロールした後、そのまま張り付いて（ステッキー）サイドバーが隠れない 一方、チェックを外すとサイドバーが本体と一緒にスクロールして画面から見えなくなってしまう |
Page Layouts
ブログページ | ブログページ（投稿一覧）の記事の表示方法
|
Boxed Controls
ヘッダー幅 | ヘッダーの表示方法
| ||||||
特集スライダーの表示方法 特集スライダーはブログページ（投稿一覧）の上部などに複数のアイキャッチ画像をスライダー形式で表示して各記事へのショートカットを提供する機能 「おすすめスライダー」のチェックボックスをオンにすると表示されるようになるが表示方法については後述の項目を参照 ここでは特集スライダーが表示されている前提で表示幅の設定を行う
| |||||||
特集リンクの表示方法 特集リンクはブログページ（投稿一覧）の上部などにリンク付きのバナーを表示する機能 「おすすめリンク」のチェックボックスをオンにすると表示されるようになるが表示方法については後述の項目を参照 ここでは特集リンクが表示されている前提で表示幅の設定を行う
| |||||||
コンテンツ幅 | ブログページ（投稿一覧）でのサイドバーも含めたコンテンツの幅
| ||||||
単一のコンテンツ幅 | 投稿記事のサイドバーも含めたコンテンツの幅
| ||||||
フッターの幅 | フッターの幅
|
トップバー
トップバーを表示するかどうか。
無料版だとメニューの設定とソーシャルボタンの表示制御が可能。
有料版だとメニューの背景への透過なども指定できる模様（動作は未検証）。
トップバー | チェックをするとページの上にトップバーが表示される 「メニューを設定」はログインをしている時のみ表示されるのに対して右側のソーシャルメディアアイコンは未ログインでも表示される
|
ヘッダー画像
ヘッダー画像を設定するメニュー群。
有料版だと動画（Video）や複数画像のカルーセルに対応している模様（動作は未検証）
チェックをすると各ページにヘッダーが表示される 以下の項目はこの項目にチェックがされている時のみ有効 | |
画像を表示 | 「新規画像を追加」ボタンを押してヘッダー画像を追加するとヘッダー画像が設定される
|
アップロード済みヘッダーをランダム表示 | 上記で複数の画像をアップロードした後、「アップロード済みヘッダーをランダム表示」ボタンを押すとページが切り替わるたびにヘッダー画像がランダムに表示される
|
おすすめヘッダーをランダム表示 | Asheおすすめのヘッダー画像をランダムに表示するのだと思われるが自分の環境では動作しなかった |
背景画像サイズ | 背景画像のサイズを「カバー」と「パターン」から選択ができる しかしパターンを選択した時にパターンの設定メニュー（中央寄り、繰り返しなど）を選択するメニューが表示されるのかと思ったのだが表示されなかった。 パターンの意味がイマイチ不明だった カバー
パターン
2022/06/08 追記 「パターンはヘッダー幅に合わせて画像が繰り返し表示する機能」とのコメントを頂いた。詳しくは記事の下にあるコメントを参照して欲しい。 |
サイト基本情報
Logo Setup
ロゴ | ヘッダー中央にロゴを表示する
またロゴを設定すると下記のサイトのタイトルはページヘッダーには表示されない（キャッチフレーズだけになる） |
幅 | ロゴの幅を設定する |
サイトのタイトル | サイトのタイトル ロゴと同時には指定できない
|
キャッチフレーズ | キャッチフレーズ 上記画面ショットを参照 |
サイトのタイトルとキャッチフレーズを表示 | 未チェックだとサイトのタイトルとキャッチフレーズが表示されない
|
Favicon
サイトアイコン | ファビコンの設定
|
メインナビゲーション
メインナビゲーション
メインナビゲーション | チェックをするとメインナビゲーションが表示される
| ||||||
配置 | メニュー位置を指定する
| ||||||
検索アイコンを表示 | チェックをすると検索アイコンが表示される 上記画面ショット例参照 | ||||||
サイドバーアイコンを表示 | チェックをするとサイドバーアイコンが表示される サイドバーアイコンをクリックすると代替サイドバーが表示される
上記は代替サイドバーへカレンダーウィジェットを設定した例 ウィジェットの設定は別記事 |
Mini Logo
Mini Logo | メインナビゲーション上にミニロゴを設定する
|
Logo Width | ミニロゴの幅を指定する |
おすすめスライダー
おすすめスライダーはブログページ（投稿一覧）の上部などに複数のアイキャッチ画像をスライダー形式で表示して各記事へのショートカットを提供する機能。
尚、前述のレイアウトメニューでは”特集スライダー”とラベル名がなっているが英語メニューではどちらも”Featured Slider”となっていたので同一のもの（だと思う）。
おすすめスライダー | チェックをするとおすすめスライダーが表示される | ||||
Display Slider on | おすすめスライダーの表示場所を下記の３パターンから指定する
| ||||
取得元 | スライダーの元データを以下の２パターンから指定する
| ||||
Postsの時 投稿を表示 |
| ||||
Postsの時 スライドの枚数 | スライドの枚数を指定する | ||||
Customの時 Upload Image | スライダーの画像を指定するのだと思われるが当方の環境では何故か動作しなかった 下記は画像未設定のスライダーの例
| ||||
Customの時 タイトル | タイトルを指定する | ||||
Customの時 Description | Descriptionを指定する | ||||
Customの時 Button Text | Button Textを指定する | ||||
Customの時 Slide Link | ボタンをクリックした時のリンク先を指定する | ||||
Customの時 Open Link in New Tab | チェックをするとリンク先が新しいタブで開かれる | ||||
ナビゲーション矢印を表示 | チェックをすると左右スライダーへ移動するナビゲーション矢印が表示される | ||||
ページネーションのドットを表示 | チェックをするとスライダー下部にページネーションのドットが表示される ドットをクリックすると対象のスライダーへ移動ができる |
おすすめリンク
おすすめリンクはブログページ（投稿一覧）の上部などにリンク付きのバナーを３つまで表示する機能
尚、前述のレイアウトメニューでは”特集リンク”とラベル名がなっているが英語メニューではどちらも”Featured Links”となっていたので同一のもの（だと思う）。
おすすめリンク | チェックをするとおすすめリンクが表示される |
Display Featured Links on | おすすめリンクの表示場所を下記の３パターンから指定する
|
タイトル | タイトルを指定する |
URL | 画像をクリックした時のリンク先を指定する |
画像 | 画像を指定する |
つづく
長くなったので一旦終了。
続きは別記事とする。
参考にさせて頂いております。ありがとうございます
ヘッダーの「パターン」は、ヘッダー幅に合わせて画像が繰り返し表示される機能のようです。小さい画像でやると分かりやすいです。
均等割付でヘッダー画像を挿入するのに難儀しています…（サイズは合っているのに見切れてしまう）
なるほど、繰り返し表示ですか。大きい画像だったので違いが分からなかったのですね。コメントありがとうございます😁