ブログの作り方

カスタムCSS欄

TCD「MAG」のカスタムCSSを使ってみた。ボタンのデザインを簡単に変更できます

TCDのMAGを購入してみました。他のテーマに比べて、設定が簡単だという印象です。

良い感じでブログを作ることができるのですが、クイックタグをカスタマイズしてみたくなったのでCSSをいじってみました。

TCDのテーマはカスタムCSSという機能が付いているので、簡単かつ安全にCSSでカスタマイズできますよ。

今回はMAGのCSSをカスタマイズしますが、おそらくTCDのテーマなら同じだと思います。

さて、カスタマイズする内容ですが、MAGのクイックタグ(投稿画面の記事上のボタン)の大きさとデザインを変更したいと思います。

こちらがMAGのクイックタグです↓

TCDのクイックタグ

MAGのクイックタグ

なぜ変更したいのかというと…

このサイトのテーマはDigiPressの「MAGJAM」を使っていますが、TCDのボタンよりも大きいです。

私は、その大きさに慣れてしまったので、どうも小さく感じてしまうんです。この大きさに慣れてしまったので仕方ありません^_^;

そこで、カスタマイズに挑戦してみることにしました。

CSSのカスタマイズをしてみた感想を言うと、「これは初心者でもできる」と思いましたよ。

CSSの構文は分からなくても、それらしきコードを見つけてきて、コピペでできました。

簡単なので、挑戦してみると面白いと思います。

カスタムCSSは便利

TCDのテーマには、ほとんどのテーマにカスタムCSSという機能がついています。

このカスタムCSSを使えば、テーマがアップデートしたときでも、CSSが上書きされることがありません。

つまり、わざわざ子テーマを作ってカスタマイズする必要が無いのが良いですね^^

カスタムCSSの設定場所は、

外観→TCDテーマオプション→基本設定

の中にあります。

magのカスタマイズ

MAGのカスタマイズ

上の画像から少し下にスクロールすると…

カスタムCSS欄

MAGのカスタムCSS

ここがカスタムCSSの入力欄になります。

ここに変更したい部分のコードを書き込めば(コピペすれば)、すぐに反映されます。

今回はクイックタグを使いたいので、デフォルトのCSSを、カスタムCSSで上書きしてしまおうと思います。

もし気に入らなくても、カスタムCSS欄に入力したコードを消して、保存し直せば元に戻りますからね。

記事の投稿欄にクイックタグが見当たらない場合は、表示を「テキスト」にすると出てきます。
上の画像の右上に「ビジュアル」と「テキスト」ってあるところがありますよね。テキストの方を選択してみてください。

ボタンの形状を変える

私がボタンをどう変えたかったのかというと…

  • ボタンの縦を少し長くしたい
  • 黄色のボタンの色を少し変えたい
  • ボタンに影を付けたい

といったところです。では、変更前と変更後の画像がこちらです↓
MAGのボタンをカスタマイズ

左側の列がデフォルトのボタンで、右側の列がカスタマイズしたボタンです。画像が少しボケ気味なので、実際はもっとくっきりしていてキレイですよ。

私はボタンは目立たせたいので、大きさはこれくらいが好みなんです。

それから、黄色のボタンは色合いを試行錯誤してみましたが… これは難しいですね!

ボタンの色が白なので、黄色を少し暗くしないと文字が目立ちません。どうしても文字が見にくいので、白文字が浮かび上がるように影を入れています。

ボタン全体のデザインは、私の中ではボタンは浮かび上がっていた方がボタンらしいイメージなので、影を付けてみました。

では、コードはこちらです↓
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

.q_button {
position: relative;
line-height: 42px;
box-shadow: 0 3px 0 #cccccc;
text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}
.q_button:hover {
box-shadow: 0 3px 0 #e8e8e8;
}
.q_button:active {
top: 3px;
box-shadow: none;
}

.bt_yellow{
background:#ffc012;
color:#fff;
}

.bt_yellow:hover, .bt_yellow:focus{
background:#ffc919;
color:#fff;
}

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

点線から点線の間をコピーして、カスタムCSSの欄にペーストし、保存します。
(点線はいりません。)

これで、クイックタグから簡単にカスタムしたボタンを出せるようになりました^^

ボタンの組み合わせ

ボタンの形状と色は組み合わせることができます。まずデフォルトの「フラットボタン」をクリックすると…

<a class=”q_button” href=”#”>フラットボタン</a>

と、投稿欄に記入されます。これをプレビューすると、上の画像の一番上のボタンになります。

さて、では角丸ボタンはというと…

<a class=”q_button rounded” href=”#”>角丸ボタン</a>

となります。どうやら、「rounded」という文字が付くと、角丸ボタンになるようです。

では、青色ボタンのクイックタグをクリックすると…

<a class=”q_button bt_blue” href=”#”>フラットボタン-blue</a>

今度は「bt_blue」となりました。

さあ、ではこれらを組み合わせてみましょう!

<a class=”q_button rounded bt_blue” href=”#”>角丸ボタンの青色</a>

これで角丸ボタンの青色のできあがりです^^

ちなみに、ラウンドボタンの緑色はこちらになります↓

<a class=”q_button pill bt_green” href=”#”>ラウンドボタンの緑色</a>

「pill」っていうところがラウンドボタンの形状を表しているんですね。完成形はこんな感じになっているはず↓

カスタムボタン

ボタンをクリックしたらページが切り替わるようにしたい場合は、「href=”#”」の#の部分にURLを入れれば大丈夫です。

例えばこんな感じで↓

<a class=”q_button pill bt_green” href=”https://wp-theme-jp.net”>ラウンドボタンの緑色</a>

やってみると簡単なので、試してみてくださいね!

★MAGはブログ部門の3位にさせていただきました↓
2018年、WordPressテーマの部門別お勧めベスト3を発表!>>

MAGの詳細はこちら>>
 
 

関連記事

  1. Diverでブログを作る

    Diverでブログを作る手順1。プロフィールや記事スライダーを設定しよ…

  2. Diverでブログを作ろう

    Diverでブログを作る手順2。ランキングやタブウィジェットの使い方

  3. Bloomでブログを作る

    Bloomでブログを作る手順1。記事スライダーとウィジェットを設置

  4. Switchで企業サイト作成

    「Switch」で企業サイトを作る手順2。初心者でもこの完成度

  5. スワローでブログ作成

    スワローでブログを作る手順3。スライダーを設置してみよう

  6. SANGOメニューボックス

    「SANGO」のテーマでメニューボックスを設置してみよう

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


PAGE TOP

ブログの作り方

スワローでブログを作る手順1。基本設定と人気記事を作成

スワローでブログ作成1

ブログの作り方

Bloomでブログを作る手順1。記事スライダーとウィジェットを設置

Bloomでブログを作る

ブログの作り方

TCDの「Switch」で企業サイトを作る手順1。設定の仕方を説明

TCDのSwitchでサイト作成

ブログの作り方

TCDの「ONE」でブログを作る手順。トップ画面と記事の設定をします

ONEでブログを作る

ブログの作り方

「SANGO」のテーマでメニューボックスを設置してみよう

SANGOメニューボックス

ブログの作り方

Diverでブログを作る手順1。プロフィールや記事スライダーを設定しよう

Diverでブログを作る