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

by souichirou · 公開済み 2018年2月13日 · 更新済み 2020年7月19日

前回の記事

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

今回の記事の範囲

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

メイン部分のデザイン

メイン（本体部分）のデザイン設定。

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

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

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

2018年11月13日追記

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

全般レイアウト	「３カラム－中央コンテンツ」を選択した。※ ※後に２カラム右コンテンツへ変更。３カラムだと記事部分の横幅が狭くなってしまい、長めの見出しが改行されてしまったりしたので２カラムに変更をした１カラム２カラム－左コンテンツ２カラム－右コンテンツ３カラム－中央コンテンツ３カラム－左コンテンツ３カラム－右コンテンツが選択可能
Force the global layout	グローバルレイアウトの強制？最近追加された項目と思われるがイマイチ動作が分からなかったのでオフにしている
カラムレイアウト: : ホーム	ホーム（トップページ）のカラムレイアウトを全般レイアウトとは別に設定することができる設定可能な項目は全般レイアウトを継承１カラム２カラム－左コンテンツ２カラム－右コンテンツ３カラム－中央コンテンツ３カラム－左コンテンツ３カラム－右コンテンツなお、この項目はフロントページのコンテンツでも同じ設定が可能
カラムレイアウト: : シングル	投稿ページ（記事詳細ページ）のカラムレイアウトを全般レイアウトとは別に設定することができる
カラムレイアウト: : アーカイブ	アーカイブページのカラムレイアウトを全般レイアウトとは別に設定することができる
カラムレイアウト: : アーカイブ – カテゴリー	カテゴリーページのカラムレイアウトを全般レイアウトとは別に設定することができる ※表示ラベルにアーカイブとあるが間違いと思われる
カラムレイアウト: : 検索	検索結果ページのカラムレイアウトを全般レイアウトとは別に設定することができる
カラムレイアウト: : 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日追記

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

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

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

個別投稿設定

カラムレイアウト: : シングル	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シェアバーが追随するかどうかチェックした
Twitter ボタンを有効化	Twitterボタンを表示するかどうかチェックした
Twitter 名	@を除いたTwitter名を指定する ”soukikuchi175”を指定した指定をするとシェア時にTwitter名が自動で挿入される
Facebook ボタンを有効化	Facebookボタンを表示するかどうかチェックした
Google Plus ボタンを有効化	2019年7月30日追記今はこの項目は無くなっている Google Plus ボタンを表示するかどうかチェックを外した
Pinterest ボタンを有効化	Pinterestボタンを表示するかどうかチェックした
LinkedIn ボタンを有効化	LinkedIn ボタンを表示するかどうか未チェック