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 ではちゃんと背景色が変わるのに・・・
不思議ですが、また一つ勉強になりました。ありがとうございました。
イエローバイク様
コメントありがとうございます！励みになります(^^)
引用の部分に関しては引用全体部分の装飾（文字サイズ・色とか背景色とか）をCSSで変更する事ができますので、結構自由にあれこれできます。「引用符 WordPress css」とかで検索すると色々な方がCSSのサンプルを紹介してくれていると思いますので、その中から好きな物を選んでCSSをコピペで良いと思います。
こんにちは。いつもこのサイトには大変お世話になっております。
僕のワードプレスの知識は全てこのサイトの管理人さんのおかげです。改めてお礼申し上げます。ありがとうございます。
ところで、本日は質問なのですが、引用符を付けて記事を書くと、引用符全体が色つけされているページを時々見ることがあるのですが、あの場合はどうしたらそうなるのでしょう。
ビジュアルエディタに文字の背景に色を付けるタグもありますが、そのような色つけではなく、引用符を付けた記事のバック全体に色が付く方法です。
もしよろしかったら教えてください。
よろしくお願いいたします。
＞ようこ様
返信ありがとうございます。私も結構細かいミスを連発するタイプですので気にしないで下さい（笑）。また質問があればいつでもコメント下さい。
こんにちは。
返信が遅れてしまい申し訳ありません。
アドバイスどうも有難うございます。
今日やっと時間ができたので見てみたら反映されていました！
というか、まったく気づかなかったのですが、記事本文の画面ではなくカテゴリーの画面を見て、反映されていないと思いこんでいました（テスト用に短い文章しか書いていなかったので、カテゴリ画面のそれが記事の画面だと思っていました）。
カテゴリの画面では文字の装飾が反映されないのですね？
記事の画面に飛ぶと、しっかりと反映されており、嬉しいやら自分のアホさ加減にがっかりするやら。。（笑）
こんなことでお時間取らせてしまい本当にすみません。
いつも親切にご対応頂き感謝しております。
＞ようこ様
いつもコメントありがとうございます。WordPress手強いですね（笑）文字の装飾が反映されていないという事なのですが、これはまた別のブラウザでも反映されていないという事でしょうか？考えられる原因としては以前と同じようにキャッシュの問題かCSSの記述ミス、プラグイン等が考えられますが、もしどうしても反映されないようならブログのURLを教えて頂けたらもしかすると原因が分かるかも知れません。もし良かったら一度URLを教えて頂けたら助かります。
それとどのようなCSSが反映されていないのか具体的な場所を指摘してもらえると確認ができると思いますし、URLはコメント公開時には削除しますのでもしよければ教えて下さい。
こんにちは。
以前別件でお世話になったようこです。
今回は記事を作成中、文字の装飾が全く反映されなくなってしまいました。
書いた文章自体は更新されるのですが、装飾だけが反映されません。
Add quick tagの編集をした後だったので関係があるかと思い
停止してみましたが状況は変わりません。
アドバイス頂けないでしょうか。宜しくお願い致します。
＞たろー様
わざわざ返信ありがとうございます。問題も解決したようでよかったです。今後ともどうぞよろしくお願い致します。
ご丁寧に返信ありがとうございました。
どうやら原因はおっしゃる通り『パーマリンクの設定の変更』だったようで、少し設定を変更しなおしたら無事解決しました。
WordPressについての詳しい設定が載っていて大変助かっています。
＞たろー様
コメントありがとうございます。「お探しのコンテンツを見つけられませんでした」という場合はURLが違うという事なので原因として思いつくのは次の3点かと思います。
詳しい原因は環境によっても違いますが、私の思いつくのは上記３つかなと思います。思い当たる部分があればチェックしてみるといいかも知れません。
試しにmoreタグを使って投稿してみたところ、『続きを読む』をクリックすると『お探しのコンテンツを見つけられませんでした。検索をお試しください。』と新しいページに表示されて、『続きを読む』以降の記事が表示されません。
同様に最近の記事のところから以前に投稿した記事をクリックすると、『お探しのコンテンツを見つけられませんでした。検索をお試しください。』と表示されたページに切り替わります。
上記二つの問題の原因はなんだと思われますか？