頑張らない!でも諦めない!必死にならずにええかげん

Seesaa™ブログでCSSによるカスタマイズを行う方法

      2014/11/22

Google or AdMax Promotion(it)

Seesaaブログを利用していて、少し不便だなと感じるのが、
レイアウトの調整ではないですか?
既存のコンテンツも含めてCSSでカスタマイズができたら便利なのに、
CSSの変更方法がわかりにくいだけで、ちゃんと変更できるんです。

はじめに

Seesaaブログの既存の要素をCSSで調整する方法をご紹介します。
HTMLの編集と同じようにリンクがあって、、、ないや orz…
と、諦める必要はありません。

CSS編集も認められている

Seesaaブログの画面構成が少しわかりにくいだけで、
CSSの変更をする画面も用意されています。

ブログにログインし、いつもの新規投稿の画面を開きます。
サイドメニューから[デザイン]を選択します。

01_サイドバーのデザイン選択

サイドバーのデザイン選択

デザイン一覧画面から、上部の[PC]タブが選択されていることを確認し、
[デザイン設定]をクリックします。

02_デザイン設定の選択

デザイン設定の選択

デザイン設定画面で下にスクロールしていくと、
現在適用されているデザインのテーマが一覧で表示されます。

このテーマ名をクリックします。

03_編集するテンプレートタイトルの選択

編集するテンプレートタイトルの選択

CSS編集画面

テーマ名をクリックすると表示される画面からCSSの編集が行えます。

上部にリンクで[ページ: トップ|記事|過去ログ|カテゴリ]と表示されていますが、
初期状態では[トップ]のみにCSSが設定されており、
全ページに[トップ]で指定したCSSが適用されるようになっています。

お勧めはしませんが、個別にページの種類で表示を切り替えたい場合には、
トップのCSSをコピーして、記事・過去ログ・カテゴリに貼り付けた上で、
修正をするようにしましょう。

尚、CSSの複製機能は見当たりません。

04_CSS編集画面

CSS編集画面

05_トップ以外のCSSは未定義

トップ以外のCSSは未定義

タイトル文字色の変更例

では、実際にCSSの編集を利用して、ブログタイトル文字の色を変更してみます。
変更する前の状態は以下のような状態です。

06_CSS変更前の状態

CSS変更前の状態

CSS編集

CSS編集画面を開き、ヘッダに利用されているh1タグの記述を探します。
文字色は白が設定されています。

これを以下のように変更し、紺色に変更します。
※尚、元の設定は残しています。

追記が完了したら[保存]をクリックして反映します。
※念のため保存前にはプリビュー機能を利用されることをお勧めします。

CSSの保存が完了すると以下のようにメッセージが表示されます。
[設定を変更し、CSSをビルドしました。]

07_CSSの変更と保存

CSSの変更と保存

ブラウザからの表示確認

実際にブラウザから表示を確認すると以下のように変更されて表示されます。

08_変更後の表示

変更後の表示

※CSSをトップページにのみ設定している場合には、
記事・過去ログ・カテゴリページにおいても、同じ変更が反映されて表示されます。

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

こうしてCSSの編集が利用できることから、
概ね好みに合っているデザインテンプレートを設定した後に、
個別に自分にあったCSSを設定していくとカスタマイズの幅が広がっていくと思います。


Seesaaはシーサー株式会社の登録商標(第5049965号)であり、
Seesaaロゴはシーサー株式会社の登録商標(第5137457号)です。
Seesaaブログはシーサー株式会社のサービス名です。
Seesaaのサービスに用いられるアイコンその他のマーク等は、
シーサー株式会社の商標であり、シーサー株式会社の著作物です。

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

 - Seesaa, 無料ブログ , ,

  関連記事