Swimming
Walking
J-POP
Blog Customize - menu
home  /  Blog Customize  |  QooQ  | 

Blogger テンプレート QooQ カスタマイズ 06

2020-07-09

Blog Customize QooQ

QooQ Customize

ヘッダー下にアイキャッチ画像付きリンクを表示


これはとても見栄えが良くなります。
重要なアップデートの連絡にも使えそうです。
mocaさんの記事の「ヘッダーのカスタマイズ」のなかの「3 * ヘッダー下にアイキャッチ画像付きリンクを表示」 を参考にしました。

Blogger「QooQ」＊ヘッダーのカスタマイズ

Bloggerの日本語テンプレート「QooQ」のヘッダー（ブログタイトル部分）をカスタマイズしてみました。 標準のままでもいいですが、自分好みにカスタマイズすると、よりブログに愛着がわきますよね。

www.moca-memo.com


アイキャッチ画像を用意する


400×277pxのサイズでアイキャッチ画像作成するといいです。 アイキャッチ画像には必ず文字をつけてください。
Canva（キャンバ）は私には向いていませんでした。 自分のフォトエディターで編集しました。

HTML編集


どうせHTML編集をするので「CSSを追加する」のではなくてHTML編集をしました。

HTML編集でCSS記述部「全体設定」の上にでも次のコードを挿入 


/****************************************
          アイキャッチ画像付きリンク
*****************************************/
 /*=== article window ===*/
.article-area{
    box-shadow: 0px  2px 2px 0px #beb1b3; /* 追記, 影をつける */
    background-color:white;/*背景色*/
}
.article-container{
    width: 90%;/*画像表示の幅*/
    display: flex;
    box-sizing: border-box;
    margin: 0px auto;
    padding:0px;
    text-align:center;}
.article-box{
    box-sizing:border-box;
    border:2px solid whitesmoke;/*画像の枠色*/
    width:25%;
    padding:0px;
    margin:30px 15px;/*画像周りの空白*/
    overflow:hidden;}
.article-img img{
    width:100%;
    display:block;
    object-fit:cover;
    transition-duration: 0.5s;/*ゆっくり戻る*/}
.article-img:hover img{/*マウスオーバーで拡大表示*/
    transform: scale(1.1);/*1.1倍に表示*/
    transition-duration: 0.5s;/*ゆっくり拡大*/}
/*=== smartphone ２列表示 ===*/
@media(max-width: 768px){
.article-container {
    width:100%;
    flex-wrap: wrap;/*折り返し表示（２列）*/
    justify-content:space-between;
    padding:8px;}
.article-box {
    width:45%;
    padding:0px;
    margin:8px;}
.article-img img{
    width:100%;
    padding:0;
    object-fit:cover;}}
.page-entry .article-area{display:none;}
/*=== end of article window ===*/

次にサーチ窓を開いて、<div expr:class=' の場所を探します。
そして、下のコードの"記事のURL"、"画像のURL"、"タイトルのテキスト"を変更して、
<div expr:class=' の直前にコピペします。 


<div class="article-area">

<div class="article-container">

<div class="article-box"><div class="article-img"><a href="記事のURL"><img src="画像のURL" alt="タイトルのテキスト" /></a></div></div>
<div class="article-box"><div class="article-img"><a href="記事のURL"><img src="画像のURL" alt="タイトルのテキスト" /></a></div></div>
<div class="article-box"><div class="article-img"><a href="記事のURL"><img src="画像のURL" alt="タイトルのテキスト" /></a></div></div>
<div class="article-box"><div class="article-img"><a href="記事のURL"><img src="画像のURL" alt="タイトルのテキスト" /></a></div></div>

</div>

</div>

※ 画像のURLは、Bloggerの投稿エディタで画像をアップロードしたあとに「HTMLビュー」にすると分かります。（"https://～"の赤字部分です)
※ 重要なアップデート投稿があった場合などはここに乗せようかなと思っています。
※ 私は少しいじってスマホ表示も4列にしたりしています。

オリジナルSNSシェアボタンの設置


ふじろじっくさんの記事を参考にしました。

【QooQ】オリジナルSNSシェアボタンの設置

オリジナル SNS シェアボタンの設置手順～QooQ編

fujilogic.blogspot.com


わたしは「この記事をシェアする」の文字を除き、Pocket を削除しました。
下記はその変更したコードです。

「HTMLを編集」


以下のコードを <head> 内に設置 


<link href="//use.fontawesome.com/releases/v5.11.1/css/all.css" rel="stylesheet" type="text/css"></link>

次に <div class="single-share"> を検索して
<div class="single-share"> から </div> までの所(7行程度)をまるごと以下のコードと入れ替えます。 


<!--SNS Share Buttons-->
   <ul class='sns-share-buttons'>
      <!--Twitter-->
      <li class='tweet'>
          <a expr:href='"https://twitter.com/intent/tweet?url=" + data:post.url + "&amp;text=" + data:post.title + " %7C " + data:blog.title + ""' rel='noopener' target='_blank' title='ツイートする'>
            <i class='fab fa-twitter'/>
         </a>
      </li>
      <!--Facebook-->
      <li class='facebook'>
         <a expr:href='"https://www.facebook.com/sharer.php?u=" + data:post.url + "&amp;t=" + data:post.title + " - " + data:blog.title' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=330,width=600&apos;);return false;' rel='noopener' target='_blank' title='シェアする'>
           <i class='fab fa-facebook-f'/>
         </a>
      </li>
      <!--はてな-->
      <li class='hatena'>
         <a expr:href='"https://b.hatena.ne.jp/entry/panel/?url=" + data:post.url' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600&apos;);return false;' rel='noopener' target='_blank' title='はてなブックマークに登録'>
          <span style='font-weight:bold;font-family:verdana;line-height:1em'>B!</span>
         </a>
      </li>
      <!--LINE-->
      <li class='line'>
         <a expr:href='"https://social-plugins.line.me/lineit/share?url=" + data:post.url' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=600&apos;);return false;' rel='noopener' target='_blank' title='LINEで送る'>
            <i class='fab fa-line'/>
         </a>
      </li>
      <!--COPY LINK-->
      <li class='copylink'>
<a class='copy_btn' style='cursor:pointer' title='タイトルとURLをコピーする'>COPY<br/>LINK</a>
<script src='//code.jquery.com/jquery-3.4.1.min.js'/>
<script src='//cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js'/>
<script>
var clipboard = new ClipboardJS(&#39;.copy_btn&#39;);
$(function(){
  var title = $(&#39;title&#39;).text();
  var url = location.href;
  $(&#39;.copy_btn&#39;).click(function(){
    $(this)
      .attr(&#39;data-clipboard-text&#39;, title + &#39; &#39; + url)
      .css("cursor","default")
      .css("font-weight","bold")
      .css("font-size",".6em")
      .css("line-height","2em")
      .css("letter-spacing","0")
      .css("background","gray")
      .text("COPIED");
  });
});
</script>
      </li>
   </ul>

記事の上側のシェアボタンを非表示にする


<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/> を検索で探します。2箇所ありますので、上の方を削除、またはコメントアウトすれば非表示に出来ます。

CSSでデザイン調整


検索で /* SNSボタン */ という項目を探します。
その下の部分(/* 前後の記事 */の上までの範囲)をまるごと以下のコードと入れ替えて下さい。 


.sns-share-buttons {
  width: 100%;
  margin: 1em 0;
  text-align: center;
  list-style: none;
  padding-left:0!important;
}
.sns-share-buttons li {
  display: inline-block;
  width: 43px;
  height: 43px;
  margin: 3px;
  padding: 0!important;
  border-radius: 25px;
  vertical-align: middle;
  line-height:1em;
}
.sns-share-buttons li a {
  font-size: 1.5em;
  display: block;
  padding-top: 10px;
  text-align: center;
  box-shadow: 2px 2px 8px -2px #aaa;
  text-decoration: none;
  color: #fff!important;
  border-radius: 25px;
  height: 43px;
  transition: .3s;
}
.sns-share-buttons li a:hover {
  box-shadow: 2px 2px 8px  #aaa;
  text-decoration: none;
}
.sns-share-buttons .tweet a {
  background: deepskyblue;
}
.sns-share-buttons .facebook a {
  background: royalblue;
}
.sns-share-buttons .hatena a {
  background: dodgerblue;
}
.sns-share-buttons .line a {
  background: limegreen;
}
.sns-share-buttons .copylink a {
  font-family: arial;
  background: plum;
  font-size:12px;
  font-weight: bold;
  line-height: 1em;
}
以上で【QooQ】オリジナルSNSシェアボタンの設置完了です。

============================
2020.07.17 追記

上記コードのHTML部分のtwitter関連でQooQに組み込むにあたって、変更または削除しなければいけない所があり 「ふじやん」さんからわざわざ連絡いただきました。

「&amp;hashtags=ハッシュタグ&amp;via=ツイッターID」
という部分なのですが、「ふじやん」さんの記事にはHTMLコードの次に「コードについて」というところできちんと書いてあり、これを自分の環境で変更または削除しなければいけないということだったのを私が見落とししていました。
私はtwitterのアカウントは一応あるのですが、ほとんど使っていない状態なので、削除しても問題ないので上記コードでは削除しました。

参考までに「via」とは「～経由で」という意味の英語らしいです。

あと、リンクコピーには jQuery を使用しますが、既に導入済みの場合はタグを削除してもOKということです。
上記コードはこれについては削除していません、


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


「インドアな日々」さんの記事を参考にしました。

【 QooQ カスタマイズ 】 ラベル・人気の投稿・次（ 前 ）の投稿ボタン リンク範囲変更

こんにちは！ HARU（ @HARU ）です。 今回は Blogger のテンプレートである QooQ の、 各リンク範囲について変更 してみました。 変更場所 ガジェットで追加できるラベル集 ガジェットで追加できる人気の投稿欄 ...

indoor-days.blogspot.com

aタグ部分だけではなく、ボタン全体をクリックできるように変更します。
私は気にならなかったのでラベル・人気の投稿の調整はしていません。
またホバーアニメーションを追加していませんのでホバーアニメーション用の調整はしていません。
もし追加していた場合は、「インドアな日々」さんの記事に従ってそれぞれ追記してください。

下記のコード(次の投稿・前の投稿部分のみ)を削除・追記してください。
記述する場所は「HTML編集」でCSS記述部「個別記事」内です。 


#blog-pager-newer-link,
#blog-pager-older-link{ 
/*	padding: 0.7em; 変更1em→0.7em, ボタン全体をクリック用削除 */
}
#blog-pager-newer-link a,
#blog-pager-older-link a{
 padding: 0.7em; /* 変更1em→0.7em, ボタン全体をクリック用追記 */
 display: block; /* ボタン全体をクリック用追記 */
}

これでリンク範囲変更は完了です。


プロフィール

自分の写真

ryo

現役時代のスタイル・ワンは平泳ぎでした。 ...が、マスターズで入賞できないので バタフライ長距離(200ｍ)に仕方なく挑んでいます。

このブログを検索

@TCOM

このブログで人気の投稿

マスターズ水泳年齢別資格表（マスターズ年齢枠別）

イメージ
社団法人日本スイミングクラブ協会が出している「マスターズ水泳年齢別資格表」というのがあります。 男女別・年齢別・種目別に等級が設定されています。 １級から20級まで。20級が一番速いです。 元のデータは「男女・種目別」→「距離別 級／年齢区分別」になってますが、こちらでは「男女・年齢区分別」→「種目別 級／距離別」に並べ替えてありますので、自分に該当するデータが一目で全種目を見れます。
read more »

QooQ

TOP

≡