ブログやサイト運営において、１番大切なのは記事の内容ですが、デザインもすごく重要だと思っています。
デザインが整っているブログは説得力が生まれますし、「続きを読んでみようかな？」と思ってもらえるからです。
昔からブログを読むのが大好きなんですが、定期的に読んでいるブログは見た目もおしゃれで可愛らしいものばかりです。
自分好みのデザインのブログは、読んでいるだけで楽しくなります！
今回はワードプレスのカスタマイズ方法をお伝えします。「HTML？CSSってなに？」の超初心者だったわたしでもできた方法です。
Luxeritaをカスタマイズしようと思っている方は、ぜひ読んでみてください
Contents
- 1 Luxeritas(ルクセリタス)は、高速表示でSEO対策もできるテーマ
- 2 ブログカスタマイズの基礎知識
- 3 読者像から色合いを決めて、全体のデザインを考える
- 4 ブログ・サイトが10倍おしゃれになる初心者向けカスタイズ例まとめ
- 4.1 字体（フォントファミリー）の変更
- 4.2 リンクの文字色・リンクホバー時の色変更
- 4.3 目次の挿入
- 4.4 Page Topの色を変更
- 4.5 あわせて読みたいのリンクを設置
- 4.6 強調を蛍光ペンのマーカー風にカスタマイズ
- 4.7 タグを付箋風にカスタマイズ
- 4.8 追加CSSで見出し・サイドバーのデザインをカスタマイズ
- 4.9 アフィリエイトリンクをボタン風にカスタマイズ
- 4.10 もしもアフィリエイトの簡単リンクをカスタマイズ
- 4.11 トップページの記事一覧(ブログカード)の表示をカスタイズ
- 4.12 記事下のSNSシェアメッセージ下線の色を変更
- 4.13 トップページの記事タイトルのホバー色を変更
- 4.14 記事下にある前後記事のホバー色の変更
- 4.15 絵文字を利用する
- 5 記事の内容に集中してもらうためにはブログやサイトのデザインも大事
- 6 ブログ運営に関する記事一覧
Luxeritas(ルクセリタス)は、高速表示でSEO対策もできるテーマ
わたしは現在有料テーマのSTORK19を使っていますが、以前はLuxeritas（ルクセリタス）を使っていました。
LuxeritasはSEO最適化はもちろん、カスタマイズしやすい高評価のテーマです。
目次導入方法を紹介している記事やアイコンファント導入記事、all in one設定方法記事などを見て、「Luxeritasは標準設定されているから助かった」と思ったことが何度もあります。
Luxeritasの１番の魅力は、高速表示です。
以前、同じく高評価の無料テーマCocoonを使ったのですが、表示速度が全然違いました。
(Luxeritas➜Cocoonに変更すると、表示速度が極端に遅くなることがあるらしいので、そのせいかもしれません)
ある程度知識のある方は、ページ速度を早くできるのかもしれませんが…わたしは試行錯誤しても表示速度がほとんど変わらず。
Cocoonの方がカスタマイズの幅は広いと思うのですが、表示速度はLuxeritasの方が早いです。
ブログの表示速度は、検索順位にも影響を与える重要な要素です。そして表示速度は初心者が何とかできるものではありません。
わたしは初心者の人にこそLuxeritasをおすすめします！
ブログカスタマイズの基礎知識
ブログのカスタマイズは、HTMLとCSSを組み合わせて行います。
分からない単語があるとそれだけで難しく感じてしまうので、簡単な意味をお伝えします。
HTMLは骨組みを作るもの、CSSはブログを装飾するものです。
HTMLのコードと書いてあれば、このコードは骨組みを作るコード、CSSのコードが書いてあれば、コードは装飾するためのコードだと思ってください。
先輩ブロガーさんが分かりやすく紹介してくれているので、この２つを理解しているだけで大体なんとかなります
読者像から色合いを決めて、全体のデザインを考える
ブログのカスタマイズをする前に、なんとなくでいいので全体の色合いを考えてみてください。
全体の色合いを考えるときに大切なのは、見やすさと誰に読んでもらいたいか？とということです。
万人受けするブログを目指すならシンプルなものがいいですし、女性狙いならかわいらしい雰囲気にするのもいいと思います。
わたしのブログは、自分が好きな濃いピンクと白を基調にしています。
他にもテーマを使ってきましたが、Luxeritasは可愛らしい雰囲気になりやすいテーマだと感じました。
凝ったデザイン構成にしても、色がいまいちだとブログ全体の雰囲気もぱっとしません。
どんな雰囲気にしたいか、何色をメインに使うか、ぼんやり決めてからカスタマイズしましょう！
考えすぎて手が止まることが１番もったいないので、とりあえずやってみるという気持ちも大事です。
ブログ・サイトが10倍おしゃれになる初心者向けカスタイズ例まとめ
Luxeritasは、親テーマと子テーマの２つをダウンロードしますが、親テーマはいじらず、子テーマを使用します。
親テーマをカスタマイズすると、テーマ作成者の方が改変したときにカスタマイズ内容がリセットされるからです。
カスタマイズする時は、ダッシュボード➜カスタマイズ(外観)➜追加CSSが基本です。
カスタマイズを紹介する記事でfunction.phpなどテーマ編集してカスタイズしている場合がありますが、初心者の人にこの方法はおすすめしません！
わたしは「簡単にできる」と謳っている記事の通りにfunction.phpを編集したことがありますが、致命的なエラーで画面が真っ白になったことがあります…。
ブログやパソコンの知識が少ない場合、復旧作業は本当に大変です…。わたしは泣きながら作業しました。
ある程度知識がつくまでは、追加CSSで出来る範囲でカスタイズすることをおすすめします！
字体（フォントファミリー）の変更
わたしの場合、まず字体を変更しました。
ダッシュボードの外観➜カスタマイズ➜字体（フォントファミリー）をクリックすると、簡単に字体を変えることができます。
たくさん字体があるので、自分のブログに合った字体（フォント）を見つけてみてください
リンクの文字色・リンクホバー時の色変更
文字の色も変更しました。
リンクの色を青、リンクホバーの色とヘッダーの色をピンクにしました。
ダッシュボードの外観➜カスタマイズ➜文字色で変更することができます。
目次の挿入
目次があると、「どんなことが書いているかな？どれくらいのボリュームなのかな？」ということが分かって、安心して読むことができます。
読みたい部分まで飛ぶこともできます。
Luxeritasはプラグインなしで簡単に目次を作ることができるので、使わせていただきました。
ダッシュボードの外観➜カスタマイズ➜目次をクリック。自動で目次を挿入するにチェックをすれば完成です。
初期状態を目次が開いた状態にするか、読者がクリックしてから開いた状態にするか選択できます。
わたしのブログは記事が長いものが多いので、初期状態は目次を閉じた状態にしています。
初期の目次は、かなりシンプルな作りだったので、少しカスタマイズしています。
参考にしたのは下の記事です。
参考記事 ルクセリタス機能の目次デザインをカスタマイズ３パターン
Page Topの色を変更
Page Topの色も変更しました。
Page Topの色も変更しています。ダッシュボードの外観➜カスタマイズ➜細部の見た目で変更することができます。
わたしは少し大きめにして、角に丸みをつけました。細かい点ですが、かわいらしい雰囲気になったので大満足でした。
あわせて読みたいのリンクを設置
あわせて読みたいリンクを設定しました。
方法が分からないときは初期設定されているボタンを利用したりしていたのですが、あわせて読みたいリンクを張った方が本格的なブログになります。
ダッシュボードの外観➜カスタマイズ➜追加CSSで編集すると、利用できるようになります。
詳細は参考サイトでも分かりやすく説明してくれているので、安心してくださいね
参考にさせていただいたのは、下の記事です。
参考記事 「あわせて読みたい」のリンクをWordPressで設置する方法
強調を蛍光ペンのマーカー風にカスタマイズ
蛍光ペンのマーカー風にしました。
Luxeritasはカスタマイズしなくても蛍光ペン風マーカーが使えたのですが、「ちょっと思ってるのと違う気がする…」と思ったので、追加カスタマイズしました。
ダッシュボードの外観➜カスタマイズ➜追加CSSに追記します。
参考にさせていただいたのは、下の記事です。
参考記事 ブログの文章を蛍光ペンでマーキングしたように表示する方法
タグを付箋風にカスタマイズ
タグを付箋風にしました。
ダッシュボードの外観➜カスタマイズ➜追加CSSに追記します。
参考にさせていただいたのは、下の記事です。
参考記事 ウィジェットのタグクラウドを自分好みのデザインにカスタマイズ
追加CSSで見出し・サイドバーのデザインをカスタマイズ
Luxeritasの初期見出しはすごくシンプルなので、かわいいデザインに変更しました
ダッシュボードの外観➜カスタマイズ➜追加CSSに追記します。
参考にしたのは、下の記事です。
参考記事 CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
初期の見出しデザインと追加したデザインが重なってしまい、「困ったなぁ」と思っている時に見つけたサイトです。とてもかわいいデザインと分かりやすい説明で助かりました。
参考記事 CSSコピペで出来るシンプル可愛い見出しデザイン【女性向け】
アフィリエイトリンクをボタン風にカスタマイズ
アフィリエイト広告をこんな風にボタンに変更しました。
ボタンに変更することで、アフィリエイトリンクとブログの雰囲気が合うようになります。
ダッシュボードの外観➜カスタマイズ➜追加CSSに追記します。
参考にしたのは下の記事です。
参考記事 【保存版】クリック率を上げる！アフィリエイトリンクのボタン化デザイン6選。
もしもアフィリエイトの簡単リンクをカスタマイズ
本などの紹介は、もしもアフィリエイトの簡単リンクを利用しています。
もしもアフィリエイトを利用した方が、楽天などのアフィリエイトを直貼りするよりも少しお得になります。
初期設定はかなりシンプルなので、ブログの雰囲気と合うようにカスタマイズしました。
参考にしたのは下の記事です。
参考記事 もしもアフィリエイトの『かんたんリンク』をCSSカスタマイズ！【2選】
トップページの記事一覧(ブログカード)の表示をカスタイズ
記事を読む表示とメタ表示を変更して、記事一覧の表示を変えました。
ダッシュボードの外観➜子テーマの編集➜スタイルシートで変更しましたが、追加CSSでもできるかもしれません。
参考にしたのは、下の記事です。
参考記事 ルクセリタスの記事一覧（カード）デザインをプチカスタマイズ
記事下のSNSシェアメッセージ下線の色を変更
細かい部分ですが、SNSシェアメッセージの下線の色を変更しました。
ダッシュボードの外観➜カスタマイズ➜追加CSSに追記します。
参考にしたのは、下の記事です。
参考記事 Luxeritas（ルクセリタス）の見た目をオシャレに！ 15のカスタマイズしたことまとめ【WordPressテーマ】
トップページの記事タイトルのホバー色を変更
参考にしたのは、下の記事です。
トップページの記事タイトルのリンク色は、外観カスタマイズから変更できなかったので、追加CSSでカスタマイズしました。
参考記事 ブログテーマをLuxeritasに変更してカスタマイズした12項目と困ってること
記事下にある前後記事のホバー色の変更
記事下にある前後記事のホバー色も、外観カスタマイズから変更できなかったので、追加CSSでカスタマイズしました。
参考にしたのは、下の記事です。
参考記事 ブログテーマをLuxeritasに変更してカスタマイズした12項目と困ってること
絵文字を利用する
Font Awesomeを使って、絵文字も使用しています。
記事がかわいくなりますし、難しい内容でも「読んでみようかな？」と思える気がします。
かわいいアイコンがたくさんあるので、気になる方はFont Awesomeの公式サイトを覗いてみてください。
記事の内容に集中してもらうためにはブログやサイトのデザインも大事
今回はわたしが行ったカスタマイズ方法をまとめました。
ブログやサイト運営において１番大切なのは記事の内容ですが、記事に集中してもらうためには読者が不快にならないデザインにする必要があります。
すごく凝ったデザインにする必要はないけれど、ある程度のデザイン性やカスタマイズは必要です。
読者好みのブログやサイトデザインに仕上げることができれば、ブログの世界観に入ってもらいやすくなります。
他にもブログ・サイト運営がはかどるプラグインやテーマの比較などの記事も書いています。
よかったら他の記事も読んでみて下さい
わたしは現在有料テーマSTORK19を使っており、追加CSS等はほとんどしていません。
このブログのデザインが気になった方がいれば、ぜひ公式サイトを覗いてみてください。
最後までご覧いただき、ありがとうございました！
こんにちは、投資ブロガーとうなです