WordPressテーマカスタマイズ記録~css編

サーバー(使用してるのはstepserver)のセーフモードに悩まされ、自動アップデートさえままならず少し嫌になってたwordpressでしたが、せっかくなので外観だけでも自分好みにカスタマイズしていくことにしました。

使っているテーマはTwenty Twelve  :asease:

これが一番シンプルでカスタマイズしやすそうだったんですけどねー いや~~難しいです :asen:

まず、CSSがあまりよくわかってないのでそこからですヽ(´Д`;)ノ

その1記事タイトルの装飾

/* =Main content and comment contentってところにある

.entry-header .entry-title {
border-width:0 0 5px 0 ;
border-color:#5bbb26;
border-style:solid;
background-image:url(http://****/***/icon01.gif);
background-repeat:no-repeat;
background-position:0px 0px;
}

CSSにまずはこんな感じでタイトルに下線と画像を入れることにしました。

その2記事ごとを枠に入れて囲む

/* Page structure */
.site {
width: 100%;
}
.site-content {
margin: 24px 0 24px;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
clear: both;
}
.site-content article {
background: #fff;
margin-bottom: 40px;
padding: 20px 40px;
border: 1px solid #ccc;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
overflow : hidden;
}

背景が白だったところを消して、記事部分のところが白になるように設定。
記事の下部分は二重線によって区切りとなってたのでそれも削除してます。

要はどの部分がどこのスタイルの設定となっているかを把握してないといけないってことですねヽ(´Д`;)ノ

/* Sidebar */

こんなふうに場所が指定してまとめてくれてあるので探しやすいことは探しやすいですが、多いので混乱します。
で、サイドバーのウィジェットのスタイルも合わせて変更。

.widget-area .widget {
.widget-title {
以下省略 :.ase1:

 

これで見栄えについては少しだけ納得 :ok:

Follow me!

ペットのイラスト無料で描きます

イラストモデル 募集中
わんこやニャンコのペットのイラスト無料で描きます。
もしくは私がよく直太朗記事にあげている妄想イラストなんかも描きますよ~(^^ゞ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です