ワードプレス作業の装飾について【枠・吹き出し・リンク設定】

 

この記事ではワードプレス作業での装飾について紹介しています。

 

[box class=”pink_box” title=”装飾とは?”]文章の中でより引き立てたい部分を強調させるという事です。具体的には文字色、文字の太さ、枠、ボタン、吹き出しなどを使用するのが一般的です。[/box]

 

上記のようにピンク色に装飾をする事で、タイトルに「装飾とは?」と枠に「文章の中でより引き立てたい部分を強調したりする事・・・」を引き立たせる事ができます。

その他にもワードプレスには標準で様々な機能が付いていますので是非ライターとしての腕を磨いて頂きたいと思います。

 

正直私の装飾はシンプルだねと言われる事が多いですが飽きが来ないかなと思ってます。

装飾についてはキラキラの派手にならない程度であればお任せしたいと思っています。

 

ですので今回紹介するのは「クイックタグ」という部分を使用して簡単に装飾をするやり方を紹介したいと思います。

Quicktags(クイックタグ)の場所はどこ?

では作業についてはクラシックでやられている方も多いと思うのでクラシックの作業画面上で説明を致します。

 

下記の画像の場所がQuicktags(クイックタグ)になります。

展開すると・・・

様々な種類の装飾に使える物があります。

※私のセンスない物ばかりをラインナップにしています。ライター様の方で要望がありましたら都度ご相談下さい。種類によってはクイックタグに入れらない物もあります。

[box class=”blue_box” title=”ラインナップ” type=”simple”]

1 吹き出し女性

2 吹き出し男性

3 グレー塗りつぶし

4 青塗りつぶし

5 補足説明黄色

6 注意説明赤色

7 緑角丸

8 水色角丸

9 BOX枠水色

10 BOX枠ピンク

11 立体ボタン黄色

12 立体ボタンピンク

13 立体ボタンオレンジ

14 デフォルト白と青ボタン

※15以降は動物の吹き出しとなっています。

[/box]

 

では一つずつ使う時のポイントや使い方について見ていきたいと思います。

 

Quicktagsの使い方

 

Quicktags内に現在入っているタグを一つずつ紹介します。

ライター様から要望があれば追加していきますのでご相談下さい。

 

1.2 吹き出し女性/男性について

[voice icon=”https://shumi-katu.net/wp-content/uploads/2019/12/icon_113210_256.jpg” name=”女性” type=”l”]吹き出しの内容←ここを削除して文章を入れて下さい。[/voice]

 

[voice icon=”https://shumi-katu.net/wp-content/uploads/2019/12/icon_113250_256.jpg” name=”男性” type=”l”]吹き出しの内容←ここを削除して文書を入れて下さい。[/voice]

・タグをクリックすると「吹き出しの内容」という部分を削除後にお好きなテキストを入力して下さい。また女性・男性という表記を変えたい場合は好きな表現を使用して頂いてOKです。

 

3・4 グレー塗りつぶし・青塗りつぶし

枠内の記事本文

 

 

本文

 

上記をクリック後に枠内の文字を削除後お使い下さい。

 

5・6 補足説明黄色・注意説明赤色

[aside type=”normal”] 補足説明をいれる [/aside]

 

[aside type=”warning”] 注意説明をいれる 少し小さなフォントでかなり目立つ感じで注意説明を追加することができます。 [/aside]

 

上記をクリック後に枠内の文字を削除後お使い下さい。


7・8 緑角丸・水色角丸

 

 

上記をクリック後に★を削除して頂いてもいいですし、そのまま使用してもOKです。

 

9・10 BOX枠水色・BOX枠ピンク

[box class=”blue_box” title=”ラベル名”]ここにコンテンツを記載[/box]

 

[box class=”pink_box” title=”ラベル名”]ここにコンテンツを記載[/box]

上記をクリック後、「ここにコンテンツを記載」箇所を削除後にテキストを入力下さい。

 

11・12・13 立体ボタン(黄色)(ピンク)(オレンジ)

[btn class=”rich_yellow”]立体的なボタン(黄色)[/btn]

[btn class=”rich_pink”]立体的なボタン(ピンク)[/btn]

[btn class=”rich_orange”]立体的なボタン(オレンジ)[/btn]

 

上記クリック後は「立体的なボタン(色)」を削除後にテキストを入力下さい。

それからリンクの貼り付けという形になります。※リンクの張り方については次の項目で解説してます。ボタンタグについては基本的には外部リンクの際に使用して下さい。

 

14 デフォルト白と青ボタン

[btn class=”simple”]シンプルボタン[/btn]

上記クリック後は「シンプルボタン」を削除後にテキストを入力下さい。

それからリンクの貼り付けという形になります。。※リンクの張り方については次の項目で解説してます。ボタンタグについては基本的には外部リンクの際に使用して下さい。

 

15 動物吹き出し(1・2と同じです。)

[voice icon=”https://shumi-katu.net/wp-content/uploads/2019/12/icon_127680_256.jpg” name=”うーちゃん” type=”l”]吹き出しの内容[/voice]

 

[voice icon=”https://shumi-katu.net/wp-content/uploads/2019/12/icon_152560_256.jpg” name=”白クマ隊長” type=”l”]吹き出しの内容[/voice]

現時点で登録してある動物は下記です。

  • うさぎ
  • さる
  • ねずみ
  • ゴリラ
  • トラ
  • パンダ
  • フクロウ
  • ライオン
  • 白クマ などです。

 

上記以外で使用したい物があれば下記のアイコン専用のフリー素材よりお選び頂ければ幸いです。

[btn class=”simple”]ICOOON MONO公式[/btn]

※次でお伝えする外部リンクは↑↑です。

 

以上がQuicktagsの紹介になります。いろいろ使って試してみて下さい。

リンクの設定方法

リンクについてまずは少し紹介をします。

基本的には3つのリンクがあります。


・外部リンク

・内部リンク

・被リンク

 

それぞれの違いについて見ていきましょう。

[voice icon=”https://shumi-katu.net/wp-content/uploads/2019/12/icon_127680_256.jpg” name=”うーちゃん” type=”l”]外部リンクとは?この趣味活サイトから外部に飛ぶリンクの事です。例えばAmazonのショップや公式のサイトへ飛ぶリンクです。

使い方としては公式サイトへ飛ばしたい時などに使ってみてね。[/voice]

 

[voice icon=”https://shumi-katu.net/wp-content/uploads/2019/12/icon_133210_256.jpg” name=”ゴリ” type=”l”]内部リンクとは?例えば趣味活サイトの関連する記事などに飛ばす為のリンクの事だよ。趣味活サイトから趣味活サイトという理解でOKです。

プロフィールを紹介したければこんな感じ→「趣味活」サイト紹介・運営者プロフィールをチェック! [/voice]

 

[voice icon=”https://shumi-katu.net/wp-content/uploads/2019/12/icon_143180_256.jpg” name=”ちょろ” type=”l”]被リンクとは?例えば趣味活サイトが違う誰かにリンクを貼られた場合やSNS等でシェアされた場合などを言うよ。

被リンクが多くなるとサイトは強くなるよ。みんなフォローしてね。[/voice]

 

以上が簡単なリンクの違いについてです。

では実際にリンクの作り方を紹介したいと思います。主に内部リンク外部リンクについて解説します。

 

リンクの作成

手順①リンクを貼りたい場所にカーソルを当てるかリンクを貼りたい文章を範囲指定してからリンクの挿入というボタンをクリックする。

 

手順②手順①後にリンクの設定というボタンをクリックする。

 

手順③内部リンクの場合は下記の画像のように過去の記事が一覧で出てくるのでリンクさせたい記事をクリック後に右下のリンク追加をセレクトすればリンク作成完了です。

また外部リンクの場合は予め外部リンクURLをコピー後にリンク挿入画面のURLとリンク文字列などを編集後にリンク追加をセレクトすれば完了です。

 

 

内部リンクの作成方法

まずは内部リンクについてです。

内部リンクの作成は例えばテキストリンクで作成する場合やワードプレスの場合飛ばしたい記事のパーマリンクをそのまま張り付けるとリンクが作成されるという2種類の方法があります。

 

テキストリンク例

例① 人気記事 【ワカサギ釣り】桧原湖 こたかもりのレポート【初挑戦】

 

例② 私は先日ワカサギ釣り(荏原湖)に初挑戦となる体験をしてきました。

 

そのまま張り付けリンク例(貼りたいページのリンクをそのまま張り付ける)

【ワカサギ釣り】桧原湖 こたかもりのレポート【初挑戦】
こんにちは!かおりんです。先日の話しになりますが、人生初となるワカサギ釣りを経験しました。以前から氷上に穴を開けて糸を垂らしワカサギを釣ってみたいと少し憧れのような思いを抱いており、今回は経験者と一緒に行ける機会が訪れたので行ってみた...

 

外部リンクの作成方法

外部リンクで誘導する時に良く使うのがボタンと言われる押したくなってしまう誘導の仕方になります。

先ほどお伝えしたアイコン専用フリー素材公式への誘導の際に使ったボタンが見本になります。

 

あまり内部リンク誘導としての使用はしないです。

外部や商品購入ページへの誘導をする場合に設けるボタンになります。

まとめ

是非ワードプレスの文字装飾を活用して頂き更に上のライティング技術を身に付けて頂けたら幸いです。

細かな設定等で不明な点があればご相談頂ければと思います。

 

最後にこの記事をまとめると・・・

[box class=”yellow_box” title=”ここにタイトル” type=”simple”]

・派手になり過ぎないように使用する。(見る側も好き嫌いがあるのでほどほどでお願い致します。)

・協調したい部分やポイント紹介に有効。

・ボタンタグを使用する場合はリンクを必ず貼る事。(※リンクを貼らないと表示されない)

・使いすぎると表示速度が遅くなる原因になる(※ユーザビリティが落ちる)

・必ずプレビューで確認してしっかり表示されているか確認。

[/box]

 

以上がこの記事のまとめになります。

 

[voice icon=”https://shumi-katu.net/wp-content/uploads/2019/12/icon_152560_256.jpg” name=”白クマ隊長” type=”l”]最後まで読んでくれてありがとう!体調を崩さずに作業してね。[/voice]

 

タイトルとURLをコピーしました