【初心者向け】ブログが一気におしゃれになる!Luxeritas(ルクセリタス)デザイン・カスタマイズ方法まとめ

アフィリエイトブログ, 収入を増やすLuxeritas

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

ブログを始めて半年以上が過ぎ、少しずつブログのデザインに手を加えています

ブログ運営において、一番大切なのは記事の内容ですが、デザインもすごく重要だと思っています。デザインが整っているブログは、説得力が生まれますし、「続きを読んでみようかな?」と思ってもらえるからです。

昔からブログを読むのが大好きなんですが、定期的に読んでいるブログは見た目もおしゃれでかわいらしいものばかりです。自分好みのデザインのブログは読んでいるだけで楽しくなります

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

ブログをカスタマイズしようと思っている

ブログの見た目を変更したいと思っている

このように思っている初心者ブロガーさんはぜひ読んでみてください

おすすめの無料テーマ「Luxeritas」

わたしは無料テーマで高評価のLuxeritas(ルクセリタス)を使っています。

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

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

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

ある程度知識のある方は、ページ速度を早くできるのかもしれませんが…わたしは試行錯誤しても表示速度がほとんど変わらず。Cocoonの方がカスタマイズの幅は広いと思うのですが、表示速度はLuxeritasの方が圧倒的に早いです。

ブログの表示速度は、検索順位にも影響を与える重要な要素です。わたしのような初心者の方にこそ、Luxeritasがおすすめです

わたしが紹介している方法もLuxeritas以外だと違うかもしれません。

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

ブログのカスタマイズは、HTMLCSSを組み合わせて行います。分からない単語があるとそれだけで難しく感じてしまうので、簡単な意味をお伝えします。

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

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

全体のデザインを決める

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

全体の色合いを考えるときに大切なのは、見やすさと誰に読んでもらいたいか?ということです。万人受けするブログを目指すならシンプルなものがいいですし、女性狙いならかわいらしい雰囲気にするのもいいと思います。

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

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

考えすぎて手が止まることが1番もったいないので、とりあえずやってみるという気持ちも大事です。ブログのカスタマイズは慣れるとすぐにできるので、ぼんやりでもいいので決まればやってみてください

デザイン・カスタイズ方法まとめ

Luxeritasは、親テーマと子テーマの2つをダウンロードしますが、親テーマはいじらず、子テーマを使用します。親テーマをカスタマイズすると、テーマ作成者の方が改変したときにカスタマイズ内容がリセットされるからです。

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

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

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

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

わたしのブログで「これいいかも!」と思う部分あれば、記事を参考にぜひ取り入れてみてください

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

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

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

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

文字の色を変更しています。リンクの色を青、リンクホバーの色とヘッダーの色をピンクにしています。ダッシュボードの外観カスタマイズ文字色で変更することができます。

以前はリンクの色もピンクにしていたのですが、「分かりにくい気がする」と思って、よく使われている青色にしました。以前よりも見やすくなった気がします。

目次の挿入

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

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

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

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

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

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

Page Topの色を変更

Page Topの色も変更しています。ダッシュボードの外観カスタマイズ細部の見た目で変更することができます。わたしは少し大きめにして、角に丸みをつけています。細かい点ですが、かわいらしい雰囲気になったので大満足です

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

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

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

あわせて読んでほしいと少し文章を変更して使っています。

テーマによって若干違いがあるかもしれませんが、Luxeritasの場合はダッシュボードの外観カスタマイズ追加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を使って、絵文字を利用するようになりました

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

かわいいアイコンがたくさんあるので、公式サイトを見てみてくださいね

「アイコンフォントがありすぎて、どれを使えばいいのか分からない…」という人は、良く使うかわいいアイコンフォントをまとめたので、参考にしてみてください

canvaを使って画像編集

カスタマイズではありませんが、わたしのブログの雰囲気づくりに欠かせないのが、canvaです。

canvaは無料の画像編集ソフトで、ソコンはもちろん、携帯アプリとしても利用できます。操作がとっても簡単で、直感的に使えて、とても便利です

わたしは移動時間などに携帯のアプリでアイキャッチ画像を作ったりしています。

本格的な有料ソフトの方が良いかもしれませんが、使いこなせる自信もありませんし、今はvanvaで充分だと考えています。

ブログのロゴもcanvaを使って作成しました。

canvaは有料のイラストやスタンプ、テンプレートもありますが、無料分で充分使えます。手軽に簡単な画像編集をしたいという方におすすめです

まとめ

今回はわたしが行ったカスタマイズ方法をまとめてみました。ブログのデザインは今後も改善していきたいと思うので、随時更新していきたいと思います。

記事は参考になったでしょうか?最後までお読みいただき、ありがとうございました

Luxeritas(ルクセリタス)に関する記事一覧

【比較検証】ワードプレスの人気無料テーマ!LuxeritasとCocoon使うならどっち?SEO・デザイン性などを比べてみた

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

Font Awesomeで見つけた!今すぐ使えるかわいいアイコンフォントまとめ