ブログが10倍おしゃれになった!初心者向けLuxeritasデザイン・カスタマイズ方法まとめ

藤奈

こんにちは、投資ブロガー藤奈です

ブログ運営において、一番大切なのは記事の内容ですが、デザインもすごく重要だと思っています。

デザインが整っているブログは説得力が生まれますし、「続きを読んでみようかな?」と思ってもらえるからです。

昔からブログを読むのが大好きなんですが、定期的に読んでいるブログは見た目もおしゃれでかわいらしいものばかりです。

自分好みのデザインのブログは、読んでいるだけで楽しくなります!

今回はワードプレスのカスタマイズ方法をお伝えします。「HTML?CSSってなに?」の超初心者だったわたしでもできた方法です。

Luxeritaをカスタマイズしようと思っている方は、ぜひ読んでみてください

Luxeritas(ルクセリタス)は、高速表示でSEO対策もできるテーマ

わたしは現在有料テーマのSTORK19を使っていますが、以前はLuxeritas(ルクセリタス)を使っていました。

LuxeritasはSEO最適化はもちろん、ブラグインを導入しなくても簡単にカスタマイズできる高評価のテーマです。

目次導入方法を紹介している記事やアイコンファント導入記事、all in one設定方法記事などを見て、「Luxeritasは標準設定されているから助かった」と思ったことが何度もあります。

Luxeritasの1番の魅力は、高速表示です。

以前、同じく高評価の無料テーマCocoonを使ったのですが、表示速度が全然違いました。

(Luxeritas➡Cocoonに変更すると、表示速度が極端に遅くなることがあるらしいので、そのせいかもしれません)

ある程度知識のある方は、ページ速度を早くできるのかもしれませんが…わたしは試行錯誤しても表示速度がほとんど変わらず。

Cocoonの方がカスタマイズの幅は広いと思うのですが、表示速度はLuxeritasの方が早いです。

ブログの表示速度は、検索順位にも影響を与える重要な要素です。そして表示速度は初心者が何とかできるものではありません。

わたしは初心者の方にこそLuxeritasをおすすめします!

関連記事 CocoonとLuxeritasを徹底比較!使うならどっち?

ブログカスタマイズの基礎知識

ブログのカスタマイズは、HTMLCSSを組み合わせて行います。

分からない単語があるとそれだけで難しく感じてしまうので、簡単な意味をお伝えします。

HTMLは骨組みを作るものCSSはブログを装飾するものです。

HTMLのコードと書いてあれば、このコードは骨組みを作るコード、CSSのコードが書いてあれば、コードは装飾するためのコードだと思ってください。

先輩ブロガーさんが分かりやすく紹介してくれているので、この2つを理解しているだけで大体なんとかなります

全体のデザインを決める

ブログのカスタマイズをする前に、なんとなくでいいので全体の色合いを考えてみてください。

全体の色合いを考えるときに大切なのは、見やすさ誰に読んでもらいたいか?とということです。

万人受けするブログを目指すならシンプルなものがいいですし、女性狙いならかわいらしい雰囲気にするのもいいと思います。

わたしのブログは、投資と副業で理想の生活を送るというコンセプトなので、女性が多いかなと思って濃いピンクと白を基調にしています。

単純に自分の好きな色という理由もあります。

凝ったデザイン構成にしても、色がいまいちだとブログ全体の雰囲気もぱっとしません。

考えすぎて手が止まることが1番もったいないので、とりあえずやってみるという気持ちも大事です。

ブログのカスタマイズは慣れるとすぐにできるので、ぼんやりでもいいので決まればやってみてください

初心者に優しいデザイン・カスタイズ例まとめ

Luxeritasは、親テーマと子テーマの2つをダウンロードしますが、親テーマはいじらず、子テーマを使用します。

親テーマをカスタマイズすると、テーマ作成者の方が改変したときにカスタマイズ内容がリセットされるからです。

カスタマイズする時は、ダッシュボード➜カスタマイズ(外観)➜追加CSSが基本です。

カスタマイズを紹介する記事でfunction.phpなどテーマ編集してカスタイズしている場合がありますが、初心者の方にこの方法はおすすめしません!

わたしは「簡単にできる」と謳っている記事の通りにfunction.phpを編集したことがありますが、致命的なエラーで画面が真っ白になったことがあります…。

本当に泣きながら復旧させました。

ある程度知識がつくまでは、追加CSSで出来る範囲でカスタイズすることをおすすめします!

字体(フォントファミリー)の変更

わたしの場合、まず字体を変更しました。

ダッシュボードの外観➜カスタマイズ➜字体(フォントファミリー)をクリックすると、簡単に字体を変えることができます。

たくさん字体があるので、自分のブログに合った字体(フォント)を見つけてみてください

リンクの文字色・リンクホバー時の色変更

文字の色も変更しました。

リンクの色を青、リンクホバーの色とヘッダーの色をピンクにしました。

ダッシュボードの外観➜カスタマイズ➜文字色で変更することができます。

目次の挿入

目次があると、「どんなことが書いているかな?どれくらいのボリュームなのかな?」ということが分かって、安心して読むことができます。

読みたい部分まで飛ぶこともできます。

Luxeritasはプラグインなしで簡単に目次を作ることができるので、使わせていただきました。

ダッシュボードの外観➜カスタマイズ➜目次をクリック。自動で目次を挿入するにチェックをすれば完成です。

初期状態を目次が開いた状態にするか、読者がクリックしてから開いた状態にするか選択できます。わたしのブログは記事が長いものが多いので、初期状態は目次を閉じた状態にしています。

初期の目次は、かなりシンプルな作りだったので、少しカスタマイズしています。参考にしたのは下記のブログ記事です。

ルクセリタス機能の目次デザインをカスタマイズ3パターン

Page Topの色を変更

Page Topの色も変更しました。

Page Topの色も変更しています。ダッシュボードの外観➜カスタマイズ➜細部の見た目で変更することができます。

わたしは少し大きめにして、角に丸みをつけました。細かい点ですが、かわいらしい雰囲気になったので大満足

あわせて読みたいのリンクを設置

あわせて読みたいリンクを設定しました。

方法が分からないときは初期設定されているボタンを利用したりしていたのですが、あわせて読みたいリンクを張った方が本格的なブログになります。

ダッシュボードの外観➜カスタマイズ➜追加CSSで編集すると、利用できるようになります。

詳細は参考サイトでも分かりやすく説明してくれているので、安心してくださいね

参考にさせていただいたのは、下記のサイト記事です。

「あわせて読みたい」のリンクをWordPressで設置する方法

強調を蛍光ペンのマーカー風にカスタマイズ

蛍光ペンのマーカー風にしました。

Luxeritasはカスタマイズしなくても蛍光ペン風マーカーが使えたのですが、「ちょっと思ってるのと違う気がする…」と思ったので、追加カスタマイズしました。

ダッシュボードの外観➜カスタマイズ➜追加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を使って、絵文字も使用しています。

記事がかわいくなりますし、難しい内容でも「読んでみようかな?」と思える気がします。

かわいいアイコンがたくさんあるので、気になる方は公式サイトを覗いてみてください。

Luxeritasに関する記事一覧

今回はわたしが行ったカスタマイズ方法をまとめました。

他にもプラグインやテーマ比較など、Luxeritasに関する記事を書いているので、よかったら他の記事も読んでみてください。

関連記事 【初心者向け】効率化~セキュリティ対策まで!ルクセリタスおすすめプラグインまとめ

わたしは現在有料テーマSTORK19を使っており、追加CSS等はほとんどしていません。

このブログのデザインが気になった方がいれば、ぜひSTORK19の公式サイトを覗いてみてください。

最後までご覧いただき、ありがとうございました