目次[非表示]
ヘッダー下にアイキャッチ画像付きリンクを表示
これはとても見栄えが良くなります。
重要なアップデートの連絡にも使えそうです。
mocaさんの記事の「ヘッダーのカスタマイズ」のなかの「3 * ヘッダー下にアイキャッチ画像付きリンクを表示」 を参考にしました。
アイキャッチ画像を用意する
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シェアボタンの設置
ふじろじっくさんの記事を参考にしました。
わたしは「この記事をシェアする」の文字を除き、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 + "&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 + "&t=" + data:post.title + " - " + data:blog.title' onclick='javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=330,width=600');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, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');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, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=600');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('.copy_btn'); $(function(){ var title = $('title').text(); var url = location.href; $('.copy_btn').click(function(){ $(this) .attr('data-clipboard-text', title + ' ' + 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; }
============================
2020.07.17 追記
上記コードのHTML部分のtwitter関連でQooQに組み込むにあたって、変更または削除しなければいけない所があり 「ふじやん」さんからわざわざ連絡いただきました。
「&hashtags=ハッシュタグ&via=ツイッターID」
という部分なのですが、「ふじやん」さんの記事にはHTMLコードの次に「コードについて」というところできちんと書いてあり、これを自分の環境で変更または削除しなければいけないということだったのを私が見落とししていました。
私はtwitterのアカウントは一応あるのですが、ほとんど使っていない状態なので、削除しても問題ないので上記コードでは削除しました。
参考までに「via」とは「～経由で」という意味の英語らしいです。
あと、リンクコピーには jQuery を使用しますが、既に導入済みの場合はタグを削除してもOKということです。
上記コードはこれについては削除していません、
次の投稿・前の投稿ボタン リンク範囲変更
「インドアな日々」さんの記事を参考にしました。
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; /* ボタン全体をクリック用追記 */ }
これでリンク範囲変更は完了です。
4 件のコメント:
はじめまして。
拙ブログのカスタマイズ記事を参考にして頂いたたようで、お役に立てたのなら何よりです。
さて、SNS シェアボタンに関してですが、私の説明不足のせいもあって、ここ最近 Twitter のオプションコードを書き換え・削除せず、そのまま使用されている方が散見されます。
もし ryo様がツイッターのアカウントをお持ちでないのなら、以下の部分を削除されることをおすすめします。(別にそのままでも問題なくツイートは出来るのですが、余計な文字列が含まれてしまい、見栄えがよろしくないもので…)
&hashtags=ハッシュタグ&via=ツイッターID
記事にも追記しておきました。
https://fujilogic.blogspot.com/2019/09/original-snssharebutton-for-qooq.html#5
もしご質問等ありましたら、お気軽にコメントくださいませ。
「ふじやん」さんからわざわざ連絡いただきましてありがとうございます。
私はtwitterのアカウントは一応あるのですが、ほとんど使っていない状態なので、
あまりよく考えずにそのままにしていました。
便利な機能なのでしょうがそういう状態なので、私の方は削除することにします。
私のブログのほうもこれから対処いたします。
「ふじやん」さんのブログはいつも参考にさせてもらっていますので
今後ともよろしくお願いいたします。
こちらのシェアボタンのリンクコピーですが、jQuery が リンクコピーのスクリプトよりも下の方に置かれているために機能しなくなってますね。
jQuery は、動作させたいスクリプトよりも上の方に置く必要があります。
「ふじやん。」さん、ご指摘ありがとうございます。
そのとおりでしたね。
「ページトップへ戻る」ボタンの jQuery とごっちゃになって、重複していると思って QooQ で間違って削除してしまっていましたね。
パニック状態で訳が分からなくなっていました。
結局 3.4.1 を QooQ の head において、「ページトップへ戻る」ボタンは削除して解決しました。
ありがとうございます。これですっきりしました。
コメントを投稿