Blogger.comブログのヘッダーセクションをカスタマイズする

かもしれません 15, 2024

前回のチュートリアルでは、Bloggerのリンクセクションをカスタマイズしました^TM ウェブログ。次に、ブログの上部にあるヘッダーセクションをカスタマイズします。ヘッダーには、ブログのタイトルと説明が含まれます。テキストの書体またはフォントを変更し、色付きの背景を追加します。

前回のチュートリアルと同様に、テンプレートのHTMLコードの数行を変更することにより、これらの改善を行います。ページ上部のメニューの[テンプレート]タブをクリックすると、[現在のテンプレートの編集]セクションに移動します。下のボックスにテンプレートのHTMLコードがあります。 CSSスタイルコードにいくつかの変更を加えます。（カスケードスタイルシートの詳細については、以下のリンクを参照してください。）CSSスタイルタグ内のヘッダーセクションに到達するまで、コードを下にスクロールします。ご覧のとおり、スタイルタグは非常に長く、スタイルタグのヘッダーセクションには6つの部分があります。

@media all
@mediaハンドヘルド
＃ブログのタイトル
＃blog-title a
＃blog-title a：hover
＃説明

コードの最初の部分（@media all）は、幅、マージン、境界サイズなどのヘッダーの特性を制御します。 2番目の部分（@mediaハンドヘルド）は、これらの特性を最初の部分から継承し、ハンドヘルドモニターのヘッダーの幅を90％に変更します。両方のインスタンスで新しい背景色を使用するため、最初の部分（@media all）に背景色のコード行を追加します。この新しいコード行は、以下の太字で示しています。以下の例では、明るい灰色を使用していますが、お好きな色を自由に使用してください。

@media all {
#header {
背景色：＃EFE3EF;
...
次に、タイトルの書体を、Comic Sans MSと呼ばれる人気のあるカジュアルなスタイルのフォントに変更します。もちろん、好きなフォントを自由に使用できます。テンプレートのCSSコードの次の3つの部分（＃blog-title、＃blog-title a、＃blog-title a：hover）は、ブログのタイトルの特性を制御します。最初の部分は一般的な特性を制御し、他の2つの部分はテキストがハイパーリンクとして機能しているときのテキストの外観を制御します。すべてのインスタンスでタイトルの書体またはフォントを設定するには、フォントファミリのCSSコードを最初の部分（＃blog-title）に追加します。フォント名にはスペースが含まれているため、引用符で囲む必要があります（「comic sans ms」）。

＃ブログのタイトル {
font-family： "comic sans ms";
...
最後に、ブログの説明（#description）のCSSコードに取り組みます。これは、元の6つの最後の部分です。以下に示すように、説明テキストのフォント特性を制御するCSSコードはすべて1行にまとめてリストされています。行う必要があるのは、Comic Sans MSを説明テキストのデフォルトフォントにするフォントのリストの先頭に「comic sans ms」を追加することです。

#description {
...
フォント：78％/ 1.4em 「コミックsans ms」、「Trebuchet MS」、Trebuchet、Arial、Verdana、Sans-serif;
...
}

完了したら、[プレビュー]ボタンをクリックして変更をプレビューし、ブラウザーウィンドウを閉じて前のWebページに戻ります。 [テンプレートの変更を保存]ボタンをクリックします。変更が保存されたことを示す確認メッセージが表示されたら、[再公開]ボタンをクリックします。ブログが更新されたことを確認するには、ページ上部のメニューで[ブログの表示]タブをクリックします。変更を確認するには、ブログのWebページを更新する必要がある場合があります。

Google Inc.の許可を得て転載したスクリーンショットGoogle^TM、ブロガー^TM およびBlogSpot^TM は、米国および/またはその他の国におけるGoogle Inc.の登録商標または商標です。

動画の説明: WordPress ヘッダー画像の作り方 (かもしれません 2024).

Blogger.comブログのヘッダーセクションをカスタマイズし、HTML、Bloggerブログのタイトルと説明を変更、Bloggerテンプレートの書体を変更、Bloggerテンプレートに色付きの背景を追加、BloggerテンプレートのCSSコードを変更、BloggerテンプレートにCSSコードを追加、Bloggerテンプレートフォント、Bloggerテンプレートフォントファミリ、CSSスタイルタグ