html - ナビゲーションの下にソーシャル メディア アイコンを追加する

Question

ソーシャル メディアのアイコンをナビゲーションのすぐ下の右側に追加しようとしていますが、これを行うには画像リンクをどこに配置すればよいかわかりません。どんな助けでも大歓迎です！サイトの css と html を以下に追加しました。サイト: http://customjtw.virb.com/

CSS:

    /*
---------------------------------------
APOLLO
---------------------------------------
by Ryan Clark
www.ryanvsclark.com
---------------------------------------                                                                                                          
*/


/* ---------- GLOBAL STYLING RULES & RESETS ---------- */
* {
    margin: 0px;
    padding: 0px;
}

<virb get="customize.fonts.font_face" />

body {
    background: <virb get="customize.colors.background_footer" />;
    font: normal <virb get="customize.fonts.body_size" /> <virb get="customize.fonts.body_family" />;
    color:<virb get="customize.colors.text" />;
    line-height: 1.5;
    font-family: <virb get="customize.fonts.body_family" />,serif; 
}

hr { display: none; }

#page hr {
    display: block;
    border: none 0; 
    border-top: 1px solid <virb get="customize.colors.line_page" />;
    width: 100%;
    height: 1px;
    margin: 0 0 20px 0;
}

input, option, textarea, 
button {
    font: normal <virb get="customize.fonts.body_size" /> <virb get="customize.fonts.body_family" />;
}

ul, ol {
    list-style-type: none;
}

q:before, q:after { content: ""; }

big   { font-size: 12px; }
small { font-size: 9px; }

img   { border: none; }

a {
    color: <virb get="customize.colors.link" />;
    text-decoration: none;
    outline: none;
}

a:hover {
    color: <virb get="customize.colors.link_hover" />;
}

#footer a {
    color: <virb get="customize.colors.footer_link" />;
    text-decoration: none;
    outline: none;
}

#footer a:hover {
    color: <virb get="customize.colors.footer_link_hover" />;
}

p, h1, h2, h3, h4, h5, h6,
ol, ul {
    line-height: 1.5;
}
#container_right p {
    line-height: 150%;
}
#page #description h2, #page #blog .text h3 {
    font-size: 1.5em;
    font-family: <virb get="customize.fonts.body_family" />;
}

.homepage #page #description h2 {
    margin: 10px 0 0 0;
    font-size: 1.5em;
}

.homepage #page #description h3 {
    font-size: 1.2em;
    font-family: <virb get="customize.fonts.body_family" />;
    color:#888;
}

#header_wrapper, #page_wrapper, #footer_wrapper  {
    width:100%;
    position:relative;
}



/* ---------- HEADER ---------- */

div#header_wrapper {
    width:100%;
    background: <virb get="customize.colors.background_header" />;
    z-index: 2;
}

div#header {
    width:960px;
    margin:0 auto;
    padding:35px 0 20px;
}
    #header h1 {
        font: normal <virb get="customize.fonts.site_size" /><virb get="customize.fonts.site_family" />;
        line-height: 100%;
    }

        #header h1 a,
        #header h1 a:hover {
            color: <virb get="customize.colors.site_name" />;
        }

        #header h1 img {
            display: block;
            max-width: 300px;
        }

    #header h2 {
        font-weight: bold;
        font-size: <virb get="customize.fonts.tagline_size" />;
        font-family: <virb get="customize.fonts.header_family" />;
        color: <virb get="customize.colors.tagline" />;
        line-height: 110%;
        padding-top: 6px;
    }

    #header #page_title {
       float:left;
    }
    #header #site_nav {
       float:right;
       margin-top: 54px;
    }

#display_name {width: 300px;}

    #display_name h2 {color:<virb get="customize.colors.tagline" />; text-transform: uppercase;}


/* ---------- NAVIGATION ---------- */

div#site_nav {
    display: block;
    max-width: 700px;
}

#site_nav ul li {
    display: inline;
    position: relative;
    font-size: <virb get="customize.fonts.nav_size" />;
    font-family: <virb get="customize.fonts.header_family" />;
    font-weight: bold;
    letter-spacing: .2px;
    text-transform: uppercase;
}

#site_nav div.clear {
    display: none;
}

    #site_nav li.section:after { content: " "; }

    #site_nav li.section ul { display: none; } 
    #site_nav li.section:hover ul { display: block; }
    #site_nav li.section ul {
        position: absolute;
        top: <virb get="customize.fonts.nav_size" />;
        left: 10px;
        width: 200px;
        z-index: 111;
        padding-top: 10px;
    }
        #site_nav li.section ul li {
            float: none;
            display: block;
            font: normal <virb get="customize.fonts.nav_size" />;
            background: <virb get="customize.colors.nav_dropdown" />;
            margin: 0;
            padding: 7px 7px 5px 7px;
            letter-spacing: 0;
            text-align: left;
            line-height: 1.5;
            border-bottom: 1px solid <virb get="customize.colors.background_header" />;
        }
            #site_nav li.section ul li:last-child {border-bottom: none;}

            #site_nav li.section ul li a {
                text-transform: none;
                letter-spacing: 0;
                padding: 4px 7px 4px 3px;
                font: <virb get="customize.fonts.header_family" />;
                display: block;
            }

    #site_nav ul li a, 
    #site_nav ul li.section {
        cursor: pointer;
        padding: 0 12px;
        font: <virb get="customize.fonts.header_family" />;
        color: <virb get="customize.colors.nav_link" />;
    }
    #site_nav ul li a:hover,
    #site_nav ul li.section:hover {
        color: <virb get="customize.colors.nav_hover" />;
    }
    #site_nav ul li.active, #site_nav ul li.active a {
        color: <virb get="customize.colors.nav_hover" />;
    }

    #site_nav ul li.active ul li a {
        color: <virb get="customize.colors.nav_link" />;
    }

    #site_nav ul li.active ul li a:hover {
        color: <virb get="customize.colors.nav_hover" />;
    }

    #site_nav ul li.active ul li.active a {
        color: <virb get="customize.colors.nav_hover" />;
        cursor: default;
    }


/* ---------- PAGE ---------- */

div#page_wrapper {
    background: <virb get="customize.colors.background_page" />;
    z-index: 1;
    overflow: hidden;
}

div#page {
    width:960px;
    margin:0 auto;
    padding:25px 0 15px;
    overflow: hidden;
    border-top: 1px solid <virb get="customize.colors.line_page" />;
    border-bottom: 1px solid <virb get="customize.colors.line_page" />;
}

body.index div#page {padding-bottom: 0;}

#page div#description {
    position: relative;
    padding: 0;
    width:600px;
}
    #page #description p, #page #description h2, #page #description h3, #page #description h4, #page #description h5, #page #description h6 {
        padding: 0 0 15px 0;
    }

    #page #description ul li, #page #description ol li {padding: 0 0 5px 0;}

    #page #description h2 {line-height: 1.3;}

div#share {
    display: block;
    position: relative;
    clear: both;
    padding: 10px 0 0 0;
}

#page #title {
    display: yes;
    font-size: 22px;
    color:#527fb1;
    padding: 0 0 12.5px 0;
}


/* ---------- SIDEBAR ---------- */

div#widgets {
    font-size: 11px;
    overflow: hidden;
    line-height: 0;
    font-family: <virb get="customize.fonts.footer_family" />;
}

div#widgets:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "\00A0";
}

    #widgets .module {
        display: block;
        float: left;
        width: 300px;
        padding: 0 0 20px 0;
        margin: 0 30px 0 0;
    }
    #widgets .last_module {margin: 0;} 

        #widgets .module h4 {
            font: italic <virb get="customize.fonts.body_size"/> <virb get="customize.fonts.footer_family" />;
            color: <virb get="customize.colors.widget_text" />;
            letter-spacing: .2px;
            padding: 0 0 10px 0;
            margin-bottom:10px;
            border-bottom: 1px solid <virb get="customize.colors.line_footer" />;
        }
            #widgets h4 a { color: <virb get="customize.colors.footer_link" />; }
            #widgets h4 a:hover { color: <virb get="customize.colors.footer_link_hover" />; }

        #widgets .module p {
            font-size: <virb get="customize.fonts.body_size" />;
            line-height: 150%;
            padding: 0;
        }

            #widgets .module.twitter ul li span a,
            #widgets .module.lastfm ul.recent_plays li span {
                color: <virb get="customize.colors.footer_link" />;
            }
            #widgets .module.twitter ul li span a:hover {
                color: <virb get="customize.colors.text" />;
            }

        #widgets .module.lastfm ol {
            list-style-type: decimal;
            list-style-position: inside;
        }

            #widgets .module.rss-feed ul,
            #widgets .module.blog-posts ul, 
            #widgets .module.twitter ul, 
            #widgets .module.lastfm ul.upcoming_events,
            #widgets .module.lastfm ul.recent_plays {
                margin-bottom: -10px;
            }

            #widgets .module.rss-feed ul li,
            #widgets .module.blog-posts ul li,
            #widgets .module.twitter ul li,
            #widgets .module.lastfm ul.upcoming_events li,
            #widgets .module.lastfm ul.recent_plays li {
                padding-bottom: 10px;
            }

                #widgets .module.lastfm ol li img { display: none; }

        #widgets .count_2, #widgets .count_5, #widgets .count_8, #widgets .count_11, #widgets .count_14, #widgets .count_17 {
            margin: 0;
        }


    /* AUDIO PLAYER */

    .module.audio_player ul {
        display: block;
        width: 278px;
        background: #fff;
        border: solid 1px #ddd;
        border-radius: 5px;
        padding: 10px 10px 15px 10px;
        overflow: hidden;
    }
    .module.audio_player li .album_image {
        height: 75px;
        width: 75px;
        padding: 5px 15px 5px 5px;
        margin-bottom: 10px;
        display: block;
        float:left;
    }
    .module.audio_player li .album_image img {
       height:75px;
       width:75px;
    }

    .module.audio_player li {
        display: none;
    }
    .module.audio_player li.selected {
        display: block;
    }
    #widgets .module.audio_player li h3 {
        text-align: left;
        font-size: <virb get="customize.fonts.body_size" />;
        padding-bottom: 2px;
    }
        #widgets .module.audio_player li h3 .download {
            display: none;
        }
    #widgets .module.audio_player ul h4 {
        display: block;
        text-align: left;
        font: normal 12px <virb get="customize.fonts.footer_family" />;
        text-transform: none;
        border: none;
        letter-spacing: 0;
        padding: 0 0 2px 0;
        margin: 0;
        color: <virb get="customize.colors.text" />;
    }
    .module.audio_player .controls {
        display: block;
        float: left;
        margin:5px 0 10px 0;
        text-align: left;
        padding-bottom: 10px;
        width: 180px;
        border-bottom: 1px solid <virb get="customize.colors.line_page" />;
    }
        .module.audio_player .controls .prev,
        .module.audio_player .controls .next {
            display: inline-block;
            width: 20px;
            height: 30px;
        }
        .module.audio_player .controls .prev a,
        .module.audio_player .controls .next a {
            display: inline-block;
            width: 20px;
            height: 30px;
            overflow: hidden;
            text-indent: 1000px;
            -moz-border-radius: 7px;
            -webkit-border-radius: 7px;
            border-radius: 7px;
        }
        .module.audio_player .controls .prev a {
            background: url(<virb get="theme.assets.url" />graphics/sprite_controls.png) no-repeat left -7px;   
        }
        .module.audio_player .controls .next a {
            background: url(<virb get="theme.assets.url" />graphics/sprite_controls.png) no-repeat right -7px;
        }

        .module.audio_player .controls .playpause {
            display: inline-block;
            height: 30px;
            width: 35px;
            overflow: hidden;
        }
            .module.audio_player .controls .playpause a {
                display: block;
                height: 30px;
                width: 35px;
                overflow: hidden;
                text-indent: 1000px;
                background: <virb get="customize.colors.text" /> url(<virb get="theme.assets.url" />graphics/sprite_controls.png) no-repeat center -7px;
                -moz-border-radius: 7px;
                -webkit-border-radius: 7px;
                border-radius: 7px;
            }
            .module.audio_player .playing .controls .playpause a {
                background: <virb get="customize.colors.link" /> url(<virb get="theme.assets.url" />graphics/sprite_controls.png) no-repeat center -52px;
            }

    .module.audio_player audio {
        width: 150px;
        padding: 15px 5px 0px 5px;
    }

    .module.audio_player .length {
        display: block;
        height: 6px;
        width: 150px;
        border: solid 1px #ddd;
        background: #ddd;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px; 
        position: relative; 
        margin-top: 9px;
        float:left;
        margin-left:95px;
    }
        .module.audio_player .length .load {
            height: 6px;
            width: 0%;
            display: block;
            background: <virb get="customize.colors.text" />;
            position: absolute;
        }
        .module.audio_player .length .progress {
            height: 6px;
            width: 0%;
            display: block;
            background: <virb get="customize.colors.link" />;
            position: absolute;
        }
        .module.audio_player .length .time {
            color: <virb get="customize.colors.text" />;
            font-size: <virb get="customize.fonts.body_size" />;
            position: absolute;
            left: 157px;
            top: -4px;
        }



/***** @group Cart widget *****/

.cart-widget {
  width: 75px;
  text-align: center;
  position: fixed;
  top: 100px;
  right: 0;
  z-index: 2000;
}

  .cart-widget .cart {
    background: <virb get="customize.colors.line_page" />;
    font-family: <virb get="customize.fonts.body_family" />;
    font-size: <virb get="customize.fonts.body_size" />;
    color: <virb get="customize.colors.text" />;
    padding: 10px;
  }
    .cart-widget .cart span {
      display: block;
    }
    .cart-widget .cart span.label {
      font-size: .65em;
      text-transform: uppercase;
    }
    .cart-widget .cart span.cart-total {
      font-weight: bold;
    }

  .cart-widget .checkout {
    background: <virb get="customize.colors.link_hover" />;
    padding: 5px 10px;
    text-transform: uppercase;
    color: <virb get="customize.colors.background_page" />;
    font-size: 9px;
    display: block;
    margin-top: 1px;
    -webkit-transition: all .2s linear;
       -moz-transition: all .2s linear;
         -o-transition: all .2s linear;
            transition: all .2s linear;
  }
    .cart-widget .checkout:hover {
      background: <virb get="customize.colors.link" />;
    }

/***** @group Cart widget *****/



/* ---------- FOOTER ---------- */

div#footer {
    width:960px;
    margin:0 auto;
    padding:25px 0;
    font-family: <virb get="customize.fonts.footer_family" />;
    color: <virb get="customize.colors.widget_text" />;
}       

span#virb_customize_footer {
    color: <virb get="customize.colors.footer_text" />;
    padding-top: 10px;
    width:100%;
    display: block;
}


/* ie7 specific styles */

.ie7 .audio_player .controls .playpause a, 
.ie7 .audio_player .controls .prev a, 
.ie7 .audio_player .controls .next a {
  font-size:0;
  display: block;
  line-height: 0;
}

/* ---------- SOCIAL LINKS WIDGET ---------- */
div.social-links ul {
    margin:0;
    padding:0;
    list-style: none;
    overflow: hidden;
    }

    div.social-links ul li a {
        float:left;
        display:block;
        text-indent: -9999px;
        }       

    div.social-links ul.large a {
        width:64px;
        height:64px;
        margin:0 5px 5px 0;
        }

        div.social-links ul.large.simplebutton li a,
        div.social-links ul.large.shinycircle li a,
        div.social-links ul.large.shinybutton li a {
            width:64px;
            height:66px;
            margin:0 5px 5px 0;
        }

    div.social-links ul.small li a {
        width:32px;
        height:32px;
        margin:0 5px 5px 0;
        }

        div.social-links ul.small.simplebutton li a,
        div.social-links ul.small.shinycircle li a,
        div.social-links ul.small.shinybutton li a {
            width:32px;
            height:33px;
            margin:0 5px 5px 0;
        }

HTML:

    <!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="ie ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie ie9"> <![endif]-->
<html>
  <head>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type='text/css'>  
.accordion {margin:0px;border-bottom: 1px solid #e5e5e5;width: 300px}.accordion dt{padding-top:0px;padding-bottom:10px;font: 14px arial}.accordion dd {padding-top: 0px;padding-bottom: 10px;font-size: 12px}.accordion a {display: block;color: black;font-weight: bold;text-decoration: none}body{font: 12px arial}​ 
</style>

<script type='text/javascript'>//<![CDATA[ 
  $(function(){
      (function($) {

         var allPanels = $('.accordion > dd').show();

         $('.accordion > dt > a').click(function() {
              $(this).parent().next('dd').slideUp();

         if($(this).parent().next().is(':hidden'))
         {
              $(this).parent().next().slideDown();
         }

         return false;
        });

     })(jQuery);
   });//]]>  

</script>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type='text/css'>  
.accordionbr {margin:0px;border-bottom: 1px solid #e5e5e5;width: 300px}.accordionbr dt{padding-top:0px;padding-bottom:10px;font: 14px arial}.accordionbr dd {padding-top: 0px;padding-bottom: 10px;font-size: 12px}.accordionbr a {display: block;color: black;font-weight: bold;text-decoration: none}body{font: 12px arial}​ 
</style>

<script type='text/javascript'>//<![CDATA[ 
  $(function(){
      (function($) {

         var allPanels = $('.accordionbr > dd').hide();

         $('.accordionbr > dt > a').click(function() {
              $(this).parent().next('dd').slideUp();

         if($(this).parent().next().is(':hidden'))
         {
              $(this).parent().next().slideDown();
         }

         return false;
        });

     })(jQuery);
   });//]]>  

</script>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type='text/css'>  
.accordion2 {margin:0px;border-bottom: 1px solid #e5e5e5;width: 640px}.accordion2 dt{padding-top:0px;padding-bottom:10px;font: 14px arial}.accordion2 dd {padding-top: 0px;padding-bottom: 10px;font-size: 12px}.accordion2 a {display: block;color: black;font-weight: bold;text-decoration: none}body{font: 12px arial}​ 
</style>

<script type='text/javascript'>//<![CDATA[ 
  $(function(){
      (function($) {

         var allPanels = $('.accordion2 > dd').show();

         $('.accordion2 > dt > a').click(function() {
              $(this).parent().next('dd').slideUp();

         if($(this).parent().next().is(':hidden'))
         {
              $(this).parent().next().slideDown();
         }

         return false;
        });

     })(jQuery);
   });//]]>  

</script>

    <!-- APOLLO -->
    <virb load="title" />
    <virb load="meta" />
    <virb load="css" />
    <virb load="icon" />

    <!--[if lt IE 8]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
    <![endif]-->
  </head>

  <body class="get[page.type] get[page.format] get[page.class]">   

    <!-- HEADER WRAPPER -->
    <div id="header_wrapper">

      <!-- HEADER -->
      <div id="header">

        <div id="site_nav">
          <virb load="nav" />
        </div>

        <div class="module" id="display_name">
          <h1><a href="get[site.url]"><virb customize="logo" /></a></h1>
          <h2 id="virb_customize_tagline"><virb customize="tagline" /></h2>
        </div> 

      </div>
      <!-- END HEADER -->

    </div>
    <!-- END HEADER WRAPPER -->


    <!-- PAGE WRAPPER -->
    <div id="page_wrapper">

      <!-- PAGE -->
      <div id="page">
        <virb load="template" />
      </div>
      <!-- END PAGE -->

    </div>  
    <!-- END PAGE WRAPPER -->  


    <!-- FOOTER WRAPPER -->
    <div id="footer_wrapper">

    <!-- FOOTER -->
      <div id="footer">

        <!-- WIDGETS/SITE --> 
        <div id="widgets"> 
            <virb load="widgets" />
        </div> 
        <!-- END SIDEBAR --> 

        <p><virb customize="footer" /></p>

      </div>
      <!-- END FOOTER -->

    </div>
    <!-- END FOOTER WRAPPER -->

  </body>
</html>