HOME  /WordPress(応用)
 /見出し、本文、URL設定と使い方
2017年10月27日

見出し、本文、URL設定と使い方

TinyMCEでの見出し、本文、URLの設定と使い方を下記に解説します。

1.見出しの設定

1-1.my_style.cssへの設定

/*************************************************/
/* 見出しの設定  以降よりstyle.cssと共有する記述 */
/**************************************************/
h2,
h3,
h4,
h5{clear: both;}
h2{
  font-size:20px;font-size:1.25rem;
  color:#400fff;
  border:1px solid #400fff;
  border-left: 5px solid #400fff;
  padding:5px 0 5px 5px;
  margin:10px 0;}
h3{
  font-size: 18px;font-size:1.125rem;
  color:#b05927;
  border-bottom:1px solid #b05927;
  border-left: 5px solid #b05927;
  padding:5px 0 5px 5px;
  margin:10px 0;}
h4{
  font-size:16px;font-size:1rem;
  color:#228b22;
  border-left:5px solid #228b22;
  border-bottom:1px solid  #228b22;
  padding:5px 0 5px 5px; 
  margin:10px 0;}
h5{
  font-size:16px;font-size:1rem;
  color:#228b22;
  display:inline-block;
  border-left:5px solid #228b22;
  border-bottom:1px solid  #228b22;
  padding:5px 20px 5px 5px;
  margin:5px 0;}

※1.font-sizeはpx指定とrem指定を併記しています。
最近のブラウザはrem指定を優先し、デバイス種類によりフォントサイズを変更してくれます。
古いブラウザ(PC)はremが処理できないのでpxを使って表示します。

1-2.css¥editor-style.cssにも同様の定義を追加する。

/****************************************
見出しの設定
*****************************************/
.contents h2,
.contents h3,
.contents h4,
.contents h5{clear:both;}
.contents h2 {font-size:20px;font-size:1.25rem;color:#400fff;border:1px solid #400fff;border-left:5px solid #400fff;padding:5px 0 5px 5px;margin:10px 0;}
.contents h3 {font-size: 18px;font-size:1.125rem;color:#b05927;border-bottom:1px solid #b05927;border-left: 5px solid #b05927;padding:5px 0 5px 5px;margin:10px 0;}
.contents h4 {font-size:16px;font-size:1rem;color:#228b22;border-left:5px solid #228b22;border-bottom:1px solid  #228b22;padding:5px 0 5px 5px;margin:10px 0;}
.contents h5 {font-size:16px;font-size:1rem;color:#228b22;display: inline-block;border-left:5px solid #228b22;border-bottom:1px solid  #228b22;padding:5px 20px 5px 5px;margin:5px 0;}

1-3.見出しの使い方

下記アイコンをクリックして見出しの種類を選択します。

下記は見出しの種類別サンプルです。

見出し2

見出し3

見出し4

見出し5

2.記事本文の設定

2-1.my_style.cssへの設定

/****************************************************************/
/* 記事本文の設定 */
/*****************************************************************/
p{
  font-size:14px;font-size:0.875rem;
  line-height:20px;line-height:1.25rem;
  letter-spacing:0.1em;
  margin-bottom:4px;margin-bottom:0.25rem;}

2-2.css¥editor-style.cssにも同様の定義を追加します。

/****************************************/
/* 記事本文の設定 */
/*****************************************/
.contents p{font-size:14px;font-size:0.875rem;line-height:20px;line-height:1.25rem;letter-spacing:0.1em;margin-bottom:4px;margin-bottom:0.25rem}

2-3.記事本文の表示例

文字を入力すると無条件でこの<p>タグが付けられます。

他のスタイルを<p>に戻すと時は要素を選択して下記アイコンで「段落」を指定します。

下記は本文の表示サンプルです。

あああああああああああああああ<Shift+Enter>
あああああああああああああああ<Eenter>

あああああああああああああああ

※1.改行(Shift+Enter)と段落替え(Eenter)で少し行間を変更しています。

※2.サイズ指定はPXとremを併記する事により、デバイス種類により文字サイズを変更させています。

3.URLリンクの設定

3-1.my_style.cssへの設定

/** URLリンクの設定 **********************************************/
a {text-decoration:none;font-weight:normal;}
a:link {color:#400fff;}                       /* 未訪問時の色 */
a:visited {color:#4082ff;}                    /* 訪問済みの色 */
a:hover {text-decoration:none;color: #2feb67;}/* カーソル時の色 */

3-2.css¥editor-style.cssにも同様の定義を追加する。

/** URLリンクの設定 *****************************************/
.contents a {text-decoration:none;font-weight:normal;}
.contents a:link {color: #400fff;}/* 未訪問時の色 */
.contents a:visited {color: #4082ff;}/* 訪問済みの色 */
.contents a:hover {text-decoration:none;color: #2feb67;}/* カーソル時の色 */

URLリンクの入れ方

URLリンクには記事外リンクと、記事内ジャンプがあります。
下記に2つに分けて解説していきます。

3-3.記事外へのURLリンクの入れ方

①リンク元の文字列をドラッグして選択します。

②メニューアイコンから下記のボタンを挿入します。

③表示されたダイアログの右にあるリンク設定(歯車マーク)を選択します。

④表示された下記ダイアログに必要事項を入力して「リンク追加」を実行します。

■URL:ジャンプ先のurlをコピー&ペーストで入れるか、下の方に表示されているドキュメントを選択します。

■リンク文字:選択した文字列が表示されます。
(ここでの修正も可能です)

■リンクを新しいタブで開くをチェックすると、リンク先が新しいタブとして表示されます。チェックしない場合は見ているドキュメントが上書きされます。

⑤URLリンクサンプル

ホームネットワーク研究所HP

3-4.ページ内の他の場所へのジャンプ

ページ内で他の項目にジャンプさせる為には、飛び先(アンカー)が必要でこれを入れた後にURLリンク操作を行います。

①飛びたい先をクリックした後、下記アイコンをクリックします。

②表示されたダイアログに任意の名前を入れます。

※1.上記の例ではjump01という名前を付けました。

③リンク元の文字列をドラッグして、下記アイコンをクリックします。

④表示されたダイアログに、呼び先の名前を入れてEnterアイコンをクリックします。

※1.アンカーで付けた名前の前に#を付ける事

⑤URLリンクサンプル

下記をクリックすると、このページの先頭にジャンプします。

先頭の戻る