2007.03.02

Drecom

ドリコムJobBoardのデザイン変更方法(シンプルレイアウトでのCSS編集方法)

ドリコム ジョブボードがCSS編集可能になりました。

まだCSS編集の詳しいヘルプは無いのですが、iframeの中のHTMLソースを見ながら、ちょっとこのサイトにあうようにCSSを編集してみました。

変更点はいろいろあるけど、大雑把に言うと、画像を消して、文字色/サイズ/フォント変えました。

実際のJobBoardはこのエントリー下部にあります。
いままでは基本的に縦長のレイアウトになっており、幅広レイアウトにすると醜くなってしまっていたのですが、このCSS編集でかなりすっきりしました♪

ひとまずCSS編集の手順と、このサイトで使ってるJobBoard用CSSを公開しておきます。

この機会に、ぜひドリコムJobBoardを使ってみてください♪
京の路JobBoardへの求人広告掲載も “ヘ( ̄- ̄ )かもぉん♪

[ドリコム ジョブボード:ブログパーツ設定画面]

jobboard_css.jpg

  1. ドリコム ジョブボード:ブログパーツ設定画面へアクセス
  2. 基本レイアウトで「シンプルレイアウト」を選択
  3. CSSの「編集する」をクリック
  4. 以下のCSSをコピペ
  5. 「ブログパーツを作成・保存」をクリック
  6. 生成されたコードをブログテンプレートの適当な場所にコピペして再構築(MTの場合)
div.jobboard_blog_parts dl.show {
  background : url(http://jobboard.drecom.jp/images/jobboard_title.gif) no-repeat top left ;     
}
div.jobboard_blog_parts {
  width: 96%;
  margin-bottom: 10px;
  font-family: "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif, Osaka, "MS P ゴシック";
}
div.jobboard_blog_parts dl.show {
  margin: 0;
  padding : 0 ;
  font-size : small ;
  text-align : left ;
  font-weight : bold ;
  width: 100%;
  cursor : pointer ;
  background: none;
}
div.jobboard_blog_parts dl.show h1 {
  display: none;
}
div.jobboard_blog_parts dl.show h1 a {
  width : 100% ;
  height : 40px ;
  display : block ; 
  cursor : pointer ;
  text-indent : -9999px ;
}
div.jobboard_blog_parts dl.show dt {
  margin : 10px 5px 0 5px;
  padding : 0px 0 5px 15px ;
  background : url(http://jobboard.drecom.jp/images/icon_simplearrow.gif) no-repeat top left ;
}
div.jobboard_blog_parts dl.show dt.type0 {
  background : url(http://jobboard.drecom.jp/images/skin/icon_newgraduate_s.gif) no-repeat top left ;
}
div.jobboard_blog_parts dl.show dt.type1 {
  background : url(http://jobboard.drecom.jp/images/skin/icon_offseason_s.gif) no-repeat top left ;
}
div.jobboard_blog_parts dl.show dt.type2 {
  background : url(http://jobboard.drecom.jp/images/skin/icon_contract_s.gif) no-repeat top left ;
}
div.jobboard_blog_parts dl.show dt.type3 {
  background : url(http://jobboard.drecom.jp/images/skin/icon_dispatch_s.gif) no-repeat top left ;
}
div.jobboard_blog_parts dl.show dt.type4 {
  background : url(http://jobboard.drecom.jp/images/skin/icon_part_s.gif) no-repeat top left ;
}
div.jobboard_blog_parts a:link, 
div.jobboard_blog_parts a:visited {
  text-decoration : none ;
  color : #c60 ;
}
div.jobboard_blog_parts a:hover {
  text-decoration : underline ;
  color : #c60 ;
}
div.jobboard_blog_parts dl.show dd {
  margin : 0 5px 3px 10px;
  padding : 0 0 0 15px ;
  font-weight : normal ;
  font-size: small;
}
div.jobboard_blog_parts .buttonarea {
  margin-top: 10px;
  width : 100%;
  font-size: small;
  text-align: center;
}
div.jobboard_blog_parts .all_button,
div.jobboard_blog_parts .all_button a:link,
div.jobboard_blog_parts .all_button a:visited {
  float: right;
  margin-left:5px;
  margin-right:5px;
}
div.jobboard_blog_parts .all_button a:hover {
  float: right;
  margin-left:5px;
  margin-right:5px;
}
div.jobboard_blog_parts .post_button,
div.jobboard_blog_parts .post_button a:link,
div.jobboard_blog_parts .post_button a:visited {
  float: right;
  margin-left:5px;
  margin-right:5px;
}
div.jobboard_blog_parts .post_button a:hover {
  float: right;
  margin-left:5px;
  margin-right:5px;
}
div.jobboard_blog_parts .participation a:link,
div.jobboard_blog_parts .participation a:visited {
  float: right;
  margin-left:5px;
  margin-right:5px;
}
div.jobboard_blog_parts .participation a:hover {
  float: right;
  margin-left:5px;
  margin-right:5px;
}
div.jobboard_blog_parts p {
  font-size : small ;
  margin : 0 ;
  padding : 0 ;
}
div.jobboard_blog_parts div.clear {
  clear : both ;
  height : 1px ;
  font-size : 1px ;
}
div.jobboard_blog_parts div.border {
  height : 1px ;
  font-size : 1px ;
  border-top : 1px solid #DDD ;
  margin-bottom : 5px; 
  clear : both ;
}
.size_getter {
  clear: both;
}