たくさん撮りためた写真を整理して、フォトギャラリーを作成しててみましょう。 simpler2-69 基本色 black 教室試作サイト http://c15.seta.red 2016-8-27

....

ビジュアルエディタの使い方

2015年07月09日

ビジュアルエディタの操作パネルについて説明していきます。

ビジュアルエディタは、HTML知識が少ない方用の記事投稿パネルになってます。
無料ブログなどの記事の書き方に似ており、Word感覚で記事を書くことが可能です。

基本的には、ビジュアルエディタで書いて、HTMLエディタで細かい修正をするって流れになりますので、
しっかりと覚えておきましょう。

 

ツールバー

ビジュアルエディタのツールバーですが、最初は1段で省略されています。
下記のパレットアイコンをクリックすることで2段になります。

ab00007798

↓↓↓

ab00007799

 

 

文字の書き方や改行方法

WordPressですが、改行方法には、2種類あります。

Webルールで、段落を現す<p>タグと、改行を現す<br />タグの2つが良いされており、
適切に使い分ける必要があります。

 

<p>タグの段落方法

ビジュアルエディタ上で、キーボードの「Enter」を押した場合は、
HTMLの<P>タグが挿入されます。

【Pタグの例:(1行開いた感じになります)】

WordPress 日本語ローカルサイトへようこそ。

WordPressは、オープンソースのブログプラットフォームです。

セマンティック Web、コードやデザインの美しさ、ユーザビリティなどを

意識して開発されており、無料でダウンロードして使うことができます。

 

<br />タグの例

反対に<br />を挿入する方法ですが、「Enter」+「Shift」を
押すと改行の文字の折り返しが出来ます。

【brタグの例:(詰まった1行になります。)】

WordPress 日本語ローカルサイトへようこそ。
WordPressは、オープンソースのブログプラットフォームです。
セマンティック Web、コードやデザインの美しさ、ユーザビリティなどを
意識して開発されており、無料でダウンロードして使うことができます。

 

文字の装飾

ab00007800

文字装飾

①太字 HTMLでは<strong>タグが挿入されます。
文字を太字にします。より強い強調タグとして使用しSEO的にもキーワードとして重視されます。

②斜体 HTMLでは<em>タグが挿入されます。
strongよりは弱いですが同じく強調を表します。

③打ち消し線 <span style=”text-decoration: line-through;”>タグが挿入されます。
過去に書いた記事などを修正したい場合に使います。

④リスト番号なし HTMLでは<ul>タグが挿入されます。
番号なしリストです。箇条書きや文字を揃えたい時に使用します。

⑤リスト番号付き HTMLでは<ol>タグが挿入されます。
番号付きリストです。箇条書きや文字を揃えたい時に使用します。

⑥引用 HTMLでは<blockquote>タグが挿入されます。
他からの引用時やブロック要素の引用を行う場合に用いられます。

⑦配置 HTMLでは<p style=”text-align: left;”>タグが挿入されます。
文字の左寄せ

⑧配置 HTMLでは<p style=”text-align: center;”>タグが挿入されます。
文字の中央寄せ

⑨配置 HTMLでは<p style=”text-align: right;”>タグが挿入されます。
文字の右寄せ

 

リンクの挿入・解除

ab00007801

リンクを作る場合ですが、リンクしたいテキストを範囲指定して、「鎖マーク」をクリックします。
リンクの挿入画面が表示されますので、URLを入力してください。

「リンクを新ウインドウまたはタグで開く」にチェックを入れると、
リンク先が別ウインドウで開きます。

反対にリンク解除させたい場合は、「鎖の切れたボタン」を押して解除します。

投稿者:admin246tt カテゴリー: ウエブ制作, ワードプレス

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA