So-net無料ブログ作成
※ご注意
本ブログに記載されている内容は、それぞれの記事投稿時点の情報です。
2008年2月27日のSo-net blogサービスリニューアルにより、一部内容に変更がある場合がございます。 恐れ入りますが、ご了承いただけますようお願い申し上げます。
なお、So-net blogの使い方につきましては、下記ページをご参照ください。
So-net blog使い方

スキン編集:やじるしアイコン/サイドバー要素をオリジナルにする [スキンカスタマイズ(初級編)]

新機能「カスタムスキン」を使うと、自分の好きなデザインのブログが 作れます。
ただ、「CSS」ってよくわからない・・・。どうすれば自分の好きにできるの??
そんな皆さまからの声にお答えして、数回に分けて「So-net blog スキンカスタマイズ」 を連載いたします。


今回は初級編最終回。長く険しかったCSS編集の旅もいよいよ最後の仕上げです。

自分で作ったデザインだからこそ細部にまでこだわりたいものです。「→」画像やカレンダーの色までカラーコーディネイトすることで、きっと一目置かれるブログデザインになりますよ。

今回も、前回の続きから、カスタムスキンテンプレート「スタンダード1」を書き換えていきます。

  ヘッダーリンクの「→」を変える
準備

「→」は画像を使用しているので、「→」を変更するためには代わりの画像を用意します。
自分で作るのが面倒くさいという方は、以下に「→」画像のカラーバリエーションを用意しましたのでこちらをお使いください。

black :

blue :

gray :

green :
lime :

navy :

olive :

pink :
purple :

red :

yellow :

使いたい画像の上で右クリックして「名前をつけて画像を保存」を選択します。
パソコンに「→」画像を保存したら、それを自分のブログの画像フォルダにアッ プロードします。これで準備はOK。

使い方
  1. 管理ページ>設定>スキン>カスタムスキンを開きます。 保存済みのスキンを選択して「編集」をクリックします。

    ※初めてカスタムスキンを作成する場合には、カスタムスキン画面の「スタンダード1」の下の「スキン作成」をクリックします。

  2. カスタムスキン編集画面を開き、以下の項目にある画像のURLを差し替えます。

    【ヘッダーリンクの「→」画像変更】

    .menuDecoration{
    margin-left:10px;
    padding-left:12px;
    background:url(../custom_img/yellow_R.gif) no-repeat left center; ←ココのURL変更
    }

    【ページ送りリンクの「←」画像(前の○件)変更】

    .previousLink{
    padding-left:12px;
    background:url(../custom_img/yellow_L.gif) no-repeat left center; ←ココのurl変更
    }


    【ページ送りリンクの「→」画像(次の○件)変更】

    .nextLink{
    padding-right:12px;
    background:url(../custom_img/yellow_R.gif) no-repeat right center; ←ココのurl変更
    }


    【ページ送りリンクの「↑」画像(ブログトップ)変更】

    .archive-links{
    float:right;
    padding-left:12px;
    background:url(../custom_img/yellow_T.gif) no-repeat left center; ←ココのurl変更
    }

  3. サイドバーにプロフィールを表示している人はプロフィールの「→」画像も変えておきましょう。

    【プロフィールの「→」画像変更】

    .profileLink {
    padding-left:12px;
    background:url(../custom_img/yellow_R.gif) no-repeat left center; ←ココのurl変更
    }

  4. 「保存」ボタンをクリックし、スキンを保存します。
  カレンダーのリンク色を変える
記事を投稿した日にちのリンク色や背景色を変更できます。

準備

自分の好きな色を選んでください。
カラーチャート

使い方
  1. 管理ページ>設定>スキン>カスタムスキンを開きます。 保存済みのスキンを選択して「編集」をクリックします。

  2. カスタムスキン編集画面が開きます。以下の色指定を自分の好きな色に書き換えます。

    【記事を投稿した日にちの背景色変更】

    #calendar td.link {
    background:#ffd900; ←ココ変更
    font-weight:bold;
    }
    【記事を投稿した日にちのリンク色変更】

    #calendar td a{
    color:#037FE9; ←ココ変更
    }

  3. 「保存」ボタンをクリックし、スキンを保存します。
  細かなところを整える

最後にサイドバーの「読者になる(RSS登録)」の色と、サイドバーの各項目の中にあるリスト(例えば最新記事の一覧の最初の部分)の変更をしてみます。

準備

ここでも、自分の好きな色を選んでください。
カラーチャート

使い方
  1. 管理ページ>設定>スキン>カスタムスキンを開きます。 保存済みのスキンを選択して「編集」をクリックします。

  2. カスタムスキン編集画面が開きます。以下の箇所を書き換えます。

    【サイドバーの読者になる(RSS登録)色を変更】

    #rssRegist {
    margin-bottom:20px;
    padding: 4px 0;
    background: #ffd900 url("../custom_img/arrowR_large.gif") no-repeat left center; ←ココ変更
    text-align:center;
    font-weight:bold;
    line-height:1;
    }


    【サイドバーのリストのスタイルを消す】

    .sidebar-body li {
    padding:3px 0;
    margin-left:5px; ←ココ変更(左余白を少しつめました)
    list-style:none; ←ココ変更
    }

    ※リストスタイルには以下のものも使用できます。
    黒丸: list-style:disc;
    白丸: list-style:circle;
    四角: list-style:square;
    なし: list-style:none;

  3. 「保存」ボタンをクリックし、スキンを保存します。

これでひととおりの変更ができあがりました!

■ブログ教室でカスタマイズしているブログ
http://blog.so-net.ne.jp/blog-class-test/

実はもっとたくさん紹介したいテクニックがあるのですが、まずは基本を紹介しました。
今回紹介したものだけでも自分のだけのオンリーワン・デザインを作ることができるので、是非お試しください。
おまけコーナー

皆さまの質問にお答えしました!
前回の記事にいただきましたご質問にお返事させていただきます。ぜひ皆さま ステキなオリジナルブログを作ってくださいね。

Q:(前略)ヘッダー部分の文字フォントを固定する方法はありませんか?

A:Internet Explorerの場合、ピクセル(px)で指定すると固定されます。
例)
#header {
font-size:11px;
}

ただし、Firefoxなどその他のブラウザでは固定することはできません。

Q:記事タイトルバーやサイドバーに画像を入れることは可能でしょうか?普通 のスキンに入ってるようなものなのですが、タイトル左にある画像です。 それと、記事タイトルバーやサイドバーを画像で作って置き換えたいのですが可 能でしょうか?

A:タイトル左にある画像もタイトルの背景画像も同じ指定方法で実現できます。

●記事タイトルバー
.articles-title {
background:url(画像パス) no-repeat; ←ココに背景画像を追加
}

●サイドタイトルバー
.sidebar-title {
background:url(画像パス) no-repeat; ←ココに背景画像を追加
}

小さな画像を上記の場所に指定すると、タイトル左に小さな画像が表示されます。
大きな画像を上記の場所に指定すると、タイトルバーの背景全体に画像が表示さ れます。
画像を表示させる位置については、前回の記事のおまけコーナーを参照ください。

Q:文字のcenter形式をどこに混入すれば宜しいでしょうか?

A:上の回答と同じ場所で大丈夫です。

●記事タイトルバー
.articles-title {
text-align:center;
}

●サイドタイトルバー
.sidebar-title {
text-align:center;
}

Q:文字を例:「最新記事一覧」⇒「NEW」などに変えたりは出来ないでしょ うか。

A:テキストを変更することはできませんが、画像で置き換えることはできます。
ただ、これは少々難易度が高いです。

まず、文字入りの画像を作成します。
例えば、「PROFILE」というテキストを画像でつくる
次に、サイドバーの「プロフィール」を例に説明すると、下記のようにプロ フィールを指定するセレクタ(#profile)とサイドバータイトルのセレクタ (.sidebar-title)を半角スペースで並べて記述します。
※各セレクタについては使い方を参照してください。 そこにテキスト入り画像の指定と元あったテキストを非表示にします。

#profile .sidebar-title {
background:url(画像パス) no-repeat; ←ココに背景画像を追加
text-indent:-3000em; ←元あったテキストを非表示にする記述
}

Q:レイアウト3にしてるのですが、どうしても記事の初めの方(文頭)の空白 が狭く見づらくなってしまってます。どうすれば直るでしょうか?

A:下記の記述で記事本文の左右に余白を入れることができます。

.articles-body {
padding:0 20px; ←記事本文の左右に20px余白を入れる記述
}

Q:「私にメール」みたいなのを付けたいんですが・・・どうすればいいのか分か りません。良かったら、教えてください。

A:本文、またはサイドバーのカスタムペインに下記の記述を追加してみてはいか がでしょうか?リンクをクリックすると、メールソフトが立ち上がります。

<a href="mailto:ここに送信先メールアドレス">私にメール</a>

※メールアドレスの公開はお客さまのご判断でしていただけますようお願いいたします。公開をすると迷惑メールが増える可能性もあります。


2007-03-15 16:40  nice!(65)  コメント(16)  トラックバック(7) 

nice! 65

コメント 16

mugitea

参考になりました.また次回も楽しみにしています.
by mugitea (2007-03-16 07:05) 

たまちゅん

大分スキンがオリジナルの物になってきましたw
有難う御座います^^
☆⌒(*^-゚)v Thanks!!
by たまちゅん (2007-03-16 13:49) 

小林 ろみ

参考になりました♪
時間があるときに編集がんばろうと思います。
by 小林 ろみ (2007-03-16 20:17) 

MONGOOSE

楽しくブログデザインしています!
少しずつ自分の色に染まってきました。
by MONGOOSE (2007-03-17 13:16) 

pospesian

このブログのように、ブログタイトル部分を全部画像にして
リンクさせるにはどうしたらいいですか?
今まで紹介された方法は、ブログタイトル部分の背景を変更して、
タイトルを文字でリンク、ブログ紹介文を文字で…とありますが、
このブログのように、タイトル部分全部(背景・タイトル・ブログ紹介文)を画像にしたいのです。
タイトル部分の背景を変更することはできましたが、
タイトルや紹介文を消すことができなくて…
by pospesian (2007-03-18 03:44) 

mokaりん

すみません;お伺いしたいのですが・・
ブログに載せるために、画像をアップロードして載せていましたが、
まだブログを始めて数日なのにもうすぐ500MBになってしまいます;;
皆さんのブログをみると沢山の画像や、大きい(要領が多い)画像を沢山載せられていますが、アップロードした画像を削除すると過去に書いたブログの画像まで消えてしまうし;
みなさんどうやって沢山の画像を500MB内でおさえているんでしょうか?
ソネットのQ&Aに問い合わせしてもエラーで送れなくて・・;;;
教えていただけると嬉しいです‥(Pд`q。)・゜・
by mokaりん (2007-03-21 19:52) 

suiginex

>>mokaさん
一応こっちは写真等は縮小ソフトを使っています。
だいたい200KBにしてますが、写真よりイラストみたいなのを主に
載せているのであまり使う事はありませんが…。
参考になりましたでしょうか。なれば幸いです。

因みにしあんさんと同じ疑問を持っています。
by suiginex (2007-03-22 18:59) 

ブログ教室

ご質問ありがとうございます。3/22の記事はスキン編集とは関連のない記事になっておりますので、特別にコメントでお返事をさせていただきます。

>しあんさん、壷壷 さん


すこし難しくなってしまい、申し訳ありません。。

#banner {
background:url(画像パス) no-repeat;  ←画像を指定
height:200px;  ←タイトルバナー高さ指定
clear:both;
}

#banner h1{
}

#banner h1 a{
text-indent:-3000em;  ←タイトルテキストを消す記述
display:block;  ←ここから下3行がリンクを有効にする指定と有効範囲の記述
width:770px;
height:200px;
}

#lead{
text-indent:-3000em;  ←ブログ説明文を消す記述
}


すこし難しいので詳しい説明は省きます。
上記をコピー&ペーストして、画像の指定(background)、
高さ(height)を調整することをおすすめいたします。


>moka さん

お問い合わせフォームがエラーとのこと、本当に申し訳ありません。

壷壷さんからもコメントがありましたが、やはり画像の大きさをなるべく小さくしていただくしか方法がありません・・・。申し訳ありません。
by ブログ教室 (2007-03-23 18:21) 

suiginex

タイトル文字を消す事に成功しました!

本当に有難う御座います。
by suiginex (2007-03-24 18:55) 

blue_tips

いつも拝見させて参考にさせていただいています。
記事項目ではない左右の背景を今色をつけているのですが、
(このページでいうとグレーのバックグラウンドのとこ)
1.左の背景に1つだけ画像を置きたい
2.記事をスクロールしてもその画像(背景)は動かないようにしたい
3.タイトル(ヘッダー)のバックグラウンドを透明度のあるもの(アルファ ?)にしたい
4.記事タイトルに小さい画像をいれたい
のですが、沢山質問してごめんなさい。
また、いつかswf 形式のものをアップロード出来るようになれば
自分で作ったFlashなどをブログにはりつけたいなというのが夢です ^ ^
by blue_tips (2007-04-09 12:55) 

opacyo

はじめまして。
こんな教室があったとは知らず色々調べて自分なりに、カスタマイズして勉強していました。

ソネットブログへの要望出来る欄が見当たらず、ムリを承知でコチラに書き込みさせて頂きます。
最近、他からソネットブログへ引っ越してきたのですが、カスタマイズの枠がhtmlがいじれない事により半減してしまいます。
htmlをいじれるようになんとかご検討頂ければと思います。
実際、カスタマイズがだんだん出来るようになると、もっとカスタマイズが出来るブログへ引越ししてしまう。というのも事実だと思うのですが・・・?幅広く使われているソネットブログなので、この機能を全てのユーザーに適用すると、支障が出る。というのであれば、htmlをいじれるのは「有料会員のみ」など・・・(例えばです。例えば・・・)

どちらにせよ、htmlの記述が触れるようになるのを切に願っておりますm(_ _"m)ペコリ

また、カテゴリーをクリックすると、そのカテゴリー内のタイトルがどこかに反映される、カレンダーをクリックするとその日のタイトルが表示される、と、いった感じでエントリータイトルが表示されると、読みにくる人が自分が読みたい記事がすぐに見つかるのでありがたいです。

ムリは承知です。
こんな要望がある、と思ってるイチユーザーが居る。と思って頂ければ幸いです。長文失礼致しました(*_ _)人
by opacyo (2007-08-04 13:57) 

tyuke

初めまして、このサイトは今日初めて知りました!
よくわかる説明でかいてあるのでとてもやりやすくなったです^^*

あの、教えてほしいことがあるんですが、
カスタムスキンで背景を自分の画像にすることはできるんでしょうか。
それか、普通のスキンでブログタイトルバナーの部分だけ、
自分の作った画像にかえるっていうのは無理なのでしょうか。

まだまだ初心者でして、あまり分からないのです;;
わがままな要望ですが、教えてくださったら嬉しいです。
よろしくお願いします。
by tyuke (2007-08-08 12:41) 

水無月澪

初めまして!
このブログで、カスタムスキンを作らせて頂いています。
とても分りやすく、いつも見ています^^。

此処で質問なのですが、
少し前の記事のヘッダー部分にリンクを入れると、
ヘッダー部分よりかなり下の部分にまで
リンクが入ってしまいます。

回避方法はありますでしょうか?
by 水無月澪 (2007-08-27 16:11) 

きぃ*

すみません、説明文や、WEBで検索してみてもわからないので
どうか教えて下さい。
私のブログタイトル 「* あしあと *」というのですが、その文字が
画面の上にぴったりくっつくような形で表示されます。
今の位置より1~2センチ下に文字を下げたくて、あれこれ数値を
いじってはいるのですが、いっこうに反映されません。
どのようにしたら良いか、どなたか教えていただけたら
大変ありがたいです。どうぞ宜しくお願いいたします。
… それから… 日記を更新した日に、カレンダーの日付へ
色がつきますよね。(その色は気にいっております)
現状、マークが■のところを ●に変更したいのですが
そのような方法もありますでしょうか?
by きぃ* (2007-11-22 20:39) 

fuji

はじめまして~^^
写真を枠線で囲みたいのですが、どのようにすればよろしいですか?
by fuji (2007-11-27 15:45) 

mei-sea

こんなステキなブログがあったなんて!
とっても参考になります。

記事の上部に[前の1件][次の1件]と表示される部分を
前の記事のタイトル・次の記事のタイトルに変更したいのですが、
どうしてもわからないので、ぜひ教えてください!
宜しくお願い致します。
by mei-sea (2011-03-18 23:03) 

コメントを書く

お名前:
URL:
コメント:
画像認証: 下の画像に表示されている文字を入力してください。

 

このブログの更新情報が届きます

すでにブログをお持ちの方は[こちら]


この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。