WordPressで実際に記事を書く事に慣れていないと、えっ！何で？と思う部分が多いと思います。今回は記事投稿の仕方、ビジュアルエディタの基本的な使い方を紹介して行きます。その前に軽く前回までのおさらいをしときましょう。
- WordPressでは連続改行が反映されない。それっぽくするのは可能
- 「投稿」と「固定ページ」がある。
- 「ビジュアルエディタ」と「ＨＴＭＬ（テキスト）エディタ」がある。
ここまで理解ＯＫですか？分からない場合は以前の記事をもう一度読んでおいて下さいね。
ビジュアルエディタで色々やってみる
まずはWordPressの管理画面から「投稿」⇒「新規追加」を選択して投稿画面を開いてみましょう。
投稿画面の右のほうに「ビジュアル」「テキスト」と切り替えるタブがありますので、「ビジュアル」を選択してみて下さい。
ビジュアルエディタに切り替わりますのでまずはツールバーを全部表示してみましょう。赤で囲った部分のマークをクリックしてみて下さい。
するとツールバーが２段になったと思います。このツールバーはプラグインで拡張する事ができます。専用のプラグインを使うと例えば表を挿入したり、絵文字を使う等ができるようになります。
タイトルを入力してみる
次にタイトルを入力してみましょう。パーマリンク設定で「%postname%」を含むＵＲＬに設定している方の場合はこの記事タイトルでスラッグ（ＵＲＬ）を編集できます（記事タイトルを入力した後に表示されます。）
パーマリンク設定で「%postname%」を含むＵＲＬに設定している方の場合はこのようにパーマリンク（ＵＲＬ）が表示されますので、ここで編集をクリックして編集できます。この画像の場合だと、ＵＲＬの「テスト記事」という部分を変更する事ができます。パーマリンク設定で「%postname%」を含まない設定にしている方は関係ないので飛ばして下さい。
改行の仕方
では実際に記事を少し書いてみて下さい。普通は文章の区切りで「Enter」をクリックして改行しますが、ビジュアルエディタの場合は「Enter」をクリックすると１行飛ばして広く隙間が開いてしまします。
普通に１行改行するには「Shift」を押しながら「Enter」をクリックします。するときちんと１行改行されます。
これは「ビジュアルエディタ」だけの操作方法です。「テキストエディタ」では普通に「Enter」を押すと１行の改行になります。
なぜこのようになっているのかちょっと説明しておきますと、ビジュアルエディタでの「Enter」は改行ではなくて、段落の区切りという設定になっているからです。つまり普通の改行は「Shift」＋「Enter」で、段落の区切りが「Enter」という事になります。
そのため、段落の区切りという事で１行飛ばした改行になるわけです。これは慣れまで少し時間がかかると思います。
広めの間隔をあけたい場合
今度は文章を書いて２回連続で「Enter」を押してみるとこのように広く間が開きます。
これで広めに文章を区切る事ができます。これは連続改行ではないの？と思うかも知れませんが、テキストエディタに切り替えてでこの文章を見るとこのようになってます。
なにやら変な文字が書かれてますよね。これは半角のスペースを入れてから改行しているという事です。連続改行が反映されないので、半角のスペースを入れてさらに改行してスペースをあけている訳です。
ツールバーを使ってみる
それでは文字を太字にしたり、文字の色を部分的に変えたり、リンクの挿入をやってみたいと思います。ツールバーの一番左に「Ｂ」というのがあります。これで太字（strongタグ）になります。太字にしたい部分を選択してからクリックします。
次の「Ｉ」というのが斜体、ＡＢＣというのが打ち消し線です。これも先ほどと同じように範囲を選択してクリックする事で使えます。
次にあるのが箇条書きのタグです。範囲を指定してクリックします。
するとこのような表示になります。
箇条書きの書く項目に●が付きました。この●を数字にしたのが次のタグです。
次におたまじゃくしが２匹いますね。
これは引用タグですので、どこかから引用した文章などは範囲を指定してこの「おたまじゃくし」をクリックします。この引用した部分はカスタマイズで文字のフォントを変えたり、背景色を変える事ができます。
その次の３つは説明不要とは思いますが、「左寄せ」「中央寄せ」「右寄せ」ができますが、私は使った事がありません。
リンクを挿入する
リンクを挿入する場合は範囲を指定してリンクを挿入する事ができます。範囲を指定し、鎖のようなマークをクリックします。
するとこのような画面になります。
リンクのＵＲＬを入力するか自分のサイト内であれば「既存のコンテンツにリンク」をクリックして自分の記事を検索してリンクすることもできます。
また、「リンク先を別のタブで開くか」の選択もできます。タイトルというのを入力した場合にはリンク部分にカーソルが乗った時にタイトルが表示されるようになってます。
文字の色を変える
これも範囲を指定しておき、この「Ａ」というボタンから色を指定できます。
記事を分割するMoreタグ
記事一覧が表示されるページで有効なのが「記事の抜粋」というやつです。記事を序盤だけ表示して「続きを読む」と設定する事ができます。この文章を途中で切るに使うのが「Moreタグ」です。文章を切りたい部分にこのタグを挿入します。
このように区切られた訳です。私のこのブログも「続きを読む」を設定してますが、実はこの「Moreタグ」は全く使ってません。すべてカスタマイズで任意の文字数で抜粋するようにしてます。
そのカスタマイズも今後説明していきますね。それではちょっと長くなったので次回は画像を挿入する方法を別記事で紹介します。
⇒WordPressでの画像挿入とアイキャッチの設定
コメント
たしかにブラウザのキャッシュを消したところ、きちんと引用符が反映されていました。
丸一日悩んでいたのでとても助かりました。ありがとうございました。
こあら様
コメントありがとうございます。多分装飾は反映されていると思います。引用符も付いてグレーのボックスに囲まれているので多分大丈夫と思いますが、こあら様のブラウザでキャッシュ（以前のデータ）が残っていて反映されていないだけかもしれません。
なので、一度別のブラウザやデバイスで確認してもらえますか？スマホとかタブレットでもいいですし、別のブラウザからでも良いです。それで反映されているなら問題ありません。キャッシュ系のプラグインなど使っているのであれば一度プラグインのキャッシュをクリアしてみるのも良いかもしれません。
いつも参考にさせて頂いています。
以前にも質問にご回答いただきました。
今回は引用符のカスタマイズに関して質問なのですが・・・
巷のコードを拾ってきて試してみても
文字がインデントされる
以外のカスタマイズが反映されません。
引用符マークはあってもなくてもいいんですが、せめて文字を四角に囲みたいと思っています。
解決策はあるでしょうか。
お時間ありましたら、ご回答いただければ幸いです。
/*引用タグ装飾*/
blockquote{
position: relative;
margin: 0 1em 1.5em;
padding: 1em;
border: 3px solid #d7d7d7;
background-color: #e0e0e0;
z-index: 1;
}
blockquote p{
position: relative;
z-index: 3;
}
blockquote:before{
content: ““”;
font-size: 1000%;
line-height: 0.8em;
font-family: ‘Times New Roman’ ,”ＭＳ Ｐゴシック” ,sans-serif;
color: #F0F0F0;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
blockquote:after{
content: “””;
font-size: 1000%;
line-height: 0em;
font-family: ‘Times New Roman’ ,”ＭＳ Ｐゴシック” ,sans-serif;
color: #F0F0F0;
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
}
border で文字を枠線で囲ってみようとしても、まったく反映されません・・・。
しげぞう様 早速のコメントありがとうございます。
ネットで検索していろいろあることがわかりました。
そして、自分はgoogle Crome を使用しているのですが、背景色をグレーにするようにCSSに書き加えてもCrome では背景色が変わらないことも気づきました。
iPhoneや FireFox ではちゃんと背景色が変わるのに・・・
不思議ですが、また一つ勉強になりました。ありがとうございました。