ページ編集～更新の実際 WordPress編集画面のビジュアルモードとテキストモードの一長一短 「ビジュアルモード」はTinyMceというワード風の編集画面で、とっつきやすい一方、細かなコントロールがしにくく、煩雑なソースになりがちです。 「テキストモード」はhtmlのソースをガシガシ書いていく編集画面のためhtmlとcssの知識～学習がどうしても避けられませんが、確実かつ美しいソースが書ける、記述ミスがあると派手にページがくずれるので、間違いを見つけやすい等のメリットもあります。 そこで、こちらの使い方ページで、パーツごとに編集方法を説明します。必要に応じてテキストモードも使用することで、htmlソース慣れ親しむことで、その後の更新作業をより簡略化できるようにします。 ビジュアルモード(tinyMCE)を活用した更新作業 1）ログイン ログイン画面URL【ブックマーク（お気に入り登録推奨）】 http://www.fujiyaku.org/fpa17/wp-admin （要ID/PASS） 2）トップページに遷移～文末の【Edit】ボタンで編集画面へ 【更新情報】～【研修会案内】手前までの設定概略 ビジュアルモードを使った編集方法の実際（※以下、画像クリックで拡大表示） ①日付の文頭にカーソルを合わせ『ENTER』キーを押す。 ②確認のためテキストモードを見ると空の『pタグ』ができている。＞ビジュアルモードに戻る。 ③直近または、近い形式の過去の更新情報をコピーし、新しくできた空の『段落（pタグ）』ペーストして編集。あるいは直接手入力。 アンカーリンク（ページ内遷移）を設定する。 ④アンカーリンク（ページ内遷移）のidを『#XXXXX』の形式で適宜編集（エンピツマークをクリックして編集）。 ⑤別ページや外部リンクを貼りたい場合はURL『http://www.〜』を入力。 ⑥『更新情報』と同様、リンク先の行の文頭にカーソルを合わせて『ENTER』キーを押す。 ⑦今度もテキストモードに切り替えて、空の『pタグ』ができていることを確認する。 ⑧今度は該当箇所に『(半角スペース)id=”XXXX”（半角英数。前述の#を外したidをコピペで可）』を入力～以下からコピーして貼り付け可能です。〜ビジュアルモードに戻すと、空の１行が挿入されただけで見た目は変わりません。『プレビュー』して更新情報からの遷移を確認します。 『TablePress』プラグインを使用する。研修会案内で使用するデザインスタイルは、あらかじめ設定済み。 既存のテーブルを複製して編集〜該当する位置にショートコードを貼り付けて表示。 『湘南東地域協議会研修会』の表を複製して編集する実例 管理画面（ダッシュボード）の左メニューから『TablePress』を選択し、『すべてのテーブル』メニューを選択する。 元になる表（ここではid=4）を複製（テキストリンク『コピー』をクリック）すると、リストの最末尾に複製（ここではid=13）が表示される。テキストリンク『編集』をクリックして、表（テーブル）の編集画面に遷移。 テーブル編集画面概要 一般に『表の項目(A)』をth（テーブルヘッドまたはテーブルヘッダー）、『表の項目(B)』をtd（テーブルデータ）と言います。 知っておくと便利なTIPS よく使う簡単なコードは以下からコピーして貼り付け可能です。 以下編集中のテーブルID=3を例に下記の手順を説明。 ＞未確定の項目(セルの行)を隠す。 ＞新しいの項目(セルの行)を増やす（削除する）。 ＞未確定の項目(セルの行)を隠す。 ① 隠したい行のチェックボックスをチェック ② 非表示ボタンをクリック ③ 隠したい行がピンクでマスクされる。 ④ 『変更を保存』ボタンをクリック ＞隠した行が非表示になっていることを確認。 ＞行を追加する ① 増やしたい行数を入力して『追加』ボタンをクリック。表の末尾に行が追加される。 ② 追加した行に移すテキストをコピー、または切り取り。 ③ 追加した行（セル）の各項目に入力、編集する。 ④ 各項目を入力したら『変更を更新』ボタンをクリック（管理画面の上下にあり） ⑤ 同様の手順で表の項目（行や列）を増やしたり、減らしたりできます。 ⑥ 選択した行のチェックボックスに『チェック』して、『挿入』ボタンをクリック ⑦ 選択した行の直前（すぐ上）に１行追加されます。 ＞⑧⑨の例のように編集 ⑩ 各項目を入力したら『変更を更新』ボタンをクリック。 ＞このようにすることもできます。 テーブル編集 補足 『ふじやく』バックナンバーDLページのページも、テーブル（表）に各号のPDFリンクを収録する形になっています。 PDFファイルの保存先は/jouhoushi_fujiyaku/documents/fujiyakuXX.pdfの形式での保存を推奨。 テーブルは1行3列になっています。新しいファイルを追加する時は、3号ごとにテーブルの行の追加が必要になります。 これなら、直近の号を編集する際の変更箇所はファイル名とリンク先の『数字のみ』でOKです！リンク先fujiyakuXX.pdfの号数、ファイル名はNO.X(20YY.MM)のみです。 参考：編集・更新によく使うソースコード（多分、これだけコピペでOK） <img class="img-responsive center-block" src="urlを入力"> <br><!--改行--> <br class="visible-xs"><!--スマホ表示の時に改行--> <br class="hidden-xs"><!--スマホ表示の時に改行せず、PC表示の時に改行--> <p id="XXX"> 参考：ページの構造 id=”maincol”のdivで左カラム全体 id=”wn”のdivで、【研修会案内】から上のブロックこの範囲内の段落（pタグ）に下線がつく設定 id=”updt”のdivで、【更新情報】の範囲内の段落（pタグ）の日付分のインデント2行目以降全角7つ分右寄せ
一般社団法人 藤沢市薬剤師会