WordPress Ashe (アッシュ)テーマのカスタマイズ・インストールからおすすめリンクまで ~前編~ | そう備忘録

WordPress Ashe (アッシュ)テーマのカスタマイズ・インストールからおすすめリンクまで ~前編~

Ashe(アッシュ)について

VM環境(Ubuntu Server 16.04LTS)上のWordPressに海外製のテーマAshe(無料版)をインストールしてみた時の備忘録。

VM環境の構築についてはこちらの記事を参照

Asheを選択した理由は全体的にシンプルなデザインで5つ星だった事と説明文に「個人と複数投稿者向けの・・・」の文言があった事。

複数の人が投稿して作ってゆくCGM(Consumer Generated Media)みたいなものが作れるなら面白いかもと思ってインストールしてみたが、結論から先にいうと特に複数投稿者の機能が充実しているテーマでは無かった。

なのでこの”複数投稿者向け”を期待してインストールすると肩透かしにあうかもだけど、無料版でも必要最低限な機能が揃っている事とドキュメントが充実しているので初心者には使いやすいと感じた。

説明文にはざっくりと以下の様な事が書いてあった

  • 個人と複数投稿者向けの無料ブログテーマ
  • 個人や中小企業のサイトに最適
  • WooCommerce(ECサイト)に対応している
  • ドキュメントが充実していて初心者でも使いやすい
  • レシポンシブデザイン
  • SEO対応
  • カスタマイズが豊富

Ashe WordPressテーマ

ちなみにこのブログは(2019年2月19日現在)Huemanを使用しているのでAsheではない。

インストール

WordPressのメニューから外観ー>テーマー>新規追加ー>テーマを検索欄で”Ashe”を検索する。

Asheの検索

マウスオーバーすると”インストール”ボタンが現れるのでクリックする。

Asheインストール

インストールが完了したら”有効化”をクリックするとテーマが適用される

Ashe有効化

「Asheを利用開始」をクリックすると最初の説明ページに飛ぶ。

Asheを利用開始

はじめに

「ようこそAsheへ」をクリックするとデモのプレビュー、ドキュメンテーション(英語)、動画チュートリアル(英語)を見ることができる。

ドキュメンテーションが英語だけどGoogle翻訳を使えば何とかなるし、動画も簡単な英語なので画面の操作の動きと合わせて見れば大体分かる。

英語のテーマでこの様にドキュメントが充実しているのは結構ありがたい。

Ashe初期説明画面

動画チュートリアル

動画は全て英語だが簡潔な説明なので分かりやすかった。

動画チュートリアル

フリー版とプロ版の比較

以下は無料版に無い機能の一覧。

フリー版とプロ版の機能の違い

尚、今回は無料版で検証をしているが、それぞれの設定でちょいちょい有料版の追加機能が欲しくなった。

例えばスキンカラーの追加であったりおすすめスライダーの設定であったり。

基本的なブログページを作る分には無料版でも良いのだが、もし自分のブログページのテーマをAsheに変えるのであれば有料版を買うと思う。

価格はレギュラーライセンスで29ドル(1回のみ、毎月、毎年の支払いは無しで50日間の返金保証)。

拡張ライセンス(サイト数が無制限)で79ドルだった。

子テーマの作成

style.cssを直接編集するとテーマがバージョンアップされた時に編集した内容が飛んでしまう事があるので子テーマを作成することにした。

子テーマの作成については以前にHestiaの子テーマを作成した時の記事を参照

上記記事の「子テーマ用のディレクトリーの作成」~「所有者の変更」までを実行すると外観ー>テーマにAsheの子テーマが表示されるので”有効化”をクリックする。

Ashe 有効化

カスタマイズ

この記事では”Skins”から”おすすめリンク”までの記事とする。

ブログページ以降については別記事とする。

Ashe メニュー

WordPressのメニューから外観ー>カスタマイズでAsheのカスタマイズメニューを表示する。

Skins

スキンカラーを指定する。

スキンの設定

テーマのスキンを選択

無料版では下記の3種類のスキンが選択できる。

有料版では多数のスキンカラーが選択できる模様(未検証)

デフォルト

デフォルトスキン

ダーク

ダークスキン

ボックス

ボックススキン

ダークモードスイッチャーを表示

フロントページのメインナビゲーションの右側にデフォルトとダークモードを切り替えるアイコンが表示される。

ダークモードスイッチャー

色の設定を行う

Ashe 色の設定

Video Guide

各設定の右上にビデオガイドへのリンクがあり、クリックするとビデオで使い方を説明してくれる

英語なので最初は「うっ!」と思うけど画面操作の映像なので英語が分からなくてもほぼ問題なし

この手のドキュメンテーションが充実しているのは海外のテーマの場合はとてもありがたい

ビデオガイド

アクセント

メニューや各種リンクにマウスオーバーした時の色の設定

色パレットから設定する

色 アクセント

ヘッダーテキスト色

ヘッダーテキストの文字色

ヘッダーテキスト 色

ヘッダー背景

ヘッダー背景の色

但しヘッダー画像(後述)を指定してる時は背景色を指定しても意味が無い

ヘッダー背景色

Body Background

Body部のバックグラウンドの色

Body BackGround色

背景画像

Body 部(上と同様の位置)に画像を指定することができる

設定をすると下記の「プリセット」以降の項目が設定可能になる

Body背景画像

プリセット

画像の表示方法について以下から選択する

  • デフォルト
  • フルスクリーン(画像の位置が選択可能)
  • 画面に合わせる(画像の位置、背景画像の繰り返しが選択可能)
  • 繰り返し(画像の位置、ページと一緒にスクロールが選択可能)
  • カスタム(画像の位置、画像サイズ、背景画像の繰り返し、ページと一緒にスクロールが選択可能)

画像の位置

画像の位置を指定する

画像の位置

画像サイズ

画像のサイズを以下から選択する

  • 元のサイズ
  • 画面に合わせる
  • フルスクリーン

背景画像の繰り返し

チェックをすると背景画像が繰り返される

ページと一緒にスクロール

チェックをするとページと一緒に背景もスクロールする

チェックをしないと背景画像が固定される

レイアウト

General

レイアウト General 設定

サイドバーの幅

サイドバーの幅を指定する

サイドバーの幅

スティッキーサイドバーを有効する

チェックをするとサイドバーがステッキーサイドバー※になる

※下スクロール時にサイドバーが一番下までスクロールした後、そのまま張り付いて(ステッキー)サイドバーが隠れない

一方、チェックを外すとサイドバーが本体と一緒にスクロールして画面から見えなくなってしまう

Page Layouts

レイアウト Page Layoutsの設定

ブログページ

ブログページ(投稿一覧)の記事の表示方法

一列

アイキャッチ画像、タイトル、本文抜粋の順番で1列で表示される

ブログページ 1列の例

リストスタイル

アイキャッチ画像、タイトル、本文抜粋が1行にコンパクトに表示される

ブログページ リストスタイルの例

Boxed Controls

Boxed Controls設定

ヘッダー幅

ヘッダーの表示方法

均等割付

ヘッダーが表示領域内に均等に割り付けられる均等割付

含まれている

ヘッダーが表示領域内に均等に割り付けられるがメニュ(ハンバーガーメニュー、メインメニュー、検索アイコンなど)はボックス内に表示される

均等割付

ボックス

ヘッダーやメニュー情報がボックス内に表示されるボックス

特集スライダー幅

特集スライダーの表示方法

特集スライダーはブログページ(投稿一覧)の上部などに複数のアイキャッチ画像をスライダー形式で表示して各記事へのショートカットを提供する機能

「おすすめスライダー」のチェックボックスをオンにすると表示されるようになるが表示方法については後述の項目を参照

ここでは特集スライダーが表示されている前提で表示幅の設定を行う

ボックス

特集スライダーがボックス内に表示される

特集スライダー ボックス表示例

均等割付

特集スライダーが表示領域内に均等に割り付けられる

特集スライダー 均等割付表示例

特集リンク幅

特集リンクの表示方法

特集リンクはブログページ(投稿一覧)の上部などにリンク付きのバナーを表示する機能

「おすすめリンク」のチェックボックスをオンにすると表示されるようになるが表示方法については後述の項目を参照

ここでは特集リンクが表示されている前提で表示幅の設定を行う

ボックス

特集スライダーがボックス内に表示される

特集リンク ボックス内

均等割付

特集リンクが表示領域内に均等に割り付けられる

特集リンク 均等割付

コンテンツ幅

ブログページ(投稿一覧)でのサイドバーも含めたコンテンツの幅

ボックス

コンテンツがボックス内に表示される

コンテンツ幅 ボックス

均等割付

コンテンツが表示領域内に均等に割り付けられる

コンテンツ幅 均等割付

単一のコンテンツ幅

投稿記事のサイドバーも含めたコンテンツの幅

ボックス

投稿記事がボックス内に表示される

単一のコンテンツ幅 ボックス

均等割付

投稿記事が表示領域内に均等に割り付けられる

単一のコンテンツ幅 均等割付

フッターの幅

フッターの幅

均等割付

フッターが表示領域内に均等に割り付けられる

フッター 均等割付

含まれている

フッターが示領域内に均等に割り付けられるが文字列はボックス内に表示される

フッター 含まれている

ボックス

フッターがボックス内に表示される

フッター ボックス

トップバー

トップバーを表示するかどうか。

無料版だとメニューの設定とソーシャルボタンの表示制御が可能。

有料版だとメニューの背景への透過なども指定できる模様(動作は未検証)。

トップバー 設定

トップバー

チェックをするとページの上にトップバーが表示される

「メニューを設定」はログインをしている時のみ表示されるのに対して右側のソーシャルメディアアイコンは未ログインでも表示される

トップバー

ヘッダー画像

ヘッダー画像を設定するメニュー群。

有料版だと動画(Video)や複数画像のカルーセルに対応している模様(動作は未検証)

ヘッダー画像

ページのヘッダー

チェックをすると各ページにヘッダーが表示される

以下の項目はこの項目にチェックがされている時のみ有効

画像を表示

「新規画像を追加」ボタンを押してヘッダー画像を追加するとヘッダー画像が設定される

ヘッダー画像を追加

アップロード済みヘッダーをランダム表示

上記で複数の画像をアップロードした後、「アップロード済みヘッダーをランダム表示」ボタンを押すとページが切り替わるたびにヘッダー画像がランダムに表示される

アップロード済み画像をランダム表示

おすすめヘッダーをランダム表示

Asheおすすめのヘッダー画像をランダムに表示するのだと思われるが自分の環境では動作しなかった

背景画像サイズ

背景画像のサイズを「カバー」と「パターン」から選択ができる

しかしパターンを選択した時にパターンの設定メニュー(中央寄り、繰り返しなど)を選択するメニューが表示されるのかと思ったのだが表示されなかった。

パターンの意味がイマイチ不明だった

カバー

カバー

パターン

パターン

2022/06/08 追記

「パターンはヘッダー幅に合わせて画像が繰り返し表示する機能」とのコメントを頂いた。詳しくは記事の下にあるコメントを参照して欲しい。

サイト基本情報

Logo Setup

Logo Setup設定

ロゴ

ヘッダー中央にロゴを表示する

「ページのヘッダー」がチェックされている時のみ有効

ヘッダーロゴ尚、上記の例は背景画像を設定していないが、同時に設定する事もできる

またロゴを設定すると下記のサイトのタイトルはページヘッダーには表示されない(キャッチフレーズだけになる)

ロゴの幅を設定する

サイトのタイトル

サイトのタイトル

ロゴと同時には指定できない

サイトのタイトルとキャッチフレーズ

キャッチフレーズ

キャッチフレーズ

上記画面ショットを参照

サイトのタイトルとキャッチフレーズを表示

未チェックだとサイトのタイトルとキャッチフレーズが表示されない

サイトのタイトルとキャッチフレーズを非表示

Favicon

サイトアイコンの設定

サイトアイコン

ファビコンの設定

ファビコンの設定

メインナビゲーション

メインナビゲーション

メインナビゲーション 設定

メインナビゲーション

チェックをするとメインナビゲーションが表示される

メインナビゲーション表示例

配置

メニュー位置を指定する

メインナビゲーション 左

中央

メインナビゲーション中央

メインナビゲーション右

検索アイコンを表示

チェックをすると検索アイコンが表示される

上記画面ショット例参照

サイドバーアイコンを表示

チェックをするとサイドバーアイコンが表示される

サイドバーアイコンをクリックすると代替サイドバーが表示される

代替サイドバー

上記は代替サイドバーへカレンダーウィジェットを設定した例

ウィジェットの設定は別記事

Mini Logo

ミニロゴ

Mini Logo

メインナビゲーション上にミニロゴを設定する

ミニロゴ

Logo Width

ミニロゴの幅を指定する

おすすめスライダー

おすすめスライダーはブログページ(投稿一覧)の上部などに複数のアイキャッチ画像をスライダー形式で表示して各記事へのショートカットを提供する機能。

尚、前述のレイアウトメニューでは”特集スライダー”とラベル名がなっているが英語メニューではどちらも”Featured Slider”となっていたので同一のもの(だと思う)。

 

おすすめスライダー 設定

おすすめスライダー表示例

おすすめスライダー

チェックをするとおすすめスライダーが表示される

Display Slider on

おすすめスライダーの表示場所を下記の3パターンから指定する

  1. Front Page:フロントページ(のみ)
  2. Post Page:投稿ページ(のみ)
  3. Front and  Posts Pages:フロントページと投稿ページ

取得元

スライダーの元データを以下の2パターンから指定する

 Posts

過去の投稿記事を取得元とする

こちらを指定した場合、下記の「投稿を表示」「スライドの枚数」を指定する

取得元 Posts

Custom

手動で最大3枚までスライドを指定する事ができる

「Add New Field」ボタンがあるので有料版はスライドを3枚以上追加することができる模様(動作は未検証)

こちらを指定した場合、下記の「Upload Image」~「Open Link in New Tab」までを指定する

取得元 Custom

尚、Upload Image で画像を指定したのだが残念ながら画像が表示されなかった。

もしかしたらカスタムでの画像設定も有料版だけの機能なのかも知れない。

Postsの時

投稿を表示

All Posts

全ての過去の投稿記事からスライダーを表示する

by Post Category

指定したカテゴリーの過去の投稿記事からスライダーを表示する

※カテゴリーを絞りたい場合はこちら

過去記事の指定

Postsの時

スライドの枚数

スライドの枚数を指定する

Customの時

Upload Image

スライダーの画像を指定するのだと思われるが当方の環境では何故か動作しなかった

下記は画像未設定のスライダーの例

Custom指定のスライダー

Customの時

タイトル

タイトルを指定する

Customの時

Description

Descriptionを指定する

Customの時

Button Text

Button Textを指定する

Customの時

Slide Link

ボタンをクリックした時のリンク先を指定する

Customの時

Open Link in New Tab

チェックをするとリンク先が新しいタブで開かれる

ナビゲーション矢印を表示

チェックをすると左右スライダーへ移動するナビゲーション矢印が表示される

ページネーションのドットを表示

チェックをするとスライダー下部にページネーションのドットが表示される

ドットをクリックすると対象のスライダーへ移動ができる

おすすめリンク

おすすめリンクはブログページ(投稿一覧)の上部などにリンク付きのバナーを3つまで表示する機能

尚、前述のレイアウトメニューでは”特集リンク”とラベル名がなっているが英語メニューではどちらも”Featured Links”となっていたので同一のもの(だと思う)。

おすすめリンク 設定

おすすめリンク 表示例

おすすめリンク

チェックをするとおすすめリンクが表示される

Display Featured Links on

おすすめリンクの表示場所を下記の3パターンから指定する

  1. Front Page:フロントページ(のみ)
  2. Post Page:投稿ページ(のみ)
  3. Front and  Posts Pages:フロントページと投稿ページ

タイトル

タイトルを指定する

URL

画像をクリックした時のリンク先を指定する

画像

画像を指定する

つづく

長くなったので一旦終了。

続きは別記事とする。

souichirou

やった事を忘れない為の備忘録 同じような事をやりたい人の参考になればと思ってブログにしてます。 主にレゴ、AWS(Amazon Web Services)、WordPress、Deep Learning、RaspberryPiに関するブログを書いています。 仕事では工場に協働ロボットの導入や中小企業へのAI/IoT導入のアドバイザーをやっています。 2019年7月にJDLA(一般社団法人 日本デイープラーニング協会)Deep Learning for GENERALに合格しました。 質問は記事一番下にあるコメントかメニュー上部の問い合わせからお願いします。

おすすめ

3件のフィードバック

  1. 匿名 より:

    参考にさせて頂いております。ありがとうございます

    ヘッダーの「パターン」は、ヘッダー幅に合わせて画像が繰り返し表示される機能のようです。小さい画像でやると分かりやすいです。
    均等割付でヘッダー画像を挿入するのに難儀しています…(サイズは合っているのに見切れてしまう)

    • souichirou より:

      なるほど、繰り返し表示ですか。大きい画像だったので違いが分からなかったのですね。コメントありがとうございます?

souichirou へ返信する コメントをキャンセル

名前、メール、サイト欄は任意です。
またメールアドレスは公開されません。