hueman テーマのカスタマイズ メイン部分のデザイン編 ~WordPressでブログを始める~ | そう備忘録

hueman テーマのカスタマイズ メイン部分のデザイン編 ~WordPressでブログを始める~

前回の「hueman テーマのカスタマイズ フロントページのコンテンツ編」の記事

テーマのカスタマイズの続き

今回の記事の範囲

今回の記事はHuemanのメニューの「メイン部分のデザイン」とする

Huemanメイン部分のデザイン

メイン部分のデザイン

メイン(本体部分)のデザイン設定。

本来はまずはここを最初に設定するのだと思う。

メイン部のデザインのメニュー

メインコンテンツ用のカラムレイアウト

メニューから「メイン部分のデザイン レイアウト、サイドバー、ブログ投稿、サムネイル」「メインコンテンツ用のカラムレイアウト」をクリック。

2018年11月13日 追記

Huemanのバージョンアップに伴い項目が追加されていたので追記

メインコンテンツ用のカラムレイアウト

全般レイアウト

「3カラム-中央コンテンツ」を選択した。※

※後に2カラム右コンテンツへ変更。3カラムだと記事部分の横幅が狭くなってしまい、長めの見出しが改行されてしまったりしたので2カラムに変更をした
  • 1カラム
  • 2カラム-左コンテンツ
  • 2カラム-右コンテンツ
  • 3カラム-中央コンテンツ
  • 3カラム-左コンテンツ
  • 3カラム-右コンテンツ

が選択可能

Force the global layout

グローバルレイアウトの強制?

最近追加された項目と思われるがイマイチ動作が分からなかったのでオフにしている

カラムレイアウト: : ホーム

ホーム(トップページ)のカラムレイアウトを全般レイアウトとは別に設定することができる

設定可能な項目は

  • 全般レイアウトを継承
  • 1カラム
  • 2カラム-左コンテンツ
  • 2カラム-右コンテンツ
  • 3カラム-中央コンテンツ
  • 3カラム-左コンテンツ
  • 3カラム-右コンテンツ

なお、この項目はフロントページのコンテンツでも同じ設定が可能

カラムレイアウト: : シングル

投稿ページ(記事詳細ページ)のカラムレイアウトを全般レイアウトとは別に設定することができる

カラムレイアウト: : アーカイブ

アーカイブページのカラムレイアウトを全般レイアウトとは別に設定することができる

カラムレイアウト: : アーカイブ – カテゴリー

カテゴリーページのカラムレイアウトを全般レイアウトとは別に設定することができる

※表示ラベルにアーカイブとあるが間違いと思われる

カラムレイアウト: : 検索

検索結果ページのカラムレイアウトを全般レイアウトとは別に設定することができる

カラムレイアウト: : 404 エラー

URLが見つからなかった時の404ページのカラムレイアウトを全般レイアウトとは別に設定することができる

カラムレイアウト: : デフォルトページ

固定ページのカラムレイアウトを全般レイアウトとは別に設定することができる

※これも表示ラベルにデフォルトページとあるが固定ページの事と思われる

サイドバー

メニューより「サイドバー:デザインとモバイル設定」を選択してサイドバーのデザイン、動作を設定する。

サイドバー デザインとモバイル

サイドバートップボックス

チェックした。

サイドバーの上にボックスを表示するかどうか
テーマのカスタマイズ サイドバートップボックスの表示

サイドバーの背景色

2019/07/22 追記

バージョンアップにより新しい項目は追加されていたので追記する

サイドバーの背景色を色パレットから指定する

サイドバーの背景色

投稿ページのポストナビゲーション

左サイドバーを選択。

前後の記事へのナビゲーターが表示される位置

投稿ページのポストナビゲーション

その他には「無効化」「右サイドバー」「コンテンツの下」が選択可能

2018年11月28日 追記

「コンテンツの下」に変更した

前後の記事が必ずしも関連があるわけでは無いので優先度を下げてコンテンツの下に移動した

コンテンツの下

デスクトップデバイス : サイドバーをスクロールに追従させる

チェックした。※

上下スクロール時にサイドバーがついてくるかどうか。

長い記事の時に下にスクロールしていくとサイドバーが見えなくなってしまうのでチェックしてみた。

※後にチェックを外した。サイドバーがスクールしないと逆にサイドバーの下の方が見えない事があり不便に感じたので

モバイル端末 : サイドバーをスクロールに追従させる

同じくチェックした。

尚、スマートフォンの場合はサイドバーは下に表示されるので関係ない、これはタブレット用の設定。

サイドバーの幅

「ウィジェットに30pxの余白」を選択した。

その他には20pxが選択可能。

モバイルサイドバーコンテンツ

「両方のサイドバーを表示する」を選択した。

スマートフォンで(デスクトップで言う所の)サイドバーを(コンテンツの下に)表示するかどうか。

スマートフォンではサイドバーはコンテンツの下に表示される、”サイド”では無いので注意

  • 両方のサイドバーを表示する
  • メインサイドバーを非表示
  • セカンダリサイドバーを非表示
  • 両方のサイドバーを隠す

が選択可能

Mobile devices: display your primary sidebar first

2019/07/23追記

Huemanをバージョンアップしたら新たな項目が追加されていたので追記

オンにするとモバイル時にサイドバーの内容が最初(上部)に表示されてからコンテンツ一覧が表示される

サイドバーの内容が最初に表示される

サイドバーを最初に表示する

投稿一覧のデザインとコンテンツ

メニューから「投稿一覧のデザインとコンテンツ:ブログ・アーカイブ・検索結果」をクリック。

しかし設定項目が「フロントページのコンテンツ」と全く同じなので割愛(結構、こーゆー事あるよね)

2018年11月13日 追記

ほぼ、フロントページのコンテンツを同じだったのだが1項目だけ新しい項目が追加されていたので追記

アーカイブ種類を表すアイコンを表示する

Display the archive type and an icon next to the archive headings

アーカイブの見出しの横にアーカイブ種類を表すアイコンを表示する

チェックした

アーカイブの種類を表すアイコンを表示する

Single Pages Settings

2019年7月30日 追記

新たなメニューが追加されていたので追記する。

Display the page’s featured image when it is set

 オンにするとページのおすすめ画像を表示するのだとは思うのだが具体的な違いが分からなかった

個別投稿設定

Hueman 個別投稿設定

カラムレイアウト: : シングル

2018年11月13日 追記

前述のカラムレイアウト::シングルがここでも指定できる

投稿ページ – 投稿者情報

チェックした。

投稿者のプロフィールが設定されているときは表示する。

投稿ページ – 関連記事

「タグによって関連付ける」を選択した。

記事の一番下に表示される「あわせて読みたい」に表示される他の記事との関連付け。

タグのほうがより細かい分類をしているのでこちらを選んだ。

投稿ページ 関連記事

他には「カテゴリーによって関連付ける」「無効化」が選択可能。

投稿ページのポストナビゲーション

これは前述の投稿ページのポストナビゲーションと同じ

Post author name

2019年7月30日 追記

投稿タイトルの下に投稿者の名前を表示するかどうか

投稿者の名前の表示

Post date

2019年7月30日 追記

投稿タイトルの下に投稿日(更新日)を表示するかどうか

投稿日、更新日

Post tags

2019年7月30日 追記

コンテンツの下にタグを表示するかどうか

コンテンツの下にタグを表示するかどうか

SNS シェアボタンを投稿ページに表示

2018年11月13日 追記

SNSシェア関連の設定項目が追加されていたので追記

チェックをするとSNSシェアボタンが表示される。

チェックした

SNSシェアボタン

トップにカウンターを表示

チェックをするとSNSのカウンターが表示される

チェックした

SNSカウンター

シェアバーを追従させる

スクロールした時にSNSシェアバーが追随するかどうか

チェックした

Twitter ボタンを有効化

Twitterボタンを表示するかどうか

チェックした

Twitter ボタン

Twitter 名

@を除いたTwitter名を指定する

”soukikuchi175”を指定した

指定をするとシェア時にTwitter名が自動で挿入される

Twitter名

Facebook ボタンを有効化

Facebookボタンを表示するかどうか

チェックした

Facebook ボタン

Google Plus ボタンを有効化

2019年7月30日 追記

今はこの項目は無くなっている

Google Plus ボタンを表示するかどうか

チェックを外した

Google Plus ボタン

Pinterest ボタンを有効化

Pinterestボタンを表示するかどうか

チェックした

Pinterest ボタン

LinkedIn ボタンを有効化

LinkedIn ボタンを表示するかどうか

未チェック

LinkedIn ボタン

サムネイル設定

サムネイル画像のデザインについて設定する。

サムネイル設定

サムネイル画像のプレースホルダー

チェックした。

アイキャッチ画像を設定しなかった時にテーマで用意したデフォルト画像を表示する。

アイキャッチ画像

サムネイル画像のコメント数

チェックした。

サムネイル画像の上にコメント数を表示する機能。

サムネイルの上にコメント数を表示

コメント

コメント欄の表示に関する設定

コメント

投稿コメント

チェックした。

投稿へのコメント欄を表示するかどうか。

コメント欄

固定ページのコメント

チェックしていない。

固定ページではコメントを受け付けない設定

サムネイル画像のコメント数

サムネイル設定と同じ(多分)

終わりに

メイン部分のデザインはこれで終了。

続きの設定は次回の「hueman テーマのカスタマイズ フッターデザイン編」の記事

souichirou

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

おすすめ

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

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