WordPressテーマ STORK (ストーク)のボックスカラーバリエーションを増やす

当ブログで利用している「WordPressテーマ「ストーク」 」にはボックスという、v1.1.3から追加された装飾機能があります。

例えば

ここにタイトル
こんな感じで記載事項をボックスで囲えます

 

ボックスで用意されているのは、青、赤、黄、緑、グレー、黒、ですが

当ブログではテーマカラーをラベンダーにしているため、

リストなどを使うとどうしてもカラーの相性が悪い。

ブルーボックスの場合
  • iMac
  • MacBook
  • ←ここがラベンダーなので違和感

今回追加したはラベンダーボックス。自然に見えますよね。

ラベンダーボックス
  • iMac
  • MacBook
  • ←背景色を変えたから自然

 

このように自分好みのボックスカラーバリエーションを増やす方法を紹介します。

 

ボックスの使い方については公式サイトを参照

>>>>「ボックス」ショートコード表示サンプル

 

STORKのstyle.cssに定義をコピペで追加

STORKのボックスは親テーマのプログラムの中で定義されています。

今回追加するボックスのテーマは「STORK 子テーマ」のstyle.cssに定義を追記します。

 

「外観」→「テーマの編集」を開きます。

 

追加するCSS

 

このように、ファイルのおしりのほうにコピペしてください。

(大文字小文字混在でごめんね)

 

以下のようなショートコードでボックスが使用できるようになります。

 

自分好みのボックスにカラー設定しよう

設定箇所は少ないので、好きなカラーコードを設定してください。

自分好みのボックスが完成します。

先ほど追加したCSSを簡単に説明します。

/* 追加 ラベンダーBOX*/  ←コメント
.c_box.lavender_box{   ←[わかりやすい色名]_box
background: #F3E5F5;   ←ボックスの背景色
border-color: #cab8d9;   ←ボックスの枠線色
color: #465D65;      ←文字の色
}
.c_box.intitle.lavender_box .box_title span{
background: #cab8d9;   ←タイトル部分の背景色
}

 

カラーコードについては、こちらのサイトで確認しています>>>「HTML カラーチャート

 

STORKのショートコードをAddQuicktagに登録する

ショートコードをお使いの方は「AddQuicktag」というプラグインを利用しましょう。

STORK ボックスを登録します。

 

登録できると、WordPressの記事編集画面で簡単に呼び出せるようになります。

 

 

カスタマイズしたCSSが反映されない場合

変更をしたつもりなのにCSSが効かないという場合にはキャッシュを疑いましょう。

 

キャッシュプラグインを導入している方は、サーバー側のキャッシュを削除。

そうではない場合は、ブラウザ側の削除を行いましょう。

 

実は、僕もこのカスタマイズ中に反映されなくて困っていました。

 

Twitterでふうやさん(@fwww0707)からヒントをいただきました。

 

Satoshi
ver ????

 

ええ必死にググりました。そしてどうやら僕がよくわかってないことがばれたらしく、、

 

さらに助け舟

 

ちょっと話が難しくなりますが、ふうやさんがいう「ver指定」とは「version指定」という意味になります。

小難しいことは抜きにして、function.phpに以下を追記します。

参考>>>WordPressのstyle.cssに任意のバージョンを設定する

 

この定義の意味は、style.cssが更新された日時をcssのバージョン情報として使うです。

これでstyle.cssを変更したタイミングでバージョン情報が変更されて再読み込みが行われCSSが反映されます。

 

function.phpの変更はバックアップをとってから慎重に行いましょう

子テーマをいじりましょうね。

 

STORKカスタマイズおすすめ記事

STORKは有料のWordPressテーマです。

無料テーマにはないいろんな機能があり、ちょっといじっただけでとてもブログがかっこよくなりますのでぜひ個性あるカスタマイズにチャンレンジしてみてください。

 

 

 

こちらの記事も読まれています



コメントを残す

メールアドレスが公開されることはありません。

ABOUTこの記事をかいた人

satoshi

Macブロガー 幼少の頃からMac中心の生活。 MacやiPhoneなどAple関連を中心に情報発信します。 最近は仮想通貨にもハマってます。 趣味のZOOMERカスタムも載せていきます!