FC2ブログでCSSの編集を行う方法

私は、ワードプレスの他にもFC2ブログを使っています。

ワードプレスでは、以前、外観→テーマの編集画面でCSSの編集を行えると説明しましたが

実は、無料ブログであるFC2ブログでもCSSの編集を行うことができます。

スポンサーリンク

FC2ブログでCSSの編集を行う方法

まずは、FC2ブログにログインします

1、管理画面の左側のメニューの 設定 の

テンプレートの設定 をクリックします

2、テンプレートの設定 画面が表示されます

テンプレート管理(PC) で 現在使用しているテンプレートの 複製 をクリック

※CSSの編集を行って何か不具合が合った場合に、すぐに元に戻せるように複製を作っておいたが方がよいです。

上の写真のように青枠が現在使用中のテンプレートです

そのテンプレートの複製をクリックします(赤枠)

3、先ほど複製したテンプレートにチェックを入れます

複製したテンプレートは、現在使用中のテンプレートの名前の後ろに 1 がつきます

上の例は、一度複製したことがあるので最初から1がついています

その複製になりますから 11になります

↑ここにチェックを入れる

4、適用 をクリックします

すると PC用テンプレートを○○○に変更しました。 と赤文字で表示されます

これで複製したテンプレートが適用されました。

※そのテンプレートの名前をわかりやすい名前に変更したい場合は

テンプレート名変更 にわかりやすい名前を入力して 更新 をクリックしてください

5、次に画面の下の方を見ていくと

○○○のHTML編集
○○○のスタイルシート編集
という項目があります

ここでCSSやHTMLの編集を行います

例えば、グーグルサーチコンソールにサイトを登録する場合などでは、

HTML編集画面を使います。

今回は、CSSの編集なので

下の スタイルシート編集の画面 で編集を行っていきます。

ここにCSSコードを書き込んでいきます。

たくさん指示コードなどが書かれていますので

新たな指示コードを書き足す場合は

スクロールして一番下の余白にCSSコードを書き込みます

FC2ブログで自分の好みのデザインの見出しを
使いたい場合は?

1、まずは、スタイルシート編集画面にCSSコードを入力する

見出しに使うCSSコードに関しては、

フリー素材であなたのお好みのデザインを探して

そのCSSコードを入力してください

「 見出し CSS 」などで検索するとでてきます

なかなか見つからない場合は

「 CSSで作る見出しデザイン | Web’Notes  」

というサイトに詳しく書かれていましたので参考にしみてはいかがでしょうか。

好みのデザインの見出しが見つかったら

先ほど説明した

○○○のスタイルシート編集

の画面の余白にCSSコードを入力します

スクロールすると余白がでてきます。

CSSコードを入力したら 更新 をクリックして変更を反映させます

しかし、それだけは、見出しが表示されません。

2、次に、記事側(記事の本文)にも指示コードを入力する

記事の本文には、以下のように書き込んでみます。

<div class="midashi01">ここに好きなテキストを書き込む</div>

 

※わかりやすくするために青色にしているだけです。同じ色の文字で問題ありません

※これは、スタイルシート編集画面に入力するCSSコードが

.midashi01{
position: relative;

以下略

の場合です

.midashi01  の部分は自分の好きな英数字に書き換えてもかまいません

その代わり、スタイルシート編集画面側(CSS側)と記事の本文側は、同じ英数字にしてください

例えば、スタイルシート編集画面側(CSS側)の最初の部分を

.sample

等に変更してもかまいません

※変更してよいのは、当たり前ですが、  { の左側の英数字だけです

※その際は、必ず、スタイルシート編集画面側(CSS側)→ .sample

  記事の本文側→ sampleと入力します。

記事の本文側に入力するコード

<div class="sample">ここに好きなテキストを書き込む</div>

スタイルシート編集画面に入力するCSSコード

.sample{
position: relative;

以下略

というようになります

h1 h2などのタグとして見出しを利用したい場合は

記事側のコードは以下のようになります

<h2 class="midasi01">ここにテキストを書き込む</h2>

※h2タグの見出しとして使用する場合

<h2 class="midasi01">ここにテキストを書き込む</h2>

青色の前後、2箇所が変更になります

テンプレート側(スタイルシートの編集)のCSSコードは、

変更する必要がありません

すると記事の本文では、普通のテキストにしか見えませんが

ネット上で確認してみるとちゃんと見出しが表示されているはずです

※もし表示されない場合は、コントロールキー(ctrl)とF5キーを同時に押してみてください

ただ、実際に試してみると

ワードプレスの場合は、ほぼ100パーセントうまく表示されるの

ですが、FC2ブログだと

CSSコードを入力して見出しを作っても若干デザインが崩れたりする場合がありました。

この場合、CSSコードの各数値の変更が必要になる場合があります。

どうしてもCSSの編集が苦手な場合は

「 見出し FC2ブログ 」と検索するとCSSを使わないHTMLで作った見出しもいくつか紹

介されていました。HTMLで作った見出しを使ってみるのもよいでしょう

スポンサーリンク

シェアする

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

フォローする