Cocoonに変更してからやったカスタマイズ

Simplisity2からCocoonへ変更した記事とその後に追加や変更した箇所などの備忘録記事
どこをどう弄ったっけかな？となったりするので、自分用って感じですかね

リードタイムがとんでもない事になっちゃったので時間のある時にでも…

個別記事のまとめはこちら

2019/05/17 いくつか追記と修正をしました

Index

phpファイル群
cssファイル群
おわり

phpファイル群

functions.php

コメント欄関係

///// comment form /////
function my_comment_form_custom($arg) {
    $commenter = wp_get_current_commenter();
    $req = get_option('require_name_email');
    $aria_req = ($req ? " aria-required='true'" : '');

    $arg['author'] = '<p class="comment-form-author">' . '<label for="author">' . __( 'name' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>';
    $arg['email'] = '<p class="comment-form-email"><label for="email">' . __( 'email' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' . '<input id="email" name="email" ' . ( $html5 ? 'type="email"' : 'type="text"' ) . ' value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>';
    $arg['url'] = '';
    $arg['cookies'] = '<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"' . $consent . ' />' .
                     '<label for="wp-comment-cookies-consent">' . __( ' 次回のコメントのために名前とメールアドレスを保存する' ) . '</label></p>';
    return $arg;
}
add_filter('comment_form_default_fields', 'my_comment_form_custom');

function move_comment_field_to_bottom( $fields ) {
    $fields['comment'] = '<p class="comment-form-comment"><textarea id="comment" name="comment" cols="30" rows="5" maxlength="65525" required="required" placeholder="コメントをどうぞ"></textarea></p>';
    $comment_field = $fields['comment'];
    unset( $fields['comment'] );
    $fields['comment'] = $comment_field;

    return $fields;
}
add_filter( 'comment_form_fields', 'move_comment_field_to_bottom' );

この部分は並び順の変更や、プレースホルダ化です

プレビューボタン

///// プレビュー /////
function add_custom_preview_button() {
?>
<script>
    (function($) {
        $('#wp-content-media-buttons').append('<a id="custom-preview" class="button">'+ $('#post-preview').text() +'</a>');
        $(document).on('click', '#custom-preview', function(e) {
            e.preventDefault();
            $('#post-preview').click();
        });
    }(jQuery));
</script>
<?php
}
add_action( 'admin_footer-post-new.php', 'add_custom_preview_button' );
add_action( 'admin_footer-post.php', 'add_custom_preview_button' );

この部分はプレビューを開くボタンの追加部分
エディタ上のメディアを追加の横にプレビューボタンを追加することが出来ます

amp用アコーディオン

///// amp対応アコーディオン /////
add_filter('the_content', 'amp_custom_the_content');
function amp_custom_the_content($the_content) {
    if( is_amp() ) {
        return str_replace(
        array( '<details>', '</details>', '<summary>', '</summary>' ),
        array( '<amp-accordion><section>', '</section></amp-accordion>', '<header>', '</header>' ),
        $the_content );
    }
    return $the_content;
}

AMP用のアコーディオン、今はもしかしたら必要ないものかも知れないですが追加したままです

breadcrumbs.php

パンくずリストのホームだけ日本語表記が気になったので英語表記に変更

- ( 'ホーム', THEME_NAME ).
+ ( 'home', THEME_NAME ).

head-insert.php

<link rel="preload" as="font" href="https://haineons.com/wp-content/themes/fonts/raleway-v13-latin-regular.woff2" crossorigin>
<link rel="preload" as="font" href="https://haineons.com/wp-content/themes/fonts/m-plus-rounded-1c-v9-latin-regular.woff2" crossorigin>
<link rel="preload" as="font" href="https://haineons.com/wp-content/themes/fonts/m-plus-rounded-1c-v9-latin-500.woff2" crossorigin>

子テーマのhead-inster.phpに使っているウェブフォントを追加しています

footer.php

PageSpeed Insights

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
部分にあったcssファイルの部分をグーグル先生に聞いて出てきた記事を参考に移動させました

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</body>

以前のボディ閉じタグの後ろに入れてあるとAMPエラーが出ていたので現在は閉じタグの直前に入れています

footer-meta.php

Simplicityにあった投稿者リンクをツイッターIDヘ置き換える設定が見当たらなかったので
とりあえずコードを書き換えて対応

- <a href="<?php echo $url; ?>" class="author-link">
+ <a href="https://twitter.com/twitterID" target="_blank" rel="noopener nofollow">

この部分は最新版のCocoonだとメニューユーザープロファイルにある
プロフィールURLに指定したいものを入れるとそのリンクに変わるようになっているようです
例えばプロフィールページ(/profile)など

sns-follow-buttons.php

フォローボタンにあるサイト用コードを削除しました

- <?php if ( get_the_author_website_url() )://ウェブサイトフォローボタンを表示するか ?>
-    <a href="<?php echo get_the_author_website_url(); //ウェブサイトフォローIDの取得?>" class="follow-button website-button website-follow-button-sq" target="_blank" title="<?php _e( '著者サイト', THEME_NAME ) ?>" rel="nofollow"><span class="icon-home-logo"></span>l</a>
-  <?php endif; ?>

mobile-menu-buttons.php

モバイルメニューのメニュー表記を英語へ変更

- <?php _e( 'メニュー', THEME_NAME ) ?>
+ <?php _e( 'menu', THEME_NAME ) ?>

こんな感じに表記部分を変更しました

breadcrumbs.php、sns-follow-buttons.php、mobile-menu-buttons.php、footer-meta.phpは
子テーマディレクトリ内にtmpディレクトリを新たに作りそこへアップロード

cssファイル群

12/05変更以下の3つは現時点でのxxx.cssの状態に差し替えました

amp.css

AMP(Accelerated Mobile Pages)用に変更しておきたい部分のコードを追加
子テーマのstyle.cssが読み込まれるようになったのでかなりの部分を削除しました

ソースコードを開く

/********** オリジナル **********/
/* 1240px以下 */
@media screen and (max-width: 1240px){
    .mobile-menu-buttons {
        opacity: 0.9;
        width: 100%;
        font-family: 'Raleway', sans-serif;
    }
    .mobile-menu-buttons .menu-caption {
        font-family: 'Raleway', sans-serif;
    }
    .sidebar .sns-follow-buttons a {
        width: 45px;
    }
    /* アコーディオン */
    .i-amphtml-accordion-header {
        padding: 2px 5px 0;
    }   
}

/* 1030px以下 */
@media screen and (max-width: 1030px){
    .mobile-menu-buttons {
        opacity: 0.9;
        width: 100%;
        font-family: 'Raleway', sans-serif;
    }
    .mobile-menu-buttons .menu-caption {
        font-family: 'Raleway', sans-serif;
    }
    .sidebar .sns-follow-buttons a {
        width: 45px;
    }
    /* アコーディオン */
    .i-amphtml-accordion-header {
        padding: 2px 5px 0;
    }   
}

/* 768px以下 */
@media screen and (max-width: 768px){
    .mobile-menu-buttons {
        opacity: 0.9;
        width: 100%;
        font-family: 'Raleway', sans-serif;
    }
    .blogcard-snipet {
        font-size: 12px;
    }
    .mobile-menu-buttons .menu-caption {
        font-family: 'Raleway', sans-serif;
    }
    .sidebar .sns-follow-buttons a {
        width: 45px;
    }
    div.gsc-control-searchbox-only,
    .gsc-control-searchbox-only-ja {
        margin: 50px 0 0;
    }
    /* アコーディオン */
    .i-amphtml-accordion-header {
        padding: 2px 5px 0;
    }   
    /* カスタムフッター非表示 */
    .ft-column-wrap.column-3 {
        display: none;
    }
}

/* 480px以下 */
@media screen and (max-width: 480px){
    .mobile-menu-buttons {
        opacity: 0.9;
        width: 100%;
        font-family: 'Raleway', sans-serif;
    }
    .blogcard-snipet {
        font-size: 12px;
    }
    .mobile-menu-buttons .menu-caption {
        font-family: 'Raleway', sans-serif;
    }
    .sidebar .sns-follow-buttons a {
        width: 45px;
    }
    div.gsc-control-searchbox-only,
    .gsc-control-searchbox-only-ja {
        margin: 50px 0 0;
    }
    
    /* ビデオコンテナ */
    .video-container .video {
        margin-top: 30px;
    }
    
    /* cocoon amazon affi */
    .item-price {
        font-size: 14px;
    }
    
    .product-item-content {
        text-align: left!important;
    }
    
    .product-item-snippet {
        padding-left: 25%;
        text-align: left;
    }
    /* アコーディオン */
    .i-amphtml-accordion-header {
        padding: 2px 5px 0;
    }   
    /* カスタムフッター非表示 */
    .ft-column-wrap.column-3 {
        display: none;
    }
    
    span[id^="toc"] {
        padding-top: 1.7em;
    }
}

style.css

メインスタイルのCSSファイル

ソースコードを開く

/********** オリジナル **********/
body {
    color: #6c6c6c;
}

/* scrollbar */
pre {
    max-height: 250px;
}

pre::-webkit-scrollbar {
　　height: 10px;
　　width: 10px;
}

pre::-webkit-scrollbar-track {
　　background: transparent;
　　border: none;
}

pre::-webkit-scrollbar-thumb {
　　background: rgba(100,100,100,0.3);
　　border-radius: 10px;
　　box-shadow: inset 0 0 4px rgba(255,255,255,0.8);
}

/* カードタイプリンクカラー */
.a-wrap {
    color: #6c6c6c;
}
/* カードタイプリンクのホバーエフェクト */
.a-wrap:hover {
    background-color: #f2fcff;
    transition: all 0.8s ease;
}

/* グローバルメニュー */
.menu-header, #navi .navi-in>.menu-header .sub-menu {
    background-color: #f3f4f5;
}
.navi-in>ul li {
    height: 35px;
    line-height: 35px;
}
.caption-wrap:hover {
    background-color: #dbf4ff;
    color: #4489ff;
}
.sub-menu li:hover {
    background-color: #dbf4ff;
    color: #4489ff;
}

/* トップメニューカテゴリフォント */
.item-label {
    font-family: 'Raleway', sans-serif;
}

/* ロゴを左上へ */
.logo, .tagline {
    position: absolute!important;
    top: 0;
    text-align: left;
    padding: 5px 10px;
    font-family: "M PLUS Rounded 1c";
}
.tagline {
    position: absolute!important;
    top: 40px;
}

/***** 各種装飾 *****/
/* トップページカテゴリ装飾 */
.topcat {
    color: #6c6c6c;
    background: #f3f4f5;
    font-weight: 700;
    font-family: 'Raleway',sans-serif;
    margin-bottom: 12px;
    padding-left: 5px;
    border-bottom: 3px double #9ed1fc;
}

.topc-text {
    text-align: right;
    font-weight: 700;
    font-family: 'Raleway', sans-serif;
}

/* サイドバーの装飾 */
#sidebar h3{
    margin: 0 0 1.5em;
    padding: 0.4em;
    border-bottom: 3px double #9ed1fc;
    font-size: 1.143em;
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
}

/* アイキャッチ キャプション */
.eye-catch-caption {
    font-size: 1em;
}

/* 文中タイトルの装飾 */
.article h2 {
    border-left: 5px double #cccfd2;
    border-bottom: 5px double #cccfd2;
    color: #444;
    padding: 10px;
    font-size:20px;
    font-family: "M PLUS Rounded 1c";
}

.article h3,
#comment-area h3 {
    color:#444;
    font-size:20px;
    border-top: none !important;
    border-right: none !important;
    border-left: 10px solid #bababa;
    border-bottom:3px solid #bababa;
    padding:3px 10px 3px;
    font-family: "M PLUS Rounded 1c";
}

.article h4 {
    color:#666;
    font-size:18px;
    padding: .25em 0 .25em .75em !important;
    border-left: 8px solid #ddd !important;
    border-top: none !important;
    border-bottom: none!important;
    font-family: "M PLUS Rounded 1c";
}

.article h5 {
    color: #888;
    font-size: 16px;
    border-bottom: 3px solid #e8e8e8;
    padding: 0 5px;
    font-family: "M PLUS Rounded 1c";
}

/* アコーディオン関連 */
details {
    transition: margin-bottom 1s .5s;
}

summary {
    cursor: pointer;
    background-color: #dadada;
    border: 1px solid #bcbcbc;
    border-radius: 3px;
    color: #6c6c6c;
    padding: 3px 10px 0;
    width: 175px;
}

/***** プロファイル用 *****/
/* プロファイルアイコンの角を丸める */
.pf_img {
    border-radius: 10px;
}
/* リンクページ用バナー */
#my_pf ul {
    list-style-type: none;
    display: inline-block;
    margin: 5px;
    padding: 0; 
}
#my_pf li {
    display: inline-block;
    font-size: 26px;
    margin: 0 10px;
}
.fa-twitter:hover {
    color: #629eec;
}
.fa-flickr:hover {
    color: #dc397f;
}
.fa-tumblr:hover {
    color: #0000b2;
}
.fa-instagram:hover {
    color: #404040;
}
.fa-pinterest-p:hover {
    color: #c40026;
}
.fa-amazon:hover {
    color: #e79e34;
}
.icon-feedly-logo:hover {
    color: #68b059;
}
.fa-rss:hover {
    color: #ec9800;
}

/***** リード時間 *****/
.cd-time {
    background: linear-gradient(transparent 60%, #d8d8d8 60%);
    font-weight: 700;
}

/* パンくずリスト */
.breadcrumb {
    margin-top: 10px;
    font-family: 'Raleway', sans-serif;
}

/* 本文記事タイトルフォント */
h1.entry-title {
    font-family: "M PLUS Rounded 1c";
}

/***** カテゴリ *****/
/* カテゴリタイトルをウェブフォント化 */
#archive-title {
    font-family: 'Raleway', sans-serif;
}

/* カテゴリラベルカラーの変更 */
/* uncategorized */
.cat-label-1 {
    background-color: rgba(51,51,51,.7);
}
/* gadget */
.cat-label-7 {
    background-color: rgba(0,160,220,.7);
}
/* android */
.cat-label-9 {
    background-color: rgba(48,170,220,.7);
}
/* camera */
.cat-label-8 {
    background-color: rgba(107,188,220,.7);
}
/* life */
.cat-label-10 {
    background-color: rgba(77,166,25,.7);
}
/* tabaco&drink */
.cat-label-11 {
    background-color: rgba(102,210,33,.7);
}
/* pc */
.cat-label-4 {
    background-color: rgba(220,96,0,.7);
}
/* windows */
.cat-label-5 {
    background-color: rgba(220,122,40,.7);
}
/* wordpress */
.cat-label-63 {
    background-color: rgba(230,147,76,.7);
}
/* photography*/
.cat-label-12 {
    background-color: rgba(220,0,0,.7);
}

/* カスタム ブログページタイトル用 */
.archive-title_ct {
    background-color: #eee;
    padding: 3px 10px;
    border-radius: 5px;
    font-family: 'Raleway', sans-serif;
}

/***** 拡張クラスを追加するスタイルシート *****/
/* 文字色やマーカー色など */
.red {
    color: #c40026;
}
.orange {
    color: #ed8f4e;
}
.blue {
    color: #44a8d6;
}
.marker-blue {
    background-color: #b5e8ff;
}
.marker-under-blue {
    background: linear-gradient(transparent 60%, #b5e8ff 60%);
}
.marker-under-gray {
    background: linear-gradient(transparent 60%, #d8d8d8 60%);
    font-weight: 700;
}
.info-box {
    background-color: #d6edfc;
    border-color: #d6edfc;
}

/* バッジのスタイル */
.badge, .sankou, .sanko, .reffer, .ref {
    color: #555;
    background-color: #b5e8ff;
    padding: 2px 6px 1px;
    border-radius: 3px;
    font-size: 12px;
    letter-spacing: 0.07em;
    margin-right: 6px;
}

/* ブログカード拡張 */
.blogcard-type .blogcard::before {
    background-color: #7c7c7c;
    padding: 3px .6em 2px;
}

/* ボックスカラー */
.blank-box.bb-blue {
    border-color: #b0cff8;
    border-radius: 8px;
}

/* マージン */
.blank-box {
    margin: 1em 0.3em;
}

/* タグ付き */
.blank-box.bb-tab {
    margin-left: 2.5em;
    width: 90%;
    border-radius: 0 8px 8px 8px;
}

.bb-related::before {
    content: "  関連記事";
}

/***** cocoon amazon affi *****/
.product-item-box {
    width: 100%;
    margin: 1em auto;
    border: 5px double #ddd;
}

.product-item-content {
    padding-left: 35px;
    line-height: 150%;
}

.item-price {
    font-size: 15px;
    font-weight: 700;
}

/* amazon */
.shoplinkamazon a {
    color: #f79901;
    background: #fcfcfc;
    border: 1px solid #f79901;
}

.shoplinkamazon a:hover {
    color: #fcfcfc;
    background: #de8b04;
}

/* rakuten */
.shoplinkrakuten a {
    color: #ec3e3e;
    background: #fcfcfc;
    border: 1px solid #ec3e3e;
}

.shoplinkrakuten a:hover {
    color: #fcfcfc;
    background: #d63535;
}

/* その他 */
.shoplinkbtn1 a, .shoplinkbtn2 a {
    color: #999;
    background: #fcfcfc;
    border: 1px solid;
}

.shoplinkbtn1 a:hover, .shoplinkbtn2 a:hover {
    color: #fcfcfc;
    background: #a0a0a0;
}

/***** インデックス *****/
/* インデックスのカテゴリフォント */
.cat-label {
    font-family: 'Raleway', sans-serif;
}

/* インデックスタイトルフォントサイズ */
.entry h2 a {
    color:#444;
    font-size:22px;
    text-decoration:none;
    font-weight:bold;
    font-family: "M PLUS Rounded 1c";
}

/***** タグ *****/
/* タグクラウド */
.tagcloud {
    font-family: 'Montserrat', sans-serif;
}
.tagcloud a {
    background-color: #f3f4f5;
    border: 1px solid #b3b4b5;
}
.tagcloud a:hover {
    background: #eff9ff;
    color: #44a8d6 !important;
}

/* 記事部分のタグリンク */
a.tag-link:hover {
    background: #f2fcff;
    color: #44a8d6 !important;
}

/***** cocoon 目次スタイル *****/
.toc {
    border-left: 5px double #cccfd2;
    border-right: 5px double #cccfd2;
    border-top: none!important;
    border-bottom: none!important;
    margin: 0 35px 10px;
}
.toc a {
    color: #666;
}

.toc-title {
    background-color: #f3f4f5;
    font-size: 20px;
    font-family: "M PLUS Rounded 1c";
}

.toc-content {
    font-size: 16px;
    font-family: "M PLUS Rounded 1c";
}

.toc.tnt-number-detail ol {
    font-weight: 700;
}

span[id^="toc"] {
    padding-top: 1.5em;
}

/* 目次ウィジェット */
.nwa .toc {
    border: 0;
    padding: 0 5px;
    margin: 1.2em;
    width: 300px;
    border-left: 5px double #cccfd2;
    border-right: 5px double #cccfd2;
}

/* リストのカテゴリ表示 */
.hover-card .category {
    text-decoration: none;
}

/* 関連記事 */
h2.related-entry-heading {
    color: #6c6c6c;
    font-weight: bold;
    position: relative;
    margin-bottom: 15px;
    font-size: 150%;
    line-height: 1em;
    letter-spacing: 0.1em;
    font-family: 'Raleway', sans-serif;
}
h3.related-entry-card-title, h3.card-title, h3.e-card-title {
    color: #6f6f6f;
    font-family: "M PLUS Rounded 1c";
}

.related-entry-card .cat-label {
    position: absolute;
    top: 2px;
    left: 2px;
}

/* フォローボタン */
.sidebar .sns-follow-buttons a {
    color: #666;
    background-color: #fff;
    height: 40px;
    width: 40px;
}
.icon-twitter-logo:hover {
    color: #629eec;
}
.icon-flickr-logo:hover {
    color: #dc397f;
}
.icon-pinterest-logo:hover {
    color: #c40026;
}
.icon-amazon-logo:hover {
    color: #e79e34;
}
.icon-feedly-logo:hover {
    color: #68b059;
}
.icon-rss-logo:hover {
    color: #ec9800;
}

/***** エントリーカード *****/
/* 新着・人気記事関連 */
.widget-entry-cards .widget-entry-card {
    border: 1px solid #d5d5d5;
}

/* タイトル */
.widget-entry-card-title {
    font-weight: bold;
    font-size: 14px;
    position: relative;
    padding: 3px;
    font-family: "M PLUS Rounded 1c";
}

/* 画像位置調整 */
img.attachment-thumb120,
img.new-entry-card-thumb-no-image,
img.widget-entry-card-thumb-no-image {
    margin-left: 3px;
}

/* 人気記事調整 */
.popular-entry-card-title {
    font-weight: bold;
    font-size: 14px;
    position: relative;
    padding: 2px;
    color: #6c6c6c;
}

.widget-entry-cards .a-wrap {
    margin-bottom: 10px;
    padding: 2px;
}

.post-date, .category, .post-update {
    font-family: 'Share Tech Mono', monospace;
}

/* ランク表示位置とサイズ調整 */
.widget-entry-cards.ranking-visible .card-thumb::before {
    left: 3px;
    padding: 4px 10px;
    border-radius: 5px;
    opacity: .8;
    background: #546276;
}

/* ランクカラー変更 */
.widget-entry-cards.ranking-visible
.no-1 .card-thumb::before {
    background: #bfd8f9;
    font-weight: 700;
}

.widget-entry-cards.ranking-visible
.no-2 .card-thumb::before {
    background: #9fbbe0;
    font-weight: 700;
}

.widget-entry-cards.ranking-visible
.no-3 .card-thumb::before {
    background: #7488a3;
    font-weight: 700;
}

/* ブログカードの調整 */
.blog-card{
    margin: 10px 20px;
}
.hover-card .blog-card-title {
    color: #414141;
}
.blog-card-excerpt {
    color: #6c6c6c;
}

/* SNSフォロータイトル */
.sns-follow-message {
    text-align: left;
}

/* cocoon純正シェアボタン */
.sns-share-message {
    margin: 10px 0 0 5px;
    text-align: left;
}
.sns-share-buttons a {
    border: 2px solid #bfbfbf;
    background-color: #fff;
    color: #6c6c6c;
}
.sns-share-buttons a:hover {
    color: #6c6c6c;
    background-color: #f2fcff;
}

/* 固定ページからボタンを削除 */
.page .sns-share {
    display: none;
}

/* ビデオコンテナ */
.video-container .video {
    margin: 30px 0 0 20px;
}

/***** ページ送り *****/
/* デフォルト タイプ */
.post-navi-default.post-navi-border a {
    border-top: 4px double #8ecdf0;
}
.post-navi-default.post-navi-border .next-post {
    border-bottom: 4px double #8ecdf0;
}
.prev-post-title, .next-post-title {
    color: #6c6c6c;
    font-weight: 700;
    font-family: "M PLUS Rounded 1c";
}
.pager-post-navi a.prev-post::before {
    margin-right: 10px;
}
.pager-post-navi a.next-post::before {
    margin-left: 10px;
}
    
/***** コメントフォーム *****/
/* タイトル */
h2#comments.comment-title {
    margin: 0 0 10px;
    font-family: 'Raleway', sans-serif;
}

/* H3の非表示 */
h3#reply-title.comment-reply-title {
    display: none;
}

/* 幅の調整 */
#respond.comment-respond {
    width: 640px;
}

/* name,emailの並列化 */
.comment-form-author {
    margin: 10px 0;
    float: left;
}
.comment-form-email {
    margin: 10px 0;
    float: right;
}
.comment-form-author, .comment-form-email {
    width: calc(50% - 25px);
    display: inline-block;
}
.comment-form-email+p {
    clear: both;
}

/* 入力欄パディング */
.comment-notes {
    margin: 10px 0 0 0;
}
input#author, input#email {
    height: 30px;
    padding: 5px;
}
input#siteguard_captcha {
    width: 150px;
    height: 30px;
    padding: 5px;
}
textarea#comment {
    width: 640px;
    min-height: 160px;
    padding: 5px;
}

/* チェックボックス */
input#wp-comment-cookies-consent {
    display: inline-block;
}

#comment-title {
    font-family: 'Raleway', sans-serif;
}
input[type='submit'], #bbp_reply_submit,
.bp-login-widget-register-link a {
    width: 175px;
}
a.comment-reply-link:hover {
    background-color: #dbf4ff;
    color: #4489ff;
}
.comment-btn {
    background-color: #f9f9f9;
    border: 1px solid #cccdce;
    color: #333435;
    font-size: 1.25em;
    text-decoration: none;
    width: 100%;
    text-align: center;
    padding: 12px 0;
    display: block;
}
.comment-btn:hover {
    background-color: #f2fcff;
    transition: all 0.5s ease;
    color: #333435;
}
.comment-btn {
    margin: 20px 0 0;
}

/* ページャー */
div.pager-links, .page-numbers {
    height: 30px;
    line-height: 30px;
}

/* akismet */
.akismet_comment_form_privacy_notice {
    font-size: 12px;
}
/***** フッター調整 *****/
.footer {
    background-color: #f3f4f5;
    padding: 0;
}
.footer-bottom {
    margin: 0;
}

/* フッター用3カラム調整 */
.ft-column-wrap.column-3 {
    display: flex;
    position: relative;
}

.ft-column-wrap > div {
    width: 100%;
    padding: 1em 1.2%;
}

/* フッター パディング */
#pc_text-3.widget-footer-left {
    margin: 0 0 10px 0;
}

.footer-left, .footer-center, footer-right {
    padding: 5px 16px;
}

/* フッター用プロファイル */
.my-footer-pf {
    font-size: 20px;
}

.widget-footer-left-title,
.widget-footer-center-title,
.widget-footer-right-title {
    font-family: 'Raleway', sans-serif;
}

.mfpf {
    float: left;
}

/* アーカイブ用 */
#archives-dropdown-2 {
    color: #6c6c6c;
}

div.column-left, div.column-center,
div.column-right {
    padding: 15px 10px;
}

.myarchive {
    height: 170px;
    overflow: auto;
}

div.column-right::-webkit-scrollbar {
　　width: 8px;
}

div.column-right::-webkit-scrollbar-track {
　　background: transparent;
　　border: none;
}

div.column-right::-webkit-scrollbar-thumb {
　　background: rgba(100,100,100,0.3);
　　border-radius: 10px;
　　box-shadow: inset 0 0 4px rgba(255,255,255,0.8);
}

#ArchivesArea dt, #ArchivesArea dd {
    float: left;
}

#ArchivesArea dt {
    clear: both;
    font-weight: 700;
}

#ArchivesArea dd {
    margin-left: 8px;
}

#ArchivesArea dd a {
    color: #44a8d6;
}

#ArchivesArea dd a:hover {
    text-decoration: underline;
}

/* 回り込み解除 */
.clear {
    clear: both;
}

/* ad link */
.my_ad_banner {
    display: block;
    padding: 0 5%;
}
.responsive-pc {
    max-width: 336px;
    margin-left: auto;
    margin-right: auto;
}

/* ad link 2 */
.my_ad_banner2 {
    text-align: center;
}

/* リンクページ用バナー */
#linkbpage-banner ul {
    list-style-type: none;
    text-align: center;
}
#linkpage-banner ul li {
    display: inline-block;
    margin: 0 10px;
}

/* ウィジェット */
aside#custom_html-4 {
    margin-bottom: 15px !important;
}

/* 外部ブログカード サムネイル */
img.external-blogcard-thumb-image {
    max-width: 128px;
}

/***** plugins *****/
/* google search */
div.gsc-control-cse.gsc-control-cse-ja {
    padding: 0 10px;
}
div.gsc-control-searchbox-only,
.gsc-control-searchbox-only-ja {
    margin: 10px 0 0;
}

style.css レスポンシブ部分

レスポンシブでのモバイル表示用コード

ソースコードを開く

/* 1240px以下 */
@media screen and (max-width: 1240px){
    .mobile-menu-buttons {
        opacity: 0.9;
        width: 100%;
        font-family: 'Raleway', sans-serif;
    }
    .mobile-menu-buttons .menu-caption {
        font-family: 'Raleway', sans-serif;
    }
    .sidebar .sns-follow-buttons a {
        width: 45px;
    }
    /***** cocoon 目次スタイル *****/
    span[id^="toc"] {
        padding-top: 1.7em;
    }
}

/* 1030px以下 */
@media screen and (max-width: 1030px){
    .mobile-menu-buttons {
        opacity: 0.9;
        width: 100%;
        font-family: 'Raleway', sans-serif;
    }
    .mobile-menu-buttons .menu-caption {
        font-family: 'Raleway', sans-serif;
    }
    .sidebar .sns-follow-buttons a {
        width: 45px;
    }
    /***** cocoon 目次スタイル *****/
    span[id^="toc"] {
        padding-top: 1.7em;
    }
}

/* 768px以下 */
@media screen and (max-width: 768px){
    .mobile-menu-buttons {
        opacity: 0.9;
        width: 100%;
        font-family: 'Raleway', sans-serif;
    }
    .blogcard-snipet {
        font-size: 12px;
    }
    .mobile-menu-buttons .menu-caption {
        font-family: 'Raleway', sans-serif;
    }
    .sidebar .sns-follow-buttons a {
        width: 45px;
    }
    div.gsc-control-searchbox-only,
    .gsc-control-searchbox-only-ja {
        margin: 50px 0 0;
    }
    /* カスタムフッター非表示 */
    .ft-column-wrap.column-3 {
        display: none;
    }
    /***** cocoon 目次スタイル *****/
    .toc {
        margin: 0 auto 15px;
    }
    span[id^="toc"] {
        padding-top: 1.7em;
    }
}

/* 480px以下 */
@media screen and (max-width: 480px){
    .mobile-menu-buttons {
        opacity: 0.9;
        width: 100%;
        font-family: 'Raleway', sans-serif;
    }
    .blogcard-snipet {
        font-size: 12px;
    }
    .mobile-menu-buttons .menu-caption {
        font-family: 'Raleway', sans-serif;
    }
    .sidebar .sns-follow-buttons a {
        width: 45px;
    }
    div.gsc-control-searchbox-only,
    .gsc-control-searchbox-only-ja {
        margin: 50px 0 0;
    }
    /* 入力欄パディング */
    input#author, input#email,
    input#siteguard_captcha {
        height: 30px;
        padding: 5px;
    }
    textarea#comment {
        width: 100%;
        min-height: 200px;
        padding: 5px;
    }
    #respond.comment-respond {
    width: 100%;
    }
    
    /* ビデオコンテナ */
    .video-container .video {
        margin-top: 30px;
    }
    
    /* cocoon amazon affi */
    .item-price {
        font-size: 14px;
    }
    
    .product-item-content {
        text-align: left!important;
    }
    
    .product-item-snippet {
        padding-left: 25%;
        text-align: left;
    }
    
    /* カスタムフッター非表示 */
    .ft-column-wrap.column-3 {
        display: none;
    }
    /***** cocoon 目次スタイル *****/
    .toc {
        margin: 0 auto 15px;
    }
    span[id^="toc"] {
        padding-top: 1.7em;
    }
}

480px以下の部分だけでも良さそうではあるけど、一応全部へ追記してあります

おわり

大体こんな所かな？まだここをこうしたい、という部分はありますけどね
備忘録というなの記事でグーグル先生に聞けば一杯出てくるようなカスタマイズですが
誰かの参考になれば幸いです

最後にカスタマイズ記事をポストしてくれている先人さん達に感謝！

[share]

phpファイル群

functions.php

コメント欄関係

プレビューボタン

amp用アコーディオン

tags

breadcrumbs.php

head-insert.php

footer.php

footer-meta.php

sns-follow-buttons.php

mobile-menu-buttons.php

cssファイル群

amp.css

style.css

style.css レスポンシブ部分

おわり