wordpress

ワードプレスに画像挿入、表挿入、段落タグ、アイキャッチ画像の付け方を初心者視点で解説!

今回はワードプレスを使って文章に表を入れたり、文字色を整えて読みやすくしたりする方法を解説します。 初心者の方にもわかりやすく図で解説してゆきます。※こちらの画...

2016年2月11日

この記事をシェアする

こちらの記事もオススメ!

身を持って体感!WordPress(ワードプレス)を使ったサイトで一番オススメのレンタルサーバーはエックスサーバーで決定!

アクセスは突然に。はい。突然やってきました。とあるサイトで。。 先に結論を言いますね。エックスサーバーは最強でした。 リンク貼られたの?...

2016年5月17日 ゴマサバ

スポンサードリンク

今回はワードプレスを使って文章に表を入れたり、文字色を整えて読みやすくしたりする方法を解説します。
初心者の方にもわかりやすく図で解説してゆきます。

※こちらの画面はwordpressプラグインのTinyMSEを仕様しています。

はじめに。まず最初にツールバー切り替えボタンを押して下さい。これを押すとスタイルの部分が出てきます。
wp10

wordpressの基本。改行と段落の定義

ワードプレスのインターフェイスはマイクロソフトのワードの操作と似ています。
Shift+Enterで改行
Enterで段落改行となります。

wp01

文章をブロック分けする事によって読みやすくもなる事で記事の質が向上します。
もう少し裏側の話をすると、段落が綺麗に整理された記事になる事によってGoogle等の検索エンジンからも良い評価を得る事ができるのです。いわゆるSEOというやつの入り口です。

次に見出しタグをつける方法の解説を致します。
まずは段落分けされた文章を作り、そこにカーソルを合わせ、”スタイル”をクリック、大見出し~中見出し~小見出しの中から、見出しの重要度に合わせて選んで下さい。

wp02

”段落見出し”という段落文章にカーソルを合わせ、大見出しを選びました。すると・・・

wp03

このように段落見出しが作成されました。
こうする事によって目次が見やすくなり、読者も読みやすくなります。
綺麗に整理された記事になる事によってGoogle等の検索エンジンからも良い・・・(略)

少し難しい。ワードプレスで表の挿入を行う方法

こちらの作業はちょっとだけ難しいです。表を挿入する方法です。
表っぽいアイコンをクリックするとテーブルを挿入というメニューが出てきますのでそちらを押しますと、表の列と行の数を指定できます。青くなっている部分が実際に作成される表の形になります。

 wp07

先ほどの手順を行うと投稿部分に表が表示されますので、表の中に文字を挿入してゆきます。
成分表や原材料、スペック比較など色々な面で使えますし、表だと読者が一目でわかります。より一つ上の記事になると思います。

wp08

ワードプレスで画像を挿入する方法

次に画像の挿入方法。
投稿部分の上の”メディアを追加”を押しますと以下のような画面が表示されます。
この画面に画像をドラッグ&ドロップできます。(画像ファイルを左クリック長押ししてこの画面に引っ張ってくる)
すると、画像の情報を記入する部分があります。
ここの代替テキストの部分とタイトルの部分に画像の説明(主に記事タイトルを入れておくと間違い無いです。)を入れて下さい。綺麗に整理された記事になる事によってGoogle等の検索エンジンからも良い・・・(略)

wp06

ワードプレスで文字を装飾する方法~大きくしたり、色変えたり、背景色変えたり

こちらのブログではTinyMCEというプラグインを使っていますので簡単に操作をできるようにしています。
投稿画面で
1.文字をドラッグして選択
2.赤文字、青文字など適用させたいスタイルを選択
これだけです。

wp04

更に上級テクニックとしては複数の要素を複合
下の場合は”赤文字”、”文字サイズ大大”、”背景黄色”を複合した状態です。
強調したい文字列などに使いましょう。

※文字列に適用されたスタイルを解除する場合は”スタイル”と書いてある右の消しゴムボタンで解除できます。

wp05

ワードプレスでアイキャッチ画像を登録

最後にアイキャッチ画像の登録です。投稿画面の一番右下にゆくとアイキャッチ画像というものがあります。
要は記事の代表画像のようなものです。
商品でしたらパッケージなどの一番それとわかるようなものを設定していただきます。

wp09

アイキャッチ画像にも通常の画像と同様、タイトルと代替テキストを入力して下さい。

wp06

今回は当サイトのライターさん達の為に書きましたが、折角なんでワードプレスの基本的な使い方を一般公開してみようかと思って公開文章にしました。

※同じくワードプレスを設置している方へ
当ワードプレスはTinyMCEを設置した後にプラグイン自体をカスタマイズしているのでちょっと仕様が異なります。ご参考までに。

追記:ワードプレスでのプロフィール編集と画像登録

これは当ブログのライターさん向けの追記です。
自己紹介文と画像登録についてです。
管理画面サイドバーの”プロフィール”を押すと”プロフィール情報”という項目があるのでこちらをうめて下さい。
※プライバシーに関わるような情報は入れなくても大丈夫です。

wp07

プロフィール情報を入力されましたら下にスクロールします。すると、Upload Avatarという項目がありますのでこちらから画像をアップロードして下さい。
ご自身の画像などではなくて大丈夫です。好きな缶コーヒーでも良いですし、好きな風景でもお好きなもので結構です。
※ネットからの転用はご遠慮下さい。

wp08

スポンサードリンク


the f

この記事を書いたユーザー

the f

1981年生まれ育児真っ最中。旅行と外食が大好き、乗り物全般やスポーツも大好き。音楽もオールジャンル大好き。色んな事を書いてゆきます。 座右の銘:好きこそものの上手なれ



この記事をシェアする


口コミ

まだ口コミがありません

コメントを残す


関連記事

wordpress logo

WordPress(ワードプレス)のデータベースエラー画面をカスタマイズする方法

WordPressのテンプレート階層は知っておくと大変便利ですのでまず紹介しておきますね。というか知らないと独自カスタムしてしまって本来であ...

2016年5月17日 ゴマサバ

xserver_access10

身を持って体感!WordPress(ワードプレス)を使ったサイトで一番オススメのレンタルサーバーはエックスサーバーで決定!

アクセスは突然に。はい。突然やってきました。とあるサイトで。。 先に結論を言いますね。エックスサーバーは最強でした。 リンク貼られたの?...

2016年5月17日 ゴマサバ

wordpress logo

WordPress(ワードプレス)のフィルタやフックの関数名登録も無名関数を使ったほうが見やすくなるよ

いきなりですが、無名関数って何? その名の通り名前の無い関数です。 ワードプレスはPHPという言語で動いてますね。 そして...

2016年5月17日 ゴマサバ

eyecatch

PHPStormでWordPressの開発を楽にする方法

WordPressな皆さんこんにちは。皆さんWordPressで開発する際はどうやってますか?テストサーバーを直接、はたまた本番を直接、いや...

2016年1月9日 ゴマサバ

wordpress logo

WordPressのデフォルト投稿スラッグのURLを変える方法

WordPressでサイトを作る場合、だいたいこんなコンテンツになると思います。 ブログ お知らせ その他固定ページ ...

2016年4月11日 ゴマサバ

wp-popularposts

WordPress Popular Postsをhtml整形カスタマイズ。今表示記事を除外、同じカテゴリのみ表示する方法

こんにちは。 基本的に僕は記事担当ですが、しばしば、わからないなりにWordPressをカスタイマズしたりphpを触ってみたりします。 ソー...

2016年2月16日 the f

wp-cli

WordPressのWP-CLIが神ツールすぎてやばい!お引越しから開発環境まで楽に切り替えれる!

世の中のWordPressな皆さんこんにちは。WP-CLI使ってますか?サイトのURLが変わった時とかどうしてますか?プラグインに頼ってます...

2015年12月28日 ゴマサバ

icatch_xserver_wordpress

ValueServer(バリューサーバー)からXSERVER(エックスサーバー)にWordPressを引っ越した

サーバー引越しのタイミングは突然に。ある程度負荷が上がってくると、「Service Temporarily Unavailable」というサ...

2016年5月3日 ゴマサバ

もっと見る