ブログの作り方

カスタム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. Bloomでブログを作る

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

  2. MAGテーマオプション1

    TCDテーマ「MAG」の広告設置方法。TCDテーマオプション編

  3. スワローでブログ作成1

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

  4. プロフィールトップ

    スワローでブログを作る手順2。カスタムHTMLでプロフィールを作成

  5. BRIDGEの注意点

    TCDのテーマ「BRIDGE」の設定をするときに気をつけたこと

  6. BRIDGEのカスタム投稿タイプ

    TCD「BRIDGE」のランキング機能の使い方を紹介します

コメント

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

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

CAPTCHA


PAGE TOP

メーカー別おすすめ

Web集客に特化した「EMANON」のWordPressテーマを5段階評価してみ…

EMANON

メーカー別おすすめ

美しい日本語にこだわった「isotype」のWordPressテーマを5段階評価…

MONOSTYLE

メーカー別おすすめ

多機能かつ洗練されたWordPressテーマ「DigiPress」を5段階評価し…

fresco

メーカー別おすすめ

デザインの美しさは最上級!「TCD」のWordPressテーマを5段階評価してみ…

TCDのSwitch

メーカー別おすすめ

マテリアルデザインのWordPressテーマ「SANGO」を5段階評価してみた

SANGOテーマ

メーカー別おすすめ

アフィリエイト専用のWordPressテーマ「AFFINGER」を5段階評価して…

wing-affinger5

メーカー別おすすめ

ブログに特化した「OPEN CAGE」のWordPressテーマを5段階評価して…

スワロー

メーカー別おすすめ

検索上位表示と収益化「Diver」のWordPressテーマを5段階評価してみた…

Diverのテーマ