テーマをSimplicity2に変えてみた

テーマをSimplicity2に変更しました。Simplicity2は、元々装備されているカスタマイズ機能が充実しています。またカスタマイズをしている方がたくさんいて、方法をHPに上げているので、カスタマイズしやすいのも魅力です。

Simplicity
内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

こんなブログカードも標準装備です。

新聞や雑誌みたいなシンプルなものにしたかったので、変更したのですが、やはりテーマの変更は大変でした。特に画像とpの位置がテーマを変えたために、微妙にずれてしましました。全部いちいち修正してられません。

色の変更

備忘録代わりにカスタマイズの内容を記載しました。

銀鼠 ぎんねず #afafb0 ヘッダーの枠線

墨 すみ #595857 本文以外の文字

浅葱色 あさぎいろ #00a3af リンク お知らせ

白群 びゃくぐん #83ccd2 リンク

洒落柿 しゃれがき #f7bd8f ヘッダー背景

納戸色 なんどいろ #008899 見出し

緑を基調としました。全部和色です。

カラーコードの変更 和色は渋い
...

 

カスタマイズ

全て子テーマに入力しました。参照にしたブログです。

masalog.me
masalog.me has been informing visitors about topics such as カードローン and 脱毛. Join thousands of satisfied visitors who discovered レシピ and カードローン.

/*グローバルナビの修飾 */

#navi {
border-top:1px solid #afafb0;
border-bottom:1px solid #afafb0;
}

/*ホバー時の線と文字の色を変更*/

#navi ul li a:hover{
color: #00a3af !important;
background-color:white;
}
#navi ul li a:before{
background:#00a3af !important;
}
#navi ul,#navi{
background-color:white;
}

/* 見出しを変更 */

.article h1 {
font-weight: 800;
font-size: 1.8rem;
line-height: 1.3;
}
.article h2 {
font-size: 22px;
line-height: 28px;
padding: 15px 10px 12px 20px;
background: #008899;
color: #FFF;
margin: 25px 0;
font-weight: 550;
position: relative;
border:none;
}
.article h2:before{
content: “”;
position: absolute;
top: 0;
left: 0;
border-width: 0px 0px 16px 16px;
border-style: solid;
border-color: #FFF #7BC8BC #7BC8BC #FFF;
background: #7BC8BC;
display: block;
width: 0;
}
.entry h2 a{
font-weight: 700;
font-size: 1.2rem;
line-height: 1.4;
}
.article h3{
font-size: 1.3rem;
font-weight: 600;
line-height: 1.3;
padding: 5px 15px;
border-left: 10px solid #008899;
border-bottom: none !important;
color: #000;
margin:35px 0px 30px;
}
.article h4{
font-size: 1.1rem;
font-weight: 600;
line-height: 1.3;
padding: 5px 15px;
border-bottom: none !important;
border-left: 5px solid #008899;
color: #000;
margin:35px 5px 20px;
}

/* 本文フォントの色を変える */

body{
color:#383c3c !important;
}

/* リストのタイトルを変更 */

.entry h2 a{
font-weight: 700;
font-size: 1.4rem !important;
line-height: 1.4;
}

/* mainとsidebarの枠線を消す */

#main,#sidebar{
border:none !important;
}

/* メタ情報の大きさを変更し、右側へ*/

.post-meta,.entry .post-meta a {
font-size: 12px;
line-height: 160%;
}
.entry .post-meta {
text-align: right !important;
}

/* サムネイル画像にエフェクト */

.entry-thumb,.wpp-thumbnail{
overflow: hidden;
}
.entry-thumb img,.wpp-thumbnail img{
transition: 0.6s ;
}
.entry-thumb img:hover,.wpp-thumbnail:hover {
opacity: 0.6;
-moz-transform: scale(1.1,1.1);
-webkit-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
}

こちらも参照にしました。

タグクラウドのカスタマイズ(フォントサイズ統一・枠線・背景色・縦表示) - 西沢直木のIT講座
よく使われるタグのサイズが大きくなるタグクラウドのリンクもCSSでカスタマイズできます。ここでは、すべてのタグを同じフォントサイズにしたり、枠線で囲んだり、背景色を設定する例を紹介...

/* タグクラウドに枠線を付ける(+フォントサイズ統一) */

.tagcloud a {
font-size: 16px !important;
border: solid 1px #afafb0;
border-radius: 5px;
display: inline-block;
padding: 5px;
margin-bottom: 5px;
}

/* リンクの下線を消す */

a {
text-decoration: none;
}
a:hover { text-decoration:underline;}

 

丸1日かかってしまいました。こんなにパソコンの前に座っていたのは久しぶりでした。もう当分したくありません。civilizationにはまった以来です。

そういえば、もうすぐ新しいcivilizationが出ます。