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