luxeritasをデザイン カスタマイズ例【これやっとけ】

2019年11月23日

luxeritas デザイン

ブログはじめたははじめたけど、デザインがしょぼい!

なんとなくプロっぽく見せたい!という、

初心者やブロガーむけに実装しておいた方が見栄えが良いwordpressテーマのluxeritasについてる機能の実装方法をまとめました。

無料テーマのLuxeritas(このブログ)のデフォルト機能とプラグインを使うことが前提の記事になりますのでご了承くださいませ。
ギリギリ無知の初心者でもわかるんじゃないかと思いますが、ワードプレスでブログを一ヵ月始めた方ぐらい向けのイメージで書きました。

それではお楽しみいただけたらと思います。

スポンサードサーチ

機能カスタマイズする目的【luxeritasをデザイン カスタマイズ例】

まずは使いやすさや、ついついクリックします。

ユーザー心理学を抑えましょう。

プロっぽいデザインにして読むのを楽しんでほしい【UXデザイン】

そのためにユーザーに無意識レベルで感動させる体験を提供するためのデザインにするというです。

この記事では、あくまでUXデザインを意識していきます。

UXデザインとは!?

UX(ユーエックス)は、User Experience(ユーザーエクスペリエンス)の略で、日本語では「ユーザー体験」と訳されています。ユーザー体験とは、ユーザーが製品やサービスを利用することによって受ける印象のことを指します。

難しいから無理!って人のためにあるプラグインやテーマの機能【初心者向け】

デザイン・コーディングはしなくていいです。専門知識自体は必要なく、使い方のパターンを覚えるだけでいいです。

初心者の方は、是非この記事を読んでみてください。

どうしても意味不明でしたら質問お待ちしております。

私も実際にプラグインやテーマの機能を使って、自分のブログを綺麗に使いやすくレベルアップさせながら記事を書いているもので、、

結論ワードプレステーマLuxeritas(ルクタレス)の様にデフォルトで使える機能で済ませる

このブログのワードプレステーマがLuxeritas(ルクタレス)です。こちらでダウンロードできます。

結構おすすめです。せっかく素晴らしいいろいろな機能がデフォルトでついているので使い方がわからないんじゃ勿体ないです。

今回は、下の3点の機能をUXデザイン向上のために説明します。

  1. もくじの自動生成機能
  2. 吹き出し機能
  3. 関連記事を表示させる
Left Caption

ぴよさく

これが吹き出し機能です。
説明をする時などに、見やすくわかりやすいですよね。
詳しい説明はこちらの記事で紹介しております。

 もくじ自動生成編【luxeritasをデザイン カスタマイズ例】

もくじはこの記事の一番上にあるやつです.


もくじ自動生成機能というのは、ワードプレスの投稿記事でh2タグ、h3タグ(h2タグの入れ子)を見出しとして、一番上に勝手に自動でもくじを生成してくれる機能です。見出しにしたい箇所をh2、h3タグで囲む必要があるということですね。

設定は簡単です。ワードプレス管理画面の左のメニューから、カスタマイズ(外観)をクリック

次のページの目次をクリック

次のページの自動で目次を挿入するにチェックを入れればok!

これなら、初心者でもできないとは言わせない!それでは関連記事表示を見てみしょう。

ちなみに僕が利用しているLuxeritasというにテーマにデフォルトでついてる機能ですが、
ついていなかったらTable of Contents Plusというプラグインが使えます。

スポンサードサーチ

関連記事の表示【luxeritasをデザイン カスタマイズ例】

次に、関連記事を表示させます。
文字通りですが、記事の最下部に同じカテゴリなどの関連記事を表示させます。
これがあるだけで見栄えもよくなり、回遊が期待できます。設定は簡単です。もくじの時と同じメニューの全体レイアウトをクリックします。
次の画面で、下の方に下がって、関連記事表示にチェックを入れるだけです。
ワードプレスって便利ですね。とにかく、知識0でまるで経験者みたいな装飾になっていきますね。もちろんこの記事の下に、関連記事がありますのでどのように表示されているかチェックしてみて下さい。こちらもLuxeritasテーマにデフォルトでついてる機能ですが、
ついていなかったらRelated Posts for WordPressというプラグインが使えます。

Smart Slider 3【luxeritasをデザイン カスタマイズ例】

ちょっとでかでかと表示されててすみません。

重くなってしまうので、あまりおすすめしないですが、まとめたのでそのままにしております。

 

私も一回目でして、でも画像スライダーが下の様に表示されました。

設定方法はめちゃくちゃわかりやすい記事がありましたので、
こちらから確認してくださいm(__)m

[smartslider3 slider=2]

やはり、動いてると目が行ってしまうんじゃないかと思います。
画像がでかでかとなっちゃってますが、サイズ指定もできますし、リンクもはれます。
これこそ関連記事などをスライドさせると、ついついタップしちゃうのが心理じゃないかなと思います。

スポンサードサーチ

まとめ【luxeritasをデザイン カスタマイズ例】

お分かりかと思いますが、この記事で説明した答えがこの記事に再現されています。そして最後にもう一度言います。

基本的なUXデザイン向上をつとめよう。
こちらの記事のように簡単にできることはやっていただくことをお勧めします。

  • もくじ自動生成
  • 関連記事の設置
  • 吹き出しでの説明
  • 画像(リンク)スライダーの設置

上記4つの方法はバッチリですか?

ワードプレスはテーマデフォルトの記事を使うことが重要です。
プラグインをホイホイインストールしていると競合して表示が崩れたり、ページが重くなったりすることがあります。

Right Caption

ぴよさく

てか、Luxeritasってテーマ魅力的じゃないですか?

でわ、またワードプレスやデザイン系記事書きます。

さようなら!