Vol.5 デザインカスタマイズにチャレンジ

デザインカスタマイズ機能が大幅にパワーアップしたSo-net blogで自分だけのオリジナルブログデザインを作ろう。

今回、So-net blogではカスタマイズできるスキンが大幅に増量。お気に入りスキンのCSS(スタイルシート)を編集してアップロードした画像をヘッダに表示したり、背景や文字の色を変更したり、自分だけのオリジナルデザインにチャレンジしよう!


お気に入りのスキンをカスタマイズ

今回、So-net blogでは190点のスキンのCSSカスタマイズに対応しました。(ただし、スペシャルとSo-netキャラクターのスキンは除く)お気に入りのスキンを自分好みにカスタマイズできるので、一からデザインを作るよりも断然カンタン。『このスキンのヘッダ画像だけ変えたいな。』、『リンクの色だけ変更したいな。』、『背景に画像を表示したいな。』と思っている方は是非チャレンジしてみてください。

それではCSSの編集方法を説明します。

  1. まず、管理ページの[デザイン][スキン一覧]からお好みのスキンを選択します。
    ※スペシャルとSo-netキャラクターのスキンはCSS編集できません。
  2. 選択したスキンが[デザイン][スキン管理]に保存されたら、そのスキンのタイトルをクリックしてCSS編集ページを開きます。
  3. CSS編集ページでCSSを編集して保存します。
    ※スキン管理ページで編集したスキンを選択するとブログスキンを変更できます。

編集したスキンは複数保存できるので、どんどんチャレンジしてみてください。また、So-net blogの使い方でもCSSの書き方やSo-net blogでのデザイン編集方法を紹介しているので、下記も参考にしてください。

CSSの編集方法 CSS編集
CSSの書き方 CSSの基礎知識
So-net blogでのCSS編集方法 CSSセレクタ(タグ)一覧
CSSの指定方法 CSSプロパティ一覧
色の指定サンプル カラーチャート

下はヘッダ画像を変更したカスタマイズサンプルです。画像を変えただけでも随分とオリジナル感がでますね。


サイトバーのパーツだってカスタマイズ

カスタムペインだけではく、すべてのサイドバーのパーツのHTMLを編集して、それぞれ個別にカスタマイズすることができるようになりました。ちょっとした工夫であなたのブログが注目度アップ!少し難しいかもしれませんが、HTMLを知っている方も、これからHTMLを勉強してみようかなと思っている方も是非チャレンジしてみてください。

それではサイドバーのパーツのカスタマイズ方法を説明します。

  1. まず、管理ページの[デザイン][レイアウト]でページ左のサイドコンテンツをページ右にドラッグ&ドロップで配置します。
  2. 次に、配置したパーツのタイトルをクリックして、ポップアップで表示されたページの右上にあるコンテンツHTMLの編集リンクをクリックします。
  3. すると、各パーツのHTMLを編集する画面が開くので、そこに画像や文章などを挿入して保存します。
    ※途中で分からなくなったり、表示がおかしくなった場合、「初期値に戻す」にチェックを入れて保存すると、最初の状態に戻ります。
  4. 保存したら必ず画面右上のリンクから前のページに戻って「設定を保存する」ボタンをクリックしてください。
  5. ポップアップで表示されたページを閉じて、レイアウトページで「設定を保存する」ボタンをクリックすると、編集した内容が反映されます。

So-net blogの使い方、コンテンツのHTML編集コンテンツの配置・削除(かんたんモード)コンテンツの配置・削除(詳細モード)も参考にしてください。


他の人とはちょっと違ったブログにしたい方や細部にまでこだわりたい方は試してみてはいかがでしょうか。



nice!(2830)  トラックバック(13) 

nice! 2830

nice!の受付は締め切りました

トラックバック 13

この記事のトラックバックURL:

Copyright 2008 So-net Entertainment Corporation