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

ブロガーqooqカスタマイズまとめ

2021/04/08

ブログの設定

X f B! R L

ブロガー qooqを使っていますが、これまでカスタマイズしてブログの外観を変えてきました。プログラマーたちが色々と無償でコードを共有してくださっています。ブロガー界隈の民度の高さに驚愕して、すっかりブロガーの魅力の虜になりました。

ラベルのリンク範囲を広げる

投稿数にはリンクが効いていないのがデフォルトですがこれを修正します。またふじやんさんが教えてくださりました。

<data:label.count/>以下のタグを置き換えてください。2ヶ所ありますが、上の方がリストで下の方がクラウドです。

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
↓↓
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/> (<data:label.count/>)</a>


レイアウト編集にて「ラベルごとの投稿数を表示」はオフにしてください。

ふじやんさんいつもありがとうございます

次の投稿前の投稿のボタンのリンク範囲 

#blog-pager-newer-link,
  #blog-pager-older-link{
    /*削除 padding: 1em; */
    font-weight: bold;
    border-radius: 2em;
    background: $(brand.subcolor);
    color: $(brand.subfont);}
  
  /* 追記 */
  #blog-pager-newer-link a ,
  #blog-pager-older-link a {
   padding: 1em;
   display: block;
  }

サムネイルの大きさ変更 

やりたいこと
記事一覧の画像サイズを大きくする
画像が粗くならないようにする
PC で見ると、記事一覧の画像がちょっと小さく感じたんですよね。
また、PC・スマホで見たとき、画像が少し粗く表示されているように見えたため、修正を加えることにしました。

方法
ソースコードから以下を検索します。

<img class='list-item-img' expr:src='data:post.thumbnailUrl'/>
以下のように置き換えます。

<img class='list-item-img' expr:src='resizeImage(data:post.thumbnailUrl, 240,  &quot;1:1&quot;)'/>
* 240 は画像サイズ（変更可）
* 1:1 は画像の比率（変更可）

CSS を調整します。以下は当サイトの例です。

.list-item-img-box{
flex-shrink: 0;
flex-basis: 110px;
}
.list-item-img{
display: block;
border-radius: 0%;
width: 100px;
height: 100px;
object-fit: cover;
　   aspect-ratio: 1 / 1; /* これを追加 */
}
 
説明
記事一覧で使用されているサムネイル画像（data:post.thumbnailUrl）は、Blogger 側の仕様で 72px × 72px の正方形にトリミングされるようです。そのため画像サイズを CSS で単純に変更するだけだと、72px の画像が拡大表示されるだけになってしまいます。

そこで、サムネイル画像のURLを次の要領で指定します。

画像URL：resizeImage(URL, サイズ, 比率)
（例）
<img expr:src='resizeImage(data:post.thumbnailUrl, 1600)'/>

URL：変更したい画像の元URL
サイズ：変更したいサイズ
比率：指定したい比率（オプション。指定しなくても可）
あとは、記事一覧の画像が class="list-item-img" で記載されていることを確認し、対応する HTML、CSS を書き換えて完了です。

他にも data:post.thumbnailUrl で指定されている画像のサイズを変更したい場合は、同様の方法でできるのではと思います。


スマホ表示のときのカスタマイズ

@media ( max-width : 768px ) {
.list-item-title{
position: absolute;
top:.5em;
left:1em;
right:1em;

}
.snippet-body{
margin-top: 2.5em
}
}

これを貼り付けます。ふじやんさんが教えて下さいました。いつも大変ありがとうございます
スマホ表示でもはやスニペットを非表示の場合は、@media ( max-width : 600px ) { .snippet-body{ display: none; } } です。

私はスニペットはスマホでは消しておこうかなと思うてます

コメント吹き出しカスタマイズ

トップ画面にコメント件数を表示する手順
1.コメントのアイコンを表示するため Blogger のテンプレート編集画面にて <head>~</head> タグに以下の HTML コードを追加して下さい。

<head>
：
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"></link>
：
</head>
何を追加しているのか？

Font Awesome(Webアイコンフォント)を表示できるようにしています。Webアイコンフォントとはフォントとして使用できるアイコンのことです。

2.次に以下の HTML コードを検索して下さい。

<p class='list-item-date'><script type='text/javascript'>document.write(jsdate)</script></p>
3.検索したコードを以下のコードで書き換えます。

<p class='list-item-date'>
    <!-- 公開日のアイコン -->
    <i class="far fa-edit fa-fw"/>
    <!-- 公開日 -->
    <script type='text/javascript'>document.write(jsdate)</script>
    <!-- コメント件数(コメント投稿を許可している場合のみ表示) -->
    <b:if cond='data:post.allowComments'>
        <b:if cond='data:post.numComments == 0'>
            <i class="far fa-comment fa-fw"/>
            <data:post.numComments/>
        </b:if>
        <b:if cond='data:post.numComments > 0'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <i class="far fa-comment fa-fw"/>
                <data:post.numComments/>
            </a>
        </b:if>
    </b:if>
</p>
※記事の公開日のアイコンが不要な場合は、<i class="far fa-edit fa-fw"/>は消してください。

4.テンプレートを保存します。

人気投稿のカスタマイズ

タイトル表示を４行固定
表示されているサムネイルの高さが72pxなので、この高さにタイトルを収めます。
変更はcssのみになります。
ガジェットの設定でスニペットの表示は無しにしています。
サイドバーに表示すると情報量が多くなって逆に見にくいかと。

cssの追加
コード内の.popular-posts aを検索して、以下の青字を追加します。
.popular-posts a{
　color: $(font.color) !important;
   display: block;
   line-height:18px;
   height: 72px !important;
   overflow: hidden !important;
}

要素をブロックにします。
fontの高さをline-height:18pxとして、blockの高さheight:72px内に4行表示させます。
72pxに入りきらないタイトルはoverflow: hiddenとして未表示にしています。

自分カスタマイズは、display:flex; で   height: 72px !important;とoverflow: hidden !important;は削除しておきました。これで万が一タイトルが60文字とかになっても（ならへんけどな）タイトルがフロートレフトしてる画像の下にまわることなく、そのまま下にタイトル文字が表示されます。


.PopularPosts li {
  border-bottom :solid 1px $(other.border);
}

.PopularPosts .item-thumbnail{
  margin-bottom: 0;
}

@media (max-width: 279px) {.popular-posts a { color: #000000 !important; clear: left; }}
これをサイドバーあたりに貼り付けます。

以下はレイアウトから削除すると毎回画像から別窓が開くので、そうならない処置をするコードで</body>の前に貼り付けておいてください。

<script> document.querySelectorAll('.PopularPosts a').forEach(a => a.removeAttribute('target')); </script>

引用ボックスカスタマイズ

#single-content blockquote {
    position: relative;
    padding: 40px 15px 40px 40px;
    box-sizing: border-box;
    background: #efefef;
    color: #555;}

#single-content blockquote:before{
content: '\201D';
    display: inline-block;
    position: absolute;
    top: 20px;
    left: 15px;
    color: #cfcfcf;
    font-size: 40px;
    line-height: 1;
    font-weight: 900;}

メニューバーをタイトル下に

変更方法
カスタマイズメニュー＞テーマ→HTML編集
HTMLが書かれている枠の中で、キーボードの「Ctrl」+「F」で検索ボックスを出し
＜div id='header'＞と検索しましょう

600行あたりに1件ヒットすると思います
＜div id='header'＞から下にある</div>までを切り取ります

そうしましたら、少し上の行に＜div id='navigation'＞という文字があると思います
もし見つけられない場合は先ほどの検索ボックスで＜div id='navigation'＞と入力すると1件だけヒットすると思います

見つけたら＜div id='navigation'＞の上の行に先ほど切り取ったコードを張り付けましょう
これでナビゲーションがタイトルの下に移動しているはずです

確認してみると変わっていました
大成功です

スマホの際に隙間を減らす


@media ( max-width : 480px ) {

#single{

padding: 1em;

}

#single-header-title,#single-content h2,#single-content h3 {
    font-size: 1.9rem;
}

}

シングルとは記事内のこと、そしてタイトルはそれぞれスマホの際には大きすぎても厄介なので、小さく設定するのがデフォルトです。

メニューバーに検索バーを埋め込み

<div id='navigation-content'>を検索します、その下の方にある <div class='widget-content'> と <ul> の間に以下のコードを挿入します。

<!--検索ボックス--><form action='/search' id='search-box-form' method='get'>
  <input aria-label='ブログ内検索' expr:value='data:view.isSearch ? data:view.search.query.escaped : &quot;&quot;' id='search-box-text' name='q' placeholder='検索...' type='text'/>
  <button id='search-box-submit' title='検索' type='submit'>
    <svg fill='none' height='18' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' viewBox='0 0 24 24' width='18'>
      <circle cx='11' cy='11' r='8'/>
      <line x1='21' x2='16.65' y1='21' y2='16.65'/>
    </svg>
  </button>
</form>

cssは以下のとおりです。

  #search-box-form {
    float: right;
    width: 200px;
    background: #fff;
    margin-top: 2px;
  }
  #search-box-form::placeholder {
    color: #aaa;
  }
  #search-box-text {
    width: 87%;
    border: none;
    outline: none;
    font-size: 1em;
    padding-left: 3px;
  }
  #search-box-submit {
    color: #888;
    font-size: 1em;
    background: transparent;
    position: absolute;
    right: 0;
    margin-top: 1px;
    border: none;
    outline: 0;
  }
  #search-box-submit:hover {
    cursor: pointer;
  }

月別アーカイブ

li.archivedate {
    float: left;
    padding: 0.25em 0.25em 0.25em 0 !important;
}

fontawesomeとCDN更新

<link href='https://use.fontawesome.com/releases/v6.5.1/css/all.css' rel='stylesheet' type='text/css'/>は付けなくとも構わない。

cdnと検索していかに書き換える↓

<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/themes/prism-tomorrow.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/prism.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/components/prism-javascript.min.js'></script>

プロフィール

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

最新コメント

読み込み中...

10記事毎ログ

読み込み中...

QooQ