style.cssカスタマイズ

以下のスタイルを追加しています。

  • Webフォントの指定
  • Breadcrumb NavXT パンくずリスト先頭にアイコンフォント表示
  • gist表示変更
  • サイドバー変更
  • カスタム投稿用ウィジット用 ,etc.

style.css

@charset "UTF-8";

/*!
Theme Name: Simplicity2 child
Template:   simplicity2
Version:    20161002
*/

/* Simplicity子テーマ用のスタイルを書く */

@font-face {
    font-family: 'mplus-1mn-regular';
    font-style: normal;
    font-weight: 400;
    src: url('/font/mplus-1mn-regular.eot');
    src: url('/font/mplus-1mn-regular.eot?#iefix') format('embedded-opentype'),
    url('/font/mplus-1mn-regular.woff') format('woff'),
    url('/font/mplus-1mn-regular.ttf')  format('truetype');
}

body {
     font-family: 'mplus-1mn-regular', sans-serif;
}

.top_main_widget {
  background-color:#eee;
  padding:10px;
  margin-bottom:10px;
}

#sidebar h3{
  text-align:center;
  border: 2px solid #89BDDE;
  border-radius: 10px;
}

a#footer-button-home{
  display: block;
}

a#footer-button-prev,
a#footer-button-next{
  display: none;
}

table.highlight tr:nth-child(2n+1) td {
    background: #f5fffa;
}


table.highlight tr td,table.highlight tr td span {
    font-weight:bold;
}

/* Breadcrumb NavXT パンくずリスト先頭にアイコンフォント表示と文字サイズを小さくする */

.breadcrumbs a.mainhome::before {
    font-family: "FontAwesome";
    content: "\f015  ";
}

.breadcrumbs a.home::before {
    font-family: "FontAwesome";
    content: "\f15c  ";
}

.breadcrumbs a.post.post-page::before {
    font-family: "FontAwesome";
    content: "\f15c  ";
}

.breadcrumbs a.taxonomy::before,
.breadcrumbs a.category::before {
    font-family: "FontAwesome";
    content: "\f07b  ";
}

.breadcrumbs a.post.post-maron-archive::before {
    font-family: "FontAwesome";
    content: "\f1b0  ";
}

.breadcrumbs {
    font-size: small;
    margin-bottom: 14px;
}

/************************************
** サイドバー(Sidebar)・ウィジェットなど
************************************/
#sidebar h3{
  margin-bottom: 10px;
  font-size:20px;
}
#sidebar .widget{
  margin-bottom: 45px;
}

.widget_search{
  margin-bottom: 0;
}

#sidebar ul,
#sidebar ol,
.widget-over-article ul,
.widget-over-article ol,
.widget-under-article ul,
.widget-under-article ol,
.widget-over-sns-buttons ul,
.widget-over-sns-buttons ol,
.widget-under-sns-buttons ul,
.widget-under-sns-buttons ol{
  padding-left: 1em;
  list-style:none;
}

#sidebar ul.snsp,
#main ul.snsp,
#footer ul.snsp{
  padding-left: 0;
}

.widget-over-article{
  margin-top: 10px;
  margin-bottom: 10px;
}

#sidebar-recent-posts li,
#sidebar-popular-posts li{
  margin:20px 0;
}

#sidebar li{
  margin-bottom: 8px;
}

.sidebar-thumbnail-box{
  float: left;
  width: 75px;
}

.sidebar-recent-posts-title{
  float: right;
  width: 165px;
}
  #sidebar-recent-posts h3,
  #sidebar-recent-posts p,
  #sidebar-popular-posts h3,
  #sidebar-popular-posts p{
    margin: 0;
  }

#main .widgets{
  margin-top: 20px;
  margin-bottom: 20px;
}

#sidebar .widget_category_sns_follow_buttons ul,
.widget_category_sns_follow_buttons ul{
  padding-left: 0;
}

.widget_text ul {
  list-style-type:  disc;
}
.widget_text ol {
  list-style-type:  decimal;
}

/************************************
** 新着記事・人気記事(new, pupular)
************************************/
.widget_mymaronnewentrywidgetitem{
  line-height:150%;
}

.widget_mymaronnewentrywidgetitem h4{
  margin-bottom:15px;
}

#main .widget_mymaronnewentrywidgetitem ul,
#sidebar .widget_mymaronnewentrywidgetitem ul,
#footer .widget_mymaronnewentrywidgetitem ul {
  padding-left:0;
  list-style:none;
}

.widget_mymaronnewentrywidgetitem ul li {
  clear: left;
  float: none;
  margin-bottom:10px;
/*  overflow: auto;
  zoom: 1;*/
}

.widget_mymaronnewentrywidgetitem ul li img {
  border: medium none;
  display: inline;
  float: left;
  margin-top: 3px;
  margin-right: 5px;
  width: 75px;
  height: 75px;
  margin-bottom: 10px;
  border-radius: 10px;
}

span.wpp-views{
  font-size:x-small;
  font-style:italic;
}

/************************************
** 新着記事maron用
************************************/
.widget_mymaronnewentrywidgetitem .new-entrys-large .new-entry{
  margin-bottom:15px;
  line-height:120%;
  position:relative;
  display:block;
  max-width: 440px;/*これを書いておかないと、タイトル部分がはみ出す*/
  overflow: visible;
}

.widget_mymaronnewentrywidgetitem .new-entrys-large .new-entry img{
  width:100%;
  float:none;
  margin:0;
  display:block;
  margin-bottom:5px;
  min-height: 180px;
  max-width: 440px;/*iPhone6は幅が414pxなのでそれより大きく*/
  max-height: 240px;
  height: auto;
}

.widget_mymaronnewentrywidgetitem .new-entrys-large-on .new-entry .new-entry-content{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  /* 画像をBase64にするためコメントアウト
  background: url("images/black-transparent.png") repeat scroll 0 0 transparent; */
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyAQMAAAAk8RryAAAAA1BMVEUAAACnej3aAAAAAXRSTlOZyTXzhgAAAA1JREFUGNNjGAWDCgAAAZAAAXtlmk8AAAAASUVORK5CYII=") repeat scroll 0 0 transparent;
/*  opacity:0.7;
  background-color:#333;*/
  padding:10px;
  max-height:28%;
  overflow:hidden;
  display:block;
}

.widget_mymaronnewentrywidgetitem .new-entrys-large-on .new-entry .new-entry-content a {
  color:#fff;
  /*opacity:0.8;*/
  display:block;
}
参考 style.cssGist

Monappy: MBDQ39VHypMQwfyR8SshuHvfPNUz321F6B

Monacoinを投げる
モナゲ(tipmona)ってなに?
そもそもMonacoinってなに?

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください