『Seesaa』ブログでCSS（スタイルシート）やHTMLを編集する際の手順

【カテゴリ：パソコン　ブログカスタマイズの記録】

『Seesaa』ブログでCSS（スタイルシート）やHTMLを編集する際の手順（方法）です。

ブログのカスタマイズの記事を書く際に編集方法について毎回同じような内容を書く事は（無駄な手間がかかるので）避けたいと思い、まとめて書いておくことにしました。

今後もし『Seesaa』ブログのカスタマイズ関係の記事を書く場合は、今回の記事を参照するような形にしたいと思います。

編集方法は、大きく分けて以下の３つです。

１．CSS（スタイルシート）の編集
２．コンテンツHTMLの編集
３．全体のHTMLの編集

．．．

スポンサーリンク

１．CSS（スタイルシート）の編集

(1) ログインすると以下のような『ブログ一覧』が表示されます。

・『デザイン』をクリックします。

(2) 『デザイン』をクリック後、以下のような『デザイン一覧』が表示されます。

・『デザイン設定』をクリックします。

(3) 『デザイン設定』をクリック後、以下のような『タイトル』を選択する画面が表示されます。

・編集したいタイトルをクリックします。

・タイトルとはデザイン毎に付けられた名前であり、例えばテンプレートを追加した場合は、そのテンプレートの名前がそのままタイトルになっています。

・タイトルの名前を変えたい場合は、編集画面で変更することができます。

・複数のタイトルがある場合、『適用』のラジオボタンを選択することでデザイン（＝スタイルシート）を切り替えられるようになっています。

(4) タイトルのリンクをクリック後、以下のような編集画面が表示されるので、必要に応じて編集します。

・ここに表示されているのがスタイルシートの内容です。

・以下の赤枠の箇所を変更することでタイトルの名前も変更できます。

(5) スタイルシートの編集後は、『保存』ボタンをクリックします。

(6) 『保存』ボタンをクリックすると、以下のように『設定を変更し、ＣＳＳをビルドしました。』と表示されます。

『CSS（スタイルシート）の編集』は以上です。

．．．

２．コンテンツHTMLの編集

(1) ログインすると以下のような『ブログ一覧』が表示されます。

・『デザイン』をクリックします。

(2) 『デザイン』をクリック後、以下のような『デザイン一覧』が表示されます。

・『コンテンツ』をクリックします。

(3) 『コンテンツ』をクリック後、以下のような『コンテンツ』を選択する画面が表示されます。

・HTMLを編集したい『コンテンツ』（ここでは例として『記事』のコンテンツ）をクリックします。

(4) 『コンテンツ』をクリック後、以下のような画面が表示されます。

・右上に表示されている『コンテンツHTML編集』をクリックします。

(5) 『コンテンツHTML編集』をクリック後、以下のような編集画面が表示されるので、必要に応じて内容を編集します。

・うっかり外側の黒い部分をクリックすると、編集画面が閉じてしまうので注意が必要です。（保存せずに閉じてしまうとせっかく編集した内容が無効になってしまいます。）

・スクロールバーを下まで移動させると、以下のように『保存』ボタンがあります。

(6) 『コンテンツHTML』の編集後は、『保存』ボタンをクリックします。

(7) 『保存』ボタンをクリックすると、以下のように『編集を完了しました。』と表示されます。

(8) 元の『記事の設定』画面に戻る場合は、右上に表示されている『記事の設定に戻る』をクリックします。

(9) 『記事の設定に戻る』をクリック後、以下のような画面に戻ります。

・特に変更がなく終了する場合は、右上に表示されている『×』（バツマーク）をクリックします。

(10) 『×』（バツマーク）をクリック後、以下のような画面に戻ります。

(11) 新規に追加したコンテンツがあるような場合は、『保存』ボタンをクリックします。（既存のコンテンツを編集しただけであれば、ここで『保存』をクリックする必要は無いです。）

(12) 『保存』ボタンをクリックすると、以下のように『設定を変更しました。』と表示されます。

『コンテンツHTMLの編集』は以上です。

．．．

３．全体のHTMLの編集

(1) ログインすると以下のような『ブログ一覧』が表示されます。

・『デザイン』をクリックします。

(2) 『デザイン』をクリック後、以下のような『デザイン一覧』が表示されます。

・『HTML』をクリックします。

(3) 『HTML』をクリック後、以下のような画面が表示されます。

・右上に表示されている『HTMLの追加』をクリックします。

・『デフォルトHTML』は変更できないようになっているため、最初に追加をしてから、その追加したHTMLを変更する形となります。

(4) 『HTMLの追加』をクリック後、以下のようなHTMLの編集画面が表示されます。

・『ＨＴＭＬ名』を入力します。

(5) 『HTML』の内容を必要に応じて編集し、編集が終わったら『保存』ボタンをクリックします。

(6) 『保存』ボタンをクリック後、以下のような元の画面に戻ります。

・追加した『HTML』が表示されています。

(7) 編集した『HTML』を有効にさせるには、『適用』のラジオボタンを選択して切り替えます。

(8) 『適用』のラジオボタンを選択して切り替えると、以下のように『設定を完了しました。』と表示されます。

(9) 再度『HTML』を編集する場合は、HTMLの名前の箇所をクリックします。

(10) HTML名をクリックすると以下のようなHTMLの編集画面が表示されるので、必要に応じて編集します。

(11) 編集が終わったら『保存』ボタンをクリックします。

(12) 『保存』ボタンをクリックすると、以下のように『設定を完了しました。』と表示されます。

．．．

以上です。

スポンサーリンク