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

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

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


目次




カスタマイズ時の基本

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


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

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

ガジェットの追加

レイアウトから追加したい場所の「ガジェットを追加」をクリックします。
ガジェット追加画面で、追加したいガジェットを選択し詳細設定をします。

CSSの追加

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

カスタマイズ

テンプレートの「カスタマイズ」をクリックします。
上級者向けの中から「CSSを追加」をクリックし、カスタムCSSを追加します。

HTMLの編集

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

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

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

新着記事を表示する方法

マイブログのレイアウトから「フィード」のガジェットを追加します。
クリックすると、フィードの設定画面が開くので、フィードURLを入力して、次へをクリックします。
フィードURLには自分のブログのトップページのURLを入力します。

すると、タイトルや表示件数などが設定できるので、下に表示されるプレビューをみながら好みに合わせて設定します。

表示の説明
アイテムは、記事の表示件数(1件~5件の中から選べる)
アイテムの日付にチェックを入れると、英語で曜日、月、日、年が表示される。
アイテムのソース/投稿者は、投稿者名
リンクを新しいウィンドウで開くは、テキストをクリックしたときに新しいウィンドウ(タブ)で開くようにするかを選べます。

最後に保存を押して、レイアウト画面で自分が配置したい場所にドラッグ&ドロップで移動したら完成です。移動後に、配置を保存をクリックするのを忘れないようにしてください。

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

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

マイブログのレイアウトから「人気の投稿」のガジェットを追加します。
クリックすると、人気の投稿を設定する画面が開くので、タイトルや表示する内容などを設定します。

設定できる項目は、タイトル、閲覧数の期間、何を表示するかの3種類あり、投稿のタイトルは必ず表示する設定になっているので、それとあわせて記事内に画像がある場合にそれを表示するかしないか、記事の抜粋を表示するかどうかを決められます。

例えば、画像のサムネイルにチャックを入れて、抜粋のチェックをはずしたとする。
記事内に画像が無いときの表示はタイトルだけとなります。

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

フォントの変更方法
表示は投稿のタイトルと画像のサムネイルです。念のため、抜粋を表示しても問題なく表示されました。

まずはノーマルの状態の画像です。
少し文字サイズが小さく、タイトルがメインカラムの幅いっぱいまで使っているのが気になっていたため、文字を少し大きくして、使用する幅も少し狭めることにしました。

画像でもわかるように、文字サイズを大きくして、太くすることにより存在感が増したように思います。

CSSに下記を追加します。
/* 人気記事 */
.PopularPosts .item-title{
width: 95%;
font-size: 20px;
font-weight: bold;
}

「width」で横幅を%で指定します。
「font-size」で文字サイズを大きくします。
「font-weight」で文字を太くします。

人気の投稿を複数設置していて、どちらか片方だけを変更したい場合は、
/* 人気記事 */
#PopularPosts2 .item-title{
width: 95%;
font-size: 20px;
font-weight: bold;
}

上記のように、「PopularPosts」の前を「.」から「#」に変更して、後ろに数字をつけます。
このブログの場合は、「1」がサイドバーの人気記事で、「2」がメインカラムでした。

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

ブロガーのコメント表示は、すべてのコメントを一括して設定する方法と、記事別に設定する方法の2種類あります。

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

設定の投稿とコメントを開くと、投稿とコメントの項目が出てくるので、その横の埋め込みをクリックして非表示を選択し保存します。

コメントを表示する場合は、投稿ができるユーザー、単語入力の有無などが設定できます。

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

コメントを許可したくない記事(新しい投稿か、投稿の編集など)を開くと、右側に投稿の設定があります。その中からオプションをクリックすると、オプション内に閲覧者のコメントがあるので、許可しないを選んで完了をクリックします。

上でコメントを非表示に設定していると出てこないので、こちらで設定する場合は非表示にしないように注意してください。

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

「長文になってしまったブログ記事を途中まで表示させたい。」「トップページをスッキリさせたいけど、表示する記事数を減らしたくない。」などというときに便利な、記事を途中で折りたたんで「続きを読む」を表示させ、クリックすると全文表示するようにします。

Bloggerの場合デフォルトでは「続きを読む」ではなく、「もっと読む」になっています。

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

マイブログからレイアウトを選び、ブログの投稿の編集をクリックします。
すると、ブログ投稿の設定ができるので、「投稿ページのリンクテキスト」の横のボックスの文字を好きな言葉に変えれば完成です。

記事を折りたたむ

「もっと読む」を入れたい場所を決めて、本文を記入する場所の上にあるビジュアルエディタの、紙が半分に破けたようなボタンをクリックします。
すると、点線とグレーのラインが引かれるので、線から下が折りたたまれて非表示になり「もっと読む」が表示されます。

HTMLで作成しているいる人は、<!--more-->と入力すると同じように「もっと読む」が表示され、記事が折りたたまれます。

続きを読むの装飾

背景を画像にすることや、「続きを読む」自体を画像にすることもできる。
/*続きを読むの背景色*/
.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」
と入力します。

下の画像のように、まれに、記事タイトルだけが表示される場合もあります。
検索結果に表示される文字数には制限があり、タイトルが長いと全てが表示されず、途中から省略されてしまいます。

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

この変更により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フィードのURLを入力して、テストRSSフィードをクリックしてステップ2へ進みます。

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

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

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

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

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

スポンサーリンク
スポンサーリンク

0 件のコメント :

コメントを投稿