WordPressテーマ「Simplicity」でカスタマイズしたとこ20個まとめました。

スポンサーリンク
2016.11.30
simplicity-customize00

前回の記事でブログデザインについて少し書きましたが、今回は実際にどんなカスタマイズをしたか紹介します。

テンプレートやスタイルシートにコピペしていただければ、同じようにカスタマイズできますので、よかったら参考にしてみてください。

スポンサーリンク

1. 画面の大きさによって背景画像の拡大・縮小

現在、Wordpressの管理画面から背景画像の設定はできるのですが、背景画像を選んでもタイル状に並べることしかできません。

なので、スタイルシートに下記コードを記述して背景を設定しました。

ポイントは「background-size: cover;」です。これによって、背景画像は縦横比を保持したまま画面を完全に覆うように背景画像を拡大・縮小してくれます。

body {
    background: #30415d url( https://mlog.xyz/wp-content/uploads/2016/11/background.jpg) no-repeat fixed center center;
    background-size: cover;
}

スマホで見てくれている人はわからないかもしれませんが、PCで見ている人は、ブラウザのウィンドウを拡大・縮小すると、それに合わせて背景画像を拡大・縮小するのがわかると思います。こんな感じ↓

Simplicity カスタマイズ 背景画像拡大縮小

2. 記事ごと、サイドバーウィジェットごとに枠線で囲む

この方法は前回の記事で紹介しました。実際に記述したコードは以下のとおりです。

/* 枠線 ************************************/
#main {
    background: transparent;
    border: none;
}
.single #main, .page #main {
    border: 5px solid #031424;
    border-radius: 0;
    background: #FFF;
}
.home #main, .archive #main, .search #main {
    padding: 0 !important;
}
.entry {
    border: 5px solid #031424;
    padding: 10px;
    background: #FFF;
}
#sidebar{
    border: none;
    background: transparent;
    padding: 0;
}
#sidebar .widget {
    border: 5px solid #031424;
    padding: 10px;
    background: #FFF;
}

前回紹介したものとは枠線の色を変えています。

Simplicityで記事ごと、サイドバーごとに枠線で囲む方法[Wordpress]
何度でも言います、Simplicityはほんとカスタマイズしやすいテーマだと思います、えむ氏（@mlog_xyz）です。友達のブログデザイン作業が一段落して、やっと自分のブログデザインの構想を練る作業に入りました。...
mlog.xyz
2016.11.01

3. 見出しのカスタマイズ

記事本文中に挿入する見出しタグ（h1タグ、h2タグ、h3タグ、h4タグ）とサイドバーの見出しタグ（h3タグ）、トップページの記事見出し（h2タグ）をスタイルシートでカスタマイズしました。

/*******記事見出しh1*********************************************/
.article h1{
    position: relative;
    color: #333;
    background-color: rgba(142,174,189,0.8);
    font-size: 30px;
    line-height: 117%;
    margin: 0 -45px 30px -45px;
    padding: 20px 45px;
    -webkit-box-shadow: 0 1px 3px #777;
    box-shadow: 0 1px 3px #777;
}

.article h1:after,
.article h1:before{
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #333;
}

.article h1:before{
    right: 0;
    border-left: 5px solid #333;
}

.article h1:after{
    left: 0;
    border-right: 5px solid #333;
}

#archive-title {
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 30px;
    line-height: 117%;
}
/*******記事見出しh2*************************************************/
.article h2 {
    border-left: 50px solid rgba(142,174,189,0.8);
    margin: 0 -45px 30px -45px;
    padding: 25px 30px;
    font-size: 26px;
}
.article h2:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #333;
    left: -49px;
    border-right: 5px solid #333;
}

/*******記事見出しh3 h4*****************************************/
.article h3 {
    font-size: 23px;
    padding: .25em 0 .25em .75em;
    border-left: 6px solid #CF6766;
    border-bottom: none;
}
.article h4 {
    border-left: 30px solid #CF6766;
    border-bottom: 0px;
    padding: 5px 0 5px 10px;
    margin-bottom: 30px;
}

/*******トップページ記事見出しh2********************************/
.entry h2 a{
    font-weight: 700;
    font-size: 24px;
    line-height: 1.4;
}

/* サイドバーの見出しh3 **********************************/
#sidebar h3{
    position: relative;
    color: #FFF;
    background-color: rgba(48,65,93,0.8);
    line-height: 117%;
    margin: 0 -25px 30px -25px;
    padding: 20px 25px;
    -webkit-box-shadow: 0 1px 3px #777;
    box-shadow: 0 1px 3px #777;
}
#sidebar h3:after,
#sidebar h3:before{
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #663333;
}
#sidebar h3:before{
    right: 0;
    border-left: 5px solid #663333;
}
#sidebar h3:after{
    left: 0;
    border-right: 5px solid #663333;
}

結果、こんな感じになりました↓。記事中のH4見出しタグについては、そんなに使うことはないとは思いますが。

Simplicity カスタマイズ 見出しタグ

4. グローバルメニューのカスタマイズ

タイトルの下にあるグローバルメニューも、スタイルシートで変更しました。

/* グローバルメニュー ************************************/
#navi ul{
    position: relative;
    clear: both;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}
#navi ul ul{
    box-sizing: content-box;
}
#navi ul > li{
    float: left;
    list-style: none;
    position: relative;
    margin: 0 5px 5px;
}
#navi ul li a{
    border: 5px solid #031424;
    background-color: #FFF;
    display: block;
    color: #031424;
    text-decoration: none;
    -webkit-transition: all 1s;
    transition: all 1s;
}
#navi ul li a:hover{
    background-color: #30415D;
    color: #FFF;
}

記事やサイドバーのデザインに合わせて、枠線で囲むようなデザインにしています。

Simplicity カスタマイズ グローバルメニュー

あとマウスオーバーすると、じんわりと色が変わるようなアニメーションを施しています（ブラウザによってはならないかも）。

Simplicity カスタマイズ グローバルメニュー transition

CSS的には「transition: all 1s;」ってところです。「1s」の数字をもっと大きくすればもっと時間をかけてじんわり変わっていきます。

5. サイトヘッダー部分のフォローボタンのカスタマイズ

ページトップのフォローボタンについても、グローバルメニューとデザインを合わせています。

/** ヘッダーのSNSボタン******************************/
#header ul.snsp li a span {
    display: block;
    font-size: 33px;
    width: 33px;
    height: 33px;
    overflow: hidden;
    border-radius: 0px;
    background-color: #FFF !important;
    color: #031424;
    border:5px solid #031424;
    -webkit-transition: all 1s;
    transition: all 1s;
}
#header ul.snsp li a span:hover{
    background-color: #30415D !important;
    color: #FFF;
}
Simplicity カスタマイズ フォローボタン

グローバルメニューと同じ感じです。色もじんわり変わります。

6. サイトロゴ画像のカスタマイズ

サイトのロゴ画像については、前回記事でも触れたように、変更しています。

Simplicity カスタマイズ ロゴ画像

さらにマウスオーバーすると少し透過する感じにしてみました。

/* タイトル画像をマウスオーバーで透過 ************************************/
#site-title a:hover{
    opacity: 0.7;
}

「トップヘ戻る」ボタンや「モバイルメニュー」ボタンもマウスオーバーで透過しますよね。それと同じ仕様にしています。

7. トップへ戻るボタンのカスタマイズ

「トップへ戻る」ボタンは以前までFont Awesomeのアイコンを使っていましたが、画像に変更しました。

こんな画像です。

Simplicity カスタマイズ トップヘ戻るボタン

画像に変更すると言っても、Wordpressの管理画面から簡単に変えることができます。

Simplicity カスタマイズ Wordpess管理画面

そしてマウスオーバーすると、無意味に回転する仕様にしました。スタイルシートに少し書き加えれ簡単にできます。「transform: rotate;」がポイントです。

/* トップヘ戻るボタンの回転 **********************************/
.move-page-top-image {
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
.move-page-top-image:hover {
    -webkit-transform: rotate(720deg);
    transform: rotate(720deg);
}

こんな感じ↓で回転しますよ。ほんと無意味ですよね。

Simplicity カスタマイズ transform: rotate

8. 引用部分のカスタマイズ

引用部分もカスタマイズをしました。スタイルシートで引用部分の枠に影が出るようにしています。

/* 引用部分の影 *************************************/
blockquote {
    -webkit-box-shadow: 0 1px 3px #777;
    box-shadow: 0 1px 3px #777;
}

ポイントは「box-shadow」です。こんな感じ↓になります。

Simplicity カスタマイズ 引用部分

9. アーカイブタイトルのカスタマイズ

アーカイブタイトルとは、カテゴリ一覧ページやタグ一覧ページを表示した際の「○○のページです」と書かれたところです。記事を枠線で囲ったせいで、アーカイブタイトル部分は背景が白ではなくなり見えづらくなってしまいました。

また、パンくずリストも記事ページ等では問題ありませんが、カテゴリ一覧ページやタグ一覧ページでは枠線の外に出てしまい、見えづらくなってしまいました。

Simplicity カスタマイズ アーカイブタイトル

なので、スタイルシートで少し変更しています。

/** アーカイブタイトル******************************/
#archive-title{
    color: #FCFCFC;
}
.category #breadcrumb{
    color: #FCFCFC;
}
.category #breadcrumb a{
    color: #FCFCFC;
}

こうなりました↓。

Simplicity カスタマイズ アーカイブタイトル2

10. フッターのカスタマイズ

アーカイブタイトル同様、背景が画像になり文字が見えづらくなったので、少しカスタマイズしています。

/* フッター *********************************************/
#footer {
    background: transparent;
}
#footer a:hover{
    color: #8EAEBD;
}

11. 追従SNSボタンのカスタマイズ

Simplicityでは記事ページに追従SNSボタンを設置することができます。

Simplicity カスタマイズ 追従SNSボタン

こういうやつ↑ですね。ただ、記事のすぐ横にあるし、目立つし、威圧感があるので、もう少し控えめにカスタマイズしてみました。

まずはWordpress管理画面の「イドに追従シェアボタンを表示」にチェックをいれて表示して、それからスタイルシートに記述します。

/** 追従SNSボタン******************************/
#sharebar {
    margin-left: 0px;
    left: 0px;
    width: auto;
    -webkit-box-shadow: 0 1px 3px #777;
    box-shadow: 0 1px 3px #777;
}
#sharebar .arrow-box {
    display:none;
}
#sharebar .balloon-btn-set{
    height: 30px;
    width: 30px;
}
#sharebar a.balloon-btn-link {
    height: 30px;
    line-height: 30px;
    width: 28px;
    border-radius: 0px;
}
#sharebar ul.snsb{
    padding: 0px;
}
#sharebar ul.snsb-balloon li, #sharebar li.comments-balloon-btn {
    margin-left: 5px;
}
#sharebar a.twitter-balloon-btn-link, #sharebar a.facebook-balloon-btn-link, #sharebar a.googleplus-balloon-btn-link, #sharebar a.hatena-balloon-btn-link, #sharebar a.pocket-balloon-btn-link, #sharebar a.line-balloon-btn-link, #sharebar a.evernote-balloon-btn-link, #sharebar a.feedly-balloon-btn-link, #sharebar a.push7-balloon-btn-link, #sharebar a.comments-balloon-btn-link {
    background-color: #FFF;
    border: none;
    color: #031424;
}

/* モバイル画面でロゴサイドボタン消去 ********************/
@media screen and (max-width:1110px){
    #sharebar  {
        display: none;
    }
}

その結果、こんな感じ↓になりました。

Simplicity カスタマイズ SNS追従ボタン

バルーン部分を非表示にしてシンプルにしました。これで拡散ボタンをクリックしてもらえるかは不明です。

12. 最初だけ大きなエントリーカード

ちょっとしたカスタマイズですが、Wordpress管理画面から、「一覧リストのスタイル」を「最初だけ大きなエントリーカード」にしてみました。

Simplicity カスタマイズ 最初だけ大きなエントリーカード

13. サムネイル画像のカスタマイズ

一覧のリストのサムネイル画像をマウスオーバーした時に、少し動きが出るようにしました。

/** サムネイル画像******************************/
.entry-thumb, .entry-large-thumb, .related-entry-thumb {
    overflow: hidden;
}
.entry-thumb img, .entry-large-thumb img, .related-entry-thumb img {
    -webkit-transition: all 0.3s ;
    transition: all 0.3s;
    -webkit-transform: scale(1.4,1.4) rotate(15deg);
    transform: scale(1.4,1.4) rotate(15deg);
}
.entry-thumb img:hover, .entry-large-thumb img:hover, .related-entry-thumb img:hover {
    opacity: 0.6;
    -webkit-transform: scale(1.0,1.0);
    transform: scale(1.0,1.0);
}

こんな感じ↓で動きます。これはCSSのtransformの「scale（拡大・縮小）」と「rotate（回転）」を組み合わせた動きです。

Simplicity カスタマイズ サムネイル　transform: scale rotate

14. ページネーションのカスタマイズ

ページネーションとはサイトの下の方にある次のページに行ったり前のページにもどったりするリンクです。

Simplicity カスタマイズ ページネーション

これのスタイルシートの変更とFont Awesomeのアイコンの変更を行いました。

スタイルシートには下記の通り記述しました。

/* レスポンシブページネーション *****************************/
.pagination a {
    border: 5px solid #031424;
    border-left-width: 0;
    color: #031424;
    -webkit-transition: all 1s;
    transition: all 1s;
}
.pagination li:not([class*="current"]) a:hover {
    background: #30415D;
    color:#FFF !important;
}
.pagination li:first-of-type a {
    border-left:5px solid #031424;
}
.pagination li.first a::before { content: "\f049"; }
.pagination li.last a::after { content: "\f050"; }

.pagination li.previous a::before { content: "\f068"; }
.pagination li.next a::after { content: "\f067"; }

.pagination li.current a {
    background: transparent;
    color: #8EAEBD;
}
.pagination > li:first-child > a {
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
}
.pagination > li:last-child > a {
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}

擬似要素「before」と「after」を使って、CSSからFont Awesomeアイコンを変更しています。テンプレートをいじらなくても変更できるところがすごいですよね。

Simplicity カスタマイズ ページネーション Font Awesome

「<」、「>」の部分を「-」、「+」に変えてみました。無意味ですが。。。

15. カテゴリ別人気記事の設置

WordPressのプラグイン「WordPress Popular Posts」を使って、サイドバーのスクロール追従領域に「カテゴリ別人気記事」ウィジェットを設置しました。

Simplicity カスタマイズ Popular Post

僕のブログは扱っている内容が多岐に渡っているので、このウィジェットは良いと思います。続けて別の記事を読んでくれる人も増えそうです。

Simplicity カスタマイズ カテゴリ別人気記事

16. 404イメージの変更

今まで設定していなかった404イメージも設置してみました。自分ではほとんど見ることのないページですが、少し遊び心を加えて、ビッグフット君をあしらってみました。

Simplicity カスタマイズ 404ページ

17. ファビコンとアップルタッチアイコンの設置

ファビコンとアップルタッチアイコンもビッグフットで揃えました。

Simplicity カスタマイズ ファビコン
Simplicity カスタマイズ アップルタッチアイコン

18. モバイルメニューのカスタマイズ

モバイルメニュー（スマホから見た時右上に見える3本線のやつ）も少しだけカスタマイズしました。

/* モバイルメニュー **********************************/
#mobile-menu a{
    border-radius: 0px;
}

デザインに合わせて枠線で囲っただけです。

19. モバイル画面時の続きを読む部分のカスタマイズ

モバイル画面時の「続きを読む」部分も少しカスタマイズしています。この部分だけ、画面幅によってスタイルが変わるなんてスマホとPCの両方で見ないと気づきませんでした。ボタンが丸みをおびていたので、デザインに合わせてカクカクにしています。

/** モバイル画面時の続きを読む部分******************************/
@media screen and (max-width: 639px){
    .entry-read a,
    .related-entry-read a{
        background-color: #8EAEBD;
        border: none;
        border-radius: 0px;
        color: #111;
    }
}
Simplicity カスタマイズ モバイル画面　もっと見る

20. モバイル画面のモーダルメニューのカスタマイズ

モバイル画面では、今まで「モバイルメニュータイプ」を使っていましたが、「モーダルメニュー」に変更しました。そして少しカスタマイズしました。

/* モーダルメニュー ************************************/
#animatedModal {
    background: #30415d !important;
}
#animatedModal ul li {
    border-radius: 0px !important;
}
Simplicity カスタマイズ モバイル画面　モーダルメニュー

コメント

  1. えむ氏 より:
    2017/04/04 20:48

    コメントありがとうございます。
    「のリスト」の部分は、外観>カスタマイズ>テーマ内テキスト>リストタイトルの「一覧」を変更の箇所を「のリスト」に変更しているだけです。
    確認したところ、この箇所を空欄にすると、「 WEBサービス 」のリスト が 「 WEBサービス 」に変わりました。
    試してみてください。

    返信
トップへ戻る
タイトルとURLをコピーしました