AddQuicktagを使ってブログをワンランクUP! 見出しをカラフルに 初心者でも簡単!

こんばんは、めいぷるです。

私はwordpressでブログを書いています。

CSSとかHTMLとか何にもわからない初心者です。

ここまでコピペで生きてきました。

丁寧に書かれているサイトが多くあり何度も助けてもらいました。

本当にありがとうございます!!(´;ω;`)

ここ最近ブログを書く事が楽しくなったのですが、ほかのブログさんと比べて

良く言えばシンプルなんですけど、私のブログは色味が短調でつまらないな、、

なんて思うことが多くなり、色々試してみることにしました。

結果的に1日かかりました。

同じように躓いたり、困ったりしている方のために初心者感丸出しでまとめてみようと思います笑

スポンサーリンク




1.何をしようとしているのか

簡単に言うと、見出しを簡単にカラフルに出来る方法です!!

こんな感じに魅力的になります!

上の「1.何をしようとしているのか」も同様です。

それをボタン一つでできるようにしてしまうのです。すごいですよね!!

その画期的なボタンはどこに設置されるのかというと

ここの四角で囲っている部分です。そこに設置されます。私ので言うと「h2」「h3」「h4」がそのボタンになります。

これは『テキスト』の場合です。

『ビジュアル』の場合はここに画期的なボタンが設置されるようになります。

四角で囲っている部分です。

テキストとビジュアル。どちらを使っていてもボタンを設置することが可能です!

次からは早速設定に入ります!

2.AddQuicktagをインストール

AddQuicktagというプラグインをインストールしていきます。

左にある「プラグイン」の「新規追加」をクリックします。

四角で囲っている部分です。

出てきた画面にプラグインを検索するところがありますので、そこに「AddQuicktag」をコピペして検索してください。

かぎカッコはコピペ不要です

そうするとこんなのが出てきます。

四角で囲っている部分に「今すぐインストール」と出てきますのでクリックしてください。

画像では「有効」と書かれていますが、気にしないでください!

既にインストール済みの為です。

インストールが完了したら「有効」をクリックしてインストール完了です!

3.AddQuicktagの設定

右側にあるツールバーの設定からAddQuicktagを探してクリックしてください。

すると、設定画面が出てきます。

ここでボタンを作成します!

四角で囲っている部分だけ入力していきます。

左上からコピペしていきましょう。

画像を確認しながら

ボタンのラベル h2

開始タグ <h2 id=danraku2>

終了タグ </h2>

最後にチェックを入れて「変更を保存」をクリックして設定完了です。

これで投稿画面にボタンが追加されました!やったね!

これを応用してh1~h7までボタンが作れます。

h1はタイトルで使うことが多いので、作らなくていいと思います。

個人的にh2、h3、h4があると良いです。

上記のコピペの数字の部分だけ他の数字に変更させればh3やh4などを簡単に作ることができます。

今回はh2の作り方のみ細かく説明していきます!

4.追加CSSを編集

ボタンは完成しましたが、このままでは見出しをおしゃれにはしてくれません。

正直、私もよくわかっていませんがコピペで乗り切りましょう。

「外観」の「カスタマイズ」をクリックしてください。

こんな画面が左側に出てくると思います。「追加CSS」をクリックしてください。

この画面が出てきたら四角で囲っているところに

h2#danraku2{}

こいつをコピペしてください。

ここから先は半角英数で作業してください。失敗を未然に防ぎましょう!

貼り付けたら{}の中に気に入ったデザインのコードをコピペしてください。

デザインのコードはこちらから使わせて頂きました!とてもありがたいです!
CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

気に入ったものがあればまるごとコピーして{}内に貼り付けるのですが、貼り付けたあと一部を消してあげないと反映しません。


h2#danraku2{

h1 {
border-bottom: solid 3px black;
/線の種類(実線) 太さ 色/
}

}

これは先ほどコピペしたh2#danraku2{}のカッコ内に、先程紹介したサイトの一番最初に記載されているコードをまるごとコピペしたものです。

水色が最初にコピペしたもので、

黄色部分が消す箇所です。

保存して公開をクリックして完了です!!

h2#danraku2{}

先ほど同様黄色部分の数字を変更して追加すればh3、h4ボタンも作れますよ!

5.使用方法

あとは投稿一覧から、おしゃれにしたい文字を選択してボタンをクリックします。

プレビュー等で確認すれば反映されてカラフルになっているはずです。

簡単にワンクリックで使うことが出来るようになりましたヽ(*´∀`)ノ

これでブログがより一層楽しくなること間違いなしです!!

ブログをカラフルにして楽しみましょう!!

最後に、、
今までボタンと言ってきましたが正確にはタグと言うそうです。
覚えておいて損はないと思います!

スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする