WordPressでマーカーを引いたり、文字の大きさの変え方

WordPress

 

こんにちは!さぎです。

 

最近レイアウトのことで質問を受けることがありました。

実際どんな風に変えてるのか、自分のアウトプットにもなるので書いてみようと思います。

 

あくまで、ネット上に転がってる初心者が教える、初心者向け情報なのでご容赦ください。

 

見出しや文字の色を変える

まずは初歩的なところから。

 

見出しの変え方

addquicktag

ワードプレスの新規投稿画面で、ビジュアルモードを使って説明します。

見出しを作りたいにカーソルを置いておきます。

画面内にある左上の「段落  ▲」のメニューの中から、使いたい見出しを選択すればokです。

ちなみに見出しはその行全てに反映されます

 

ビジュアルモードでは、実際に表示される見た目と異なります。

ですので、右上にあるプレビューをクリックすると見た目の確認ができます。

 

プレビューで確認

addquicktag

プレビューで表示するとこんな感じで確認できます。

どんなテーマを使っているかで、この見出しも変わってくると思います。

 

ちなみに僕の使ってるテーマは、

stork(ストーク)というものを使っているので、見出しもstorkの初期状態のものになります。

 

文字の色、太さを変える

addquicktag

色を変えたいときは、上のメニュー欄にあるテキスト色を選択。

 

太さを変えたいときは、Bを選択。

 

addquicktag

変えたい色を選択してクリックすると文字の色が変わります。

元の色に戻したいときは、をクリック。

 

文字の大きさを変える

addquicktag

▲こんな感じにしたいとき。

 

僕の場合はタグを打つのが面倒なので、plugin「AddQuicktag」を使ってCSSに登録したクラスを呼び出してます。

 

AddQuicktagのインストールと設定

addquicktag

ダッシュボードにあるプラグインから新規追加を選びます。

 

addquicktag

次に検索窓に、「addquicktag」入力すると、プラグインが出て来るのでそれをインストールして有効化

 

addquicktag

有効化が済んだら、プラグインからAddQuicktag設定をクリック。

 

addquicktag

AddQuicktag設定画面で、左の窓に「□中文字」と入力。(自分がわかりやすければどんなワードでも大丈夫です)

次に真ん中の2段になってる上の窓に、

<span class=”font_size_m”>

下の段に、

</span>

入力、又はコピペします。

あとは右のチェック項目の、1番右だけをチェック。すると全てのボックスにチェックが入ります。

入力が終わったら変更を保存

 

次にスタイルシートに、文字を大きくする指示を書き込んでいきます。

addquicktag

ダッシュボードのメニューから、外観CSS編集をクリック。

※このCSS編集メニューはpluginのjetpackをインストールしてないと使えないみたいです。

もし、この項目が無い人は、テーマの編集メニューを選択。

子テーマのスタイルシートに書き込むか、もしくはpluginのjetpackをインストールして下さい。

 

addquicktag

次にメニューの一番下にある追加CSSをクリック。すると上の画面になるので、左の窓に、

span.font_size_m {font-size: x-large; }

入力するか、コピペして下さい。

※jetpackが無い人は子テーマのスタイルシートに入力。

 

addquicktag

投稿画面に戻り、大きくしたい文字。

ここでは”もじの大きさを変える”の”大きさ”の部分のみを大きくしてみます。

大きさ”の文字を選択した状態で、画像の窓から□中文字をクリック。

 

ビジュアルモードでは変化がありません。

なのでプレビュー画面で確認して見てください。

 

addquicktag

プレビュー画面でこのようになってればokです。

 

もっと大きな文字に変更する

もっと大きな文字にしたければ、AddQuicktagの設定画面で、

addquicktag

□大文字

<span class=”font_size_l”>

</span>

を入力します。

次にCSS追加画面に移り。

addquicktag

追加CSSに、

span.font_size_l {font-size: xx-large; }

と入力して保存。

 

投稿画面で□大文字を使って、文字のサイズを変える。

addquicktag

プレビューで上のようになってれば出来上がり。

 

太さを変えるとこうなる

これに文字の太さを変える”B”を使うとこうなります。

addquicktag

てな感じです。

 

文字にマーカーやラインを引く

maker

マーカー文字を大きくする手順一緒です。

またAddQuicktagを使用します。

ダッシュボードメニューから、設定AddQuicktagを選択。

 

太文字のオレンジラインを引く

addquicktag

左の窓に、

◇【マーカー細】 オレンジ (太文字)

真ん中の上下段に、

<strong class=”orange_line_f”>

</strong>

入力、またはコピペ

1番右側のチェックだけ入れると、全てにチェックが入ります。

終わったら変更を保存

 

addquicktag

CSS追加画面で、

.orange_line_f {background: linear-gradient(transparent 60%, #FFB96D 70%);}

と入力かコピペして、保存して公開

※jetpackが無い人は子テーマのスタイルシートに入力。

 

addquicktag

投稿画面に移り、ラインを引きたい文字を選択したまま、上のスロットルメニューから、

◇【マーカー細】 オレンジ (太文字)

をクリック。

ビジュアルモードでは太文字になってるだけなので、プレビューで確認。

addquicktag

プレビュー画面にて、こうなってれば出来上がりです。

同じ手順で太いマーカーを引いたりもできます。

 

マーカー一覧

コピペして使って下さい。

※太文字ではなく普通の文字にマーカーを引きたい人は、AddQuicktagに登録するstrongの部分をspanに変更してお使い下さい。


maker

【AddQuicktag】

◇【マーカー太】 イエロー (太文字)

<strong class=”yellow_maker_f”>

</strong>

【CSS】

.yellow_maker_f {background: linear-gradient(transparent 0%, #ffff66 0%);}


addquicktag

【AddQuicktag】

◇【マーカー太】 エメラルド (太文字)

<strong class=”green_maker_f”>

</strong>

【CSS】

.green_maker_f {background: linear-gradient(transparent 0%, #66FFCC 0%);}


maker

【AddQuicktag】

◇【マーカー太】 オレンジ (太文字)

<strong class=”orange_maker_f”>

</strong>

【CSS】

.orange_maker_f {background: linear-gradient(transparent 0%, #FFB96D 0%);}


maker

【AddQuicktag】

◇【マーカー太】 ピンク (太文字)

<strong class=”pink_maker_f”>

</strong>

【CSS】

.pink_maker_f {background: linear-gradient(transparent 0%, #ff66ff 0%);}


maker

【AddQuicktag】

◇【マーカー太】 水色 (太文字)

<strong class=”water_maker_f”>

</strong>

【CSS】

.water_maker_f {background: linear-gradient(transparent 0%, #66ccff 0%);}


line

【AddQuicktag】

◇【マーカー細】 イエロー (太文字)

<strong class=”yellow_line_f”>

</strong>

【CSS】

.yellow_line_f {background: linear-gradient(transparent 60%, #ffff66 0%);}


line

【AddQuicktag】

◇【マーカー細】 エメラルド (太文字)

<strong class=”green_line_f”>

</strong>

【CSS】

.green_line_f {background: linear-gradient(transparent 60%, #66FFCC 70%);}


line

【AddQuicktag】

◇【マーカー細】 オレンジ (太文字)

<strong class=”orange_line_f”>

</strong>

【CSS】

.orange_line_f {background: linear-gradient(transparent 60%, #FFB96D 70%);}


line

【AddQuicktag】

◇【マーカー細】 ピンク (太文字)

<strong class=”pink_line_f”>

</strong>

【CSS】

.pink_line_f {background: linear-gradient(transparent 60%, #ff66ff 70%);}


line

【AddQuicktag】

◇【マーカー細】 水色 (太文字)

<strong class=”water_line_f”>

</strong>

【CSS】

.water_line_f {background: linear-gradient(transparent 60%, #66ccff 70%);}


まとめ

これからワードプレスでブログを書きたいという人向けの小技を紹介しました。

あくまで初心者の僕が書いたものなので、すんなり反映できない部分もあるかもしれません。

できるだけ間違ってる箇所があれば訂正していきます。

 

 

The following two tabs change content below.
鷺 健一

鷺 健一

基本、短文記事が多いです。 長文は気が向いたときだけ。 イナフリ9期生/立花岳志の塾生/楽観的。 ゆ〜〜〜っくり記事の質を上げてければと思ってます。