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

wordpress
この記事は 約40分 で読めます。

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

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

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

Sponsored Link

phpファイル群

functions.php

コメント欄部分の調整コード
以下のコードで出来る事はウェブサイト欄の削除とコメント入力欄を下に持っていくこと

ソースコードを開く
// コメントからウェブサイトを削除
function my_comment_form_remove($arg) {
    $arg['url'] = '';
    return $arg;
}
add_filter('comment_form_default_fields', 'my_comment_form_remove');

// コメント入力欄の表示順を変更する
function wp34731_move_comment_field_to_bottom( $fields ) {
  $comment_field = $fields['comment'];
  unset( $fields['comment'] );
  $fields['comment'] = $comment_field;
  
  return $fields;
}
add_filter( 'comment_form_fields', 'wp34731_move_comment_field_to_bottom' );

ここはこちらのサイトのコードを使わせていただきました

footer.php

PageSpeed Insights

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

</html>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

参考にした記事にも書いてあったのだけど、html表記?の外に出しちゃってもいいの?と思いましたw
普通に読み込まれますし、こうする事で改善の部分に出てこなくなりました

breadcrumbs.php

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

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

footer-meta.php

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

- <a href="<?php echo $url; ?>" class="author-link">
+ <a href="https://twitter.com/twitterID" target="_blank" rel="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]

タイトルとURLをコピーしました