WordPressでの記事の装飾の行い方

2017年12月9日2017年12月16日小説家のためのブログ運営WordPress

こんばんは！　しろもじです。

前回は、ブログの初期段階で決めておくと後々便利な「パーマリンク」についてお話しましたね。

ある程度、カテゴリが固まっている方は、カテゴリ構造にしても良いですし、ちょっと分かんないなーって方は、素直にカテゴリなしの「投稿名」にしておく方がいいですね。

 

今回は、前々回やった「WordPressでの記事の投稿方法」をもう少し掘り下げていきましょう。

WordPressを使った投稿では、文字を装飾したり、画像や動画を挿入したりすることができます。また、リンクを付けて他のページに移動することもできますね。

その辺を詳しく見ていきましょう。そんなに難しくはないはずです。一応「全然分からない」方向けに書いていますが、エクセルやワードを触ったことがある方なら、感覚で分かるような内容です。

 

メニューバー

今回はそんなブログ記事を装飾する内容ですが、一部プラグインを入れていますので、WordPressをインストールした直後だと違う部分があります。プラグインに関しては、以下のページを参考にしてみて下さい。

そのページに書かれている「おすすめプラグイン」が全て入っている状態の説明になります。

 

まずは記事の投稿画面を開きましょう。

以前もお話しましたが、中央の大きなスペースが、記事を書くスペースになります。

その上にたくさんのメニューが見えますね。

これです。

これを左上から順番に説明していきます。

 

各種ボタンの説明

メディアを追加

これは予めアップロードしていた画像などを、記事中に挿入するボタンです。

これを押すと、メディアを選ぶ画面になりますので、挿入したい画像にチェックを入れて「投稿に挿入」ボタンを押せば、記事中のカーソルの位置に画像が挿入されます。

動画でもOKですが、動画は重い（容量が大きい）ので、できれば外部サイト（YOUTUBEなど）に置いてリンクを張った方が良いかと思います。

Pixabay

これはプラグインのPixabayを導入すると現れるボタンです。

このボタンを押すと、画像の検索画面が出てきますので、そこでキーワードを入れると該当する画像の一覧が現れます。

そこから選んで直接、記事中に画像を挿入できるので、アップロードする手間が省けるのですが、如何せん画像の種類が少ないので、私もあまり使っていません。たまーに面倒くさい時くらいかな（笑）。

ブログカード

これはテーマ「Luxeritas」特有のボタンになります。WordPressのテーマについては、以前にやりましたね。

ブログカードとは、まさにこの真上にあるカード状のリンクのことを言います。

リンクというのは、一般的には青い文字列に下線が引いてあって、それをクリックすると別のページに飛べるというものですが、このブログカードを使うとご覧のように、少しビジュアル化されたリンクになります。

別ベージへのリンクは「文字列の方が良い」とか「ブログカードでも良い」という意見がありますが、長くなるのでここでは割愛します（笑）。

 

このボタンを押すと「URL」と「リンク文字列」、「リンクを新しいタブで開く」という設定箇所が表示されます。

URLには、リンク先のURLを入れます。リンク文字列とは「ブログカードが表示されない環境の場合に代わりに表示される文字列」を入れます。まぁ記事タイトルで良いでしょう。

リンクを新しいタブで開く、というのは、クリックした時に「今のタブで開くのか？　それとも新しいタブで開くのか？」というのを決める箇所です。

Luxeritasでは、設定で「自サイト以外は新しいタブで開く」という項目があるので、これを設定しておけば、ここを弄らなくても他サイトは自動的に新しいタブで開くようになります。

文字メニュー

エクセルなどではおなじみのメニューですよね。基本的にあまり使いませんが、一部の文字装飾でボタンがないものもありますので、その場合はここから選ぶこともあります。

段落

段落とは、文章中の文字列が「段落であるのか、見出しであるのか」を決めるボタンです。

今ここに書いている文字は「段落」になります。

上のメニューのようになっている「段落」や「文字メニュー」と書かれた少し大きめの文字は「見出し」になります。

見出しは「ここからはこの説明をしますよー」という子タイトルのようなものです。

見出しにはH1、H2、H3、H4、H5、H6というものがあります。数字が低いほうが、大きな括りになります。この記事では「メニューバー」、「各種ボタンの説明」がH2になり、「メディアを追加」、「ブログカード」がH3になります。

H１は記事のタイトルで使われることが多いので（テーマによって異なります）、記事中には普通使いません。

この見出しも、全てを語るととても長くなるので、すごく簡単に言うと「H１は小説のタイトル、H2は章、H３は節」と言う感じで入れ子になるということだけ覚えておきましょう。

 

ちなみに見出しは行に対して行われる処理ですので、見出しにしたい箇所にカーソルを持っていって、このボタンで指定してやると、その行全体が指定された見出しになります。

太文字（強調）

これは、記事中の一部の文字列を強調したい時に使います。文字列をドラッグで選択して、このボタンを押すことで、文字列が太文字になります。

一応、文章中の「ここが大切だよ〜」という部分に使う機能なので、あまりむやみやたらに使わない方が良いかもしれません。

斜体（イタリック）

これは文字を斜体にするボタンですね。

本来は、上の太字の次に強調したい箇所に適応する機能なのですが、WordPressではなぜか斜体文字になってしまいます。これも、あまり多用しない方が良い、というか使わない方が良い気がします。

引用

引用とは、他のページ（自分のサイトでなくても）の文字などを、参考とする場合に使う機能です。私もたまにWikipediaなどから引用していますね。

引用も語ると長くなるので、簡単に言うと「他サイトの記事を引用するのは法律的には認められている。しかし、本文よりも長い引用、出典へのリンクをしない引用は盗用となる可能性がある」ことを覚えておきましょう。

つまり、記事中のほとんどが引用だったら、これはコピペサイトになってしまいますので、ダメってことです。

逆にきちんとした形で引用するのであれば、引用部分を選択した状態でこの引用ボタンを押して、文字列を引用であるとマークしないといけません。

番号なしリスト

箇条書きに使われるボタンです。

• こんな感じで
• 番号がない箇条書きが
• 作れます

 

• 頭のポッチは黒丸、白丸、黒四角から選べます。

文字を打って、リターンキーを押すと、次の箇条書きに移れます。箇条書きをやめたい時は、そのままもう一度リターンキーを押せばOKです。

番号付きリスト

1. 箇条書きの番号付きになります
2. 順番に番号が振られていきます
3. 文字は色々なものから選ぶことができます。

まぁ、情報を整理する時には便利ですね。

これらのリストは、ただ単に便利という側面もありますが、HTML的に「リストである」という記述がされるので、自分で数字を打ってリストを作るより、こっちの方が良いと思います。

右寄せ・中央寄せ・左寄せ

普通に記事を書いていくと、文字列は左寄せになります。

これを例えば中央揃えにしてたり

右寄せにするのがこのボタンの役割です。

行に対して行われるので、カーソルを置いている行ごとこの処理が行われます。

ま、あんま使わないですね。

リンクの挿入・解除

先程ブログカードの話をしましたが、これは記事中の文字列にリンクをつける場合に使用します。

文字列を選んだ状態で、左の「リンクの挿入」ボタンを押すと「URL」を入れるポップアップが開きますので、リンク先のURLを入力します。

リンクを削除したい時は、リンクされた文字列にカーソルを合わせて「リンクの解除」ボタンを押せば、リンクはなくなります。

取り消し・やり直し

いわゆる「リドゥ・アンドゥ」です。今やったことを取り消す場合は左のボタン。もう一度直す場合は右のボタンを押します。

個人的にはほとんど使いません。

コピー・切り取り・貼り付け

ま、これはそのまんまです（笑）。マウスの左クリックメニューの方が早いので（もしくはショートカットキー）、まぁ使いません。

全画面表示

これを押すと、記事編集画面だけになります。余計なものが消えるので、記事執筆に集中できる、というわけらしいのですが、うーん？　使ったことありません（笑）。

フォントファミリー

記事中の文字列のフォントを弄れるボタンなんですが、最近はテーマでフォントを設定していたり、ブラウザで指定したりしているので、文字フォントを触ることってないですよねぇ。

というか、あまり記事中のフォントを変えるのは、ユーザビリティ的によろしくないと思います。

フォントサイズ

これは、文字の大きさ（フォントサイズ）を変更できるボタンですね。変更したい文字列を選んで、このボタンで調整することでフォントサイズを変えることができます。

昔、流行ったんですけどねぇ。後述するフォントカラーと合わせて、弄って記事書くのが主流だった時期がありましたね。

 

「侍魂」とか。

若い人は分からないか（笑）。

まぁ、今時はあまり使わない手法ではありますね。見にくいし。

インデント

インデントっていうのは

こんな風に行頭を下げる処理のことです。

あまり使いませんが、例えば一部の文章を、他の文章とは違うように区別したい時に、使うかも？

テキストとしてペースト

コピーした文字列をペースト（貼り付け）する場合、以前の書式が残っていると困ることがあります。このボタンを押した状態でペーストすれば、書式がないテキストだけになります。結構便利。

書式設定をクリア

これまでやってきた書式設定をクリアするボタンです。文字列を選んでこのボタンを押せば、ただのテキストに戻ります。

特殊文字

キーボードにない文字を打つ時に使います。これを押すとソフトウェアキーボードのようなものが出てきます。

ここから、入れたい文字を選べば、その特殊文字を挿入できます。

「続きを読むタグ」を挿入

当ブログでは、行頭からのある程度の文字だけがトップページに表示されて、その後「続きを読む」というリンクがありますが、ブログの設定によっては、記事全体がトップページ表示されたりします。

１記事の文字が少ない場合は良いのですが、あまりに長くなると、次の記事が見たい時にスクロールの量が多くなって面倒ですよね。

そういう場合は、文章の途中でこのボタンを押すと「Moreタグ」というのが挿入されて、そこから以降は「続きを読む」ボタンを押した時に見られるようになります。

テキスト色（フォントカラー）

さっきチラッとお話しましたね。文字の色を変えられるボタンです。

色を変えたい文字列を選択して、このボタンで色を指定すると文字の色が変わります。

文字の色が変わるだけなので、HTML的に強調されるわけではありませんが、読む方に「ここは大切よ！」というのを伝える場合には有効ですね。

でも、あまり文字色を変えすぎると、逆に見にくい記事になりますので、注意しましょう。

テーブル

プラグインの「TinyMCE Advanced」を導入すると表示されます。

これを使うとテーブルという表を作成することができます。

このブログではよくPVの集計などで表を使っていますね。

表は、行や列を指定して作りますが、後から足したり引いたりも出来ます。

ボタンを押して「テーブル」から表の行と列を指定すると、表が挿入されます。

その下のメニューで、行、列を挿入したり削除したりすることができます。

ちなみに、表を作成した段階では「レスポンシブ」という、画面の解像度に合わせて、表の大きさが変化する設定になっています。

表をドラッグしたりして幅を調節すると、横幅の数字が入ってしまいます。

表を作って文字を打っている段階では、表が崩れたようになりますが、気にしないで中身を入れていって大丈夫です。

キーボードショートカット

キーボードショートカットの一覧が表示されます。

ショートカットは便利なので、よく使う機能だけでも覚えておくと、記事の編集が捗ります。

 

まとめ

今日はすっかり長い記事になってしまいました（笑）。

 

書くのも結構大変でしたが、読むのも大変だったかと思います。お疲れ様でした。

全部の機能を使いこなす必要はありません。ザッと「そういうのできるんだ」程度で良いかと思います。

記事の編集は、人によりそれぞれですが、基本は「文字書いて、写真を貼り、リンクを付ける」ことで成り立ちます。

先程も言いましたが、あまり文字装飾に凝りすぎて、逆に見にくいサイトにならないように注意していきましょうね。

 

次回はメディアの追加方法を詳しく見ていきたいと思います。

ではまた〜。