WordPress Ashe (アッシュ)テーマのカスタマイズ ~後編~ | そう備忘録

WordPress Ashe (アッシュ)テーマのカスタマイズ ~後編~

前回からのつづき

WordPressに海外製のテーマAshe(アッシュ)の無料版をインストールした時の備忘録。

前回はインストールからおすすめリンクまでの記事だったので今回はその後編とする。

また今回はカスタマイズメニューの”ブログページ”以降を対象とする。

Ashe カスタマイズ

ブログページ

ブログページ(投稿一覧ページ)の表示形式に関する設定を行う。

General

ブログページ General設定

投稿説明

投稿一覧での本文の表示方法に関する設定

なし

本文を全く表示しない

「もっと読む」ボタンを押した時に初めて本文が表示される

なし

投稿の抜粋

本文の抜粋(先頭何行か)を表示する

本文の抜粋

投稿のコンテンツ

本文を表示する

投稿のコンテンツ

投稿ページネーション

投稿一覧ページが複数ページある時のページネーションの仕方

デフォルト

デフォルト

「古い投稿」ボタンを押すことで前の記事の一覧に遷移する

デフォルト ページネーション

数字ベース

ページネーションが数字

数字ページネーション

Post Elements

投稿の何の項目を表示対象にするかの設定。

Post Elements設定

表示例

Post Elements表示例

カテゴリーを表示する

チェックするとカテゴリーが表示される(表示例参照)

日付を表示する

チェックすると日付が表示される(表示例参照)

コメントを表示する

チェックするとコメントが表示される(表示例参照)

先頭文字を大きくを表示

チェックすると本文抜粋の先頭文字が大きく表示される(表示例参照)

投稿者を表示

チェックすると投稿者が表示される(表示例参照)

Show Facebook

チェックするとFacebookへのシェア用アイコンが表示される(表示例参照)

Show Twitter

チェックするとTwitterへのシェア用アイコンが表示される(表示例参照)

Show Pinterest

チェックするとPintrestへのシェア用アイコンが表示される(表示例参照)

Show Google Plus

チェックするとGoogle Plusへのシェア用アイコンが表示される(表示例参照)

Show Linkedin

チェックするとLinkedinへのシェア用アイコンが表示される(表示例参照)

Show Reddit

チェックするとRedditへのシェア用アイコンが表示される(表示例参照)

Show Tumblr

チェックするとTumblrへのシェア用アイコンが表示される(表示例参照)

関連投稿 – 表示

ヘルプによると”関連”を選択するとブログページの記事毎に「これも好きかも」と関連記事が表示される様だが、記事数が少ない為なのか当方の環境では表示されなかった

個別投稿

記事詳細ページの表示形式に関する設定を行う。

Post Elements

個別投稿 Post Elements 設定

表示例

カテゴリー、日付、コメント表示例

投稿ページ下部表示例

投稿ページ下部表示例

カテゴリーを表示する

チェックするとカテゴリーが表示される(表示例参照)

日付を表示する

チェックすると日付が表示される(表示例参照)

コメントを表示する

チェックすると日付が表示される(表示例参照)

投稿者を表示

チェックすると投稿者が表示される(投稿ページ下部表示例参照)

投稿者の説明を表示

チェックすると投稿者の説明が表示される(投稿ページ下部表示例参照)

関連投稿 – 表示

”関連”を選択すると記事の下に「これも好きかも」と関連記事が表示される

※こちらは関連記事が表示された

関連記事の表示

ソーシャルメディア

TOPバー※に自分の利用しているソーシャルメディアへのアイコンを最大4つまで表示させる事ができる。

トップバーの表示にチェックについている事が前提

ソーシャルメディア 設定

ソーシャルメディア表示例

新しいウィンドウでソシアルリンクを開く

チェックをするとソーシャルメディアアイコンをクリックした時に新しいウィンドウで開く

Social Icon #1~#4

ソーシャルメディアアイコンを最大4つまで指定できる

アイコンを選択

プルダウンの中からSNSのアイコンを選択する

2019年2月27日現在、下記の62種類のアイコンがあった

アイコン一覧

URL

アイコンをクリックした時のリンク先を指定する

自SNSのページを設定する

タイポグラフィ

フォントファミリーを指定する。

但し、ここで指定したフォントが反映されるのは英字のみなので日本語についてはWebフォントを使ってフォントを変えるのが良いと思う。

WordPressでWebフォントを設定した記事はこちら

Logo

ロゴ フォントファミリー 設定

ロゴ フォントファミリー 表示例

フォントファミリー

ロゴのフォントファミリーを指定する

但し指定したフォントが反映されるのは英字のみ

Navigation

ナビゲーション フォントファミリー 設定

ナビゲーション フォントファミリー 表示例

フォントファミリー

ナビゲーションのフォントファミリーを指定する

但し指定したフォントが反映されるのは英字のみ

上記の例だと”WordPress”の文字列のみフォントファミリーが反映される

イタリック

チェックをするとイタリックになる

大文字

チェックをすると大文字になる

ページのフッター

フッターの表示に関する設定を行う。

フッター 設定

フッター表示例

著作権テキスト

フッターに表示する著作権のテキストを設定する

$year(年)、$copy(Copyrightのマーク)などの変数が使用できる

スクロールのトップボタンを表示する

チェックをするとトップに戻るアイコンが表示される

プリローダー

アニメーションのプリロード 設定

アニメーションのプリロード

チェックをするとページを表示する前にアニメーションが表示される

この後にページが表示される

表示されるアニメーション

アニメーションプリロード

レスポンシブ

この設定はモバイル表示の時のみ適用される。

レスポンシブ 設定

上部メニューとメインメニューを結合する

チェックをすると上部メニューとメインメニューが結合されるのだと思うのだが当方の環境では違いは見られなかった

誰か分かる方がいれば教えてください

特集スライダーを表示する

チェックをするとモバイル環境でおすすめスライダーが表示される

おすすめスライダーの表示設定でチェックを入れると、パソコンではおすすめスライダーが表示されるがモバイルではそのままでは表示されない

こちらのチェックボックスをチェックする事によりモバイル環境でもおすすめスライダーが表示される様になる

モバイル環境でのおすすめスライダーの表示

特集リンクを表示する

チェックをするとモバイル環境でおすすめリンクが表示される

おすすめリンクの表示設定でチェックを入れると、パソコンではおすすめリンクが表示されるがモバイルではそのままでは表示されない

こちらのチェックボックスをチェックする事によりモバイル環境でもおすすめリンクが表示される様になる

モバイル環境でのおすすめリンクの表示

関連する投稿を表示する

チェックをすると記事の下部に「これも好きかも」の関連リンクが表示される

個別投稿の関連投稿ー表示で関連を選択すると、パソコンでは記事の下部に「これ好きかも」関連リンクが表示されるがモバイルではそのままでは表示されない

こちらのチェックボックスをチェックする事によりモバイル環境でも「これ好きかも」が表示される様になる

モバイル環境でのこれ好きかもの表示

メニュー

メニューについてはWordPressの他のテーマと同様の設定なので割愛

ウィジェット

ウィジェットについても設定方法は基本的に他のテーマと同様だがashe独特のウィジェット表示位置として「代替サイドバー」があった。

代替サイドバー

メインメニューの左に表示されるハンバーガーメニューのアイコン。

クリックすると左から代替サイドバーが表示される。

表示については前回の記事のメインナビゲーションを参照の事。

その他

ホームページ設定と追加CSSも他のテーマと同様なので割愛。

以上でAsheの無料版を色々といじってみた時の備忘録を終わりにする。

souichirou

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

おすすめ

11件のフィードバック

  1. ふかひれ より:

    はじめまして。Asheの解説しているサイトが少なくて、とても助かりました。

    メインナビゲーションのところの「logo」についてなのですが、数値を調節しても幅が変わらず…
    元画像のサイズに合わせられる仕様なのでしょうか?わかる範囲で教えていただければ幸いです。よろしくお願いいたします。

    • souichirou より:

      ふかひれさん こんにちは。
      こちらの環境では「ロゴの幅」の数値を変えればそれに応じて幅が変わりますね。
      幅30のロゴ
      幅30のロゴ
      幅70のロゴ
      幅70のロゴ

      • ふかひれ より:

        当サイトのスマホ版サイトだとうまく適応されないのかもしれないです。ありがとうございます。

        もう一つ伺いたいのですが、ページ下部の投稿者の部分はどこから引用しているかご存知ですか??
        お手数をおかけしますが教えていただければ幸いです。

        • souichirou より:

          スマホの方は80×80のサイズ固定にしているみたいですね。
          レスポンシブデザインでWindowの横幅がある一定以上の幅の時だけ設定したサイズが反映されるようにしているテーマの様です。
          ページ下部の投稿者ですがWordPressのメニューのユーザ、プロフィール、プロフィール情報で設定できます。

  2. kaz より:

    初めまして。Ash wordpress 勉強中です。

    質問があります。

    参考に、メインスライダーとメインスライダーの下にあるサビネイル画像を自信の
    ブログにカストマイしたくコードを読み解いているのですが、いまいち理解ができずにエラーになります。
    カストマイズのメニューに「スライダー」と「スライダーの下にあるサブネイル」を表示する方法がいまいちわからないのですが教えてくれませんか?

    まだまだ、初心者ですがphpを勉強中です。
    教えていただけないでしょうか

    よろしくお願い申し上げます。

    • souichirou より:

      kaz さん
      こんにちは。

      ちょっと状況が分からないので的はずれな答えになっているかも知れませんが。。。

      「メインスライダーとメインスライダーの下にあるサビネイル画像」がどこの事か分かりませんでした。
      メインスライダーとは外観ー>カスタマイズー>おすすめスライダーの事でしょうか?
      また「サビネイル画像」とはサムネイル画像の事でしょうか。
      このサムネイル画像はどの様に表示していますか?

      後、「カストマイズのメニューに・・・」とありますがWordPressの外観ー>カスタマイズに新しいメニューを追加したいという
      事でしょうか?
      となると、ちょっと手強いように思います。
      Ashテーマの作者にお願いした方が良いように思います。

  3. Kaz より:

    ご返信ありがとうございます。

    トップページにある大きな一面のスライダー画像です。すべての投稿がランダムにスライダー表示されてる仕様です。

    その真下にある3つのサブネイル画像が表示されていますが、外観の編集で、カスタマイズされる仕様になっています。指定の画像とリンク先が手動で選ぶことができる点です。

    これらを抜き取り自身のブログに組み込みたいと思っていますが、わからないのです。

    宜しくお願いします。

    • souichirou より:

      「トップページにある大きな一面のスライダー画像です」との事ですが、
      1)外観ー>カスタマイズー>おすすめスライダー
      2)外観ー>カスタマイズー>ヘッダー画像ー>アップロード済みヘッダーをランダム表示
      のどちらでしょうか?
      2)の前提で話を進めますが、

      「その真下にある3つのサブネイル画像」とありますが、こちらは外観ー>カスタマイズー>ホームページ設定ー>最新の投稿
      を設定すると表示される各記事のサムネイルの事でしょうか?

      その前提で話を進めますが、この画像は投稿ー>投稿一覧ー>記事ー>アイキャッチ画像
      が表示されています。
      アイキャッチ画像であればその画像を記事中に埋め込めば良いと思います。

      「外観の編集で、カスタマイズされる仕様になっています」
      これは具体的にはどのメニューの事でしょうか?

  4. 匿名 より:

    こんばんは。おすすめスライダーですが、皆さん画像は表示されるのでしょうか?
    アイキャッチ画像を設定しても表示されず、バグなのかなぁと思ってます。

    もしくはプラグインでしょうか、、。

    表示までに時間がかかるなどご存知でしたら教えていただけると助かります。

    ちなみにカスタマイズページでは表示されていて、編集終了すると消えます。

    そまた、5枚で設定してるのですが、5枚目だけはちゃんと表示されるようでした。

    謎です、、

    • souichirou より:

      こんにちは。

      こちらの環境では5枚とも表示されますね。
      ソース:投稿
      投稿を表示:All Posts
      スライドの枚数:5
      ナビゲーション矢印を表示:チェック
      ページネーションのドットを表示:チェック
      に設定した所、各投稿のアイキャッチ画像が表示されています。

      ちなみに、ソース:カスタムの場合は画像を設定しても表示されないようです。
      ただ、こちらはもしかしたら有料版しか設定できないのかも知れません。

  5. 匿名 より:

    回答ありがとうございます!無事表示されました!

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

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