貴方も余裕! WordPressでオシャレなブログを作ってみよう【Luxeritas編その4】

進行は今回も、ぐずぐず夫がお送りいたします(カンペ棒読み)。

そんなら早速、外観のカスタマイズをザーッと見ていこか。

ということで始まりました、「WordPressでオシャレ風ブログを作ってみよう!」の第4回目、「Luxeritas設定編」をお送りします。誰でも1から簡単に作れるWordPressブログを是非体験してみてね!
- 1. おされ風ブログを作れるってぇ?
- 2. 8.Luxeritasのカスタマイズをするで!
- 3. 外観カスタマイズを設定するで!
- 3.1. サイト情報/サイトアイコン
- 3.2. 全体レイアウト
- 3.3. グリッドレイアウト
- 3.4. カラム操作
- 3.5. ヘッダー/フッター
- 3.6. コンテンツ領域とサイドバー
- 3.7. ディスカッション
- 3.8. 細部の見た目
- 3.9. メタ情報の表示位置
- 3.10. サムネイル(アイキャッチ)
- 3.11. 投稿の行間
- 3.12. 字体(フォントファミリー)
- 3.13. 文字サイズ
- 3.14. 文字色
- 3.15. 背景色/枠線色
- 3.16. 背景・タイトル・ロゴ画像
- 3.17. パンくずリンク
- 3.18. ヘッダーナビ(グローバルナビ)
- 3.19. ヘッダー上の帯状メニュー
- 3.20. モバイル用ナビボタン
- 3.21. 目次
- 3.22. アニメーション
- 3.23. Lazy Load(画像の遅延読み込み)
- 3.24. Lightbox(画像ギャラリー)
- 3.25. 外部リンク
- 3.26. 投稿者名の表示
- 3.27. ブログカード
- 3.28. SNSシェアボタン(1)
- 3.29. SNSシェアボタン(2)
- 3.30. メニュー
- 3.31. ウィジェット
- 3.32. ホームページ設定
- 3.33. 追加CSS
- 4. ひとまず外観カスタマイズ終了
おされ風ブログを作れるってぇ?
1.WordPressの簡単なおさらいや!
2.ドメインを購入するで!
3.サーバーを借りるで!
4.WordPressをインストールするで!
5.テーマをインストールするで!
6.ブログの基本的設定をするで!
7.プラグインを追加するで!
8.Luxeritasのカスタマイズをするで!
9.CSSで細かい見た目の設定するで!
10.Search ConsoleとAnalyticsも導入や!
11.バックアップ作成までで完了や!
Ex.やり残し作業をちょいちょいと!

今回は第8章からやったな。

それにしても、1つの章にするにはやること多すぎへん?

しゃあないで、今回は8章を「外観カスタマイズ」と「その他のカスタマイズ」の2つに分けて勧めてくで。今回はひとまず外観カスタマイズじゃな。

ま、なんでもええからさっさとな。

8.Luxeritasのカスタマイズをするで!

そんなら外観カスタマイズから始めるで!

Luxeritas(親テーマ)が3.7.9.1、
Luxeritas Child Theme(子テーマ)が3.0.0
てことでヨロシク!
外観カスタマイズを設定するで!

細かな設定の中身とかは、別に作ってあるでそっちを確認やで。
ホンマは画像ものっけたいんやけど、時間ないでまたいつか追加するわ。



サイト情報/サイトアイコン


全体レイアウト

「全体イメージ」はホワイトのままで、
「記事一覧の表示方法」は抜粋+サムネイル表示にしてるわ。
他の項目(先頭固定の全文表示~固定フロントページの記事タイトル表示まで)は、全部チェックを外してるで。


便利なんやけど、オシャレ感演出だけのために非表示とさせてもろた感じかの。

グリッドレイアウト

「カテゴリ一覧説明文」と「記事一覧中央ウィジェットの幅」は使ってへんけどチェックにしてあるで。
「タイル型の並び順」は サムネ/タイトル/メタ情報に設定して、
「記事一覧の抜粋の文字数と色濃度」は各スタイルとも0文字にして
「抜粋改行しない」にチェックしたわ。
あと抜粋文字数が0やから「投稿・編集画面の抜粋を優先表示」はどっちでもええで。0以外に設定してたら考えたってな。


「記事を読む(タイル型)」だけ設定すればええで。
「リンク文字」は「- OPEN -」を入力して、
「短いタイトル」はチェック外して、
「文字数」は8文字にしたわ。

これでホーム画面の一覧形式が決まったわけやな。

カラム操作

「デフォルト」は2カラムで、
「フロントページ」は2カラム、
「その他ページ」は1カラムに。
「サイドバーの位置」は右で、
「3カラム設定」は使用しないのでそのまま。
領域の分離と結合の
「コンテンツ領域」は分離、
「サイドバー」は結合、
「コンテンツとサイドバーの分離・結合」は分離を、それぞれ選択したで。



ヘッダー/フッター

「各マージン」は全項目0に設定したで。
「ヘッダーの位置」はコンテナの内側で、
「枠線」と「横幅いっぱい」はチェックなしじゃな。
「フッターの位置」はコンテナの外側で、
「モバイル・スマホで非表示」にチェックを入れたで。
あと「上線」にチェックして、「枠線」は未チェック。
最後に今回はフッターエリアを使ってないから、「フッターウィジェットエリア表示数」はどれでもええで。


ホンマはどれでもええんやけどな、気分の問題や。

コンテンツ領域とサイドバー

「角の丸み」は0にしたで。
「コンテンツ領域のパディング」は、上50、右200、下0、左200にしたわ。



なるへそ。

「3カラム目」は使ってへんからそのまま。
「モバイル・スマホで非表示」にチェックをして、
「角の丸み」も0やな。
ディスカッション

このお手本サイトにはコメントなんか不要やからな。
「コメント一覧の表示方法」も使わへんから初期値のままやで。
細部の見た目

「"ホーム"のテキスト」はHOME、
「PAGE TOPボタンのテキスト」はTOPにしたで。
ボタン設定は初期値のまんまやで、変えたい人は変えたってな!
メタ情報の表示位置

投稿日時表示 と 更新日時表示 は チェック。
その他の項目は、全部未チェックにしたで。



サムネイル(アイキャッチ)

「画像に対するテキスト(抜粋)の配置」は画像の下にしたで。
「サムネイルの表示サイズ」は
「タイル型(グリッドレイアウト)」をtile320×180に設定して、
「中央揃えPC」「中央揃えスマホ」にチェックしたわ。
「横幅いっぱい」は未チェックや。

No Imageの絵ぇは適当にオシャレ感あるの選んどけばええか?

投稿の行間

変更したい人は、投稿ページで見栄え確認しながら変えてみたってな!
字体(フォントファミリー)

「ローマ字フォント」はMerriweather、
「日本語フォント」はNoto Serif JPを選択したで。

好きに設定したらええんちゃうか!
文字サイズ

「記事のタイトルH1」を35、
「記事内H2」を30、
「記事内H3」を25、
「記事内H4」を20、
「メタ情報」を12、
「サイドバーH3」を20に、それぞれ設定したで。
他の項目は初期値のまんまや。

好みは人によるし、自分の投稿画面とか見ながら細かく変えてみてもええかもな。
文字色

しいていえば、
「文字色(Body)」は黒、
「リンクホバー文字色(Body)」は青ってくらいじゃな。
背景色/枠線色

「背景透過」のメモリは1番右にしてるで。
ここは後で設定する背景画像との兼ね合いやから、背景画像を設定した後でもええかもしれへんな。

ひとまずは全体的に黒っぽいイメージになるわけやな。

「透過」メモリも1番右、
「コピーライト背景色」を黒にしたくらいで、
他項目は初期値のまんまじゃな。

この辺は全体の色味で最後に整える部分かもな。メモメモ…
背景・タイトル・ロゴ画像


スマホのも壊れてるし。


そんならこれでええな。で?

今回のサイトの場合は、「サイトタイトル画像」、「背景画像」、「ヘッダー背景画像」の3枚を設定してるで。まずは「サイトタイトル」と「ヘッダー背景」に使用した2枚を見てもらおか。
「サイトタイトル画像」

横2000 × 縦100 pixelの透明画像
「ヘッダー背景画像」

横2000×縦100 pixelのブログ名が書かれた画像

「ヘッダー背景画像」にブログ名を表示する画像を設定して、
「サイトタイトル画像」はなんも描いてない透明の画像を使用してるわ。

サイトタイトル画像なのに?

ヘッダー部分全体を一括してボタンにしてしまいたいんやな。


それやとヘッダーにカーソル合わせた時に少ーし画像が透過されるんと、メニューの上にほんのちぃとだけ隙間できてしまうのが嫌やってんな。せやからタイトルはヘッダー背景に置いて、「サイトタイトル画像」を同じサイズの透明画像にしたわけやな。これやと透過も隙間もでけへんからな。ま、やってみたらわかるわ。



でもこんなフォント最初から入ってるか?


これ、白とはちゃうんやろ?

ココとかで作ってみるとええで。
簡単に使い方説明すると、「ファイル」ボタン押して、「新規作成」押せば好きなサイズの画像作れるで。あとは絵に出てきた白い部分をクリックして全部透過させたら、もう1回「ファイル」ボタン押して「保存」するだけや。ぐず夫の場合はCLIP STUDIO持ってるで、それで作ればええけどな。


無色透明やからファイルも軽いし、サイズ感はそれほど気にせんでええで。



ひとまず全部横幅だけ合わせたんやな。
そんで用意した画像をどうすんねん?

「サイトタイトルを画像にする」で透過した画像を設定。
「背景画像」でイラストACから用意した画像を設定して、
「背景画像透過」のメモリを真ん中くらいに設定。
「背景固定」にチェックを入れて、
「背景画像の配置方法」を上から Middle / Center / no-repeat / cover に設定してるわ。




「ヘッダー背景画像」でペイントで作ったオレンジ画像を設定して、
「ヘッダー背景画像の配置方法」を、
上から Top / Center / no-repeat / cover に。
「横幅いっぱい」は未チェックや。
さいごに、
その他の項目(ワンポイントロゴ等)は変更なしや。


これもそれぞれ環境によって自由にしてええ思うで。
パンくずリンク

他項目は全部初期値のままじゃ。
ただパンくずリンクは、一般的に表示した方がユーザーにとってはわかりやすいし、SEO的には表示した方がええとされてる点は覚えといてな。


美しさと汎用性のどっちを取るか天秤にかけて、個人で決めたってな。
ヘッダーナビ(グローバルナビ)

「グローバルナビの位置」をヘッダー下部、
「モバイルメニューの種類」を豪華バージョン、
「モバイルメニューの開閉方法」を親と子を個別に開閉に設定。
「スクロール固定」は なしにしたで。


「中央揃え」にチェック。
「区切り線」はなしにしたで。


あとは「ナビカレント文字色」を黒にしただけで、
他項目は初期値のままじゃ。


「線の太さ」と「パディング」は全部0で設定したで。
ヘッダーの見た目に線を入れたい人は数値を変更したってな!
ヘッダー上の帯状メニュー

「ヘッダーの上に帯状のメニューを表示」を未チェックにして完了じゃな。
モバイル用ナビボタン

便利やから使ってみるのもオシャレかもしれへんで。
ついでに言うと、詳細な説明ページも作ってへんからさっさと用意しときぃや。

(※作成したらリンク貼っときます。ごめんちゃい♡)
目次

アニメーション

「オープニングアニメーション」はシャッター(ダーク)を使用し、
「適用範囲」は全ページに適用するを選択。
「外部からのアクセスのみ適用」は未チェックで、
「トップページは常に適用」にチェック。
このへんは完全に好みじゃろな。




「サイト名」は効果なし、
「記事一覧のサムネイル」は効果なし、
「SNSシェアボタン」は上方移動、
「ヘッダーナビ」も上方移動に、それぞれ設定したで。

メニューの背景色を同じ色にしたんが生きるな。

Lazy Load(画像の遅延読み込み)

「エフェクト・効果」はエフェクトなしに設定したわ。


Lightbox(画像ギャラリー)

外部リンク

投稿者名の表示

「自分で作成したページのURL」にホームページを設定して選択したで。
ブログカード

必要なら下の設定みて自分で決めたってな!
SNSシェアボタン(1)

必要なら下のページ見て設定したってな!
SNSシェアボタン(2)

必要なら下見て同じように設定したってな!
メニュー


ウィジェット

『検索』と『SNSフォローボタン』と『画像』を配置したで。
それぞれ特に細かな設定はしてないから説明は省くで


設定は、
「トップページだけ」にチェック入れて、
「固定ページの最新一覧」を表示してるわ。
固定ページの最新一覧にしたのは今回作ったページに記事がないからやで、皆さんは表示したいページを選んで選択したってな。

サムネイルの設定とかは?

大きめに画像を表示させたくて、こんな感じに設定してるわ。
ただ full に設定してる関係で、表示させたい画像がでかすぎるとえらいことになるで、あらかじめサムネに設定する画像のサイズを決めといてやるのがコツやで。


「Next/Prev」はマウスホバー時のみ、
「カラー」は青っぽい色やな。
「エフェクト・効果」はなしで、
「非アクティブな~」にチェックを入れたで。


「自動再生」は15秒、
「記事タイトル表示」と「Lazy Load無効化」にチェック入れたで。


画像の高さ指定するとたまに動きが崩れんねんな。泣く泣くの無効化や。

知らんけど。
ホームページ設定

追加CSS

ひとまず外観カスタマイズ終了

項目が多い!!

☆ 引き続きカスタマイズ(外観以外)を設定だ!
ディスカッション
コメント一覧
まだ、コメントがありません