Luxeritas(ルクセリタス)でCSSカスタマイズとCSSの参考にしたサイト

2017年10月12日

カスタマイズcss

子テーマを上書きしてしまって今まで書いていたsytle.cssが消えてしまいました。

バックアップをとっておけばよかったのですが、たいしてカスタマイズをしていなかったのでバックアップをとっていなかったんです。

それで朝から

myu
myu
どこを弄ったっけ?

と記憶をたどりながら復旧しました。

なにせ、素人なものでCSSもPHPもHTMLもよくわからないので、テーマのカスタマイズはほぼコピペなんですね。

ということで、またバックアップを取り忘れても困らないように、どこを弄ったのか備忘録として残しておきたいと思います。

参考にしたサイトさんのリンクも貼っておきますので、わたしのようにコピペに頼ってカスタマイズしている方のご参考になればと思います。

環境

  • CMS:WordPress
  • テーマ:Luxeritas 2.3.2
  • 子テーマ:2.0.0

LuxeritasでWordPress Popular Postsを使うときのCSSサンプル

カスタマイズcss

人気記事を表示させるプラングインの「WordPress Popular Posts」をLuxeritasの新着記事を同じような見た目にしたいので、CSSをstyle.cssへ追加しました。

参考にしたサイトはこちら。

表示を少し変更したので、自分用のCSSサンプルはこちら。

Luxeritasのh1~h6タグのフォントファミリーを変更

Luxeritasの場合、カスタマイズ画面でフォントがいろいろと選べます。ただ、わたしの場合、タイトルは游ゴシックで、文章はメイリオを使いたかったので、style.cssに見出しタグのフォントファミリーを追記しました。

/*------------------------------------------------------------
フォントファミリー
-------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
        font-weight: bold;
	font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue","Yu Gothic",YuGothic,"ヒラギノ角ゴ ProN W3",Hiragino Kaku Gothic ProN,Arial,"メイリオ",Meiryo,sans-serif;
}
.sitename {
        font-weight: bold;
      	font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue","Yu Gothic",YuGothic,"ヒラギノ角ゴ ProN W3",Hiragino Kaku Gothic ProN,Arial,"メイリオ",Meiryo,sans-serif;
}

最近、遊ゴシックという書体に惹かれます。デザインがすっきりとしていてシンプルでいいですよね。

また

-apple-system あまり見ない指定かと思いますがこの指定をすると、OS X El Capitan、iOS 9以降であればAppleの最新システムフォント「san francisco」が適用されます。

参考にしたサイト。

個別記事の見出しの色を変更

見出しタグをかわいく

個別記事の見出しタグを見やすく、かわいいデザインにしました。

/*------------------------------------------------------------
個別記事タイトル
-------------------------------------------------------------*/
.post h2 {
	background: #7dd0c6;
	box-shadow: 0px 0px 0px 5px #7dd0c6;
	border: dashed 1px #fff;
	padding: 0.5em 0.8em;
	color: #fff
}

.post h3 {
        border-left: none;
        border-bottom: 3px #7dd0c6 solid;
        position: relative;
        padding: 0.2em 0 0 1.7em;
}
.post h3:before{
        background: #7dd0c6;/* 左上四角部分の色 */
        top: 0;/* 左上四角部分の位置 */
        left: 0.5em;/* 左上四角部分の位置 */
        height: 12px;/* 左上四角の大きさ */
        width: 12px;/* 左上四角の大きさ */
        position: absolute;
        transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        content: "";
}
.post h3:after{
        background:#b2eae3;/* 左下四角部分の色 */
        top: 0.8em;/* 左下四角部分の位置 */
        left: 0.2em;/* 左下四角部分の位置 */
        height: 8px;/* 左下四角の大きさ */
        width: 8px;/* 左下四角の大きさ */
        position: absolute;
        transform: rotate(15deg);
        -moz-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        -o-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        content: "";
}

Luxeritasのサイドバーのデザインをカスタマイズ

カスタマイズcss

サイドバーのh3、h4タグを少し飾ってみました。

/*------------------------------------------------------------
サイドバー
-------------------------------------------------------------*/
#side h3, #col3 h3, #side h4, #col3 h4{
	background: #f38181;
	box-shadow: 0px 0px 0px 5px #f38181;
	border: dashed 1px #fff;
	padding: 0.5em 0.8em;
	color: #fff;
}

参考にしたいサイト。
おしゃれな見出しデザインがまとめられています。

個別記事のタイトル下にアイキャッチ画像を表示

カスタマイズcss

個別記事のタイトル下にアイキャッチ画像を表示させました。

Luxeritasの作者のブログに記載があったのでその通りにfunction.phpとsytle.cssに追加。

ライン風の吹き出しをプラグインなしで

ライン風

プラグインを使うのはあまり好きでないので、ライン風の吹き出しをプラグインなしで実装。

こちらもLuxeritasのるなさんのブログにやり方が記載されています。

ポイントと注意書きに使う枠をCSSに追加

ブログの記事を書くときに、ポイントや注意書きで少し目立たせたい箇所に使う枠をCSSで追加しました。

サンプルのCSS通りですが、枠の幅は100%へ変更。

サンプルがこんな感じになります。

ポイント

ここにワンポイントアドバイスを入力します。

注意

ここのちょっとした注意書きを入力します。

カエレバ・ヨメレバのレスポンシブデザインのCSSを追加

ブロガーさんにはおなじみの、「カエレバ」「ヨメレバ」のCSSを追加しました。

参考にしたサイトはこちら。

参考サイトのCSSをまるっとコピーさせていただきました。

パソコンで表示させても、スマホで表示させても綺麗に表示されます。

[サンプル]

タグクラウドの表示をCSSで

カスタマイズcss

タグクラウドも少し見ためを変えてみました。

色だけ、#7dd0c6へ。

プロフィールのSNSリンクを横並びに

カスタマイズcss

ul.yoko li{
    display: inline-block;
}

文字装飾

マーカーで引いたような黄色(細)と黄色(太)と赤字(太)をCSSに追加。

/*--------------------------------------
  文字装飾
--------------------------------------*/  
.marker_yellow_futo {
	background: linear-gradient(transparent 0%, #ffff66 0%);
}
.marker_yellow_hoso {
	background: linear-gradient(transparent 60%, #ffff66 60%);
}
span.red{
	color:#ff0000;
}

参考にしたサイト。

わたしの場合は、記事を入力するときは「AddQuicktag」プラグインを利用して、タグを登録しています。一度作っておけば、書くときはボタン1つで装飾されるのでとても便利です。

黄色マーカー(太)

<span class="marker_yellow_futo"> </span>

黄色マーカー(細)

<span class="marker_yellow_hoso"><strong> </strong></span>

赤太字

<span class="red"><strong> </strong></span>

雑感

子テーマもやっぱりバックアップをとっておけばよかったと、今さらながら反省中です。

※投資についての記事も掲載しておりますが、このサイトは投資を推奨するものではありません。投資はリスクが伴いますので自己責任でお願いいたします。

スポンサーリンク