ゆっきーです(^^)
ようやく今回は以前扱った初級編に続いて、
Bloggerカスタマイズの中級編をお送りしたいと思います！
行間サイズの指定、クイックエディットの削除、画像の枠消し、見出しの装飾、Google Search consoleの導入など、
今回はHTMLやCSSのカスタマイズを要するBloggerカスタマイズを５つほどまとめて紹介していきたいと思います！
まずは準備
今回はHTMLとCSSを操作する内容になりますので、HTMLやCSSって何？って方はまずはこちらをご覧ください。
→Bloggerをカスタマイズしよう！その前に…
またモバイル版にカスタマイズを反映させるにはモバイルテーマが「カスタム」になっている必要があります。
「テーマ」→「歯車マーク(モバイルデータをカスタマイズ)」
でセレクトボックス内が「カスタム」になっていることを確認してください。
(参考:Bloggerをカスタマイズしよう！5つの方法(初級編))
以上を確認したら、早速カスタマイズに挑戦しましょう！
行間サイズを指定する方法
以前、
BloggerブログのフォントをCSSで設定しよう！
こちらの記事にて、ブログ文字の「フォント」を指定する方法を紹介しました。
しかし、フォントは綺麗になったけど、行間がツメツメ…と感じることもあるかと思います。
そこで行間を指定する方法を紹介します。
と言っても簡単です。
CSSにコードを貼り付けるだけ。
以下に当サイトで採用している行間コードを貼ります。
.post-body {
line-height: 1.7;
}
line-height: 1.7;
}
「1.7」を任意の値に変えていただくことで、好きな行間に調整することができます。
モバイル版だけ異なる行間サイズを適用したい場合は、「.post-body」の前に「.mobile」をつけることで解決します。
ガジェットの設定マーク(クイックエディット)を消す
Bloggerのガジェットにはデフォルトで、妙な設定マークがついています。
こちらは「クイックエディット」と呼ばれ、
こちらをクリックすることでブログ管理画面を経由することなく、直接ガジェットの設定ができます。
なので基本的には便利機能なのですが、レイアウト的に「ダサい！取りたい！」という場合もあるかと思います。
(あまりつけてる人見ないし…)
そこで。
こちらの設定マークを消す方法を紹介します。
全部消す場合
全てのガジェットから設定マークを一掃したい場合、その方法はとっても簡単です。
CSSに
.quickedit {
display: none;
}
display: none;
}
こちらを張り付けるだけでOK。
とっても簡単ですね。
任意のガジェットのみ消す場合
設定マークを消したいガジェットと残したいガジェットがある場合少々面倒くさいです。
この場合HTMLをいじる必要があります。
設定マークを消したいガジェットの表示を担うコードをHTML上から見つけ、
(参考：Bloggerガジェットをモバイル版ブログに表示させる方法！)
ガジェットコードの下の方にある
<b:include name='quickedit'/>
こちらを削除、もしくは<!-- ~ -->で囲ってコメント化することで、任意のガジェットの設定マークを消すことができます。
画像のように、クイックエディットを担うコードは下の方にあるので、間違えないようにしましょう。
画像の周りの枠と影を消す
Bloggerではデフォルトで画像の周りに謎の枠線と影が表示されます。
これがアフィリエイトリンクとかにもまとわりついてきたりしてけっこう邪魔くさいので、消したい方多いと思います。
なので消しましょう！
HTMLから消す方法とCSSから消す方法とがあります！
HTMLから消す
「シンプル」テーマでは画像の枠はHTML上の以下のコードによって担われています。
(テーマによって変わるかも知れません)
.post-body img,.post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
.post-body img,.post-body .tr-caption-container {
padding: $(image.border.large.size);
}
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
.post-body img,.post-body .tr-caption-container {
padding: $(image.border.large.size);
}
このうちの「.post-body img,」の部分をコメント化するか削除するかすれば、画像の枠線は消えるはずです。
CSSから消す
スタイルを優先させる!importantルールを用いることで、既存のスタイルを上書きします。
こちらをCSSに貼り付けてください
.post-body img{
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
上のコードを適用しても効果が無かった方はこちらもお試しください。
.post-body img[width='1'],
.post-body img[height='1']{
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
.post-body img{
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
.post-body img[height='1']{
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
.post-body img{
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
見出しを装飾する
見出しとは↑これです。
見出しを適切に用いることは、記事を読みやすくするだけでなく、SEOにも良き影響を与えます。
見出しはh1~h6タグで表現され、hの隣の数字が小さいほど、重要な内容であることを示します。
Bloggerではエディターの見出し、小見出し、準見出しから、それぞれh2、h3、h4タグが使用可能であり、
（参考：SEO対策基本編！Bloggerでできる6つの方法！)
またエディタのHTMLから、それ以外の見出しタグを導入することも可能です。
しかし、この見出しのデザイン
デフォルトでは文字が太くなるだけでなんだかパッとしません。
なのでCSSを用いて見出しを装飾すると良いでしょう！
例えば、「見出し」に用いられるh2タグを装飾する場合、
h2{
「装飾の内容」
}
「装飾の内容」
}
このようにするだけで好きなように装飾できます！
他のタグも同じ要領ですね。
肝心の装飾のコードですが、その点に関してはこちらに素晴らしいサイトがありますので、こちらを参考にしてカスタマイズを実現させてください。
https://saruwakakun.com/html-css/reference/h-design
（外部サイト）
さて、しかし、Bloggerで見出しを装飾する場合、実は他に大きな問題があるのです…
実はBloggerの基本テーマ(テンプレート)にはレイアウトに見出しタグ(h1~h4)が用いられてまして、見出しを装飾すると、その影響がサイトレイアウトにも及んでしまうのです。
要するにこんな感じ↓
ちなみにレイアウトに用いられている見出しタグは、
h1…ブログタイトル
h2…ガジェット、日付
h3…記事タイトル
h4…コメント欄
となります。
(以上は「シンプル」テーマのものですが、他のテーマも大体似たようなものです)
コメント欄はそこまで必要でもないので除いてしまえば問題は無いのですが、他は除こうにも除けません。
(ブログタイトルを当サイトのように画像にしている場合、h1タグの装飾の影響は受けません)
この場合、選択肢は3つです
１：テンプレート(HTML)を編集し、レイアウトに用いられている見出しタグを除くもしくは変更する。
２：見出しデザインをレイアウトに適用されても差し障りの無いデザインにする
３：サイトレイアウトに使われてない見出しタグ(h4~h6)を使う。
上に行くほど適当な方法ですが、手間と技術が要求されます。
初心者の方は２あたりが妥当な選択肢ではないでしょうか？
または
サードパーティー(第3者)提供のテンプレートには、レイアウトの見出し構造が最適化されたものもあるので、そちらをインストールするのも手です。
(けっこうリスキーなので初心者にはオススメしません)
この辺りはまた扱っていきたいと考えていますが、正直Blogger推しの私でもこの仕様は不可解極まりないと思ってます(´･ω･`)
Google Search Consoleを導入する
Google Search ConsoleはSEO対策に欠かせない頼れる相棒。
サイトマップ送信やFetch as Googleでインデックスを促進したり、クロールの状態を調べることができます。
是非とも導入しておきたいツールですね！
導入には色々な方法があるようですが、HTMLを編集する方法が最もポピュラーです。
Google Search Consoleのページに入り、自分の運営するサイトのURLを入れてプロパティを追加すると、サイト所有権確認のためのいくつかの選択肢が提示されます。
「おすすめの確認方法」として「ウェブサイトにHTMLファイルをアップロードする」方法が提示されますが、これはあまりオススメできないので下にスクロールしてその他の確認方法から選択しましょう。
(ちゃんと検討していないのですが、Bloggerサーバーにファイルをアップロードする方法が見つからないので、Bloggerだとこの方法では無理なんじゃないかなぁと思ってます)
「その他の確認方法」の中から「HTMLタグ」を選択し、
表示されたメタタグをコピーしてから、
Bloggerのブログ管理画面
テーマ→HTMLの編集
からHTML編集画面に入り、
画像の説明通り、コピーしたそれをHTMLの<head>内の最初の方に貼ればOKです！
(「<body> セクションの前」を意識すると初心者は少し混乱すると思うので、何も考えず<head>の下らへんに貼れば良いと思います)
適切にタグを挿入した後、「確認」を押せばサイトの認証が完了し、Search Consoleの導入が完了します。
これでGoogle Search Consoleを用いれるようになりました！
まとめ
いかがでしたか？
HTMLやCSSを編集できるようになれば、Bloggerのカスタマイズの可能性がいっそう広まります。
レイアウトのカスタマイズであなただけのブログを実現しましょう！
ちなみにですが上級者向けやる予定はありません！
(上級向けだなと思ったやつは個別記事として扱います。内容多くなるから)
