hueman テーマのカスタマイズ 詳細設定編 ~WordPressでブログを始める~ | そう備忘録

hueman テーマのカスタマイズ 詳細設定編 ~WordPressでブログを始める~

前回の「hueman テーマのカスタマイズ フッターデザイン編」の記事

今回の記事の範囲

今回の記事はHuemanのメニューの「詳細設定」「Contextualiser」とする

Hueman詳細設定とContextualiser

詳細設定

huemanテーマのカスタマイズの最後。

メニューから「詳細設定 パフォーマンス、SEO、CSS、スクロール」をクリックする。

詳細設定一覧

スムーズスクロール

スムーズスクロールの設定

スムーズスクロールを有効化

チェックした。

スクロールがスムーズになる。(のだと思う)
違いが分からなかった。申し訳ない。

モバイル端末

モバイル端末の時にレシポンシブデザインにするかどうかの設定。

モバイル端末の設定

モバイルフレンドリー(レスポンシブ)レイアウトを有効化

チェックした。

パソコンやタブレット、スマートフォンと画面サイズ、比率を変えた時にサイズに合わせてレイアウトやメニューなどを変更してくれる機能。

今のテーマはほとんどレシポンシブデザインに対応しているのでここはチェックした。

柔軟なフォントサイズ設定を使う。

チェックした。

説明には「見出しに親要素の幅にフィットするような順応性を持たせるにはこの設定を使います」とある。

モバイル端末での見出しのフォントサイズが若干変わる。チェックした時の方がスマートフォンで見やすかったので。

検索結果

検索結果に画像を含めるかどうかの設定。

画像を検索結果に含めるかどうかの設定

画像を検索結果に含める

チェックした。

画像の代替テキスト(alt)を検索対象にするか/しないかの設定かと思ったらそうでも無い。

チェックをしていなくても代替テキストの文字列は検索してくれる。

ちょっと違いが分からなかったけど、チェックをしておいた。

2018年11月26日 追記

チェックを外した

ブログの検索欄から検索した時にメディアファイルが検索対象になってしまい非常に鬱陶しい事が判明したのでチェックを外した

例) UpdraftPlusで検索

UpdraftPlusで検索する

ファイル名にUpdraftPlusが入っているメディアファイルが全て検索されてしまう

メディアファイルが検索される

自分で自分のブログを検索する事があまり無かったので長期間気が付かなかったが、特別の理由がない限りこの項目は未チェックのほうが良いと思う

パフォーマンスとSEO

パフォーマンスとSEOに関する設定。

パフォーマンスとSEOの設定

圧縮したスタイルシートを使用する

チェックした。

パフォーマンスの為、チェックが推奨と説明にあったのでここはその通りにした。

そう言えばmain.mini.cssがやたら見づらいと思ったら圧縮されていたのね。

miniって圧縮している意味だったのかと納得。

見やすく元に戻すツールも世の中には出ている模様。

構造化マークアップを投稿ページに使用

チェックした。

検索エンジンがサイトを読みやすくするということ(だと思う)。

SEO的にも有効との事なのでチェックした。

スクロール時画像を表示

チェックした。

見えていない画像のロードをスクロール時に動的に読み込む設定。

画像が多いページを読み込む時に全て画像を読み込んでからページを表示するのでは無くて見えている部分だけをロードした時点でページを表示するので早い、と説明にはあった。

最初にページの一番下まで読み込むか、スクロールして必要な時に読み込むかの違い。

モバイル端末検知機能

チェックした。

「モバイル端末 (携帯やタブレット) からのアクセスのときに小さい容量の Javascript ファイル (30kb) を読み込むようになります」とある。

パフォーマンス向上になるのでチェックした。

追加CSS

独自のCSSコードを追加するエリア。

しかしここでは追加CSSは記述しないで「外観」「テーマの編集」で子テーマのstyle.cssを選択して記述した。

追加CSS

Huemanの管理者設定

ページ毎のカスタマイズの有効化などの設定。

Huemanの管理者設定

「ページごと」カスタマイズを有効化

enableを選択した。

有効化にしておくとページ毎にカスタマイズができるとの事。

その他には「無効化」が選べる

「外観」メニューに「Hueman について」というオプションを追加します

チェックした。

変更履歴、リリースノート、ドキュメンテーションリンクといった Huemanに関する情報を表示するページへのリンクをWordPressのメニューに表示する

Huemanについて

ツールバーをヘルプ下に表示する

チェックした。

だけどどこにツールバーが表示されるのかが分からなかった。

プレビューの画面下に情報ブロックを表示

2018年11月13日 追記

この項目は無くなっていた

チェックした。

テーマのカスタマイズ中に右側のプレビュー画面の下に表示される情報。

情報ブロックの表示

Contextualizer

Contextualizered settings

2018年11月13日 追記

よく使用する設定項目のショートカットを作成する機能(だと思う)

CONTEXTUAL OPTIONS FOR HOME

AddNewをボタンを押すと各設定項目の一覧が表示されるので選んだ後に「Add it」を押すとショートカットが追加される

CONTEXTUAL OPTIONS FOR HOME

終わりに

テーマのカスタマイズはこれで終了

次回の「独自CSSの編集」の記事に続く

souichirou

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

おすすめ

質問やコメントや励ましの言葉などを残す

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