こんにちは！さぎです。
最近レイアウトのことで質問を受けることがありました。
実際どんな風に変えてるのか、自分のアウトプットにもなるので書いてみようと思います。
あくまで、ネット上に転がってる初心者が教える、初心者向けの情報なのでご容赦ください。
見出しや文字の色を変える
まずは初歩的なところから。
見出しの変え方
ワードプレスの新規投稿画面で、ビジュアルモードを使って説明します。
見出しを作りたい行にカーソルを置いておきます。
画面内にある左上の「段落 ▲」のメニューの中から、使いたい見出しを選択すればokです。
ちなみに見出しはその行全てに反映されます。
ビジュアルモードでは、実際に表示される見た目と異なります。
ですので、右上にあるプレビューをクリックすると見た目の確認ができます。
プレビューで確認
プレビューで表示するとこんな感じで確認できます。
どんなテーマを使っているかで、この見出しも変わってくると思います。
ちなみに僕の使ってるテーマは、
stork（ストーク）というものを使っているので、見出しもstorkの初期状態のものになります。
文字の色、太さを変える
色を変えたいときは、上のメニュー欄にあるテキスト色を選択。
太さを変えたいときは、Bを選択。
変えたい色を選択してクリックすると文字の色が変わります。
元の色に戻したいときは、☒をクリック。
文字の大きさを変える
▲こんな感じにしたいとき。
僕の場合はタグを打つのが面倒なので、plugin「AddQuicktag」を使ってCSSに登録したクラスを呼び出してます。
AddQuicktagのインストールと設定
ダッシュボードにあるプラグインから新規追加を選びます。
次に検索窓に、「addquicktag」と入力すると、プラグインが出て来るのでそれをインストールして有効化。
有効化が済んだら、プラグインからAddQuicktagの設定をクリック。
AddQuicktagの設定画面で、左の窓に「□中文字」と入力。（自分がわかりやすければどんなワードでも大丈夫です）
次に真ん中の２段になってる上の窓に、
<span class=”font_size_m”>
下の段に、
</span>
と入力、又はコピペします。
あとは右のチェック項目の、１番右だけをチェック。すると全てのボックスにチェックが入ります。
入力が終わったら変更を保存。
次にスタイルシートに、文字を大きくする指示を書き込んでいきます。
ダッシュボードのメニューから、外観▶CSS編集をクリック。
※このCSS編集メニューはpluginのjetpackをインストールしてないと使えないみたいです。
もし、この項目が無い人は、テーマの編集メニューを選択。
子テーマのスタイルシートに書き込むか、もしくはpluginのjetpackをインストールして下さい。
次にメニューの一番下にある追加CSSをクリック。すると上の画面になるので、左の窓に、
span.font_size_m {font-size: x-large; }
を入力するか、コピペして下さい。
※jetpackが無い人は子テーマのスタイルシートに入力。
投稿画面に戻り、大きくしたい文字。
ここでは”もじの大きさを変える”の”大きさ”の部分のみを大きくしてみます。
”大きさ”の文字を選択した状態で、画像の窓から□中文字をクリック。
ビジュアルモードでは変化がありません。
なのでプレビュー画面で確認して見てください。
プレビュー画面でこのようになってればokです。
もっと大きな文字に変更する
もっと大きな文字にしたければ、AddQuicktagの設定画面で、
□大文字
<span class=”font_size_l”>
</span>
を入力します。
次にCSS追加画面に移り。
追加CSSに、
span.font_size_l {font-size: xx-large; }
と入力して保存。
投稿画面で□大文字を使って、文字のサイズを変える。
プレビューで上のようになってれば出来上がり。
太さを変えるとこうなる
これに文字の太さを変える”B”を使うとこうなります。
てな感じです。
文字にマーカーやラインを引く
マーカーも文字を大きくする手順と一緒です。
またAddQuicktagを使用します。
ダッシュボードのメニューから、設定▶AddQuicktagを選択。
太文字のオレンジラインを引く
左の窓に、
◇【マーカー細】 オレンジ （太文字）
真ん中の上下段に、
<strong class=”orange_line_f”>
と
</strong>
を入力、またはコピペ。
１番右側のチェックだけ入れると、全てにチェックが入ります。
終わったら変更を保存。
CSS追加画面で、
.orange_line_f {background: linear-gradient(transparent 60%, #FFB96D 70%);}
と入力かコピペして、保存して公開。
※jetpackが無い人は子テーマのスタイルシートに入力。
投稿画面に移り、ラインを引きたい文字を選択したまま、上のスロットルメニューから、
◇【マーカー細】 オレンジ （太文字）
をクリック。
ビジュアルモードでは太文字になってるだけなので、プレビューで確認。
プレビュー画面にて、こうなってれば出来上がりです。
同じ手順で太いマーカーを引いたりもできます。
マーカー一覧
コピペして使って下さい。
※太文字ではなく普通の文字にマーカーを引きたい人は、AddQuicktagに登録するstrongの部分をspanに変更してお使い下さい。
【AddQuicktag】
◇【マーカー太】 イエロー （太文字）
<strong class=”yellow_maker_f”>
</strong>
【CSS】
.yellow_maker_f {background: linear-gradient(transparent 0%, #ffff66 0%);}
【AddQuicktag】
◇【マーカー太】 エメラルド （太文字）
<strong class=”green_maker_f”>
</strong>
【CSS】
.green_maker_f {background: linear-gradient(transparent 0%, #66FFCC 0%);}
【AddQuicktag】
◇【マーカー太】 オレンジ （太文字）
<strong class=”orange_maker_f”>
</strong>
【CSS】
.orange_maker_f {background: linear-gradient(transparent 0%, #FFB96D 0%);}
【AddQuicktag】
◇【マーカー太】 ピンク （太文字）
<strong class=”pink_maker_f”>
</strong>
【CSS】
.pink_maker_f {background: linear-gradient(transparent 0%, #ff66ff 0%);}
【AddQuicktag】
◇【マーカー太】 水色 （太文字）
<strong class=”water_maker_f”>
</strong>
【CSS】
.water_maker_f {background: linear-gradient(transparent 0%, #66ccff 0%);}
【AddQuicktag】
◇【マーカー細】 イエロー （太文字）
<strong class=”yellow_line_f”>
</strong>
【CSS】
.yellow_line_f {background: linear-gradient(transparent 60%, #ffff66 0%);}
【AddQuicktag】
◇【マーカー細】 エメラルド （太文字）
<strong class=”green_line_f”>
</strong>
【CSS】
.green_line_f {background: linear-gradient(transparent 60%, #66FFCC 70%);}
【AddQuicktag】
◇【マーカー細】 オレンジ （太文字）
<strong class=”orange_line_f”>
</strong>
【CSS】
.orange_line_f {background: linear-gradient(transparent 60%, #FFB96D 70%);}
【AddQuicktag】
◇【マーカー細】 ピンク （太文字）
<strong class=”pink_line_f”>
</strong>
【CSS】
.pink_line_f {background: linear-gradient(transparent 60%, #ff66ff 70%);}
【AddQuicktag】
◇【マーカー細】 水色 （太文字）
<strong class=”water_line_f”>
</strong>
【CSS】
.water_line_f {background: linear-gradient(transparent 60%, #66ccff 70%);}
まとめ
これからワードプレスでブログを書きたいという人向けの小技を紹介しました。
あくまで初心者の僕が書いたものなので、すんなり反映できない部分もあるかもしれません。
できるだけ間違ってる箇所があれば訂正していきます。
鷺 健一
最新記事 by 鷺 健一 (全て見る)
- ブログはやっぱり日課にするのが良いんだろうか？ - 2019年12月18日
- やっぱ自分ヘタレっす - 2019年8月25日
- いやぁ、おっちゃん疲れたよ・・・ - 2019年8月24日
