QooQのHTML編集は、上の方でCSSのカスタマイズが容易に行えます。
本記事では【７個別記事】について解説していきます！
当ブログはQooQ list版ですが、QooQ list版は記事一覧がリストになっているだけのQooQなので同様のカスタマイズが行えます。
個別記事CSS
投稿日時点で当ブログが実際に使用しているCSSを掲載していきます。
長いので、項目毎に少しずつ見ていきましょう。
コメントアウトで説明を加えているので参考にしてみてください。
個別記事全体
/****************************************
個別記事
*****************************************/
#single{
padding: 1.8em; /*記事周囲余白*/
margin-top: 10px; /*パンくずリストと記事の間*/
background: $(other.back); /*記事背景色*/
}
個別記事全体のCSSです。
個別記事見出し
/* 個別記事見出し */
#singler-header{
}
#single-header-date{
font-size: 90%; /*日付文字サイズ*/
margin-top: 1.25em; /*タイトルと日付の間*/
color: $(font.light); /*日付文字色*/
}
#single-header-title{
font-size: 2.3rem; /*タイトル文字色*/
font-weight: bold; /*タイトル太字*/
}
#single-header .single-share{
margin-top: 1em; /*ラベルと上シェアボタンの間*/
}
#single-header-category{
display: flex;
flex-wrap: wrap;
justify-content: flex-end; /*ラベル位置末尾*/
margin-top: .5em; /*日付とラベルの間*/
font-size: 80%; /*ラベル文字サイズ*/
font-weight: bold; /*ラベル太字*/
}
.single-header-category-item{
display: block;
margin-top: .3em; /*ラベル上の隙間*/
margin-left: .3em; /*ラベル間*/
padding: .3em 1em; /*ラベル背景の余白*/
border-radius: 2px; /*ラベル角丸*/
background: $(brand.color); /*ラベル背景色*/
color: $(brand.font); /*ラベル文字色*/
}
記事のタイトルや日付などのCSSです。
アドセンスのデザイン指定
/* アドセンスのデザイン指定 */
#ad-1{
/* アドセンス広告1を使う場合有効にする */
/* margin-top: 1em; */
overflow: hidden;
}
#ad-2{
margin-top: 2em;
overflow: hidden;
}
HTML内でアドセンス広告1・アドセンス広告2の挿入箇所があります。
そこでアドセンス広告を使用する際は、ここのCSSをいじりましょう。
個別記事本文
/* 個別記事本文 */
#single-content{
margin-top: 3em; /*上シェアボタンと記事本文の間*/
line-height: 1.8; /*行間*/
}
#single-content p{
margin-top: .8em; /*段落文字上部*/
margin-bottom: .8em; /*段落文字下部*/
}
#single-content a{
color: $(font.link); /*リンク文字色*/
}
#single-content h2{
font-size: 2.2rem; /*見出し文字サイズ*/
width: fit-content; /*見出し文字の部分だけ*/
border-bottom: solid 4px $(font.color); /*見出し下線種類・太さ・色*/
margin-bottom: .6em; /*見出し下余白*/
}
#single-content h3{
font-size: 2rem; /*小見出し文字サイズ*/
width: fit-content; /*小見出し文字の部分だけ*/
border-bottom: dashed 3px $(font.color); /*小見出し下線種類・太さ・色*/
margin-top: 1em; /*小見出し上余白*/
margin-bottom: .6em; /*小見出し下余白*/
}
#single-content h4{
font-size: 1.8rem; /*準見出し文字サイズ*/
margin-bottom: .5em; /*準見出し下余白*/
}
#single-content blockquote{
margin: 1.8rem; /*引用余白*/
padding-left: 1.8rem; /*引用左位置*/
position: relative;
}
#single-content blockquote:before{
content:'\201D';
font-size: 400%;
position: absolute;
top: -1.8rem;
left: -1.8rem;
line-height: 1;
}
行間や見出し関係のCSSです。
QooQの見出しについてはこちらで変更できます。
関連記事はコチラ ➡ 記事の見出しデザインを変更する方法
個別記事下部
/* 個別記事下部 */
#single-footer{
}
いじらずそのままで。
これ以降が記事の下部のCSSになります。
SNSボタン
/* SNSボタン */
#single-footer .single-share{
margin-top: 1em; /*上余白*/
margin-bottom: 3em; /*下余白*/
}
.single-share{
display: flex;
justify-content: center; /*中央寄せ*/
}
.single-share-facebook,
.single-share-twitter,
.single-share-hatena,
.single-share-pocket,
.single-share-line{
text-align: center; /*文字中央寄せ*/
font-weight: bold; /*太文字*/
margin: 0 .3em; /*ボタン間余白*/
border-radius: 3px; /*角丸*/
display: block;
padding: .2em 1em; /*背景余白*/
color: white; /*文字色*/
}
.single-share-facebook{
background: #3B5998; /*フェイスブック背景色*/
}
.single-share-twitter{
background: #000000; /*ツイッター背景色*/
}
.single-share-hatena{
background: #008fde; /*はてなブックマーク背景色*/
}
.single-share-pocket{
background: #ef3f56; /*Pocket背景色*/
}
.single-share-line{
background: #00B900; /*LINE背景色*/
}
シェアボタンのCSSです。
以前解説したQooQのシェアボタンのTwitterをXに変更する方法で色の変更方法を行うのがこの部分になります。
前後の記事
/* 前後の記事 */
#blog-pager{
margin-top: 30px; /*上隙間*/
margin-bottom: 0; /*下隙間*/
}
.blog-pager-newer-link,
.blog-pager-older-link{
display: block; /*ボタン全体リンク*/
padding: 1em; /*余白*/
font-weight: bold; /*太文字*/
border-radius: 2em; /*角丸*/
background: $(brand.color); /*背景色*/
color: $(brand.subfont); /*文字色*/
}
前の投稿と次の投稿のCSSです。
初期状態だと文字にしかリンクがつかないため、ボタン全体をリンクにするためにdisplay: block;を追加しています。
その際、#blog-pager-newer-linkと#blog-pager-older-linkを.blog-pager-newer-linkと.blog-pager-older-linkに変更しています。（#を.にしています。）
これでボタン全体をリンクにできます。
参考ブログ様
【QooQ】「前の投稿」「次の投稿」の表示変更とリンクの広げ方
コメント
/* コメント */
#comments{
margin-top: 2em; /*上隙間*/
}
コメント欄のCSSです。
当ブログでは非表示ですが、表示している場合はここを変更しましょう。
フッターカテゴリ
/* フッターカテゴリ */
#single-footer-category{
margin-top: 2em; /*上隙間*/
}
.single-footer-category-item{
display: table;
margin: 1em auto 0 auto;
padding: .5em; /*背景余白*/
font-weight: bold; /*太文字*/
border-radius: 3px; /*角丸*/
background: $(brand.color); /*背景色*/
color: $(brand.font); /*文字色*/
}
フッターのラベルのCSSです。
当ブログでは非表示ですが、表示している場合はここを変更しましょう。
関連記事
/* 関連記事 */
#mrp-wrapper {
margin-top: 3em;
}
#mrp-title {
font-weight: bold;
}
.mrp-post {
position: relative;
padding: .1em 1em;
margin: .5em;
}
.mrp-post-img {
display: none;
}
.mrp-post-title {
margin-top: .5em;
font-size: 90%;
font-weight: bold;
color: $(font.link);
}
.mrp-post-title::before {
background-color: $(font.color);
border-radius: 50%;
content: "";
height: .3em;
width: .3em;
position: absolute;
top: 1.1em;
left: .5em;
}
.mrp-post-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.mrp-post:hover {
text-decoration: underline; /*ホバーリンク下線*/
color: $(font.link); /*ホバーリンク下線色*/
}
関連記事は、以下のコードをお借りしています。
参考ブログ様
【QooQ】関連記事ウィジェットのカスタマイズ
当ブログでは文字だけの【デザイン③超シンプルタイプ】を採用しています。
マウスホバー（マウスオーバー）でリンクに下線を表示させたかったので、コメントアウト部分だけ追加しています。
他のデザインも良いので検討してみてください。
関連記事に複数のラベルを反映させる方法
ついでなので、関連記事に複数のラベルを反映させる方法を解説します。
QooQの初期設定では、記事に複数のラベルを設定してもその最後のラベル１つしか関連記事に反映されません。
これを記事に設定した複数のラベル全てが反映されるように変更します。
先ずHTMLの編集画面でCtrlキー+FキーでSearch: という検索欄を表示させ、<div id='mrp-content'/>を検索します。
その数行下の<b:if cond='data:label.isLast == "true"'>とそれに対応した</b:if>を削除します。
不安な場合は<!--コメントアウト-->でコードを無効にするのをオススメします。
<b:loop values='data:post.labels' var='label'>
<!--<b:if cond='data:label.isLast == "true"'>-->
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=mrp_input&max-results=10"' type='text/javascript'/>
<!--</b:if>-->
これで関連記事に設定した全てのラベルが反映されるようになります！
参考ブログ様
bloggerテンプレート【QooQカスタマイズ】パンくずリストと関連記事に表示されるタグを増やす方法
QooQのCSSカスタマイズリンク集
本記事は【７個別記事】のCSSカスタマイズです。
他の項目のCSSカスタマイズは以下のリンクからご確認ください。
２全体設定／３ナビゲーション／４ヘッダー／５パンくずリスト／６記事一覧／８サイドバー／９フッター／10個別アイテム（タグクラウド）
