Likeboxカスタマイズコード集

BymtoksuyOn

2013年度版FacebookのLikeboxをカスタマイズする方法の続き。

ではでは早速コードを載せていきまーす。

Facebook_Color_Likebox

HTML
<!-- 影を隠すよ -->
<div class="face_book_plgin_shadow_hidden"> </div>
<!-- この中にFBページを閉じ込めるよ -->
<section class="face_book_plgin_proposal_1"> <!-- ここでデザインもするよ -->
  <!-- FBページ -->
  <div class="fb-like-box" data-href="設置したいFBページURL" data-width="この記事の説明では694だけど自由に書き換える" data-height="" data-show-faces="true" data-stream="false" data-header="false"></div>
  <!-- FBページから強制出力されるborderを隠す(トップ) -->
  <div class="face_book_plgin_border_top"> </div>
  <!-- FBページから強制出力されるborderを隠す(ライト) -->
  <div class="face_book_plgin_border_right"> </div>
  <!-- FBページから強制出力されるborderを隠す(ボトム) -->
  <div class="face_book_plgin_border_bottom"> </div>
  <!-- FBページから強制出力されるborderを隠す(レフト) -->
  <div class="face_book_plgin_border_left"> </div>
</section>
CSS
/** 影を隠す **/
.face_book_plgin_shadow_hidden {
    background: none repeat scroll 0 0 #FCFBF9; /** 背景色に合わせる 合わない場合はheight: 0でもおk **/
    height: 1px;
}
/** FBページを出さないようにしてデザイン **/
.face_book_plgin_proposal_1 {
  background-color: #FCFBF9 !important;
    border-color: #3C599B #ABABAB #ABABAB #1B387A;
    border-radius: 40px 5px 40px 5px;
    border-style: solid;
    border-width: 10px 1px 1px 10px;
    float: left;
    margin: 0 0 41.6px;
    overflow: hidden !important;
    position: relative;
    width: 100% !important;
    word-wrap: break-word;
    word-break: break-all;
}
/** borderを隠す(トップ) **/
.face_book_plgin_border_top {
    background: none repeat scroll 0 0 #FCFBF9; /** 合わせる **/
    height: 12px;
    left: 0;
    position: absolute;
    top: 0;
    width: 1032px;
}
/** borderを隠す(ライト) **/
.face_book_plgin_border_right {
    background: none repeat scroll 0 0 #FCFBF9; /** 合わせる **/
    bottom: 0;
    height: 300px;
    position: absolute;
    right: 0;
    width: 6px;
}
/** borderを隠す(ボトム) **/
.face_book_plgin_border_bottom {
    background: none repeat scroll 0 0 #FCFBF9; /** 合わせる **/
    bottom: 0;
    height: 6px;
    left: 0;
    position: absolute;
    width: 1032px;
}
/** borderを隠す(レフト) **/
.face_book_plgin_border_left {
    background: none repeat scroll 0 0 #FCFBF9; /** 合わせる **/
    bottom: 0;
    height: 300px;
    left: 0;
    position: absolute;
    width: 6px;
}

iOS7_Likebox

HTML
<!-- 影を隠すよ -->
<div class="face_book_plgin_shadow_hidden"> </div>
<!-- この中にFBページを閉じ込めるよ -->
<section class="face_book_plgin_proposal_2"> <!-- ここでデザインもするよ -->
  <!-- FBページ -->
  <div class="fb-like-box" data-href="設置したいFBページURL" data-width="この記事の説明では694だけど自由に書き換える" data-height="" data-show-faces="true" data-stream="false" data-header="false"></div>
  <img class="face_book_plgin_logo_proposal_2" src="../../permalinks/2013-06-12_facebook_likebox_customize/likebox/test_iphone5-ios7.png">
  <!-- FBページから強制出力されるborderを隠す(トップ) -->
  <div class="face_book_plgin_border_top"> </div>
  <!-- FBページから強制出力されるborderを隠す(ライト) -->
  <div class="face_book_plgin_border_right"> </div>
  <!-- FBページから強制出力されるborderを隠す(ボトム) -->
  <div class="face_book_plgin_border_bottom"> </div>
  <!-- FBページから強制出力されるborderを隠す(レフト) -->
  <div class="face_book_plgin_border_left"> </div>
</section>
CSS
/** 影を隠す **/
.face_book_plgin_shadow_hidden {
    background: none repeat scroll 0 0 #FCFBF9; /** 背景色に合わせる 合わない場合はheight: 0でもおk **/
    height: 1px;
}
/** FBページを出さないようにしてデザイン **/
.face_book_plgin_proposal_2 {
    border-color: #ACACAC;
    border-radius: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 1px;
    float: left;
    margin: 0 0 41.6px;
    overflow: hidden !important;
    position: relative;
    width: 100% !important;
    word-wrap: break-word;
    word-break: break-all;
}
/** バックの画像設定 **/
.face_book_plgin_logo_proposal_2 {
    height: auto;
    opacity: 1;
    position: absolute;
    right: 0;
    top: 12px;
    width: 350px;
    z-index: -1;
}
/** borderを隠す(トップ) **/
.face_book_plgin_border_top {
    background: none repeat scroll 0 0 #FCFBF9; /** 合わせる **/
    height: 12px;
    left: 0;
    position: absolute;
    top: 0;
    width: 1032px;
}
/** borderを隠す(ライト) **/
.face_book_plgin_border_right {
    background: none repeat scroll 0 0 #FCFBF9; /** 合わせる **/
    bottom: 0;
    height: 300px;
    position: absolute;
    right: 0;
    width: 6px;
}
/** borderを隠す(ボトム) **/
.face_book_plgin_border_bottom {
    background: none repeat scroll 0 0 #FCFBF9; /** 合わせる **/
    bottom: 0;
    height: 6px;
    left: 0;
    position: absolute;
    width: 1032px;
}
/** borderを隠す(レフト) **/
.face_book_plgin_border_left {
    background: none repeat scroll 0 0 #FCFBF9; /** 合わせる **/
    bottom: 0;
    height: 300px;
    left: 0;
    position: absolute;
    width: 6px;
}

Google+box_Likebox

HTML
<!-- 影を隠すよ -->
<div class="face_book_plgin_shadow_hidden"> </div>
<!-- この中にFBページを閉じ込めるよ -->
<section class="face_book_plgin_proposal_3"> <!-- ここでデザインもするよ -->
  <!-- FBページ -->
  <div class="fb-like-box" data-href="設置したいFBページURL" data-width="この記事の説明では694だけど自由に書き換える" data-height="" data-show-faces="true" data-stream="false" data-header="false"></div>
  <!-- FBページから強制出力されるborderを隠す(トップ) -->
  <div class="face_book_plgin_border_top white_color"> </div>
  <!-- FBページから強制出力されるborderを隠す(ライト) -->
  <div class="face_book_plgin_border_right white_color"> </div>
  <!-- FBページから強制出力されるborderを隠す(ボトム) -->
  <div class="face_book_plgin_border_bottom white_color"> </div>
  <!-- FBページから強制出力されるborderを隠す(レフト) -->
  <div class="face_book_plgin_border_left white_color"> </div>
</section>
CSS
/** 影を隠す **/
.face_book_plgin_shadow_hidden {
    background: none repeat scroll 0 0 #FCFBF9; /** 背景色に合わせる 合わない場合はheight: 0でもおk **/
    height: 1px;
}
/** FBページを出さないようにしてデザイン **/
.face_book_plgin_proposal_3 {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    -moz-box-sizing: border-box;
    background-color: #FFFFFF;
    border-color: #D8D8D8;
    border-image: none;
    border-radius: 3px 3px 3px 3px;
    border-style: solid;
    border-width: 1px 1px 2px;
    float: left;
    margin: 0 0 41.6px;
    overflow: hidden !important;
    position: relative;
    vertical-align: top;
    width: 100% !important;
    word-break: break-all;
    word-wrap: break-word;
}
/** borderを隠す(トップ) **/
.face_book_plgin_border_top {
    background: none repeat scroll 0 0 #FCFBF9; /** 合わせる **/
    height: 12px;
    left: 0;
    position: absolute;
    top: 0;
    width: 1032px;
}
/** borderを隠す(ライト) **/
.face_book_plgin_border_right {
    background: none repeat scroll 0 0 #FCFBF9; /** 合わせる **/
    bottom: 0;
    height: 300px;
    position: absolute;
    right: 0;
    width: 6px;
}
/** borderを隠す(ボトム) **/
.face_book_plgin_border_bottom {
    background: none repeat scroll 0 0 #FCFBF9; /** 合わせる **/
    bottom: 0;
    height: 6px;
    left: 0;
    position: absolute;
    width: 1032px;
}
/** borderを隠す(レフト) **/
.face_book_plgin_border_left {
    background: none repeat scroll 0 0 #FCFBF9; /** 合わせる **/
    bottom: 0;
    height: 300px;
    left: 0;
    position: absolute;
    width: 6px;
}
/** 追加クラス **/
.white_color {
  background: #FFFFFF !important;
}

star_night_Likebox

HTML
<!-- 影を隠すよ -->
<div class="face_book_plgin_shadow_hidden"> </div>
<!-- この中にFBページを閉じ込めるよ -->
<section class="face_book_plgin_proposal_4"> <!-- ここでデザインもするよ -->
  <!-- FBページ -->
  <div class="fb-like-box" data-href="設置したいFBページURL" data-width="この記事の説明では694だけど自由に書き換える" data-height="" data-show-faces="true"  data-colorscheme="dark" data-stream="false" data-header="false"></div>
  <img class="face_book_plgin_logo_proposal_4" src="../../permalinks/2013-06-12_facebook_likebox_customize/likebox/plane_3.png">
  <!-- FBページから強制出力されるborderを隠す(トップ) -->
  <div class="face_book_plgin_border_top black_color height_1"> </div>
  <!-- FBページから強制出力されるborderを隠す(ライト) -->
  <div class="face_book_plgin_border_right black_color"> </div>
  <!-- FBページから強制出力されるborderを隠す(ボトム) -->
  <div class="face_book_plgin_border_bottom black_color"> </div>
  <!-- FBページから強制出力されるborderを隠す(レフト) -->
  <div class="face_book_plgin_border_left black_color"> </div>
</section>
CSS
/** 影を隠す **/
.face_book_plgin_shadow_hidden {
    background: none repeat scroll 0 0 #FCFBF9; /** 背景色に合わせる 合わない場合はheight: 0でもおk **/
    height: 1px;
}
/** FBページを出さないようにしてデザイン **/
.face_book_plgin_proposal_4 {
    border-color: #000000;
    border-radius: 2px 2px 2px 2px;
    border-style: solid;
    border-width: 0;
    float: left;
    margin: 0 0 41.6px;
    overflow: hidden !important;
    position: relative;
    width: 100% !important;
    word-wrap: break-word;
    word-break: break-all;
}
/** バックの画像設定 **/
.face_book_plgin_logo_proposal_4 {
    height: auto;
    opacity: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 700px;
    z-index: -1;
}
/** borderを隠す(トップ) **/
.face_book_plgin_border_top {
    background: none repeat scroll 0 0 #FCFBF9; /** 合わせる **/
    height: 12px;
    left: 0;
    position: absolute;
    top: 0;
    width: 1032px;
}
/** borderを隠す(ライト) **/
.face_book_plgin_border_right {
    background: none repeat scroll 0 0 #FCFBF9; /** 合わせる **/
    bottom: 0;
    height: 300px;
    position: absolute;
    right: 0;
    width: 6px;
}
/** borderを隠す(ボトム) **/
.face_book_plgin_border_bottom {
    background: none repeat scroll 0 0 #FCFBF9; /** 合わせる **/
    bottom: 0;
    height: 6px;
    left: 0;
    position: absolute;
    width: 1032px;
}
/** borderを隠す(レフト) **/
.face_book_plgin_border_left {
    background: none repeat scroll 0 0 #FCFBF9; /** 合わせる **/
    bottom: 0;
    height: 300px;
    left: 0;
    position: absolute;
    width: 6px;
}
/** 追加クラス **/
.height_1 {
  height: 1px !important;
}
.black_color {
  background: #000000 !important;
}

Magnifying glass_Likebox

HTML
<!-- 影を隠すよ -->
<div class="face_book_plgin_shadow_hidden"> </div>
<!-- この中にFBページを閉じ込めるよ -->
<section class="face_book_plgin_proposal_5"> <!-- ここでデザインもするよ -->
  <!-- FBページ -->
  <div class="fb-like-box" data-href="設置したいFBページURL" data-width="この記事の説明では265だけど自由に書き換える" data-height="" data-show-faces="true" data-stream="false" data-header="false"></div>
  <img class="face_book_plgin_logo_proposal_5" src="../../permalinks/2013-06-12_facebook_likebox_customize/likebox/me_1.png">
  <div class="face_book_plgin_border_top_5"> </div>
</section>
  <img class="face_book_plgin_logo_proposal_5_out" src="../../permalinks/2013-06-12_facebook_likebox_customize/likebox/bou_1.png">
CSS
/** 影を隠す **/
.face_book_plgin_shadow_hidden {
    background: none repeat scroll 0 0 #FCFBF9; /** 背景色に合わせる 合わない場合はheight: 0でもおk **/
    height: 1px;
}
/** FBページを出さないようにしてデザイン **/
.face_book_plgin_proposal_5 {
    border-color: #2B2B2D;
    border-radius: 160px 160px 160px 160px;
    border-style: solid;
    border-width: 5px;
    margin: 0 60% 41.6px 0;
    overflow: hidden !important;
    position: relative;
    width: 250px !important;
    word-wrap: break-word;
    word-break: break-all;
    z-index: 3;
}
/** 背景画像設定 **/
.face_book_plgin_logo_proposal_5 {
    height: auto;
    left: -10px;
    max-width: 285px !important;
    opacity: 1;
    position: absolute;
    top: -10px;
    width: 277px;
    z-index: -1;
}
/** borderを隠す(トップ) **/
.face_book_plgin_border_top_5 {
    background: none repeat scroll 0 0 #D2DCE6;
    height: 1px;
    left: 0;
    position: absolute;
    top: 0;
    width: 1032px;
}
/** 虫眼鏡の棒 **/
.face_book_plgin_logo_proposal_5_out {
    height: auto;
    left: 175px;
    margin: -112px 0 31px;
    position: relative;
    width: 205px;
    z-index: 2;
}

Background_Twitter_Likebox

HTML
<!-- 影を隠すよ -->
<div class="face_book_plgin_shadow_hidden"> </div>
<!-- この中にFBページを閉じ込めるよ -->
<section class="face_book_plgin_proposal_6"> <!-- ここでデザインもするよ -->
  <!-- FBページ -->
  <div class="fb-like-box" data-href="設置したいFBページURL" data-width="この記事の説明では694だけど自由に書き換える" data-height="" data-show-faces="true" data-stream="false" data-header="false"></div>
  <img class="face_book_plgin_logo_proposal_6" src="../../permalinks/2013-06-12_facebook_likebox_customize/likebox/bg.png">
  <!-- FBページから強制出力されるborderを隠す(トップ) -->
  <div class="face_book_plgin_border_top_6"> </div>
  <!-- FBページから強制出力されるborderを隠す(ボトム) -->
  <div class="face_book_plgin_border_bottom_6"> </div>
  <!-- FBページから強制出力されるborderを隠す(レフト) -->
  <div class="face_book_plgin_border_left_6"> </div>
</section>
CSS
/** 影を隠す **/
.face_book_plgin_shadow_hidden {
    background: none repeat scroll 0 0 #FCFBF9; /** 背景色に合わせる 合わない場合はheight: 0でもおk **/
    height: 1px;
}
/** FBページを出さないようにしてデザイン **/
.face_book_plgin_proposal_6 {
    background: none repeat scroll 0 0 #C0DEED;
    border-color: #D7EAF3;
    border-radius: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 1px;
    float: left;
    margin: 0 0 41.6px;
    overflow: hidden !important;
    position: relative;
    width: 100% !important;
    word-wrap: break-word;
    word-break: break-all;
    z-index: -2;
}
/** 背景画像設定 **/
.face_book_plgin_logo_proposal_6 {
    height: auto;
    left: 0;
    opacity: 1;
    position: absolute;
    top: -70px;
    width: 2247px;
    z-index: -1;
    max-width: 2247px !important;
}
 
/** borderを隠す(トップ) **/
.face_book_plgin_border_top_6 {
    background: none repeat scroll 0 0 #8EC1DA;
    height: 12px;
    left: 0;
    position: absolute;
    top: 0;
    width: 1032px;
}
 
/** borderを隠す(ボトム) **/
.face_book_plgin_border_bottom_6 {
    background: none repeat scroll 0 0 #C0DEED;
    bottom: 0;
    height: 6px;
    left: 0;
    position: absolute;
    width: 1032px;
}
/** borderを隠す(レフト) **/
.face_book_plgin_border_left_6 {
    background: none repeat scroll 0 0 #C0DEED;
    bottom: 0;
    height: 300px;
    left: 0;
    position: absolute;
    width: 1px;
}
前の投稿へ
次の投稿へ