テーマ
Cocoonを使用
最近ロリポップでWordpress追加時に指定可能となったのでセットアップが楽になった
プラグイン
・WP Multibyte Patch
ロリポップでWordpress追加時にインストール済み
・WP Page Post Widget Clone
ロリポップでWordpress追加時にインストール済み
・Site Kit by Google
ロリポップでWordpress追加時にインストール済み
・SiteGuard WP Plugin(ジェイピー・セキュア)
不正アクセス/ログイン防止
WordPressのログイン画面のURLが変わるので一番初めに導入
・Highlighting Code Block(LOOS, Inc.)
コードブロック追加
ライン番号など表示できる(標準のでは機能不足)
・Insert Pages(Paul Ryan)
共通パーツを各ページに表示できる
・Hide Page And Post Title(Arjun Thakur)
投稿ページタイトルを非表示
ページごとに投稿タブのHide Page and Post Titleの項目のHide thie title.をonにする
・CMS Tree Page View(Jon Christopher)
記事が多くなりそうだったので記事をツリー表示できるプラグインを導入
投稿と固定ページでメニュー内をチェック
WordPress設定
https指定
設定 – 一般 でWordPress アドレス (URL)とサイトアドレス (URL)をhttpsに変更
パーマリンク設定
設定 – パーマリンク設定 で基本かカスタム構造で以下を設定/%category%/%postname%/
サイトアイコン(ファビコン)設定
外観 – カスタマイズ のサイト基本情報で設定
アイコンサイズは16px, 24px, 32px, 48px, 64px, 128px, 256pxで.icoを作成するのが良いらしいけどとりあえず100pxの.pngを使用
見出しデザイン変更
外観 – テーマエディター のCocoon Childのstyle.cssで変更したい内容を追加
Cocoonのスキンに依存しない内容にする
/* 見出し カスタマイズ */
.article h2 {
color: #000;
font-size: 24px;
font-weight:bold;
padding: 4px;
border-left: none;
border-radius: 0 0 0 0;
border-bottom: solid 2px #000000;
margin-bottom: 16px;
}
.article h3 {
color: #000;
font-size: 18px;
font-weight:normal;
padding: 0px;
border-left: none;
border-radius: 0 0 0 0;
}
.article h3:before {
content: "・";
}
.article h4 {
border-top:none;
border-bottom:none;
padding: 0;
}
.article h5 {
border-bottom:none;
padding: 0;
}
.article h6{
border-bottom:none;
padding: 0;
}
Cocoonの投稿者情報を非表示
鉛筆アイコンのやつ
クリックされると意図しないページが表示されてしまうので非表示
/* 著者情報非表示(固定ページ) */
.page .author-info {
display: none;
}
/* 著者情報非表示(投稿ページ) */
.post .author-info {
display: none;
}
Cocoonのタイトル非表示
タイトル表示が無駄スペースなので消したい
タイトルが未設定であれば表示されないけど検索で困るのでCSSで非表示
/* タイトル非表示 */
.logo-header {
display: none;
}
<code>の装飾
Android Developer風の装飾
/* <code>カスタマイズ */
code {
display: inline-block;
margin: 0 0.2em; /* ブロック前後の余白 */
padding: 0 0.2em; /* ブロック内の余白 */
background-color: #F8F9FA;
border-radius: 3px;
border: solid 1px #E8EAED;
font-family: Consolas, Menlo, Monaco, -apple-system, BlinkMacSystemFont, "Segoe UI", Meiryo, monospace;
}
カテゴリーのタイトルカスタマイズ
/* カテゴリータイトル */
#sidebar .sidebar-scroll .widget_categories .widget-title {
color: #000;
font-size: 1.2em;
padding: 4px;
border-left: none;
border-radius: 0 0 0 0;
border-bottom: solid 2px #000000;
}
目次カスタマイズ
見た目シンプルなh2下線とh3中黒しか使わない
/* 目次タイトル */
#sidebar .sidebar-scroll .widget_toc .widget-title {
color: #000;
font-size: 1.2em;
padding: 4px;
border-left: none;
border-radius: 0 0 0 0;
margin-top: 24px;
border-bottom: solid 2px #000000;
}
/* h2見出しの前 */
#sidebar .toc-list>li>a::before {
font-family: "Font Awesome 5 Free";
content: "\f103";
font-weight: 900;
padding-right: 5px;
color: #000057;/* アイコンの色 */
}
/* h3見出しの前 */
#sidebar .toc-list>li li a::before {
font-family: "Font Awesome 5 Free";
content: "\f105";
font-weight: 900;
padding-right: 5px;
}
#sidebar .toc-list li a {
font-size: 1.1em;
font-weight: 600;
}
#sidebar .toc-list>li li a {
font-size: 1em;
font-weight: 500;
}
#sidebar .toc a:hover {
color: #333;
text-decoration: underline;
}
スクロール追随 ハイライト
Cocoonオリジナルの目次でコンテンツのスクロールに追随して目次の項目のハイライトも移動する
参考サイト名失念ですがほぼコピペコード
/* スクロール追随 ハイライト */
#toc-2 li.current {
background-color: #DDDDDD99;
}
$(function() {
// ナビゲーションリンクを設定
// #toc-2: サイドバーの目次ウィジェット
// li: その各見出し
// a: そのリンク
const headerLinks = $('#toc-2 li a');
// コンテンツの位置情報の配列作成
// {
// top: 各見出しに対応するコンテンツの先頭位置
// bottom: 各見出しに対応するコンテンツの終了位置
// }
let contentsPos = new Array();
// contentsPos の初期化関数
function init() {
for (let i = 0; i < headerLinks.length; i++) {
// 見出し i のURL(アンカーポイント・リンク先)を取得
// 通常「#toc1」のような id属性が得られる
const headerID = headerLinks.eq(i).attr('href');
// コンテンツ i の先頭位置
const top = $(headerID).offset().top - 20;
// コンテンツ i の終了位置
// 暫定的に null を入れておく(後で更新)
const bottom = null;
// 配列として格納
contentsPos[i] = { top: top, bottom: bottom };
// コンテンツの下部の位置を調整
if (i > 0) {
// 前のコンテンツの終了位置 = 今のコンテンツの先頭位置
contentsPos[i - 1].bottom = top;
}
};
// footerの先頭位置を取得
const footerTop = $("footer").offset().top - 20;
// 最後のコンテンツの終了位置 = footerの先頭位置
contentsPos[contentsPos.length - 1].bottom = footerTop;
}
// 初期化の実行
init();
// 現在位置を確認してコンテンツ位置に対応
function currentCheck() {
// 現在のサイト上部からの位置を取得
const windowScrollTop = $(window).scrollTop();
// 一旦マークを解除
headerLinks.parent().removeClass('current');
// 現在位置が全コンテンツ内にあるかチェック
if (contentsPos[0].top <= windowScrollTop && contentsPos[contentsPos.length - 1].bottom > windowScrollTop) {
for (let i = 0; i < contentsPos.length; i++) {
// 現在位置がコンテンツ i 内にあるかチェック
if (contentsPos[i].top <= windowScrollTop && contentsPos[i].bottom > windowScrollTop) {
// class = "current"を aタグの親である li タグに設定
headerLinks.eq(i).parent().addClass('current');
break;
}
}
}
}
// ロード・スクロール時に見出しをマーク更新
$(window).on('load scroll', currentCheck);
// アコーディオンが開閉したら座標更新
$(document).on('change', 'input.toggle-checkbox', function() {
setTimeout(init, 350);
});
// 目次が開閉したら座標更新
$(document).on('change', 'input.toc-checkbox', function() {
setTimeout(init, 550);
});
});
Cocoon設定
・スキンを変更とりあえずSimple‐Darkmodeに変更
style.cssに定義したダークモード設定が反映されないので一旦なしに戻しました
・段落の間隔調整
Cocoon設定の本文 – 本文行間設定 で本文余白の行余白を0.5emにする
・SNSシェア/フォロー設定
とりあえずボタンの表示設定を全部OFF
・フッターのコピーライト変更
Cocoon設定のフッター – クレジット表記
・パンくずリストの位置変更
投稿 – パンくずリスト設定 メインカラムトップに変更
アフェリエイト
アフェリエイト試してみたかったので、とりあえずロリポップの管理ページでおすすめされてたA8.netに登録
とりあえずロリポップとA8.netと連携してバナー表示
外観 – ウィジェット でページの一番下に表示したかったので投稿コメント下に[C] 広告を追加
2個横並びで表示させたかったので2つまとめてリンクをコピペ
サイトの構成
サイトの一部を消したり移動しやすいように、記事の大まかな内容ごとにWordpressを分けて作成
ただWordpressの設定とかが別々になるので管理が大変…
その他
パフォーマンスの改善
「Authorizationヘッダーがありません」
→ロリポップのPHP設定でCGI版からモジュール版に変更
「ページキャッシュが検出されず、サーバーのレスポンスが遅くなっています」
→WP Fastest Cacheプラグインの導入
ただ同じ構成のはずのサイトでも出るサイトと出ないサイトがある…謎です