【WordPress】外観カスタマイズ機能の使い方と設定方法。

外観カスタマイズの設定方法

今回は、4536の外観を変えていく内容になります。

どんなテーマをダウンロードするか迷っている方は、こちらを参考にしてみて下さいね(^^)

【WordPress】初心者でも簡単にできるテーマの設定方法。 テーマの設定方法   今回は、WordPressのテーマを紹介していこうと思います。   シロロ そもそも「テーマ」って何?   ・サイトの外観を簡単に決められるテンプレートみたい… 続きを見る MIKILOG

1.サイトの基本情報

外観からカスタマイズをクリックしたら、この画面が表示されます。

違うテーマを設定していても日本語が英語だったり

メニューの順番が違うくらいで設定内容は

ほぼ変らないと思います。

まずは、サイト基本情報をクリックします。

・サイトタイトル→自分のサイトタイトルを入力

・キャッチフレーズ→どんなブログかの説明を書いておく

・サイト上に表示するタイトル→表示したい場合に入力

・サイトアイコン→設定しておくと差別化ができる

プラグインを使ったファビコン設定は、こちらからどうぞ↓

favicon画像を設定して、サイトを差別化させる方法。 favicon画像   皆さん、自分のサイトにファビコン設定ってしてますか? この小さいアイコンがあれば、他のサイトと差別化ができるんです。 あと見栄えが良いってところかな(・∀・… 続きを見る MIKILOG

サイト基本情報

各設定が終わったら必ず最後は、「公開」をクリックして保存。

これをしないと設定が変更にならないので、気をつけましょう(^^)

2.デザインを変える

レイアウトの変更

ここでの設定内容は、全て一緒でカラム数の変更などができます。

カスタマイズ以外では、各編集画面よりレイアウトの変更が可能になっています。

・トップページのレイアウト(PC)

・記事レイアウト(PC)

・アーカイブページのレイアウト(PC)

トップページのレイアウト

ページの横幅を変える

ここは基本そのままでデフォルト表示をさせています(このブログサイト)

幅のサイズ変更

記事一覧デザイン(PC/スマホ)

スマホの表示はデフォルトで、PCは2列で設定をしています。

記事数が多ければ、PCだと4列表示がいいかも。

新着記事一覧デザイン

関連記事の表示数

関連記事の表示数を、空欄に入力するだけで表示変更ができるようになってます。

ここでは「10」に設定をしています。

関連記事の表示数設定

抜粋の長さ

抜粋したい文字数を空欄に入力して下さい。

ここでは「80」に設定しています。

あんまり長すぎるとアレなので、一覧で見た際の長さで調節した方がいいかもしれません。

抜粋の長さ設定

記事一覧のタイトルが指定行より長い場合に文字を省略する

タイトルが長い場合に、省略するかの設定になります。

上の画像では「文字を省略しない」にしているのでタイトル全部が表示されています。

続いて、下の画像では「2行で省略」にチェックを付けているので後ろの方が「・・・」に表示変更されています。

このような切り替えができる機能設定です。

タイトルを省略する設定

固定ヘッダー/フッターの設定

・固定ヘッダー→チェックを入れると固定される

・固定フッター→以下の項目に必要があればチェックを入れる

固定ヘッダーとフッターの設定

3.ページ設定

スポンサーリンク

【Googleフォント追加】

リンク先からフォントを選んで設定ができます。

Googleフォント設定

【Googleフォントの適用箇所】

3つのスタイルから選べます。

Google適用フォント箇所の設定

【前後記事リンク】

・すべての記事→更新された記事が、そのままの順番で表示される

・同じカテゴリだけ→WordPressカテゴリ内での表示に切り替わる

前後記事リンク設定

【日付とタイトルの順番】

日付とタイトルの配置換えができます。

日付とタイトルの配置換え

以下の設定は、特に変更はしなかったと思います(多分デフォルト)

各設定

4.見出しデザインと色設定

【記事内見出しh1】

・8種類のデザインから選べる

・このブログでは「クール2」を設定中

【見出し1のキーカラーと文字色】

色を選択で、色を変えたら公開で保存

見出しのデザインと文字色の設定

各設定のやり方は、 デザインを選んで文字色を設定する だけで基本は同じです。

ウィジェットを追加している場合も設定は同じになります。

5.メディア関連

【サムネイル(記事一覧の画像)の縦と横の比率】

画像のサイズが900×630で作成しているので、このサイトでは「横」で設定をしています。

「画像が見切れてもいい」って方は、正方形にチェック!

サムネイル画像の比率

【サムネイルの表示方法】

特に背景画像が無い場合は、デフォルトのままでOK。

サムネイルの表示方法

【サムネイルの画質】

画質にこだわってる人は「高画質」にチェックを入れて下さい。

画像の画質設定

【NEWアイコンを表示する期間】

このマークを「どのくらい表示させるか」を変更できます。

NEWアイコンを表示する期間

【アイキャッチ画像の表示】

必要があれば変更をして下さい。

アイキャッチ画像の表示

【サムネイルに使用する画像】

ここもデフォルトとままで、毎回アイキャッチ画像を設定しているので特に変更無し。

サムネイルに使用する画像

【オリジナルブログカードの画像の表示方法】

ここもデフォルト表示。

オリジナルブログカードの画像の表

ブログカードの使い方は、こちら↓

【初心者向け】ブログカードをプラグインなしで設定できる方法。 ブログカードの作り方   テーマを変えてから数ヶ月が経つけど、まだまだ使い慣れていない4536! そんなテーマに実装されていたというブログカード表示機能   ほんと最近知ったんだ…. 続きを見る MIKILOG

6.検索機能

【検索機能結果切り替え】

その内やろうかと思って数年が経ってしまって、このサイトでは検索機能は標準のままです(笑)

Googleカスタム検索の方がヒットしやすいので、この機会にコードをぺタッと貼り付けておくといいかもしれないですね(^^)

検索機能設定

7.色の設定

・背景色→同系色の部分が「背景」の範囲になります

色の設定

・リンク→ヘッダーの色が同系色の場合は同化してしまうので、そこだけ注意

・ヘッダー背景→このサイトでは背景色と同じ「白」に設定中

・ヘッダー文字→ここでは分かりやすいように水色表示

リンクと背景とヘッダー文字色

後の設定も同じ感じにやっていけば、全体の「色」設定は終わりになります。

最後は、公開で保存をします。

8.ヘッダー画像

スポンサーリンク

【現在のヘッダー】

ヘッダー画像を追加するには「新規画像を追加」をクリックして、画像をアップロードします。

【ロゴ画像】

「画像を選択」で画像をアップロードします。

ヘッダー画像設定

【背景画像】

カーソルをヘッダー画像の部分に持っていくと、うっすらと表示されているのが「背景画像」になります。

背景画像の設定

・画像のサイズ→画像のサイズ調整ができる

・画像の位置→位置の設定で背景表示を変えられる

・画像の繰り返し→画像が繰り返し表示される

画像サイズと位置

【画像の高さ(スマホ)】

高さを設定したい場合は、空欄に数値を入力して下さい。

【画像の高さ(PC)】

上記と同じ。

画像の高さ

9.背景画像

【背景画像】

「画像を選択」をクリックし、画像をアップロードします。

背景画像設定

10.その他の設定

・SNS

・メニュー

・ウィジェット

・ホームページ設定

・コメント設定

・目次

・ソースコードのハイライト表示

・その他

・追加CSS

これらの項目の説明は、投稿できしだいページにリンクを追加していきたいと思います。

11.まとめ

シロロ

外観の設定って、こんなにも

やることあったんだねー。

ネイビー

ブログのメインカラーとか

「何を、どこに配置するか」でも

最初は悩むから、少し大変よね。

シロロ

これ1日じゃ絶対終わらないよ(笑)

ネイビー

無理して1回で終わらせるより、何回かに分けてやった方がいいわよ。

シロロ

だよねー

だよねー

ネイビー

その方が、精神的にも体力的にも負担がかからないと思うし。

シロロ

僕みたいに、お気楽気ままにやっていくのをお勧めするよ~ん♪

ネイビー

あんたは、お気楽過ぎなのよ。

お疲れさまでした(^^)/”

スポンサーリンク


カテゴリー:WordPressの使い方
タグ:pickup,カスタマイズ,ヘッダー画像設定,固定フッターの設定,外観,見出し

MIKINARI

イラストからWordPressまで興味があることを、ジャンル問わずに更新しています。


Pickup