BloggerでCSSを追加する方法–BloggerでCSSを理解する

BloggerにCSSを挿入または追加し、BloggerでCSSを理解する雪の秋、3Dフォント、ネオンテキスト、ボックスの影のようなあなたのブログにいくつかのクールな効果を追 CSS、それは何ですか? CSSはカスケードスタイルシートとして知られており、ブログのルックアンドフィールを記述するために使用されたり、他の言葉でHTML要素の表示方法を定義 CSSについて学ぶ前に、HTMLについて知っておくことをお勧めします。 CSSにはたくさんのリソースがあり、初心者でもCSSの基本的な要素を簡単に理解することができますが、それを習得するには多くの時間と実践的な知識

CSSは要素を美化する上で最も重要な役割を果たし、デフォルトではすべてのBloggerテンプレートには独自のCSSコードがあります。 いつでもあなたのブログのデザインをさらに美化したい場合は、カスタムCSSを追加することができます。 私たちのブロガーのチュートリアルのいくつかでは、我々はこの記事を見て、例えばCSSコードを追加するために私たちの訪問者を言及しているが、初心者のほ それらのほとんどは、単に彼らのテンプレートファイルを開き、bを見つける:スキンタグといくつかの方法で最終的に彼らのテンプ Bloggerは、あなたのブログのための魅力的な外観を達成するために、デフォルトのCSSコードを上書きするテンプレートデザイナーで独自のカスタムCSSを追加す ここでは、BloggerにCSSを挿入/追加する方法を紹介します。

BloggerにCSSを挿入/追加する方法–BloggerでCSSを理解する

CSSを追加する前に、CSSを記述する必要があり、CSSスタイルコードを記述する前に、スタイルを変更するセ あなたは、要素を検査するためにあなたのブラウザの開発者のツールを利用することができます、ここではそれについての詳細を行っていません。 たとえば、一般的にh1、h2、h3、h4、h5、およびh6タグについて知っていて、これらのフォントを変更するには、以下のようなCSSを追加できます。

h1 {font-family: "Times New Roman", Times, serif;font-size: 15px;font-weight: bold;color: rgb(56, 77, 187)}

しかし、要素クラスがわからないときに、ページレイアウト、メニュータブスタイル、リンク、フォントファミリ、配置、背景またはテキストの色を変更す これは、あなたのブラウザ開発者のツールを利用する必要がある場所です。 要素を右クリックしてから、inspect elementをクリックすると、左側に要素が表示され、右側にCSSが表示されます。 CSSコードを変更して、変更の結果を確認します。たとえば、メニュータブのCSSコードがあり、テンプレートでは異なることがわかります。

.tabs-inner .widget li a:hover {color: #fff;background-color: #FF9900;text-decoration: underline;display: inline-block;padding: .6em 1em;font: normal normal 15px 'Trebuchet MS', Trebuchet, Verdana, sans-serif;border-left: 1px solid #ffffff;border-right: 1px solid #dddddd;}

BloggerでCSSを追加する方法、Blogger
でカスタムCSSコードを追加するinspect elementツールを使用すると、任意の要素のCSS変更をプレビューでき、目的の外観を取得したときにCSSコードを取得してブログで実行できます。

BloggerでCSSを適用する

BloggerでCSSを実装するには、テンプレートファイルを直接編集する方法と、Blogger template designerでCSSを追加オプションを使用する方法があります。

Blogger template designerを使用してCSSを追加

CSSを追加することは、コアテンプレートファイルに影響を与えないため、最も簡単で安全な方法です。 カスタムCSSを追加する以外に、Blogger template designerを使用すると、簡単に幅、レイアウト、フォントスタイル、色、ガジェット領域、フッターの内容などを調整し、あなたのブロ

  • Bloggerブログにログインし、テンプレートに移動し、カスタマイズBloggerテンプレートデザイナーでCSSを追加する、BloggerカスタムCSS
  • 今、あなたは5つのいくつかのオプ
  • 次に、右側にフィールドが表示され、ここでカスタムCSSを追加する必要があります。

BloggerにCSSを追加し、カスタムCSSファイルを挿入してデザインを変更する

上記のカスタムCSSコードを追加し、以下の変更を参照し、すべてが完了したら、上部の”ブログに適用”をクリックしてください。

Bloggerテンプレートを編集してCSSを追加する

CSSを適用するもう一つの方法は、コアCSSを直接編集するか、テンプレートファイルにカスタムCSSを追加するこ 不適切な使用は、あなたのテンプレートを破るためにつながる可能性があるため、私たちは、初心者のためにこの方法をお勧めしません。 このメソッドを使用してCSSを追加する前に、必ずバックアップしてください; Bloggerテンプレートをバックアップおよび復元する方法は次のとおりです。

  • Bloggerダッシュボードで、テンプレートに移動し、HTMLの編集をクリックします
  • 今、あなたはあなたのテンプレートコードが表示されます、CTRL+Fを押して検索し、<b:skin>
  • <b:skin>を展開すると、あなたのブログテンプレートのCSSが表示されます。

B:skinを展開してbloggerにCSSを追加し、Blogger

にカスタムCSSコードを挿入します。: Blogger blog

の完全なバックアップを作成する方法既存のCSSの編集を開始するか、カスタムCSSを追加することができますが、ここではBlogger template designerで取得するプレ 完了したら最後にテンプレートを保存します。

この記事がBloggerにCSSを追加するためのガイドを願っています。 あなたのblogを美化し始め、より多くのそのような更新を得るために私達のRSSの供給を予約購読しなさい。

タグ:ブログデザイン,Blogger,カスケードスタイルシート,CSS,bloggerのCSS,Webデザイン

Leave a Reply