WordPressテーマ【Simplicity】を使ってみたら危うく浮気から本気になりそうだった話

WordPressのテーマ、affinger4最高すぎなんだけどたまには浮気(*ﾉω・*)

というわけで無駄に取得しては眠っているドメインの活躍の場を設けるため、無料テーマの最高峰【simplcity】を導入し感じました。

simplcityってさ・・

ものすっごい

良いよ！！

まじでスゴク良い。

何が良いか、って具体的に言うと

フッターが3カラム設定できる。
カスタマイズメニューでやりたいことが出来ちゃう。
AMP対応も出来るし記事毎にAdSense非表示も可。
カスタマイズしている人が多くてカスタムしやすい。
そもそも無料。

という点。

アヒルン

なんで今まで一度も使ってみなかったんだろ・・

いつもサイトカスタマイズではずっとSTINGERシリーズ使ってきた僕にとっては結構、いやかなり衝撃でした(ﾟＡﾟ;)ｺﾞｸﾘ

だってものの1時間くらいで特にカスタマイズサイトなど参考にせず、コレくらいのサイトが作れてしまうんだもん・・

WordPressのテーマ・Simplicityテスト投稿記事だよ

とはいってもENJIさんのstingerシリーズでカスタマイズを行っていたからこそなのですが(^^)

使う人のスキルにもよりますが、

WordPressのテーマって何使ってよいか分かんない・・
有料のテーマってちょっと高いんだよね。
カスタマイズとかゴリゴリやりたい！
あのサイトみたいにやりたいな〜

という人にはうってつけじゃないかなと。

初めから【simplcity】を使っている人にとっては、下手したら有料の方がしょっぱく感じるくらい完成度が高いんすよ。

simplcity導入方法

先ずは寝ログさんのサイトから【simplcity】をインストール。

https://wp-simplicity.com/downloads/downloads2/

ZIPファイルがダウンロードされるので、デスクトップなどに保管します。

以下インストールの手順です↓

〜テーマのインストール手順〜

ダッシュボード
↓
外観
↓
テーマ
↓
新規追加
↓
テーマのアップロード
↓
ファイルを選択
↓
インストールしたいテーマのZIPファイルを開く

でテーマのインストール完了。

次に※子テーマをインストールします。

【simplcity】の子テーマ↓

simplicity2-child20161002a

子テーマのインストール方法は、先の「テーマのインストール手順」と一緒なんで割愛！

※子テーマの導入ってしなくちゃいけないの？

WordPressは「テーマ」が選べます。

そして「テーマ」は

親テーマ・・箱
子テーマ・・箱をカスタマイズする指示書
（これは完全な僕のイメージです）

に別れます。

親テーマでもカスタマイズの指示は出せるのですが、アップデートした時にカスタマイズした指示書も元に戻ってしまうんです。

なので子テーマでのカスタマイズを強くオススメしている次第です。

なもんで、子テーマをインストールしましょう！

子テーマに以下CSSをコピペ

冒頭でご紹介したサイトみたいにしたい！と思ったら、以下を子テーマのstyle.cssに全コピペして下さい。

（一度子テーマのstyle.cssの内容を削除して、コピペします。大丈夫、真っ白にはなりません　笑）

+ クリックして下さい

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Quicksand');
/*!
Theme Name: Simplicity2 child
Template: simplicity2
Version: 20161002
*/
/* Simplicity子テーマ用のスタイルを書く */
/* 見出しを変更 */
.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: #e91e72;
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 #FFF #FF9800 #FFF;
background: #FFC107;
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: 8px solid #e91e72;
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: 4px solid #e91e72;
color: #000;
margin:35px 5px 20px;
}
/*ホバー時の線と文字の色を変更*/
#navi ul li a:hover{
color: #10aba6 !important;
　　　　　　　　background-color:white;
}
#navi ul li a:before{
background:#10aba6 !important;
}
#navi ul,#navi{
background-color:white;
}
/* フォントを灰色にする */
body{
font-size: 18.8px;
　 color:#555555 !important;
line-height: 28px;
margin-bottom: 30px;
}
/* フォントをQuicksandへ変更 */
body{
font-family: 'Quicksand', sans-serif;
}
/* mainとsidebarの枠線を消す */
#main,#sidebar{
border:none !important;
}
/* サイドバーの見出し背景を修正 */
#sidebar h4{
height: 50px;
line-height: 50px;
padding: 0 20px;
border-radius: 5px;
background: #f3f3f3;
font-weight: bold;
color: #4D4D4D;
}
/* サイドバーカテゴリーを修正 */
.widget_categories h3:before{
margin-right:5px;
font-family:"FontAwesome";
content:"\f115";
}
/* サイドバー人気記事ランキングを修正 */
#popular-entries h3:before{
margin-right:5px;
font-family:"FontAwesome";
content:"\f219";
}
/* サイドバー新着記事ランキングを修正 */
#new-entries h3:before{
margin-right:5px;
font-family:"FontAwesome";
content:"\f0ca";
}
/* 記事間に線を引く */
#main .entry {
border-bottom: 1px solid #F0F0F0;
padding-bottom: 15px;
}
/* 関連記事間に線を引く */
#main .related-entry {
border-bottom: 1px solid #F0F0F0;
padding-bottom: 10px; 
}
/* 追従SNSシェアボタンの位置を変更 */
#sharebar {
margin-left: -150px !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);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Quicksand');

/*!

Theme Name: Simplicity2 child

Template: simplicity2

Version: 20161002

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

/* 見出しを変更 */

.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: #e91e72;

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 #FFF #FF9800 #FFF;

background: #FFC107;

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: 8px solid #e91e72;

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: 4px solid #e91e72;

color: #000;

margin:35px 5px 20px;

}

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

#navi ul li a:hover{

color: #10aba6 !important;

　　　　　　　　background-color:white;

}

#navi ul li a:before{

background:#10aba6 !important;

}

#navi ul,#navi{

background-color:white;

}

/* フォントを灰色にする */

body{

font-size: 18.8px;

　 color:#555555 !important;

line-height: 28px;

margin-bottom: 30px;

}

/* フォントをQuicksandへ変更 */

body{

font-family: 'Quicksand', sans-serif;

}

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

#main,#sidebar{

border:none !important;

}

/* サイドバーの見出し背景を修正 */

#sidebar h4{

height: 50px;

line-height: 50px;

padding: 0 20px;

border-radius: 5px;

background: #f3f3f3;

font-weight: bold;

color: #4D4D4D;

}

/* サイドバーカテゴリーを修正 */

.widget_categories h3:before{

margin-right:5px;

font-family:"FontAwesome";

content:"\f115";

}

/* サイドバー人気記事ランキングを修正 */

#popular-entries h3:before{

margin-right:5px;

font-family:"FontAwesome";

content:"\f219";

}

/* サイドバー新着記事ランキングを修正 */

#new-entries h3:before{

margin-right:5px;

font-family:"FontAwesome";

content:"\f0ca";

}

/* 記事間に線を引く */

#main .entry {

border-bottom: 1px solid #F0F0F0;

padding-bottom: 15px;

}

/* 関連記事間に線を引く */

#main .related-entry {

border-bottom: 1px solid #F0F0F0;

padding-bottom: 10px;

}

/* 追従SNSシェアボタンの位置を変更 */

#sharebar {

margin-left: -150px !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);

}

子テーマにコピペ出来れば、背景画像などはないかもだけど、ほぼほぼ求めていた絵面にはなるはず。

また子テーマの編集が失敗しても、最悪親テーマを有効にすればそれで元には戻ります。

【simplcity】カスタマイズにつきまして

暴露します。

「masalog」さんのカスタムをほぼ使わせていただきました。（見出しタグのsolidとか、background-colorだけちょっと変えただけとか内緒）

ほんとにありがとうございますm(__)m

まとめ

simplecityをインストールしてみたら予想外に操作性が良く、更に子テーマのアップロードとstyle.cssのコピペだけを話した今回。（自分の備忘録用に）

サテラサイト作る時は【simplcity】で作りまくろうかな・・そのうちメインサイトも

言っても結局affingerから浮気はできないんだから

文字数取得!

: WordPressでタイトルの文字数を自動表示する方法！

WordPressの投稿画面でタイトル作成しながら文字数を確認することができたなら・・とっても便利ですよね(^^) 今回は WordPressでタイトルの文字数を自動表 ...