so-netブログカスタマイズ その3 ブログを設置して、幅を大きくしてみる [so-netブログカスタマイズ]
下準備ができたら、ブログのカスタマイズに入ります。
すでにブログを設置している方は「続きを読む」まで飛ばしてください。
まだブログの設置をしていない人はここからとりあえずクレジットカードを登録しない方でコンテンツコースに入会し、ブログを設置してね。
ブログを開始すると最初にデザインを選ぶ画面が出ますので、ここでは「田舎」の3ペインを選んでください。
次にURL（http://○○○○○.blog.so-net.ne.jp/ の○○部分）を入力します。これがあなたのURL。サイトの名前と同じか、関連したものにするとよいでしょう。次はタイトルとブログの紹介文を入力。紹介文はタイトルの下に表示されます。タグは検索されやすくなったりしますので、ブログの記事に関連するキーワードを入れます。
ここまでできたら、下のデザインテンプレートの変更を飛ばして先に進んでください。
ブログの設置ができたら、まずデザインのテンプレートを変更します。今回はテンプレートから田舎を選び、これを元にカスタマイズします。
このテンプレートを選ぶ理由は、ヘッダー（いちばん上の画像部分）が記事の中まで入り込んでいて、デザインのアクセントになっていることです。他のテンプレートを見てもらえばわかりますが、たいていのものはヘッダーの下には画像があっても記事の中までは入り込んでいません。
テンプレートの変更は、
デザイン→自然・風景→田舎→このデザインを追加する→3ペインを選ぶ
で行います。
さて、テンプレートが「田舎」になったら、FireFoxを起動してブログを表示させます。初めてブログを設置した方は、新規作成から適当なタイトルと記事を書き込んで保存してから表示させてね。
今回は自分のブログの変更を同時に行いながらこの記事を書いていますが、ログインして記事を書いたりページの変更をするのに使うブラウザーはOPERA、表示の確認はSleipnir、FireFox、ChromePlusでやっています。
今回のカスタマイズ内容は、
幅を広げる
画像を変える
文字を変える
です。
「田舎」は幅が770pxと少々狭いので、1000pxまで広げます。ワイドモニターで1280px以上が普通になってきていると思うので、このくらいの幅でも問題ありません。たぶん。
最初はこんな画面です。YouTubeの画面が、幅が狭いので切れていますね。見栄えが悪いので、ここらへんから手をつけましょう。
ここからカスタマイズ開始です。
画面の上で右クリックして、Save Complete Page Asを選び、適当なフォルダーにこの画面を保存します。FireFoxにSave Completeを追加しておかないとコンテキストメニューにSave Complete Page Asは表示されませんよ。まだ入れていない人は最初から読み返してね。
次に幅を広げてみます。
ブログやウェブサイトはたいてい、ページの構成そのものを記述するHTMLという言語と、カスケード・スタイルシート（CSS）というデザインを決定する言語で構成されます。
カスタマイズの多くはCSSの変更で行います。
では幅を変更してみますか。
メニューから、
デザイン→テンプレート管理→タイトルのところにある「田舎」をクリックすると、CSSが表示されます。
ここから基本操作なので、CSSの変更は以下の要領で行ってください。
1．CSSの記述してあるフレーム内で、CTRL+A→CTRL+Xですべて切り取る
2．テキストエディターに貼り付け
3．width770を1000に変更
20行目にある、Widthが全体の幅の寸法です。これを1000pxに変更します。
同じように、761行にある、/*-----Footer-----*/ というところのwidthも1000pxにします。
このときに気をつけるのは、「；」とか「：」とか「．」を消してしまったりしないこと。ドットがひとつないだけで指示通りの動作をしなくなったりしますので、数値だけ変えてください。
基本的に日本語は使わないので、IMEはOFFにして入力します。
できましたか？ 変更したらテキストエディターでCTRL+A→CTRL+Cですべてコピーして、ブラウザーのCSS部分（さっき切り取ったところ）に貼り付けて保存します。
保存が終わったら、ブログを表示させます。ブラウザーで表示させていたら、更新ボタンを押してね。
変更が反映されていたら、こんな感じに表示されるはずです。
あらら、右側のペインが枠の外に放り出されてしまいました。
さて困った。
とういうわけで、続く。
すでにブログを設置している方は「続きを読む」まで飛ばしてください。
まだブログの設置をしていない人はここからとりあえずクレジットカードを登録しない方でコンテンツコースに入会し、ブログを設置してね。
ブログを開始すると最初にデザインを選ぶ画面が出ますので、ここでは「田舎」の3ペインを選んでください。
次にURL（http://○○○○○.blog.so-net.ne.jp/ の○○部分）を入力します。これがあなたのURL。サイトの名前と同じか、関連したものにするとよいでしょう。次はタイトルとブログの紹介文を入力。紹介文はタイトルの下に表示されます。タグは検索されやすくなったりしますので、ブログの記事に関連するキーワードを入れます。
ここまでできたら、下のデザインテンプレートの変更を飛ばして先に進んでください。
ブログの設置ができたら、まずデザインのテンプレートを変更します。今回はテンプレートから田舎を選び、これを元にカスタマイズします。
このテンプレートを選ぶ理由は、ヘッダー（いちばん上の画像部分）が記事の中まで入り込んでいて、デザインのアクセントになっていることです。他のテンプレートを見てもらえばわかりますが、たいていのものはヘッダーの下には画像があっても記事の中までは入り込んでいません。
テンプレートの変更は、
デザイン→自然・風景→田舎→このデザインを追加する→3ペインを選ぶ
で行います。
さて、テンプレートが「田舎」になったら、FireFoxを起動してブログを表示させます。初めてブログを設置した方は、新規作成から適当なタイトルと記事を書き込んで保存してから表示させてね。
今回は自分のブログの変更を同時に行いながらこの記事を書いていますが、ログインして記事を書いたりページの変更をするのに使うブラウザーはOPERA、表示の確認はSleipnir、FireFox、ChromePlusでやっています。
今回のカスタマイズ内容は、
幅を広げる
画像を変える
文字を変える
です。
「田舎」は幅が770pxと少々狭いので、1000pxまで広げます。ワイドモニターで1280px以上が普通になってきていると思うので、このくらいの幅でも問題ありません。たぶん。
最初はこんな画面です。YouTubeの画面が、幅が狭いので切れていますね。見栄えが悪いので、ここらへんから手をつけましょう。
ここからカスタマイズ開始です。
画面の上で右クリックして、Save Complete Page Asを選び、適当なフォルダーにこの画面を保存します。FireFoxにSave Completeを追加しておかないとコンテキストメニューにSave Complete Page Asは表示されませんよ。まだ入れていない人は最初から読み返してね。
次に幅を広げてみます。
ブログやウェブサイトはたいてい、ページの構成そのものを記述するHTMLという言語と、カスケード・スタイルシート（CSS）というデザインを決定する言語で構成されます。
カスタマイズの多くはCSSの変更で行います。
では幅を変更してみますか。
メニューから、
デザイン→テンプレート管理→タイトルのところにある「田舎」をクリックすると、CSSが表示されます。
ここから基本操作なので、CSSの変更は以下の要領で行ってください。
1．CSSの記述してあるフレーム内で、CTRL+A→CTRL+Xですべて切り取る
2．テキストエディターに貼り付け
3．width770を1000に変更
20行目にある、Widthが全体の幅の寸法です。これを1000pxに変更します。
同じように、761行にある、/*-----Footer-----*/ というところのwidthも1000pxにします。
このときに気をつけるのは、「；」とか「：」とか「．」を消してしまったりしないこと。ドットがひとつないだけで指示通りの動作をしなくなったりしますので、数値だけ変えてください。
基本的に日本語は使わないので、IMEはOFFにして入力します。
できましたか？ 変更したらテキストエディターでCTRL+A→CTRL+Cですべてコピーして、ブラウザーのCSS部分（さっき切り取ったところ）に貼り付けて保存します。
保存が終わったら、ブログを表示させます。ブラウザーで表示させていたら、更新ボタンを押してね。
変更が反映されていたら、こんな感じに表示されるはずです。
あらら、右側のペインが枠の外に放り出されてしまいました。
さて困った。
とういうわけで、続く。
M-1 さん
-
nice! 18
記事 9
テーマ パソコン・インターネット
プロフィール
ブログを紹介する
休日の経済を消費の増加を活性化する。
by Air Jordans (2011-01-10 12:48)
ソネブロのブログ幅と記事エリア幅の調整をしたくて検索して、このブログにたどり着きました。わかりやすくてほんとに助かりました。トラックバックも初めて使いたいのですがよろしいでしょうか？
よろしくお願いします。
ありがとうございました。
by Klinsmann (2012-02-18 21:11)