WordPress標準エディターの機能紹介/台東区上野のWEB制作/訪日外国人集客会社

株式会社ケイツー・インタラクティブ [K2-interactive]

WEB担当者の相談室

WEBサイト制作のことなら、私たち台東区上野のWEB制作会社
株式会社ケイツー・インタラクティブにお気軽にご相談ください。

WordPress標準エディターの機能紹介

 

WordPressってブログのようにかんたんに更新出来ると聞きましたが、本当にかんたんなんですか?

WordPressの更新作業に関して、かんたんか難しいかは、パソコンを扱う方の操作能力に依存します。しかしながら、他のブログサービス、SNSなどと比べても同等程度の操作で更新が可能です。

WordPress標準エディターの機能紹介

WordPress標準エディターの機能紹介:目次

WordPressをHTML/ブログスタイルで更新を選ぶ

WordPressをHTML/ブログスタイルで更新

WordPressのテキストエディターで最初にチェックするのは、赤枠内の「ビジュアル」と「テキスト」のタブです。WordPressを更新する人のスキルによってどちらかを選ぶといいでしょう。また、入力に集中できる「集中モード」も実装されているので、気分に合わせて使ってみるのもいいでしょう。

WordPressの「ビジュアル」タブ

WordPressのビジュアルはブログで良く見るタイプのモノです。テキストを選択、もしくはテキストの末尾にカーソルを置いて、各ボタンをクリックしてテキストを装飾します。

WordPressの「テキスト」タブ

WordPressのテキストのタブをクリックすると、HTMLを記述することが出来ます。より細かく詳細なデザインを反映させることが出来ます。ケイツー・インタラクティブが運営しているK2ブログでは、WordPressのテキストを利用して更新しています。

WordPressの「集中モード」アイコン

WordPressの集中モードは「テキスト」タブの下の「×」のようなアイコンをクリックして機能が稼働します。テキストエディター以外の項目を全て非表示にして、文字通り入力に集中するための機能です。

WordPressのテキストエディター各アイコンの機能

WordPressのテキストエディター

WordPressはエディター上部には各種アイコンが配置されていて、ブログのように記事に様々な装飾を施し更新することが出来ます。

WordPressのエディター使用方法は、該当箇所にカーソルを置き、アイコンをクリックします。テキストの場合は、テキストの末尾にカーソルを置くか、該当テキストを選択してからアイコンをクリックします。

WordPressでの画像アップロード ①

WordPressでの画像アップロード

WordPressでは画像のアップロード機能が搭載されています。該当の画像を「メディアライブラリ」から選択、もしくは「ファイルをアップロード」で画像をアップロードして使用します。画像の切り取りや回転など、ちょっとした画像編集機能が搭載されています。

WordPressの『段落』プルダウン ②

WordPressでの画像アップロード

WordPressのテキスト設定は通常時は『段落』に設定されています。この段落時には『P』タグが出力されます。その他に見出し『H』タグと整形済みテキスト『PRE』タグが用意されています。

<p>段落</p>
<h1>見出し1</h1> ~ <h6>見出し6</h6>
<pre>スペース・改行などを、そのまま等幅フォントで表する整形済みテキスト</pre>
テキストのアクセントを作る ③④

「B」と「I」は文字を太く、もしくは斜体にします。

<b>「B」のアイコンはBタグで囲い、文字を太字に装飾します。</b>
<em>「I」のアイコンは文字をEMタグで囲い、文字を斜めに装飾します。</em>
項目を作る ⑤~⑦

⑤⑥のアイコンはそれぞれリストを作ります。

⑤アイコンの場合
<ul>
  • <li>・通常のリスト</li>
  • <li>・通常のリスト</li>
  • <li>・通常のリスト</li>
</ul>

⑥アイコンの場合
<ol>
  • <li>1.数字のリスト</li>
  • <li>2.数字のリスト</li>
  • <li>3.数字のリスト</li>
<ol>

⑦アイコンの場合
<blockquote>引用・転載文用のタグが出力されます。</blockquote>
テキストの位置・並び ⑧~⑩

テキストの開始位置を設定できます。Pタグにスタイルで直接「左」「真ん中」「右」寄せを設定出来ます。

<p style="text-align: right">テキスト右寄せの例⑩</p>
テキストの装飾 ⑪~⑬

削除 ⑪

テキストの該当箇所に<del>打ち消し線</del>の装飾を施せます。

水平線 ⑫

テキストの分かれ目に<hr />タグで以下のような段落線を引きます


テキストカラー ⑬

テキストのカラーが直接スタイルの記述がタグに挿入され、39色まで変更出来ます。
<span style="color: #ff6600;">段落テキスト</span>

テキストとしてペースト ⑭

この機能を使うと、ブラウザやワードドキュメントなどからコピーしてきた際、余計な情報、例えば太字、文字の大小や、色などの情報を引き継ぎません。

書式設定のクリア ⑮

選択個所の書式、例えば太字、見出しや、色などの情報を削除することが出来ます。

インデントの増減 ⑯⑰

選択個所の段落にインデントを加える、または削除することが出来ます。

<p>段落テキスト段落テキスト段落テキスト</p>

<p style="padding-left: 30px;">段落テキスト段落テキスト段落テキスト</p>

<p>段落テキスト段落テキスト段落テキスト</p>

アイコンをクリックするたびに、30ピクセルのインデントが増減されます。

リンクの設定 ⑱

アイコンをクリックすると、URL入力窓が表示されるので、そこからURLを入力することが出来ます。詳細設定で、遷移したいページを選択したり、別ウィンドウの設定などが出来ます。

前後の作業 ⑲⑳

アイコンをクリックすると、⑲で作業を戻ることが出来ます。作業を戻った際は⑳で最終進捗状態まで進むことが出来ます。

特殊文字を入力 ㉑

コピーライト©などの特殊文字を入力することが出来ます。

ショートカットヘルプ ㉒

テキストエディターでの一連の作業は、キーボードでのショートカットが可能です。ショートカットの方法をヘルプで知ることが出来ます。

WordPress標準エディターの機能紹介のまとめ

インターネットは世界中の情報機器を接続するネットワークいかがでしたでしょうか?WordPressはブログのようにかんたんに更新出来る!こんなセールストークは聞いたことがあるかもしれませんが、実際WordPressで、どんなことが出来るのか?は、中身を見てみないとイメージ出来ませんよね。このページでは、標準で装備されているエディターの機能を紹介しました。是非参考にお役立てください。

ケイツー・インタラクティブでは企業様のIT活用を支援しています。ご不明な点やご要望などございましたらお気軽にお問い合わせください。

本情報はページ公開時のものです。情報は常に更新され掲載内容と異なる場合がございます。

WEBマーケティング
CMSツール導入支援

WordPress標準エディターの機能紹介に関連する記事

jqueryを使ってjavascript開発の効率化
UIをWEBサイトに実装するフロントエンジニア
WEBサイトにHTML5で動画を埋め込むインパクトある演出
ホームページに掲載するための写真

K2 WAY

ソリューション

施策事例 Client Voice

WEB担当者の必見ノウハウ 7 選

K2の得意なこと

WEBマーケティング

WEBマーケティング

顧客とのコミュニケーション課題を解決して、御社のビジネスを成功につなげるWEBマーケティングのプロ集団です。

WEBマーケティング

インバウンド集客PR

インバウンドの集客PR

IT/SNSを使ったプロモーションからイベント開催まで一貫したO2Oブランド構築で集客・PRをご支援をいたします。

インバウンド集客PRを見る

CMSツール導入支援

CMSツール導入支援

HTMLが判らなくてもかんたんにWEBサイトを更新出来るCMSツールを活用して、見込み客をを増やしませんか?

CMSツール導入支援を見る