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

このブログで人気の投稿

コロナワクチン接種（ファイザー2回目）

イメージ
  8/10　11:30～11:50にコロナワクチン接種（ファイザー2回目）でした。 予定通りに接種施設に行き、問診で「少し心配です」というと5分ぐらいいろいろ話をされてしまいました。 11:39に接種完了。 筋肉注射の打ち方にうまい下手があるのがわかりました。 前回はブスリ..グリグリ..という感じだったのが、今回はチクリ..スッと終わってしましました。 15分間の待機時間を終了して家に帰りました。 18:00 6時間経過、ほんの少し注射跡が痛くなり、腕があげづらくなりました。 20:00 かなり痛くなってきました。 翌日8/11 あさ8:00 痛みは少し和らいできた。熱もなし。前回よりも軽いかも？ 腕は痛いけど、夕方、お風呂ついでに軽く泳ぎました。 お風呂を出たらまた少し痛みが引いてきました。 接種翌々日8/12 あさ9:00 ほとんど痛みはなくなって違和感があるくらいになり、腕を頭の上まで上げるとすこし痛いというぐらいまで回復しました。 薬も飲まなかったし、本当に軽くて済みました。 2回目の方が軽いなんていうこともあるのですね。
read more »

QooQ

TOP

≡