【閲覧くださっている皆様へ】URLが変わりました。一部転送が完了していない内部リンク先があります。「404 Not Found お探しのページは見つかりませんでした。」という表示になる場合は、"https://bits-lifestyle.com/jigaku-study/●●"から、"https://study.bits-lifestyle.com/●●"へ書き換えてアクセスくださいますよう、お願いいたします。ご迷惑をおかけいたします。

 
スポンサーリンク

【プログラミング初心者向けWordPressの始め方⑨ ビジュアルエディターの使い方 】

HTML&CSS

レンタルサーバーお試し期間中にやることを9日間に分けてお伝えしています。今回は5日目、便利なビジュアルエディターの使い方です。

※お試し期間はサーバにより異なります。
※以下、ワードプレスをWPと略します。
※説明の便宜上「〇日目」としていますが、 順番はバラバラで大丈夫です。実際はLP模写しながら不明点を調べていく形になります。

レンタルサーバお試し期間中のTODO(例)

今回はLP模写中なので、HTMLやCSSを使う方が見本と比較しながら作れるため、これまでビジュアルエディターは使ってきませんでした。HTMLやCSSがなくても素敵なデザインや機能が作成できる便利機能ですが、簡単そうで意外と癖があるので、お試し中に慣れておくことをお勧めします。

今回作成する箇所

テーブル(表)を使ってショップリストを作っていきます。

見本はこちら

大名古屋ビルヂング
大名古屋ビルヂングの公式サイト。食を中心とした大名古屋マルシェやジェイアール名古屋タカシマヤ ウオッチメゾンをはじめ、ファッション、雑貨、レストラン、フード、ライフスタイル&サービスなどのショップ最新情報を発信しています。

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

投稿画面の右上の3点のところをクリックして、ビジュエルエディターを選択します。

こちらがビジュアルエディターです。

コードエディタがHTMLのタグとテキストだけなのに比べ、実際の見た目に近い形で画像やデザインが表示されるので非常に分かりやすいです。

下まで行って、前回作成した箇所の下にショップリストを入れたいです。

スペースにカーソルを合わせると、+マークが出てきますので、それをクリックします。

この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

たくさんアイコンが並んでいます。ここでは見出しを選びましょう。

見出しの種類を選択します。

この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

見出しを書き終わったら、Enterキーを押します。

この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

次の行にカーソルが移動しました。

再び、+マークを押します。

下の方に行くと、もっと選択肢がたくさん出てきます。

この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

テーブルを選びます。

この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

列数と行数をそれぞれ入れます。

この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

まあ、これは便利!表が簡単にできちゃいました。

ビジュアルエディターではCSSで書いたデザインは反映されません。試しにプレビューボタンを押してみます。

この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

ちゃんとCSSは反映されていることが確認できました(ゴールドになってます)

この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

セルの中に画像を入れるのも簡単。小さな▼マークを押し、インライン画像を選びます。

この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

いつものようにメディアライブラリから画像を入れることができます。

残りのセルにも画像を入れて、さらにテキストを入れていきます。

この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

文字の色とか、幅とか、修正すべき箇所はありますが、ビジュアルエディターでできるのはここまでです。

あとは前回のように「追加CSS」でデザインに修正を加えます。

(外観 → カスタマイズ → 追加CSS)

例えば、幅を変えるには、まず「要素の調査」をして調べます。

プレビュー表示をして調べたいデザインのところで右クリック。

この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

このテーブルのクラス名が分かりました。(wp-block-table か aligncenter)

クラス名が複数設定されている場合は、CSSの方で、幅が設定されているクラス名を調べてみましょう。わからなければ、両方試してみるのもアリ。

追加CSSにこんなコードを追加。

この画像には alt 属性が指定されておらず、ファイル名は arrow057_02.png です

幅が広がりました。

まとめ

今回はLP模写でHTML&CSSを勉強するのが目的なので、基本的にはコードエディターにHTMLを書いての制作をお勧めしますが、実際にブログを始めると、いちいちコードを書くには時間もかかります。ビジュアルエディターをうまく使うことにより時間短縮ができますので、機能を使いこなせるようにしておくと良いでしょう。

コメント

WP Twitter Auto Publish Powered By : XYZScripts.com
タイトルとURLをコピーしました