Blogger Bloggerカスタマイズ

Bloggerのカスタマイズと使い方（シンプルテンプレート対応）

Bloggerシンプルテンプレートのカスタマイズ、ガジェットやCSSの追加方法と基本的な設定方法など、Bloggerで今までに実際にやったカスタマイズをまとめました。

まだBloggerをはじめていない場合は、Bloggerを始める前の準備と予備知識へ

カスタマイズ時の基本【バックアップ・ガジェットの追加・CSSの追加】
新着記事を表示
人気の投稿の表示とカスタマイズ
コメント非表示の設定
「続きを読む」関連
記事内の見出し（h1、h2、h3）の装飾
サイドバーカスタマイズ【背景色・メインカラムとの間に線】
ファビコンの変更
画像関連【alt追加・完全削除】
登録:投稿(Atom)を非表示
ラベルの削除と一括編集
検索結果表示で記事タイトルをサイトタイトルより先に表示
ツイッターと連携【投稿時に自動つぶやき】

カスタマイズ時の基本

テンプレートのバックアップ

テンプレートをカスタマイズ（編集）するときは、念のためバックアップを取ります。

方法は、テンプレートを選択して、「バックアップ/復元」をクリックします。
次に、テンプレートをすべてダウンロードをクリックして保存します。

ガジェットの追加

レイアウトから追加したい場所の「ガジェットを追加」をクリックします。

ガジェット追加画面で、追加したいガジェットを選択し詳細設定をします。

CSSの追加

CSSの追加は、テンプレートの「カスタマイズ」か「HTMLの編集」から行います。

カスタマイズ

テンプレートの「カスタマイズ」をクリックします。

上級者向けの中から「CSSを追加」をクリックし、カスタムCSSを追加します。

HTMLの編集

テンプレートの「HTMLの編集」から追加します。

表示位置とCSSコードの対応図

特別な記載がない限り、ここではこの方法で行います。

記事を折りたたむ

「もっと読む」を入れたい場所を決めて、本文を記入する場所の上にあるビジュアルエディタの、紙が半分に破けたようなボタンをクリックします。

すると、点線とグレーのラインが引かれるので、線から下が折りたたまれて非表示になり「もっと読む」が表示されます。

ＨＴＭＬで作成しているいる人は、と入力すると同じように「もっと読む」が表示され、記事が折りたたまれます。

続きを読むの装飾

背景を画像にすることや、「続きを読む」自体を画像にすることもできる。

/*続きを読むの背景色*/
.jump-link{
line-height: 250%; /*テキストの行間*/
text-align: center; /*テキストの水平位置*/
height: 40px;
width: 150px;
margin: 0px 0px 0px 400px;
}
.jump-link a{
display: block;
background:#dcdcdc; /*背景色*/
border-radius: 10px; /*枠を丸角*/
border: 2px solid #ababab; /*枠の太さと色*/
}

/*マウスを乗せたときの背景色*/
.jump-link a:hover{
text-align: center;
color:#ffffff; /*テキストの色*/
background:#0000ff; /*背景色*/
text-decoration: none; /*文字の下線なし*/
}

背景を画像にしたい場合は、background:#dcdcdc;の部分を、background-image: url();に変えて()の中に画像がある場所のURLを入力します。

記事内の見出し（h1、h2、h3）を装飾する方法

見出しはh2、小見出しはh3、準見出しはh4に対応している。h2はガジェットのタイトルにも使用されていて、h3は記事のタイトルにも使用されているので、変更するときには注意が必要です。

記事本文中にh2やh3を使う場合は「class」をつけると、記事タイトルとガジェットタイトルとは別の装飾ができます。

HTMLとCSSの書き方

記事を書くときにHTMLで

<h2 class="main">
h2の見出し
</h2>

のように記入します。

cssへの記述は以下の通り。

/* 記事内のh2 */
h2.main {
margin:0.5em 0;
padding: 3px 0px 5px 10px;
font-weight:normal; /*テキストの太さ*/
color:#121212; /*テキストの色*/
background: #FFFFFF; /*背景の色*/
border-left: 5px solid #121212;  /* 枠の左側の太さと色*/
border-bottom: 0px solid #121212; /*枠の下側 の太さと色*/
border-right: 0px solid #121212; /*枠の右側 の太さと色*/
border-top: 0px solid #121212; /*枠の上側 の太さと色*/
}

サイドバーのカスタマイズ

サイドバーに背景色をつける方法

サイドバーの背景色は、2箇所変えることが出来ます。

CSSの記述は下記の通りです。


/*サイドバー外側*/
.column-right-outer{
background:#ff0000;
}

/*サイドバーの内側*/
#sidebar-right-1{
background:#ffff00;
}

上が外側で、下が内側の背景色を指定しています。わかりやすいように外側を赤、内側を黄色にしています。

見た目はこのようになり、文字の背景と、その外側を囲う背景を変えることが出来ます。どちらか片方だけを変えることも可能で、その場合は変えたくないほうのCSSを消します。

サイドバーとメインの間に線を引く方法

線を引くときは、innerで引かないとサイドバーがメインの下に回りこんでしまうことがあります。
回り込んだらpaddingとmarginで調節出来ますが、面倒なのでinnerの方でラインを引きます。
CSSの記述は下記の通りです。


/*サイドバー外側*/
.column-right-inner{
border-left: 1px solid #ff0000;
}

/*サイドバーの内側*/
#sidebar-right-1{
border-left: 1px solid #0000ff;
}

上が外側で、下が内側の線を指定しています。わかりやすいように、外側を赤、内側を青にしています。

見た目はこのようになり、border-leftの部分をtop,right,bottomを追加してサイドバーを囲む枠を作ることも出来ます。
どちらか片方だけでいい場合は、いらない方のCSSを消します。

線を引く方法その2

もしかしたらこちらのほうが一般的かもしれません。
メインカラムのサイドバー側に線を引きます。右にサイドバーがある場合は、右側に線を引きます。

CSSの記述は下記の通りです。


/* メインカラムの右側 */
#main{
border-right: 1px solid #ff0000;
}

ファビコンの変更

ファビコンとは

ファビコンは上の画像のように、タブ、URLの横やお気に入り登録（ブックマーク）したときに表示されます。

ファビコンを変更する理由は、例えば、自分のサイトがお気に入りに登録されたとき、その他のお気に入りサイトとひと目で見分けがつくようにしたり、ブラウザのタブを多数開いているときに文字が隠れてしまってもファビコンで見分けがつくようにすることができます。

ファビコンの変更方法

変更前は上の画像の上二つのように、オレンジバックに白字のBのファビコンです。

通常ファビコンは、jpg、gif、pngでは表示されず、icoでなくてはなりませんが、Bloggerの場合は正方形であれば自動で変換して表示してくれるので、とても簡単に変更することが出来ます。

ファビコン用の画像を用意する

先ほども書いたように正方形の画像を用意します。が、1つ注意する点があり、ファイルサイズが100KB未満の画像でなくてはありません。

ファビコンを作るときのポイントは、画像が16px×16pxになるので、小さくても目立つようにできるだけシンプルにします。

ファビコンの編集

画像の準備が出来たら、Bloggerのレイアウトをクリックして、ガジェットの追加と編集画面に移ります。左上にファビコンのガジェットがあるので、「編集」をクリックします。

すると、新しいウィンドウが開くので、「ファイルを選択」をクリックして、先ほど作った画像をアップロードします。アップロードができたら、「保存」を押して完了です。

サイトを見ても変更されていない場合は、ブラウザのキャッシュをクリアしてみてください。

画像関連

SEO(検索エンジン最適化)にも多少効果があるといわれる、画像にalt属性やtitle属性を追加する方法です。

alt属性やtitle属性を追加することによって、画像検索からの流入も見込めるようになります。

SEO(Search Engine Optimization)とは何なのか、という説明は省略します。

Bloggerに画像を挿入する

まずは普段通り、画像を挿入します。

投稿エディタで「画像を挿入」をクリックします。

「ファイルを選択」をクリックして、挿入したい画像を選んだら、「開く」ボタンを押すと、アップロードされます。

ファイルを選択画面に戻るので、アップロードした画像を選択して、「選択した画像を追加」ボタンを押したら画像が挿入されます。

以前に画像をアップロードしている場合は、Picasaウェブアルバムに保存されているので、そこから探して挿入することができます。

投稿画像にalt属性やtitle属性を追加する

画像の挿入ができたら、その画像にalt属性やtitle属性を追加していきます。

挿入した画像にマウスを乗せると、矢印が十字になります。その状態で左クリックして、プロパティを選択します。

画像のプロパティ画面になるので、titleとaltを入力したら、OKボタンを押して完了です。

alt属性とtitle属性

alt属性は、画像が表示されない場合の代替テキストとして表示されます。

title属性は、画像の補足説明として使用します。

「alt」属性は、画像を見ることができない（たとえばブラウザの互換性や視覚障害のため）ユーザーのための画像の説明です。「title」属性を使用すると、画像に関するより詳しい説明を付けることができます。

参考：Bloggerヘルプ画像のプロパティ

Bloggerに挿入した画像はPicasaウェブアルバムで削除
マウスオーバーで画像を半透明にする方法

登録:投稿(Atom)を非表示にする方法

テンプレートからHTMLの編集をクリックし

<b:include name='feedLinks'/>

を検索して削除するか、隠しテキストにします。

隠しテキストはこのように記入します。

<!-- 登録:投稿(Atom)の削除 <b:include name='feedLinks'/> -->

これでブログから登録:投稿(Atom)を非表示にすることができます。

ラベルの削除と一括で編集する方法

Bloggerの投稿には、カテゴリーやタグの変わりに、ラベルをつけることができます。

ラベルを追加するのは簡単で、投稿の設定から「ラベル」を選んで入力するだけでできます。もう少し詳しい説明は、Bloggerのページと投稿の違いを参考にしてください。

今回は追加したラベルの削除と、登録しているラベルの編集方法を記録します。
ラベルを削除するには、そのラベルがどの投稿でも使われていない状態にする必要があります。

通常1つの投稿だけで使用されているラベルを削除する場合は、そのラベルが使われている記事の編集で、ラベルの使用を止めれば自動的に削除されます。

しかし、2つ以上の記事で使用していると、各記事からラベルを削除しなくてはなりません。

2つ以上の記事で使用しているラベルの削除方法

方法は2つあります。

1つは、上にも書いたとおり記事の編集で、一記事ずつ削除していく方法です。
しかし、2,3記事ならともかく、50や100記事ともなるとそうは行きません。

そこで、まとめて、使用しているラベルを止める方法を使います。

一括でラベルの使用を止める方法

マイブログから投稿の「すべてのラベル」をクリックし、削除したいラベルを選択します。

今回は「Blogger」を選択しました。
すると、そのラベルを使用している記事がフィルタされ一覧表示されます。

表示された記事を、左上のチェックボックスをクリックして一括で選択します。

次に、隣のラベルマークをクリックして、削除するラベル（この場合はBlogger）を選択します。

「投稿はありません―」と出たら削除完了です。

ラベルの一括編集方法

例えば、今まで「ブロガー」としていたものを、「Blogger」に変更する場合の方法です。

マイブログから投稿の「すべてのラベル」をクリックし、「ブロガー」を選択します。

「ブロガー」でフィルタされた記事一覧を一括選択します。
26件以上記事がある場合は、次のページに表示されるので、下の手順を繰り返します。

選択後、隣のラベルマークをクリックして、新しいラベルを選択し、入力欄に「Blogger」と入力します。

OKボタンを押したらチェックした記事に「Blogger」のラベルが追加されます。

次に、「ブロガー」のラベルを削除します。
ラベルマークをクリックして「ブロガー」を選択すると、チェックした記事からラベルが削除されます。

これで、ラベルの変更は完了です。

ラベル変更後の注意点

「ブロガー」から「Blogger」に変更したとき、「ブロガー」ラベルの検索結果をメニューバーに使用していると、「Blogger」に変更することによって、検索結果に影響が出ます。

このように表示され、メニューバーの機能を果たしません。

ラベルをメニューバーに使用している場合は速やかに変更することをおすすめします。

検索結果表示で記事タイトルをサイトタイトルより先に表示する方法

検索エンジンの検索結果で、Bloggerの記事が表示されるとき、大抵の場合「サイトタイトル⇒記事タイトル」の順に表示されると思います。

この順番を「記事タイトル⇒サイトタイトル」の順に変更する方法の記録です。

まずは、自分のサイトがどちらの順で表示されているかを確認してみます。
確認方法は、検索ボックスに「site:サイトURL」と入力します。

このブログの場合、
「site:http://wordpress-customize.blogspot.jp」（現在はmemorou.com）
と入力します。

下の画像のように、まれに、記事タイトルだけが表示される場合もあります。

検索結果に表示される文字数には制限があり、タイトルが長いと全てが表示されず、途中から省略されてしまいます。

このブログのタイトルの長さでも検索結果の半分くらいの文字数を使用します。できるだけ多く記事タイトルを表示させるためにも「記事タイトル⇒サイトタイトル」の順に変える事にしました。

この変更によりCTR（クリック率）の上昇も期待しています。

記事タイトルを先に表示する方法

テンプレートのHTMLの編集で

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

を検索します。

この部分を下記のように変更します。

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/>：<data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

最後に、「テンプレートを保存」を押したら完了です。

検索結果が反映されるまでしばらく待ちましょう。

ツイッターと連携して投稿時に自動つぶやき

まずは、twitterfeedに登録します。

すでにアカウントを持っている人は、メールアドレスとパスワードを入れてログインしてください。
まだ持っていないければ、ログインボタンの下の赤い四角で囲った部分をクリックします。

次に、フィードを作成します。
フィード名とブログURLまたはRSSフィードのＵＲＬを入力して、テストRSSフィードをクリックしてステップ２へ進みます。

ツイッターをクリックして、新しい（連携したい）Twitterアカウントを認証します。
認証できたら、上の認証されたTwitterアカウントから選択してサービスの作成をクリックします。

更新時間など細かい設定は作成後に変更できます。

フェイスブックと連携したい場合は、ツイッターを選択したところでフェイスブックを選択してください。

関連記事の表示設定
メニューバーの設置
Bloggerの独自ドメイン設定

Bloggerのカスタマイズと使い方（シンプルテンプレート対応）

カスタマイズ時の基本

テンプレートのバックアップ

ガジェットの追加

CSSの追加

カスタマイズ

HTMLの編集

新着記事を表示する方法

人気の投稿の表示とカスタマイズ

人気の投稿を表示する方法

人気の投稿の文字を大きくする方法

コメント非表示の設定方法

ブログ内のすべてのコメントを非表示にする方法

記事ごとに表示するかどうかを設定する方法

記事の途中に「続きを読む」を表示する方法

続きを読むの文字を変える方法