Luxeritasの定型文機能を理解する

新規作成日 2019-09-06

最終更新日 2019-09-06

Luxeritasには、「定型文」機能が搭載されています。「コードスニペットの挿入機能」です。記事の装飾を行う際に便利であるため、使い方を理解しようと思います。

Wordpressで記事を装飾しようとした場合、cssで、クラス定義をしたスタイルを用意し、htmlで、クラスを指定する必要があります。クラス名を覚えて、コードを追加するのは面倒なので、スニペットを挿入する機能があるととても便利です。

Luxeritasでは、スニペットを挿入する機能のプラグインを新たに導入しなくても、テーマに、定型文という名前で機能が付属しています。

cssのクラス定義

Luxeritasは、Bootstrapを使用したテーマなので、Bootstrapのクラスを覚えれば、自分でcssを定義する必要はありません。しかし、探すのは面倒なので、自分でクラス名を定義したスタイルを用意します。テキストエディタで、cssファイルを用意し、Wordpressのダッシュボードから、cssを登録します。

参考

Wordpress記事内の装飾

記事を装飾するcssスタイルとhtmlの記述

私が、htmlとcssを学び始めた時、少し学べば、タグ辞典を眺めながら、望むデザインを実現するスタイルやタグの組み合わせを作り出せるようになると考えていました。

今では、そんな才能を持っている人は、ほとんど存在しないことを知っています。

望むデザインを実現するスタイルやタグの組み合わせをどこかから見つけてそれを流用して使います。Bootstrapから、探したり、デザインを紹介しているWebサイトから、望む組み合わせを探し、それを利用します。

自分の好みのデザインのスタイルやタグの組み合わせは、どこかに書き留めておき、いつでも使えるようにしておきましょう。

Webサイトを運営しているのでしたら、自分が運営するサイトの記事として公開しておくのも1つの方法です。

参考

記事を作成する際に役立つhtml、cssの知識

定型文機能の使い方

使用するCSSを登録する

ダッシュボードから、外観、カスタマイズを選択します。

追加CSSを選択します。

CSSを貼り付けます。

ここでは、「蛍光ペン風の文字強調」を行うCSSを貼り付けます。

/* 黄色の蛍光ペン */
.marker_yellow {
background: linear-gradient(transparent 60%, #ffff66 60%);
}
/* 黄緑色の蛍光ペン(細)  */
.marker_lime {
background: linear-gradient(transparent 60%, #66FFCC 60%);
}

/* 水色の蛍光ペン(細)  */ 
.marker_water {
background: linear-gradient(transparent 60%, #66ccff 60%);
}

/* 桃色の蛍光ペン(細)  */
.marker_pink {
background: linear-gradient(transparent 60%, #ff66ff 60%);
}