初心者でも簡単効果的なフローカスタムでルクセリタスの不満解消

ルクセリタスフローカスタム

フロー簡単カスタム

ワードプレス初心者は無料テーマルクセリタスを使用している方も多いはず。

ルクセリタスはラテン語の Lux()と Celeritas()の造語だけあり速さにこだわるワードプレス無料テーマです。

しかし無料テーマのライバルCocoonに比べると若干物足りなさを感じる事もあります。

フローが無いのが不満!!

初心者でも簡単すぐにできる方法は無いの?

そんな不満を解決する為にサクッと簡単に作れるフロー作成方法をご紹介します

この方法から手早く登録し、あなたがやるべきコンテンツを素早く充実させましょう。

スポンサーリンク

【結論】ルクセリタステーマの場合おすすめフローはこれ!

1️⃣ワードプレスインストール

ワードプレスインストールは公式ページより

2️⃣設定方法

ここをクリックしてからあそこをクリックします。

3️⃣完成

これで完成です

こんな感じでいかがでしょうか?

フローとは

フローは、英語の flow の事で、流れや流動という意味になります。

上の例ではワードプレスインストールの流れを表したものになります(だいぶ端折っていますが・・・)

使用例としては料理のレシピを紹介する際や何かの手順を説明する際には便利です。

物事の流れを説明するにはわかりやすさが一番大事です。

例えばこのフローを次のように表現していたらどのように感じますか?

  1. ワードプレスインストール:ワードプレスインストールは公式ページから
  2. 設定方法:ここをクリックしてから、あそこをクリックします。
  3. 完成:これで完成です。

・・・・・・・・

同じ内容ですがせっかくあなたのブログに訪れてきてくれた方の為に見やすくしたほうが、断然良いと思いませんか?

しかし残念ながらワードプレス無料テーマのルクセリタスにはフローの機能はありませんので、初心者の方でも簡単手軽に出来るよう作ってみました。

では他の無料テーマにはこのようなフローの機能はあるのでしょうか?

Cocoonの場合

おそらくワードプレスを始めたばかりの方が一番多く使用していると思われる無料テーマがCocoonだと思います。

多くのデザインパターンが用意されており、ワードプレス初心者でも簡単におしゃれなブログを作ることが出来ます。

そんなCocoonにはフローではないのですが、タイムラインという機能があり、それを代用することが出来ます。

本来タイムラインは時系列の事をいいますので、フローとはちょっと違いますが、これはこれでわかりやすいかもしれません。

Lightningの場合

Lightningはワードプレス公式ディレクトリに登録されているだけあり、高機能で使いやすい無料テーマです。

しかしどちらかといえば個人用ブログよりも商用で利用されていることが多いようです。

Lightningにはフロー機能があります。

横には画像を入れることが出来、料理レシピの紹介には大活躍してくれそうです。

初心者でも簡単サクッとフローを作る方法

1️⃣トピック設定

  1. ルクセリタス専用ブロックトピックを設定
  2. 再利用ブロックに登録
2️⃣アニメーションコード貼り付け

  1. Font AwesomeのコードをHeadタグに貼り付け
  2. コードを再利用ブロックに登録
3️⃣再利用ブロックから配置

再利用ブロックから配置し内容記入

早速フローを使ってみました🤣

ではトピック設定から始めてみましょう。

注意事項

本説明は特定の環境下における現象・手順を示したものであり、個々の環境下では予想外の出来事が起きたり、そのほかの作業が必要になる場合もあります。

バックアップするなど自己責任にてカスタムをお願いいたします。

トピック設定

プラスマーク(ブロックの追加)

ブロックの追加
すべて表示をクリック

全て表示クリック
ルクセリタスブロック内トピッククリック

ルクセリタスブロック内トピッククリック

トピックブロックを自分の好きなように設定することが出来ます。

私の例を参考に挙げますと

1️⃣タイトル

内容

・外観:タイトル幅いっぱい
・タイトル:NIL(数字は絵文字を入れています)
・枠線の丸み:5

こんな感じですが、ブログのデザインや色彩に合わせて自分なりの配色にしてみてください。

次にこの内容を再利用ブロックに登録します。

再利用ブロックは文字通り登録した内容を簡単に再現できるシステムですので、よく使用するものを登録しておくと非常に便利な機能です。

では再利用登録してみましょう。

再利用ブロック登録

ハンバーガーボタンクリック

再利用ブロックに追加クリック

名前登録後保存

通常のブロックへ変換クリック

 通常のブロックへ変換をクリックしないと編集できませんので忘れずに!

Font AwesomeアニメーションコードをHeadタグに登録

Font Awesomeとはアイコンを文字として扱うことを可能にしたツールです。画像ではなく文字なので、拡大しても粗くなることはなく、色やサイズなどを簡単に変えることができます。

例えば

など何処かで必ず見たことがあるアイコンです。

フローは流れをいいますので、矢印のアングルダブルダウンを使用しています。

アニメーションで動きをつけ、効果的に視覚に訴えます。

Font AwesomeアニメーションコードをHeadタグに追加

まず前段階として下のコードをHeadタグに貼り付けます。

子テーマにコードを追加をする際は事前にバックアップを取るようにしてください。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />
Luxeritas→子テーマの編集

Headタグ貼り付け保存

コードを再利用ブロックに登録

<center><i class="fas fa-angle-double-down fa-3x faa-vertical animated "></i></center>

このコードをコピーしカスタムHTMLに貼り付けると

カスタムHTMLに貼り付け

これで動きのあるアングルダブルダウンができているはずです。

先ほどトピックを再利用ブロック登録したのと同じように登録してください。

Font Awesomeの使い方は有料テーマSANGOの作者サルワカさんの解説を見るのが一番わかりやすいです。

アイコンを変えたりアニメーションの種類を変えたりできますので、自分なりに挑戦してみてください。

再利用ブロックから配置

再利用ブロックから配置し内容を記入すれば簡単手軽なフローが出来上がります。

1️⃣題名

内容

簡単手軽なプラグインを使った方が綺麗で素敵なデザインになるのでは?

プラグインはワードプレスを拡張する為のいわゆる武器のようなものです。

高性能な武器は確かにデザインも機能も素晴らしいかもしれません。

しかし我々が映画ランボーのようにたくさんの武器を持ち歩いていたら重すぎて歩くことさえ困難になります。

それと同じでプラグインを沢山入れるとブログの表示が遅くなってしまいます。

このフローを毎回使うのであればプラグインを導入するのもアリですが、たまにしか使わないのであれば、今回のフローで十分です

今はまだそうではありませんが、今後サイト表示スピードはSEOに多大に影響してくると思われます

表示スピードが速けれは速いほどSEO的に有利になり、遅ければSEO的に不利となるはずです。

せっかくLux(光)と Celeritas(速)テーマを使用しているのですから、プラグインの使用を極力避け、スピードにこだわる為に今回簡単フローをご紹介しました。

初心者でも簡単効果的なフローカスタムでルクセリタスの不満解消まとめ

フローが無いのが不満なルクセリタステーマ使用者は

  1. トピック設定
  2. アニメーションコード貼り付け
  3. 再利用ブロックから配置

このような手順で行うことで簡単効果的フローを作ることが出来ます。

よろしければあなたのブログに合わせたフローを作ってみてください。

この記事制作時の環境はLuxeritas Theme 3.12.0.1 WordPress 5.6です。

スポンサーリンク