HTMLのみ*コピペで簡単♪かわいい囲み枠デザイン
ブログ執筆がはかどる*便利なサイト&ツール
旧ブログはこちらから
はてなブログ

【Blogger初心者】CSSの追加とテーマのHTMLを編集する方法

2020/02/28

Blogger ブログ

HTML編集画面

Bloggerをカスタマイズする時に行うのが、「テーマのHTML編集」と「CSSの追加」です。

このページでは、Bloggerカスタマイズ初心者の方に向けて、テーマのHTMLを編集する方法とCSSを追加する方法を説明します。

テーマのHTML編集をする前に

テーマのHTML編集をする前には、必ずバックアップを取っておいてくださいね。

そうすると、万が一失敗してもやり直しがきくので安心です。

それでは、バックアップの取り方を説明します。

▼Bloggerの管理画面を開いて、左端の項目にある「テーマ」をクリック後、「カスタマイズ」の横の「▽」をクリックします。

Bloggerの管理画面


▼すると、次のような画面が開くので、「バックアップ」をクリックします。

バックアップ
*バックアップをクリックします

▼次の画面が開いたら、「ダウンロード」をクリックします。

ダウンロード
*ダウンロードをクリックします

ファイルを保存すると、これでバックアップができました。

テーマのHTML編集をする

バックアップができたら、テーマのHTMLを編集します。

途中までは先程と同じです。(テーマ→カスタマイズ横の▽ボタンをクリック)

今度は「HTMLを編集」をクリックします。

HTMLを編集
*「HTMLを編集」をクリックします

HTML編集画面が開きました。

HTML編集画面
*HTML編集画面です

ここでコードの書き換えや追加をして、テーマをカスタマイズすることができます。

検索窓の開き方

テーマのHTML編集画面で、検索窓を出す方法を説明します。


1. HTML編集画面の中のどこかをクリックして、カーソルを置く
2. パソコンのキーボードにある、<ctrlキー> とアルファベットの <F> を同時に押す


すると、次のような検索窓が開きます。

HTML編集画面検索窓

例えば、「</head>の直前にコードを追加したい」という時、この検索窓に</head>と入力(コピペ)すると、

HTML編集画面


場所がすぐに見つけられるので便利です。

テーマのHTML編集時に使うボタン

テーマのHTML編集をする時に、よく使うボタンを紹介します。

プレビュー表示をする

カスタマイズが上手く反映されているかを確かめるために、プレビュー画面を開きます。

画面の右下に次のようなボタンがあります。(※現在は画面の右上にあります。)

HTML編集画面 テーマのプレビューを見る

左から2番目の目玉みたいなマークをクリックすると、プレビュー画面が表示されます。

もう一度クリックすると、またHTML編集画面に戻ります。

最後に加えた変更を元に戻す

カスタマイズがうまく反映されていないときに「最後に加えた変更を元に戻す」↶ボタンを使います。(右から2番目)

テーマを保存する

カスタマイズが終わったら、1番右端の「保存」ボタン押します。

テーマを保存する
「保存」のマークをクリックします

カスタマイズをしたら、忘れないように「保存」してくださいね。

CSSを追加する

HTML編集の他に、ブログカスタマイズでよく使うのが、「CSSの追加」です。

HTML編集画面を開かなくても、Bloggerのテーマデザイナーから「CSSの追加」をするだけでできてしまうカスタマイズもあります。



まず、Bloggerの管理画面で左端にある「テーマ」をクリック後、「カスタマイズ」をクリックします。

Bloggerの管理画面
「テーマ」→「カスタマイズ」をクリック

すると、Bloggerのテーマデザイナーが開くので、「上級者向け」→「CSSを追加」をクリックします。(※こちらは「以前のBlogger」のテーマデザイナーです)

Bloggerのテーマデザイナー
「上級者向け」→「CSSを追加」をクリック

「ここに CSS を追加して・・・」と書いてあるところに、コードをコピペします。

終わったら、右上にある「ブログに適用」ボタンを押してください。


ブログに適用
「ブログに適用」をクリック
これで、CSSの追加ができました。
しかし、この「CSSの追加」がうまく反映されないこともあります。

そんな時の対処法を、次にご紹介します(*^-^*)

「CSSの追加」が反映されない時の対処法

コードが間違っていないかチェックする

そもそものコードが間違っていたら、カスタマイズは上手くいきませんね。
ですが、コードの間違いに気付くのはなかなか難しいです。。。

初心者の方は、おそらくコードをコピペすることが多いと思います。

コードをコピーする時に、コピーし忘れている部分がないか、余分なものまでコピーしていないか、しっかりチェックするといいですね。

コードの並び順を変える

コードに間違いがない場合、コードの並び順を変えることで、うまく反映される場合があります。

この時は、テーマのHTML編集画面を使います。

*テーマのHTML編集がはじめての方はこちらをどうぞ→テーマのHTML編集をする

テーマのHTML編集画面でサーチ窓を開き、</b:skin> の場所を探します。

</b:skin> より上の部分に「CSSを追加」したコードがあります。


CSS を追加した部分


例えば、次のカスタマイズが反映されなかった場合。

このカスタマイズで追加した、次のコードを探します。

/*↓蛍光ペン風マーカー↓*/
b {
background: linear-gradient(transparent 60%, #ffccdd 60%);


見つかったら、コードを切り取って、追加した他のCSSよりも上に貼り付けます。


コードを切り取って上の方に貼り付ける

*切り取る時は、コードに過不足がないよう、慎重にお願いします(*^-^*)

*HTML編集が終わったら、忘れずに保存しましょう💾

HTML編集の前にはバックアップを取ることが基本ですが、カスタマイズのお試し用にサンプルブログをいくつか立ち上げておくと便利です。


このエントリーをはてなブックマークに追加




QooQ