HOME → 6 Luxeritas → 03 カスタマイズ → 

Luxeritas 記事投稿前のカスタマイズ

Luxeritas(ルクセリタス)
記事投稿前のカスタマイズ
 
愈々、本格的に記事投稿が行える環境が整ったので、記事投稿前のカスタマイズを行う。
 

記事投稿前のカスタマイズ、最終形

 
以下、記事投稿前のカスタマイズ記録。
 

 

スポンサー リンク

 

 
 
 
 
 
1. moreタグについて
 
WordPress の標準テーマである、「Twenty Seventeen」のトップページ。
WordPress の標準テーマである、「Twenty Seventeen」のトップページ
 
上図の様に、WordPress の標準テーマでは【 !--more-- 】タグで記事が切られ、ここまでの抜粋文が表示される仕組みになっている。
 
「Luxeritas」のトップページ。
「Luxeritas」のトップページ
 
Luxeritasのトップページは、【 !--more-- 】タグが無くても自動で記事を抜粋し、「続きを読む」の代わりに「記事を読む」が表示される。更に、アイキャッチ画像がサムネイルとして表示されるので、敢えて【 !--more-- 】タグを設定する必要はない
 
 
 
2. 「記事を読む」のカスタマイズ
 
デフォルトでは、「記事を読む」の後に16文字分のタイトルが付いている。
デフォルトでは、「記事を読む」の後に16文字分のタイトルが付いている
 
「Luxeritas」→「カスタマイズ(外観)」→「グリッドレイアウト」で、【"記事を読む" ( 通常スタイル )】の【 "記事を読む" に短いタイトル付ける】に付いているチェックを外す。
「Luxeritas」→「カスタマイズ(外観)」→「グリッドレイアウト」で、【"記事を読む" ( 通常スタイル )】の【 "記事を読む" に短いタイトル付ける】に付いているチェックを外す
 
「記事を読む」だけの、シンプルなデザインになる。
 
 
 
3. 見出しタグのカスタマイズ
 
Luxeritasでは、見出しタグの「 h2 」が重要な役割を持ている。
①.最初に現れた H2 の上に、目次が挿入される。
②.投稿内で最初に見つかった H2 タグの上に広告が設置できる。
 
 
この点を考慮した上で、「 h2 」タグをカスタマイズして効果的に使用する
 
 
デフォルトの、見出しデザイン。
デフォルトの、見出しデザイン
 
「 h2 」タグのカスタマイズ例(フォントサイズ)と、自動挿入される目次。
「 h2 」タグのカスタマイズ例と、目次
 
「 h2 」タグをカスタマイズしたCSS。
/*----------------------------------------------*/
/* 見出しタグの装飾                           */
/*----------------------------------------------*/
.post h2 {
	font-size: 20px;
	font-weight: bold;
	border: 1px solid #800000;
	background: #c5ff88; /*背景色*/
	padding: 5px 10px 3px 10px; / *文字まわり(上下左右)の余白*/
}
/*----------------------------------------------*/
 
 
 
4. 目次の設定とカスタマイズ
 
「カスタマイズ(外観)」→「目次」の「投稿内の見出しタグに基づいて目次を作成します。」で、【自動で目次を挿入する】と【スタイルを適用する】にチェックを入れると、自動的に目次が挿入され、且つ、CSSが適用されるようになる。
「カスタマイズ(外観)」→「目次」の「投稿内の見出しタグに基づいて目次を作成します。」で、【自動で目次を挿入する】と【スタイルを適用する】にチェックを入れると、自動的に目次が挿入され、且つ、CSSが適用されるようになる
 
「表示条件」:見出しの数(H2の個数)で制御。
「表示するポストタイプ」:投稿ページと固定ページ、別々に設定可能。
「目次にする見出し階層」:H2のみからH2~H6まで選択出来る。
「ジャンプ先の位置(高さ)」:目次を押してジャンプする時の、表示位置(見出しの画面表示位置)を設定する。
 
デフォルトの目次。
デフォルトの目次
 
目次を隠すボタンの制御。
目次を隠すボタンの制御
 
「 目次 」をカスタマイズしたCSS。
/*----------------------------------------------*/
/* Luxeritas 目次のカスタマイズ               */
/*----------------------------------------------*/
div#toc_container {
	background: #E6FFE9;
	border: double 1px #033;
	border-radius: 8px;
}
#toc_container .toc_title {
	font-size: 20px;
	font-weight: bold;
	color: #033;
	margin-left:2em /*タイトル左側余白*/
}
#toc_container > .toc_list {
	list-style: none;
	margin-bottom: 0 !important;
	padding-left: 20px;/*h2左側余白 */		
}
.toc_list ul {
	list-style: none;
	padding-left: 30px;/* h3左側の余白 */
}
.toc_list li{
	font-size: 20px;/*h2フォントサイズ */
	padding: 5px 0;/*h3とh2上の余白 */
}
.toc_list .toc_number {
	display: none;
}
#toc_container .toc_list li a {
	font-size: 18px;
	color: #008080;  /*リンク文字色*/
	font-weight: bold;
	padding-left: 20px;/*h2左側余白 */
}
#toc_container .toc_list li li {
	font-size: 16px;/*h3フォントサイズ */
	color: #008080;  /*リンク文字色*/
	padding: 2px 0;/*h3上下余白 */
}
#toc_container .toc_list li a:hover{
	color: #990000;/*マウスオーバー時の文字色 */
	text-decoration: none;
}
/*----------------------------------------------*/
 
「 目次 」のカスタマイズ結果。
「 目次 」のカスタマイズ結果
 
 
記事投稿前のカスタマイズ、最終形。
記事投稿前のカスタマイズ、最終形
 
 
 
5. サイトマップの送信
 
サイトマップを作成した初期時点では、Search Console は【サイトマップ】を認識していない。
 
Search Console に、【サイトマップ】を認識させるために、「新しいサイトマップの追加」を行う。
Search Console は【サイトマップ】
 
これで、クローラーはXMLサイトマップを参考にして、ウェブサイト内の各ページを巡回してくれるようになる。
 
XML Sitemaps:
 
 
以上。
(2020.04.13)
 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください