サイタWeb・デザインスクールホームページ作成講座 東京 自分で作る夢のマイホームページ作り講座 レッスンノート WORDPRESS:枠線や背景色などで文章を装飾する方法など

WORDPRESS:枠線や背景色などで文章を装飾する方法など

ホームページ作成講座のレッスンノート

レッスンノートって?レッスンノートって?

引き続き、wordpressを用いてホームページ作成を進めていきました。

テーブル内で日本語入力がおかしいということで現象を確認していきました。
プラグインで作成したテーブルの中だと日本語のローマ字入力がうまくいかない状況でした。
プラグインを利用せずに、テキストモードでtableタグ内の入力では正常に入力できました。
プラグインの不具合の可能性が高いので、テキストモードで入力するか、別のプラグインに置き換えた方がいいということをお伝えしました。

次に、文字を枠で囲みたいということでした。

枠で囲むにはその領域を囲むタグにidやclass名をつけてCSSで設定する方法があります。
それよりも簡単に同じような表現を実現する方法として、TinyMCEというプラグインを使って背景色はつけることができることを実践しながらお伝えしました。

ダッシュボードの設定ーTinyMCEを開いて、Unused Buttonsから背景色を上のメニューにドラッグします。

また、表の枠線の色などを変える方法として、表の枠線内をクリックした状態ー上部メニューのテーブルー表のプロパティで設定できることをお伝えしました。枠線にピクセル数を入れることで枠線で囲むことができます。セルのスペースは線と線の間、セルのパディングは内側の線と文字の間を設定するものです。

挿入した画像が見にくいということで画質をあげられるかというご質問がありました。
書き出し設定によっては解像度はあげられますが、文字の大きさが小さすぎて見えないのはどうしようもありません。
より見やすくするには元のファイルを編集する必要があります。

簡単に画像を見えるようにする方法として、画像を大きく表示する方法をお伝えしました。

ダッシュボードーメディアー表示したい画像をクリックして選択ー右側のURLをコピーします。

固定ページー画像が表示されたページを開いた上で、
その画像を選択してリンクアイコンをクリック
入力欄が出てくるので詳細設定アイコンをクリック
URL欄にコピーしておいたURLをペースト
リンクを新しいタブで開くをチェック
更新ボタンをクリック
ページ編集画面に戻ったらページを更新をクリック
することで設定できます。

さらにわかりやすくするために、画像の下に「クリックすると大きく観ることができます」といった文章を入力して表示するようにしました。

次に、なかなか検索で出てこないということで検索上位にあがるにはという質問がありましたので、
ホームページのタイトル「より良い生活をするために」をすべてページのキーワードにいれていく
一般的な言葉ではなく特徴があるタイトルにする
という方法をお伝えしました。
このレッスンノートを書いたコーチ

自身の作品がグッドデザイン賞を受賞!実務・講師経験ともに豊富なので安心

目的・種類別にホームページ作成・作り方講座を探す

新着レッスンノート

引き続き、WORDPRESSを用いたホームページ作成を進めていきました。 投稿者の追加の方法と手順を再確認していきました。 必ず入力する必要があるのは「ユーザー名」と「メールアドレス」です。 ユーザー権限を「購読者」から「投稿者」へと変更する必要があります。 マニュアルにも追記...

引き続き、WORDPRESSを用いたホームページ作製を進めていきました。 最終更新日と投稿者名を消す カスタマイズーLightningデザイン設定 「投稿詳細ページで最終更新日を表示しない」 「投稿詳細ページで投稿者名を表示しない」 をチェックする。 サイト公開 ht...

引き続き、WORDPRESSで作成したホームページの作成・運営を進めていきました。 前回から ユーザー新規作成した パスワードを自己設定した とのことで、ちゃんとできているか確認していきました。 指定したのではなく自動設定されたパスワードになっているかもということでしたが、 ...

引き続き、WORDPRESSを用いたホームページ作成していきました。 歯科クリニックのホームページでサイトタイトルとグローバルメニューが重なっていたので位置調整を行いました CSSで配置や余白を調整 .pc .home.page #global_menu > ul{margin-...

他の方が登録投稿できるように WORDPRESSユーザー登録&投稿の仕方マニュアル作成をしました。 管理者による登録後、登録したアドレスにメールが届きます。 届いたメールを確認します。 メールの「パスワード設定するには以下のアドレスへ移動してください」の下のURLをクリッ...

レッスンノート ページ先頭へ

ホームページ作成情報

サイタのホームページ作成講師がブログを通して、ホームページ作成情報を発信。更新情報のチェックはこちらから!

twitter

ホームページ作成の先生

@HomepageCyta