スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

スポンサー広告 / コメント(-)/ トラックバック(-) / BLOG TOP△

ブログカスタマイズ 01

honu02.jpg はじめまして。
『Makani-Kane』です。
 このブログの管理人Makaniとの関係は非公表です。
 Makaniは、なぞの人でいたいらしいです。「きっこのブログ」を目指しているんでしょうか。

 FC2ブログユーザー限定記事となりますが、テンプレートのカスタマイズ方法をときどき書いてみようと思います。
 けっしてしばらくハワイに行けそうにないMakaniのハワイねたを節約するためのいきおい思いつき企画ではありません。
 あなたのために、一生懸命に書いたものです。十分な知識もないのにです。

 ちなみに『Kane』は、ケインではなく、カネと読み、ハワイ語で男性を意味します。カメでもありません。

テンプレートの編集(ご注意)

 ほぼFC2ブログ限定の記事となります。
 申し訳ないですが、あなたのブログが崩壊しても責任は持てませんので、現在の状態を必ず、エディタなどにコピペして保存した上で、試してみてください。
 同じテンプレをダウンロードして、そちらでカスタマイズを 試していただいて、現在使用中のものをいじらないで置くことを推奨します。
 そして、どの記述を直しているのかを覚えておいて少しずつ確認しながら行ってください(プレビュー機能で、トップページのみ確認できます。その他のページは、実際にテンプレ変更しないと確認できません。)。

 なお、質問にお答えする時間まではとれそうにありませんのでご勘弁ください。
 これをきっかけにこのサイトなどで勉強されてみてはいかがでしょう。
     とほほのWWW入門
          http://www.tohoho-web.com/www.htm

 FC2ブログのテンプレは、作者によりクラス名などが区々ですので、適宜読み替えてください。ヒントは書いていくつもりです。
 半角英数を使用します。スペースも半角をあけてください。

  FC2ブログを始めてみませんか。
    そのまま使えるテンプレも豊富。デザインの完全カスタマイズもできます。
   外出中でも記事がアップできる、タイマー予約投稿サービスも開始。
    システム安定、再構築3秒で利用者も100万人突破、国内1位独走中。

文字サイズ、色、行間隔などの変更

 FC2ブログは、スタイルシート(CSS)を利用しています。
 これは、デザインなどを指定するものです。
 文字サイズや色、行間隔などを変更するには、「テンプレートの設定」→「スタイルシートの編集」の部分をカスタマイズしていきます。

 今日は、第一段階しか説明できませんので、必ず練習用テンプレのみいじってください。


ブログ全体の文字サイズや色、行間隔などの変更

body{
   font-size: 12px;      // 文字サイズ
   color: #FF0033;      // 文字色
   line-height: 130%;    // 行間隔
}

 スタイルシート(CSS)の一番はじめ辺りにあると思います。
 bodyが、ブログ全体(HTMLの<body>タグで囲まれているところ)の一般規定となります。
 数字をいじってみても、変化しない部分があると思います。
 これは、後の方で特別の規定がしてあるからです。
 スタイルシートでは、後ろに書かれている特別規定が優先適用されます。
 リンクや、本文、メニューなどで特別の規定がされていると、そちらが優先されるのです。

 単位は、テンプレによってばらばらなので、数字の部分のみを変えて変化を確認する方法でお願いします。「;」まで消さないようにしてください。
 大きく変えると変化がよく分かります。

 文字色は、#で始まります。
       http://www.kanzaki.com/docs/colortable-t.html
       http://www.eonet.ne.jp/~lcs/html/Color2.html
  などにカラーチャートがあります。


 次回はいつお会いできるか分かりませんが、
どうぞお見知りおきをお願いします。『Makani-Kane』でした。


 アクセスアップには、Pingoo!が不可欠アイテム。
記事を書いたらすぐ複数のPINGサイトへ一斉配信できます。もちろん無料です。
とりあえず、この2つの審査に通れば、一人前のブログ?
      リンクシェア アフィリエイト紹介プログラム
世界中の空港で ビジネスクラス用ラウンジが 無料で使えるカード


JCB 『ハワイの風』 更新おしらせRSS

        ※  右上にこのブログ内記事専用の検索窓を付けてます。
          知りたい単語を入れて検索ボタンを押してみてください。

ハワイのお得な歩き方

ハワイのお得な歩き方 ハワイの格安旅行術わたしのサイトです。
  安心でお得なハワイ旅行の
 ための情報を満載しました。

              Keep the NorthShore COUNTRY
     Mahalo
ブログカスタマイズ / COM(9) / トラックバック(-) / BLOG TOP△


 Comment to this entry 
★ From ゆっこ

初めましてMakani-Kaneさん!
ぜひぜひこれからも書いて下さい!
ここ最近ずーーーっとテンプレートを変えたくて色々探してたんですが、自分の好きなのが見つからず。。。
カスタマイズすっごいしたい!
って思ってたんです!
けど・・・どこをどうやって変えたらいいのか。。。

そこで質問なんですが、写真の周りに白い枠をつけるには、どうしたらいいですか?
カスタマイズ初心者なので、どこをどうやって変えたりコピペしたらいいのか詳しくご指導お願いしますi-220

2006.10.06.Fri / 14:39 / [ 訂正 ] / PAGE TOP△
★ From Makani

>ゆっこ。さん
Makani-Kaneが、帰宅していないのでわたしがお応え。
ゆっこ。さんだから特別サービス。

<わたしのブログ>のは、
1,スタイルシート(CSS)の方に次を追加する。
(.entry-bodyが並んでるところへ)

.entry-body img.photo{
border-top: 2px solid #ccc;
border-left: 2px solid #ccc;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}

.entry-bodyの部分はテンプレにより異なる。 .main_txtとか.t_bodyとか、
いろいろ。記事本文の部分の設定。
pxの数字を変えれば枠の幅が変わる。
上をコピペでOKですが「.」で始めて「}」で終わるのも忘れないで。
文字、スペースはすべて半角

2,記事に画像をアップするとき
<img src=~>
となるところを、
<img class="photo" src=~>
に毎回変える(変えないところは、枠が付かないままになる)。

<上級編>
 http://www.koikikukan.com/archives/2006/01/30-235209.php

こちらは、「影」の画像をファイル保存しておいて、
その画像の上に、重ねて画像を表示させる方法。

ここも参考に。
  http://blog.fc2.com/custom_manual/
  

2006.10.06.Fri / 20:06 / [ 訂正 ] / PAGE TOP△
★ From めー

Makani-Kaneさんaloha!
読んでてウキーーーッってなってしまった(泣)
だめ・・・こういうのとっても弱いです・・・。
こういうのが理解できるのもすごいですが それを説明できちゃうMakani-Kaneさん(Makaniさんも!)尊敬です・・・。
一度慣れたブログを変更なんて絶対考えられない私です・・・。
ごめんなさい。全然意味ない投稿で~~~

2006.10.06.Fri / 21:54 / [ 訂正 ] / PAGE TOP△
★ From Makani-Kane

>めーさん
ありがとうございます。
よろしくお願いします。
今回の記事とコメントは、
スタイルシート(CSS)がいじれるブログならば
FC2でなくても使えますよ。

作業前に全部をどこかにコピペ保存しておけば、
失敗しても元に戻せますから、
楽しくできますよ。

2006.10.07.Sat / 06:14 / [ 訂正 ] / PAGE TOP△
★ From ゆっこ

Makaniさん特別にありがとうございます!
明日は家に引きこもる予定なのでさっそく挑戦してみたいと思いますv-217
きっと私の足跡がいっぱい残ってしまうと思います。。。すみませんi-229

2006.10.07.Sat / 13:26 / [ 訂正 ] / PAGE TOP△
★ From Makani-Kane

ゆっこさんはじめまして。
上に戻って画像を見てください。
この記事だけ<上級編>を試してみました。

WindowsのI.E6で見てるならきれいに
見えると思いますがいかがでしょうか。

他の記事のための設定を残しておく
必要があるので左側にしっぽが出てますが。

なお、FirefoxやOperaだとうまく表示できません。

<上級編>は調整が必要ですし、
このブログと同じ方法が無難だと思います。


この記事の影なしの白い枠なら

.entry-body img.photo{
padding: 5px; /* 白い枠の幅 */
background: #ffffe0;
border: 1px solid #999999; /* 画像の外枠線 */
}

をCSSにコピペと簡単です(他のものは使わず)。
記事の方は、前記と同じ処理が必要。

なお、これはよくコメくださる人限定特別サービスです。

2006.10.08.Sun / 12:11 / [ 訂正 ] / PAGE TOP△
★ From ゆっこ

またまたお邪魔します!
Makani-kaneさん特別サービス有難うございます!
上級編の影見えます~!
今からこのページを開いたまま挑戦してみる予定です!
もちろんまずは白い枠だけでi-229
とにかくカスタマイズ初心者なので、
またご指導のほどお願いしますm(__)m
他にも聞きたい事いっぱいです。。。

2006.10.08.Sun / 12:50 / [ 訂正 ] / PAGE TOP△
★ From Makani

>ゆっこ。さん
画像カスタマイズできましたね。

枠の濃い色と薄い色を逆にすれば、
窓からのぞいているように引っ込んで見えます。
微妙に色を違えるともっと立体的になります。
いろいろアレンジしてみてください。

2種類使い分けたいときは
Photoの部分をべつの記号にすればOK.
(CSSと記事と両方とも新たに同じ作業。)

まずは、ここのできそうなのをやってみては。
http://blog.fc2.com/custom_manual/

2006.10.09.Mon / 18:48 / [ 訂正 ] / PAGE TOP△
★ From TAKAYANG

Makani-Kaneさん、はじめまして!!
この記事、私の為に・・・?
なーんて、思ってしまいました!!!
ブログのカスタマイズは、怖くてなかなか手が出なかったのですが、
詳しく教えて下さって(先日も)、感謝感謝です。
相変わらずのんびりモードでのブログ更新ですが、
少しづつカスタマイズもやっていこうと思います。
ありがとうございますぅ!!(泣)

2006.10.13.Fri / 11:34 / [ 訂正 ] / PAGE TOP△
(非公開)

(訂正用パスワード)
  管理者だけが読めるようにする

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。