🏠ホーム / ブログの設定 /

jetthemの改造コード

2023/10/21

ブログの設定

X f B! R L

サイトタイトル挿入

おそらく、h1 タグ内で強制的な改行やインライン要素の扱いが、ブログのテーマやHTML仕様の制約によって問題を引き起こしている可能性があります。その場合、改行したい場合は、h1 タグを使いつつも、改行は別の方法で対応する必要があります。

そこでh1 タグを2回使って改行風に表示する方法を提案します。これにより、二行目に見えるけれどSEO的には問題が発生しない構成にします。</header>の下に置く。

<div class='header-title'>

  <h1 class='main-title'>

    <a class='title-link' expr:href='data:blog.homepageUrl'><data:blog.title/></a>

  </h1>

  <p class='sub-title'>

    <a class='description-link' expr:href='data:blog.homepageUrl'>

      ここに入れたい文章を

    </a>

  </p>

</div>

cssは以下の通り

.header-title {

  background-color: var(--jt-header-bg);

  color: var(--jt-header-color);

  padding: 20px 5px 23px 5px;

  text-align: center;

  margin-top: 0;

}


.title-link, .description-link {

  text-decoration: none;

  color: inherit;

  display: inline-block; /* クリック範囲を文字の幅に絞る */

  width: auto;

}


.main-title {

  margin: 0;

  line-height: 1.2;

}


.sub-title {

  display: block;

  font-size: 16px;

  margin: 0;

  font-weight: bold;

  min-height: 1.2em; /* 文字が入る前のガタつき防止 */

}

/* TYPOGRAPY */　←を検索して以下に全て書き換えます。

.h1,h1{font-size:$(posts.title.size)}
.h2,h2{font-size:$(title.h2)}
.h3,h3{font-size:$(title.h3)}
.h4,h4{font-size:$(title.h4)}
.h5,h5{font-size:$(title.h5)}
.h6,h6{font-size:$(title.h6)}

記事内ラインハイト

#post-body {

  line-height: 1.8;

}

記事一覧背景色

.jt-btn-light {

color: var(--bs-body-color);

/*無効化 background-color: var(--jt-bg-light);*/

border-color: var(--jt-bg-light);

}


.jt-bg-light {

/*無効化　background-color: var(--jt-bg-light)*/


}

.bg-archive {

/*　無効化 background-color: var(--jt-archive-bg)*/

}

をいじるのかやり方忘れた。。。

画像の改造

#single-content p { margin-top: 1rem; margin-bottom: 1rem; }を追加。

.separator a,

.tr-caption-container a {

margin: 0 ;

padding: 0 ;

display: inline-block;/*←追加*/

}

.feature-image,

.separator,

.tr-caption-container {

/* 無効margin-bottom: 1rem;*/

}

@media (max-width:479px ) {


.separator a {float:none!important;　


margin-right:0 !important;　


margin-left:0 !important;}}

スニペットスマホで非表示

.item-snippet { font-size: 80%; }

@media (max-width: 959px) {

    .item-snippet {

        display: none;

    }

}

アイキャッチ上のSNSボタン中央寄せ

.social-share .d-flex {

    display: flex !important; /* ここでは既存のflexを強制的に適用 */

    justify-content: center !important; /* シェアボタンを中央揃え */

    text-align: center; /* テキストの中央揃え */

}


.social-share .d-flex > * {

    display: inline-block !important; /* 子要素はインラインブロックで中央揃えを維持 */

}

目次の位置変更

目次の位置を最初の画像下に 最初の画像の下に目次を表示する場合下記のコードを変更します。 

<Variable name="positionTOC" description="Position TOC" type="string" value="noscript"/> 

value="noscript"をvalue=".separator"へ ↓

<Variable name="positionTOC" description="Position TOC" type="string" value=".separator"/> 

「.separator」というのは普通に画像を挿入すると入るので記事トップでなくても最初の画像の下に目次が出ます。 また、HTMLで編集中に最初の画像の「.separator」を消してしまうと、次の画像の下に入る事になるので注意です。

#post-body .jt-bg-light を中央寄せにするには、margin と display プロパティを使います。以下のように margin: 0 auto; を使って要素を中央寄せできます。


CSSコード（中央寄せ）

css

コードをコピーする

#post-body .jt-bg-light {

    border: 2px solid #000000; /* 黒い2pxの実線で囲む */

    padding: 10px; /* 内容と線の間にスペースを作る */

    border-radius: 5px; /* 角を少し丸める */

    margin: 1em auto 0em auto; /* 左右の余白を自動にして中央寄せ */

    display: block !important; /* ブロックレベルにする（中央寄せに必要） */

    max-width: 80%; /* コンテンツ幅を調整して、中央に見やすく配置 */

}

説明

margin: 0 auto; は、左右のマージンを自動で均等にして、要素を中央に配置します。

display: block; は、要素をブロックレベルにし、中央寄せが機能するようにします。デフォルトでインライン要素だと margin: auto; が効かないためです。

max-width: 80%; は、要素の最大幅を制限し、広がりすぎないようにしています。これにより、コンテンツが中央に見やすく配置されます。調整が必要であれば、80% を変えてください。

これで、#post-body 内の .jt-bg-light 要素が中央寄せされます。

table of contentだけ中央寄せは以下。

/* toc-toggler に対して中央寄せを適用 */

.toc-toggler {

    display: block !important; /* flexboxを強制適用 */

    justify-content: center !important; /* 水平方向の中央揃え */

    align-items: center; /* 垂直方向の中央揃え */

    width: 100%; /* フレックス内で幅を最大にして中央に揃えやすくする */

    text-align: center; /* 子要素のテキストを中央寄せ */

}


/* Table of content のテキスト部分だけ中央寄せ */

.toc-toggler span {

    display: inline-block; /* span 要素をインラインブロックにする */

    text-align: center; /* テキストを中央寄せ */

}

とここまで苦労して修正しましたが、このテーマの目次は実はそもそもリンクがうまく機能してなくて作者の修正待ち状態から進展がありません。 <Variable name="autoTOC" description="Table of content" type="string" value="ture"/> これのtrueをfalseにして非表示にして前から使ってるものに入れ替えてあげましょう。

記事内見出しカスタマイズ

 .entry-text h2 {

    font-weight: bold;

padding: .8em .5em; margin-bottom: 1em; margin-top: 2em; border-radius: 2px; line-height: 1.2;    background: var(--jt-header-bg) !important;

    color: var(--jt-header-color)!important;

}

.entry-text h3{font-weight: bold; margin-bottom: 1em; margin-top: 2em; padding: .5em 0; line-height: 1.2; border-bottom: solid 2px var(--jt-header-bg)!important;}

外部リンクアイコン

<script>

//<![CDATA[

document.addEventListener("DOMContentLoaded", function() {

  const contentLinks = document.querySelectorAll('#post-body a:not(.separator a), #page-content a:not(.separator a)');

  const commentLinks = document.querySelectorAll('.comment-content a');

  const currentDomain = location.hostname;


  function addExternalLinkIcon(links) {

    links.forEach(function(link) {

      const href = link.href;

      try {

        const url = new URL(href, location.origin);

        

        // ここが赤くならないように保護されています

        if (url.hostname !== currentDomain && url.protocol.startsWith('http')) {

          link.target = "_blank";

          link.rel = "noopener";

          

          link.insertAdjacentHTML('beforeend', `

            <svg fill='none' height='16' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' style='margin-left: 2px; vertical-align: middle;' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'>

              <path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/>

              <polyline points='15 3 21 3 21 9'/>

              <line x1='10' x2='21' y1='14' y2='3'/>

            </svg>

          `);

        }

      } catch (e) {}

    });

  }


  addExternalLinkIcon(contentLinks);

  addExternalLinkIcon(commentLinks);

});

//]]>

</script>

コメント欄の文字数 

以下の手順で、XMLファイルを　２箇所　修正します！

 (1)　data:commentLevel1.body　のキーワードで検索 data:commentLevel1.body snippet { links: false } のコードを　以下コードで修正（実質、部分削除） data:commentLevel1.body

 (2)　data:commentLevel2.body 　のキーワードで検索 data:commentLevel2.body snippet { links: false } のコードを　以下コードで修正（実質、部分削除） data:commentLevel2.body

記事一覧でのカテゴリカスタマイズ

.item-content .item-tag a {

    margin-top: 0px;

    margin-left: 0px;

    padding: .3em .4em;

    border-radius: 10px;

    background: var(--jt-btn-primary);

    color: var(--jt-header-color)!important;

    font-size: 80%;

    text-decoration: none; /* リンクの下線を消す */

}

サイドバーカテゴリ

.widget-content.categories ul.list li a {

    margin-top: 0px;

    margin-left: 0px;

    padding: .3em .4em;

    border-radius: 10px;

    background: var(--jt-btn-primary);

    color: var(--jt-header-color) !important;

       display:inline-block;

  line-height:1.2;

}

.col-6{width:auto;}

サイドバー人気記事最新記事の日付ラベル消し

.item-content.col .item-tag,  /* タグ部分を非表示 */

.item-content.col .item-meta { /* 日付部分を非表示 */

    display: none !important; /* 強制的に非表示 */

}

関連記事数変更

記事の下にサムネイル形式で表示される関連記事の数は変更することができます。 デフォルトでは４つですが、カテゴリー内の記事も増えてきたので６つに増やしました。 【修正方法】 テンプレートで以下を検索し、数字を変更します。 

data-shuffle='4' data-title='Related Post' 

また、PC 表示では関連記事の横並び数を３つ、スマホでは２つに変更しました。 デフォルトだと PC が２つ、スマホが１つですが、表示数が多いと縦に間延びしちゃうかなと。 【修正方法】 テンプレートで以下を検索します。 

<div class='widget-title position-relative  mb-3 text-uppercase fw-light'><span>"+t.title+"</span></div>":"")+"<div class='row row-cols-sm-2'>" 

row-cols-sm-2の部分をrow-cols-2 row-cols-md-3に置き換えます。

<div class='widget-title position-relative  mb-3 text-uppercase fw-light'><span>"+t.title+"</span></div>":"")+"<div class='row row-cols-2 row-cols-md-3'>" こんな感じになります。余白、文字サイズはちょうど良くなるように調整しました。

上に戻るボタン装飾

#back-to-top .jt-btn-light {

    background-color: var(--jt-btn-primary); 

    color: var(--jt-header-color); 

    opacity: .5;

}

#back-to-top .jt-icon {width:3em;

height:3em;}

上に戻るボタンと下に戻るボタン全て入れ替え。

<div class='position-fixed d-none' id='back-to-top' style='right:20px;bottom:20px; display: flex; flex-direction: column; gap: 8px;'>

  <!-- 上に戻るボタン -->

  <a aria-label='Back to Top' class='btn btn-sm jt-btn-light rounded-circle jt-icon-center' href='#back-to-top' onclick='window.scroll({top:0,left:0,behavior:&quot;smooth&quot;});'>

    <svg aria-hidden='true' class='jt-icon' height='1em' width='1em'>

      <use xlink:href='#i-arrow-t'/>

    </svg>

  </a>

  

  <!-- 下に戻るボタン -->

  <a aria-label='Back to Bottom' class='btn btn-sm jt-btn-light rounded-circle jt-icon-center' href='#back-to-bottom' onclick='window.scroll({top:document.body.scrollHeight,left:0,behavior:&quot;smooth&quot;});'>

    <svg aria-hidden='true' class='jt-icon' height='1em' width='1em'>

      <use xlink:href='#i-arrow-b'/>

    </svg>

  </a>

</div>

月別アーカイブだけでページャー消す

  以下を</body>前に配置しましょう。

<script>

    document.addEventListener("DOMContentLoaded", function() {


        // URLが「/年」、「/年/」または「/年/月/」の形式に一致する場合にページャーを非表示

        var isArchive = window.location.pathname.match(/\/\d{4}(\/\d{2})?\/?$/);


        if (isArchive) {

            var paginationElement = document.querySelector(".justify-content-evenly");

            if (paginationElement) {

                paginationElement.style.setProperty("display", "none", "important");

            }

        }

    });

</script>

ラベルが半角数字だと新着記事が出ない

プロフィール

Jと申します。皆さんご自身で参考程度にされてください。 googleに2026年8月29日の時点でindexにしましたが、検索エンジンに暫くヒットはしないかと思います。コメントを各自個人情報に留意されながら書き込みください。グーグルアカウントにログインした状態で書きこむと自分で後々削除できるので推奨します。そうでない場合に削除したいと感じられた際に言って下されば仰せの通りに致します👍

最新コメント

読み込み中...

10記事毎ログ

読み込み中...

QooQ