WordPress編集ガイド｜ベイリンク


ベイリンク
電気学会サイト担当者向け

回転機技術委員会（RM）

WordPress編集ガイド

クラシックエディターで固定ページの本文を編集し、PDFなどの配布資料を掲載する方法をご案内します。

移行後のページ更新はWordPressの管理画面で行います。ページ全体のデザインや表示形式、一部の機能はテーマが管理しています。本文は「テキスト」タブでHTMLを直接編集できます。

固定ページのHTMLを編集する

  1. ご案内済みのログインURLから、WordPressの管理画面にログインします。
  2. 左側のメニューで「固定ページ」を開き、対象ページの「編集」を選びます。
  3. 本文欄の右上にある「テキスト」タブを選びます。本文のHTMLが表示されます。
  4. 修正する箇所を見つけ、必要な部分を編集します。見出しの文言だけを変更する場合は、開始タグと終了タグの間の文字を書き換えます。
メディアを追加

ビジュアルテキスト（選択中）

「テキスト」タブで見えるHTML

<h2>活動報告</h2>
<p>委員会の活動をご紹介します。</p>

ページでの表示イメージ

活動報告

委員会の活動をご紹介します。

クラシックエディターの操作イメージ。掲載文と表示は説明用の例です。

FTPでHTMLファイルをアップロードしても、WordPressの固定ページの本文には反映されません。お手元のHTMLを使う場合は、本文に該当する部分を「テキスト」タブで編集してください。

PDFを掲載する

  1. 編集画面の本文欄で、PDFへのリンクを入れる位置にカーソルを置きます。
  2. 「メディアを追加」をクリックします。新しい資料は「ファイルをアップロード」から登録し、登録済みの資料は「メディアライブラリ」から選びます。
  3. PDFの表示方法で「テキストリンク」を選び、本文に挿入します。挿入後、リンクの文字と位置を確認します。
  4. プレビューでリンクを開き、目的のPDFが表示されることを確認します。

サーバー内の指定フォルダにある公開資料にも、ファイルのURLを使ってリンクできます。新しく追加する配布資料は、WordPressの「メディアを追加」から登録すると、掲載と管理を同じ画面で行えます。

更新前後に表示を確認する

  1. 編集前に、本文のHTMLを手元にコピーしておきます。
  2. 「テキスト」タブでHTMLを修正したら、「変更をプレビュー」で見出し、行間、リンクを確認します。HTMLでレイアウトを組んだページは、テキストモードのまま編集・保存してください。
  3. 表示を確認できたら「更新」を押し、公開ページでも変更を確認します。

合資会社ベイリンク


回転機技術委員会（RM）サイト担当者向け

WordPressへのログイン、クラシックエディターでの固定ページの編集、PDFなどの配布資料の掲載方法をご案内します。

移行後のページ更新はWordPressの管理画面で行います。ページ全体のデザインや表示形式、一部の機能はテーマが管理しています。

  1. 管理画面にログインする
  2. 固定ページのHTMLを編集する
  3. PDFを掲載する
  4. 更新前後に表示を確認する

管理画面にログインする

  1. 別途ご案内した、担当サイトのWordPressログインURLを開きます。
  2. ご案内済みのユーザー名（ログインID）とパスワードを入力し、「ログイン」を押します。
  3. 管理画面が開いたら、担当サイトであることを確認します。

初回ログイン後にパスワードを変更する

初回ログイン後は、必ずWordPressのログインパスワードを変更してください。

  1. 管理画面の左側で「ユーザー」→「プロフィール」を開きます。
  2. 「アカウント管理」の「新しいパスワードを設定」を押し、新しいパスワードを設定します。
  3. ページ下部の「プロフィールを更新」を押して保存します。次回からは変更後のパスワードでログインしてください。

固定ページのHTMLを編集する

  1. 左側のメニューで「固定ページ」を開き、対象ページの「編集」を選びます。
  2. 本文欄の右上にある「テキスト」タブを選びます。本文のHTMLが表示されます。
  3. 修正する箇所を見つけ、必要な部分を編集します。見出しの文言だけを変える場合は、開始タグと終了タグの間の文字を書き換えます。

「テキスト」タブでの入力例

<h2>活動報告</h2>
<p>委員会の活動をご紹介します。</p>

この例では「活動報告」が見出しになり、その下に「委員会の活動をご紹介します。」という本文が表示されます。

FTPでHTMLファイルをアップロードしても、WordPressの固定ページの本文には反映されません。お手元のHTMLを使う場合は、本文に該当する部分を「テキスト」タブに貼り付けてください。

PDFを掲載する

  1. 本文欄で、PDFへのリンクを入れる位置にカーソルを置きます。
  2. 「メディアを追加」をクリックします。新しい資料は「ファイルをアップロード」から登録し、登録済みの資料は「メディアライブラリ」から選びます。
  3. PDFの表示方法で「テキストリンク」を選び、本文に挿入します。リンクの文字と位置を確認します。
  4. プレビューでリンクを開き、目的のPDFが表示されることを確認します。

サーバー内の指定フォルダにある公開資料にも、ファイルのURLを使ってリンクできます。新しく追加する配布資料は、編集画面の「メディアを追加」から登録すると、ページへの挿入まで行えます。

更新前後に表示を確認する

  1. 編集前に、本文のHTMLを手元にコピーしておきます。
  2. 「テキスト」タブで修正したら、プレビューで見出し、行間、リンクを確認します。HTMLでレイアウトを組んだページは、テキストモードのまま編集・保存してください。
  3. 表示を確認できたら「更新」を押し、公開ページでも変更を確認します。

google map

【CSS】
.iframe-content {
position: relative;
width: 100%;
padding: 75% 0 0 0;
}
.iframe-content iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

br 疑似クラス/疑似要素

「要素」とは

や

のようなタグ

要素にする方法
.br::before {
content: “\A” ;
white-space: pre ;
}

contentプロパティは、擬似要素(::before、::after)以外では無効です。

CSSの:afterと::afterどっちが正しい？
疑似クラスは「:」、疑似要素は「::」

z-index

z-indexプロパティは、ボックスの重なりの順序を指定する際に使用します。 z-indexプロパティは、positionプロパティでstatic以外の値が指定されている要素に適用されます。

整数値で指定
重なりの順序を整数で指定します。0を基準として、値が大きいものほど上になります。

auto
親要素と同じ階層になります。これが初期値です。

* アスタリスク

優先順位は0点です。

１）すべての要素を示すセレクタ
*{color: red;}
アスタリスクはすべての要素が対象のセレクタで、Webページ全体に適用されるCSSを記述したい際などに便利です。

２）属性セレクタにて「～を含む」とき

特定のhtmlタグの属性内に任意の値を含んでいるセレクタを指定することができます。

「href属性内に『map』を含んでいるaタグを指定したい！」というときに使います。
a[href*=”map”]{width:100%;}

３）calcのかけ算
div{width: calc(10% * 3);}
４）コメントアウト
/*ここに自由に記載*/

セレクタ

「>」で区切ると、ある要素の直下の階層にある要素にスタイルを適用します。

CSS

div.sample > a {
font-size:18px;
font-weight:bold;
}

———-

E + F　（隣接している要素に適用）
h4 + p {
2
color:red;
3
font-weight:bold;
4
}

———-

擬似要素・擬似クラス
:first-letter
:first-line
:first-child

:nth-of-type(n)　（n番目に現れる要素に適用【CSS3】）
nの部分は以下のように複数指定することもできます。

:nth-child(n)　･･･　n番目の要素に適用
:nth-child(odd)　･･･　奇数番目の要素に適用
:nth-child(2n+1)　･･･　奇数番目の要素に適用
:nth-child(even)　･･･　偶数番目の要素に適用
:nth-child(2n)　･･･　偶数番目の要素に適用
:nth-child(3n)　･･･　3,6,9,12…番目の要素に適用
:nth-child(3n+1)　･･･　1,4,7,10…番目の要素に適用

:nth-last-of-type(n)　（後ろからn番目に現れる要素に適用【CSS3】）
———-
:hover　（オンマウス時に適用）
———-

:not　（該当しない場合に適用【CSS3】）
———-
:checked　（チェックされているユーザーインターフェース要素に適用【CSS3】）
———-
E[foo]　（特定の属性を持つ要素に適用）

タイトルその1

a[title] {
2
font-weight:bold;
3
color:red;
4
}

———-

17. E[foo=”bar”]　（特定の属性(値)を持つ要素に適用する）

a[title=”タイトルその1″] {
font-weight:bold;
color:red;
}
———-

18. E[foo^=”bar”]　（属性の値が指定した文字で始まる場合に適用する【CSS3】）

a[title^=”タイトル”] {
font-weight:bold;
color:red;

———-

19. E[foo$=”bar”]　（属性の値が指定した文字で終わる場合に適用する【CSS3】）
———-

20. E[foo*=”bar”]　（属性の値が指定した文字を含む場合に適用する【CSS3】）