Bloggerサイトの見た目カスタマイズ

cssコード等はテンプレートを自分で書き換えることでカスタマイズできる。このブログで行った変更点を以下に書く。(テンプレート変更以外のTipsも備忘録として少し書く)

0. 方法

Bloggerにて、Theme(左ペイン) -> CUSTOMIZE▽(中央ペイン) -> Edit HTMLを選び、<head>〜</head>に追記。

モバイル版は、Desktop版を変更したあとで、Theme(左ペイン) -> CUSTOMIZE▽(中央ペイン) -> Mobile Settings -> Configure mobile viewにてCustomを選択。

1. Google code prettifyの使用

ソースコードの見た目カスタマイズ(preタグ部分)

<!-- Google code prettify start -->
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=default'/>
<style type='text/css'>
/*-------- line height --------*/
pre {line-height: 1.4; }
/*-------- enable horizontal and vertical scroll. suppress wrap text --------*/
pre.prettyprint {
  white-space: pre;
  overflow: auto;
  max-height: 21em
}
/*-------- Below settings from: --------*/
/*-------- http://footprintsofashcolorsparrow.blogspot.com/2017/12/google-code-prettifyblogger.html#foacs-heading-0-4-0-0*/
/*-------- Vertical line between line numbers and codes --------*/
pre.prettyprint &gt; ol.linenums &gt; li
{
  border-left: 1px solid #cccccc;
  margin-bottom: 0;
}
/*-------- Display all the line numbers --------*/
pre.prettyprint &gt; ol.linenums &gt; li.L0,
pre.prettyprint &gt; ol.linenums &gt; li.L1,
pre.prettyprint &gt; ol.linenums &gt; li.L2,
pre.prettyprint &gt; ol.linenums &gt; li.L3,
pre.prettyprint &gt; ol.linenums &gt; li.L4,
pre.prettyprint &gt; ol.linenums &gt; li.L5,
pre.prettyprint &gt; ol.linenums &gt; li.L6,
pre.prettyprint &gt; ol.linenums &gt; li.L7,
pre.prettyprint &gt; ol.linenums &gt; li.L8,
pre.prettyprint &gt; ol.linenums &gt; li.L9 
{
  list-style-type: decimal;
}
/*-------- Add space between line numbers and codes --------*/
pre.prettyprint &gt; ol.linenums &gt; li span:first-child
{
  padding-left: 1em;
}
pre.prettyprint &gt; ol.linenums &gt; li span:last-child
{
  padding-right: 1em;
}
pre.prettyprint {
  margin-left: 10px;
  margin-right: 10px;
}
</style>
<!-- Google code prettify end -->

参考サイト: http://footprintsofashcolorsparrow.blogspot.com/2017/12/google-code-prettifyblogger.html#foacs-heading-0-4-0-0*/

<pre>の使い方

<pre class="prettyprint lang-py linenums">ソースコード</pre>のように書く。対応しているsyntax highlightなど詳細はhttps://github.com/googlearchive/code-prettifyに書かれている。タグ使用結果は上記コード表示部分のような感じになる。

2. その他の見た目カスタマイズ

下記のcssで、

タイトルとタイトル直下のブログ説明文のカスタマイズ
<code>タグの見た目の定義
本文の行間を広げる(2行)(TOC内除く)
table-of-contentsクラス背景を水色に
ulのright-paddingを0に(中途半端な所でリンクが折り返されるのを防ぐ)
mobile表示で、左右余白を均等に
mobile表示で、homeに表示されるページのリンクの中途半端な折返しをやめる

が実現される。

下記のcssは、google code prettifyよりも上に書く。

<style type='text/css'> /*-------- I added these lines. Update Blogger article to reflect modification below --------*/
/*-------- title padding and text align --------*/
.titlewrapper {
padding: 5px 30px 0px 30px !important;
}
h1.title {
  margin-bottom: 0px;
}
.title {
  text-align:center;
}
/*-------- description (displayed under title) size, align, position, etc --------*/
.description {
  font-size: 100% !important;
  text-align:center;
  margin: 0 0px;
}
.descriptionwrapper {
  margin-bottom: 0em !important;
}
/*-------- for inline code --------*/
code {
  padding: 0.5px 4px; /* margin around text, vertical horizontal */
  color: #1f1f1f; /* text color */
  background-color: #f0f0f0; /* 背景色 */
  border-radius: 4px; /* round corner of box */
}
/*-------- for content text settings --------*/
.post-body {line-height: 2 !important;}
.post-body ul {
  /* needed to extend line-height in ul despite the setting of line-height for .post-body */
  line-height: 2 !important;
  padding-right: 0 !important; /* avoid text wrapping in the middle of the line in ul */
}
h5 {font-size: 1em;}
/*-------- Table of Contents --------*/
.table-of-contents {
  background: rgb(240, 255, 255); /* sky blue */
  padding: 10px;
}
.table-of-contents ul{
  line-height: 1.4 !important; /* small distance among line only in TOC */
}
/*-------- Right Pane Widget --------*/
div.BlogSearch h2.title {
  display: none; /* Dont display title */
}
div.BlogArchive h2 {
  display: none; /* Dont display title */
}
div.ReportAbuse h3.title {
  text-align: left;
}
/*-------- Main Pane at Home Page --------*/
.post-footer {
  display: none;
}
div.date-outer { /* index outer */
  margin-bottom: 50px;
}
.jump-link { /* Customize Read-more link */
  text-align: center;
  font-size: small;
  border: 1px solid #66bbdd;
  margin-bottom: 50px;
  display: none;
}

/*================ MOBILE SETTINGS ================*/
/*-------- right and left margins = same width --------*/
.mobile .content-outer {
  margin-left: auto;
  margin-right: auto;
}
/*-------- disable index text wrapping at home page --------*/
.mobile-index-title {
  width: auto;
}

</style>

使用方法

codeタグについては、htmlで

<code>code here</code> とすると、code hereのようになる。

目次については、htmlで

<div class="table-of-contents">TOC here</div>とする。

3. 検索結果などの表示を、ブログタイトル+記事タイトルに

デフォルトでは、検索結果などのタイトル表示が、「ブログタイトル+記事タイトル」になる。これを「記事タイトル+ブログタイトル」に変更する。

まず、テンプレート内で次の部分を検索し、

 <title><data:blog.pageTitle/></title>

以下のように書き換える。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
  <title><data:blog.pageTitle/></title>
</b:if>

参考サイト: Blogger記事のタイトル表示を変更する方法 | Asterlist

4. テンプレート変更以外のTips

ブログのHOMEに表示する概要部分の設定

記事の編集画面のツールバーにて、HOMEに表示したい区切りの場所にカーソルを合わせ、Insert jump breakボタンを押す。

パソコンでモバイルページ表示

urlの最後に、?m=1を書き足す。

モバイルページでもwidgetを表示

<b:widget id='Label1'... >

などの< >の中に、mobile='yes'

を追加する。

私は、BlogSearch1, Label1, BlogArchive1で、mobile表示を有効にしている。

画像の周りで文字を折り返さない

画像挿入 → 文字用の設定で左揃え(画像をクリックした時に出てくる画像用のメニューでは無い)

高解像度画像の挿入

画像をoriginal sizeにし、htmlタグにwidth='80%'とか書く。px指定にすると、画面幅によってはスマホで画像の縦横比が崩れる可能性がある。max-heightなどを指定する手もあるが、今度は、デスクトップサイトの画像サイズの指定が外れる。個人的には、全部width="xx%"で指定するのがいいのかなと思う。

Voice of オカモノアラガイ

2020/10/10