初心者でも出来たSimplicity2のカスタマイズとは


スポンサーリンク


スポンサーリンク



 

今回は、当あだじょぱこたんで実際に行ったカスタマイズについて書きます。

こんにちは。あだじょぱです。

このブログを開設するまでは、WordPressどころか、ネットに関する知識も乏しい超初心者の状態でした。

手探りで、なんとかブログを開設出来ましたが、WordPressを使う上では、利用したい機能がカスタマイズというもの。

WordPressそのものは、テーマというものでデザインの大枠が決まります。

そのテーマをオリジナルのまま使うのも良いのですが、少しくらい変更したいと思いました。

このあだじょぱこたんで使用しているテーマは、Simplicity2になります。

現在は有料のストークを使用中です

今まで行ったSimplicity2のカスタマイズ内容を説明し、これからサイトを運営する方や初心者の方の参考になればと思います。

 

 

Simplicity2のカスタマイズ

 

 

WordPressのテーマになります。

無料で配布されているテーマで、オリジナルでは非常にシンプルなデザインになっています。

テーマは、無料ですが積極的に更新されており、機能は申し分ありません。

無料である分、充実したサポートを受ける事が難しいので、初心者が使用する上では、難しいカスタマイズに向かないと思います。

ですが、オリジナルでも充分使えますし、簡単なカスタマイズだけなら、初心者でも使いやすいテーマだと思います。

 

 

スキンの利用

 

Simplicity2では、テーマで使用する色など雰囲気を変更出来るスキンが選択可能です。

確か、古いバージョンでは利用出来ない機能だったと思います。

あだじょぱこたんでは基本、最新バージョンを使用するようにしています。

 

まずは、スキンを変更するところから始めました。

使用したスキンは、simple-ultramarineというものです。

スキン自体は、WordPressの管理画面から左のサイドバーで外観→カスタマイズ→スキンと進めば選択できるようになっています。

その選択画面に無いスキンでも無料で公開されているものがあるので、ネットで見つけた時にダウンロードして使えます。

Simplicity2用と書いてあるものに限られます。

ダウンロードしたファイルをサーバー内に格納されているテーマフォルダにあるスキンフォルダへアップロードすれば使えるようになります。

simple-ultramarineのスキンを使用する事で、あだじょぱこたんのデザインが、ほぼ決定した感じになりました。

 

 

色の変更

 

実際に、simple-ultramarineのスキンを使用してみるとあだじょぱこたんで使用するには色が合わない気がしました。

そこで次に手を加えたのが色の変更になります。

 

simple-ultramarineのスキンはグレー系がメインになったスキンでしたが、あだじょぱこたんではブルー系も入れたかったので変更点を考えました。

スキンによって、トップページの新規記事が並ぶ部分が、ブログカードのようになっています。

下記の項目について変更を加えました。

  • グローバルナビの色変更
  • サイドバーのタイトル表示部
  • 新規投稿ブログカード内のラインなど

 

グローバルナビとは、サイトヘッダー下のメニュー部分になります。

この部分の変更は、WordPressの管理画面で、外観→カスタマイズ→色 から簡単に変更が出来ました。

 

次に、サイドバーの部分を変更ですが、まずは下記の記述を子テーマのスタイルシートへ記述しました。

 

/*———————————
サイドバーの見出しを修正
——————————–*/
#sidebar h3 {
font-size:20px;
border-bottom:5px solid #2B41BC;
padding:10px 0;
}

 

そして、最後のブログカード内の色変更については、初心者には難易度が高かったです。

これを実行される場合は、自己責任でバックアップを準備して行う事をオススメします。

 

スキンをカスタマイズするので、サーバーに直接アクセスしスキンのCSSを直接編集しました。

XSERVERを利用しているので、ファイルマネージャーから直接、スキンsimple-ultramarineのファイルを開き編集しました。

この部分を次の項目で説明します。

 

 

スキンのカスタマイズ

 

サーバーに直接アクセスし、スキンのフォルダからsimple-ultramarineのスタイルシートを探します。

見つけたらファイルを編集します。

ファイル内の記述を見ると項目が沢山ありますが、自身が手を加えたい部分だけを編集し、都度確認をしながら進めると安全です。

メインカラー、見出し、グローバルメニューと各項目について記述があります。

その記述の中で色を指定する部分がありますので、そちらを好みの色のカラーコードで指定してあげれば完了です。

 

例えば、あだじょぱこたんでは下記のように記述しています。

/*———————————
トップページの記事を読む表示の装飾
——————————–*/
.entry-read a{
color:#fff;
font-size:14px;
background-color:#2B41BC;
border:1px solid #2B41BC;
border-radius:2px;
padding:3px 5px 3px 5px;
text-decoration:none;
}

.entry-read a:hover{
color:#000;
background-color:#DEE0E1;
border:1px solid #DEE0E1;
}

 

各項目で色以外に変更したい点があれば、希望のカスタマイズ内容の記述を編集する事で対応が可能です。

しかし、少し難易度が高いので、よく確認する必要があります。

下記は見出しh2を変更した記述になります。

 

.article h2 {
font-size: 22px;
line-height: 28px;
padding: 15px 10px 12px 20px;
background: #DEE0E1;
color: #000000;
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 #2c7cff #4c6c83 #FFF;
background: #4c6c83;
display: block;
width: 0;
}

 

こんな感じの記述でh2の見出しを設定しています。

 

 

 

プラグインの使用

 

さて、難しい部分の後は簡単なところですが、プラグインで簡単に出来るカスタマイズです。

これをカスタマイズと呼んで良いのかわかりませんが、あだじょぱこたんではサイドバーに簡単なプロフィールを設置しています。

これはプラグインを利用してウィジェットに追加しただけです。

About Me 3000 というプラグインをインストールし、表示したい内容を記載するだけで、あとはウィジェットで挿入すると完了です。

 

そして、投稿記事の最初に目次を挿入しています。

これは読者の方が、読みたい部分へすぐに飛んで行けるようにと思って設置しています。

この目次もプラグインを使用して簡単に設置出来ます。

Table of Contents Plusというプラグインをインストールするだけです。

 

 

広告の利用

 

最後は広告に関するカスタマイズです。

Simplicity2にはデフォルトで広告の設定が出来るようになっています。

初心者にはありがたい機能です。

ですが、暫く使っていてアレ?と思う事がありました。

PCで見た場合に記事下に出るアドセンス広告が2つ並んでいるのが気になったのです。

そこで、片方を違う広告にするようにCSSを編集しました。

 

ad-article-footer.phpというファイルを親テーマから子テーマへコピーして編集します。

WordPressの管理画面からテーマの編集でファイルを確認すると、下記の記述があります。

<div class=”ad-left ad-pc adsense-336″><?php dynamic_sidebar(‘adsense-336’);?></div>

この黒い太字の部分が左側を意味しています。そして赤い太字の部分を貼りたい広告コードに変更すると左側の広告が変更されます。

右側を変更したい場合は、黒い太字の部分が右側を意味する方を編集すれば大丈夫です。

 

 

 

まとめ

 

いよいよ初心者には難易度が高めの部分へ足を踏み入れてしまった気がします。

ブログを暫く運営していると気分を変えてみたくなりますよね?

そんな時に少しだけでも、ブログの雰囲気が変われば満足出来たりします。

サイト運営であれば大幅な変更や、最初からデザインに拘ったものが多いように思いますが、ブログはデザイン重視では無いので、ちょっとした変更でも雰囲気が結構違います。

失敗すると慌てて大変な事になってしまう可能性もあるので、じっくりバックアップを準備して自己責任でお願いします。


スポンサーリンク


スポンサーリンク





コメントを残す

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

ABOUTこの記事をかいた人

大阪から札幌への移住者。二度の移住でトータル15年ほど。 会社は早期退職。仕事やプライベートで北海道全域を走破。 趣味はGuitarとCamera。どちらも未熟である。  HM/HRと綺麗な素敵レデーをこよなく愛す。怪しい者ではない。