初心者がやるSimplicityカスタマイズ。もうね、疲れました。グローバルメニューとかボックスとか引用とか…。もういやだ。

初心者がやるSimplicityカスタマイズ。もうね、疲れました。グローバルメニューとかボックスとか引用とか…。もういやだ。

やあ、Simplicityフリーク諸君。

今日もカスタマイズに精を出しているかい?
僕はもうカスタマイズは当分いいよ。

記事を書く前にもう疲れちゃった。

でもせっかくの頑張ったカスタマイズ。
少しの変化でも備忘録として残しておかないとね。


 

ども、Simplicityフリークのシゲ(@piece_hairworks)です。

ご存知の方も多いと思いますが、当ブログではわいひらさん(@MrYhira)の無料のWordPressテーマである「Simplicity」を利用させていただいてます。いつもありがとうございます。

初心者向けのテーマとして多くの人に使われている反面、個性的なカスタマイズをしないと似たり寄ったりのデザインになってしまうのは否めません。テンプレートは一緒で、せいぜいカラースキンを変える程度。

現に僕のブログもシンプルでかつすぐにSimplicityだとわかってしまう、個性のないデザインにとどまっています。

そろそろカスタマイズを本格的にやっていきたいな…

そんな矢先パソコンの貴公子であるおくたにさまー(@okutani_t)が、タイムリーにこんなツイートを。

僕の苦手なコードです。おくたにさまーはこれを駆使して、オリジナルのブログデザインをしています。羨ましいです、マジで。

▼そんな僕のためにおくたにさまーは記事を紹介してくれました。


この記事を見たときに、今まで避け続けてきた「めんどくさいカスタマイズ」をやってみようと思いました。

とても長い道のりでしたが色々な人の力をパクり借り、ひとまず納得のいくカスタマイズが出来たので備忘録として残しておきます。どこかの誰かのためになればいいなと思います。

 気をつけるポイント

今回はHTMLやCSSをいじるというかなり危険なカスタマイズも含まれているので、バックアップをとるなりして復元可能な状態でイジイジしてください。

それではまいりましょー。

ブログに導入したかったボックスみたいなやつ

色々な人のブログを見ていると、表現方法はそれぞれ様々です。面白いブログやためになるブログ、わかりやすいブログなど十人十色。ブログは読者に「何かを伝える」メディアだと思っているので、伝わりやすさが重要なのではないかと思います。

そんなときにいつもお世話になるエローラさん(@uszero)のブログNaifixのこの記事を見ていたところ…

▼こんなやつを使ってて、めっちゃわかりやすかった。僕もこういうやつ使いたい。

スクリーンショット 2015-08-25 17.06.13スクリーンショット 2015-08-25 17.06.13

Avatar image
ワイフ
見出しもついてて、わかりやすい感じだね!
Avatar image
シゲ
これをブログで使えば、注意点やポイントをうまく伝えられそうでしょ?
Avatar image
偶然の産物
見た目にも綺麗なデザインですしね。

ということでこれを導入すべく、エローラさんに問い合わせてみた。(ドキドキ)

「エローラさんボックス」のカスタマイズ

Twitterで恐る恐るDMをしてみた。

スクリーンショット 2015-08-25 18.04.09

スクリーンショット 2015-08-25 18.05.35

スクリーンショット 2015-08-25 18.06.59

今まで僕はHTMLとCSSは別のものと捉えていたんですけど、どうやら二つはとても仲良しのようです。僕らが普段ブログを書いている、WordPressの「ビジュアル」と「テキスト」画面。

スクリーンショット 2015-08-25 18.12.25

HTMLというのはその「テキスト」側の記述をする方のコードのことで、CSSというのはテーマに記述しておいて、「テキスト」で書いたときに呼び出すためのものでした。

CSSでテーマの方に「こうやったらこんなんできますよ」の土台になるものを記述しておいて、HTMLで「こんなんできるんだよね?お願いします〜」ってWordPressに呼び出す。(僕の中ではそんな印象。きっと違うだろうけど、イメージです)

Avatar image
ワイフ
なんかよくわからないけど、CSSで書いておけばHTMLでブログに表示できるってことね。
Avatar image
シゲ
たぶん。
Avatar image
偶然の産物
たぶん、ですか。

詳しいことは詳しい人が説明してくれるだろうと思うので、今回はそんなイメージができただけでも一歩前進した気持ちです。

▼エローラさんに教えてもらったコードを色々といじって、僕のブログに合いそうなデザインに変えてみました。

スクリーンショット 2015-08-25 18.19.22

ついに僕のブログにボックスが装着されました。見出しにアイコンがついたデザインになってますが、これは先ほどのおくたにさまーに教えてもらったFont Awesomeのアイコンを利用してます。

コードも一応のせておきますね〜。

▼エローラさんボックスはこちら。

CSSがこんな感じ。
 
.sample_box {
 position: relative;
 border: 2px solid #888;
 border-radius: 4px;
 padding: 2em 2em 0;
 margin: 48px auto;
}
 
.sample_ttl {
 font-size: 1.2em;
 color: #888;
 position: absolute;
 top: -1.2em;
 left: 1em;
 background: #fff;
 padding: 0 8px;
}
HTMLがこんな感じです。
 
<div class="sample_box">
<div class="sample_ttl">ここに見出しを入れます。</div>
囲った範囲の中に表示させたい文章はここに。
</div>

このままでも十分使いやすいですが、僕は個性を出したいのでこんな感じに。アイコンフォントを入れてみたりと頑張ってカスタマイズしました。

▼シゲボックスのコードはこちら。

CSSはこんな感じに変更しました。
 
.sample_box {
 position: relative;
 border: 3px solid #f9e111; 
 border-radius: 4px;
 padding: 1.2em 2em 0;
 margin: 48px auto;
}
 
.sample_ttl {
 font-weight:bold; 
 font-size: 1.2em;
 color: #000000;
 position: absolute;
 top: -0.6em;
 left: 1em;
 background: #fff;
 padding: 0 8px;
}
HTMLはこんな感じ。
 
<div class="sample_box">
<div class="sample_ttl"><i class="fa fa-hand-o-right"></i> 気をつけるポイント</div>

変更点はボーダーと文字のカラーを変更。アイコンフォントを入れて、太字にしてフォントサイズも少し大きくしました。それに合わせて配置を囲み線と揃うように、文字の位置を変更しました。

HTMLは入れるアイコンフォントや、見出しを変えるだけでいろんなシチュエーションでも使えるようにしました。これをAddQuicktagに登録しておくと便利です。

▼出来上がりはこんな感じに。僕らしくなったと思います。

スクリーンショット 2015-08-25 19.58.25

Avatar image
ワイフ
うん、黄色がいい感じじゃん。このブログにあってるね。
Avatar image
シゲ
理解するまではよくわからなかったけど、わかるとなんとか大丈夫だった。エローラさんのおかげだね。
Avatar image
偶然の産物
ブロガーらしくなってきましたね。

▼ついでにリスト表示すると余白部分がおかしくなってたので、それも聞いてみました。

スクリーンショット 2015-08-25 20.01.27

Simplicityのデフォルトの設定がそうなってるみたいなので、エローラさんの「.sample_box ul {}」をCSSの方に追記して調節してみました。

▼そのコードもどうぞ。一緒に入れとくとバランス良くなりますよ。

リストを囲ったときもこれならバランスいいんじゃないかな?
 
}
.sample_box ul {
 padding: 0.2em 2em 1em;
}  

▼これを記述するとリストも綺麗に表示されるようになります。

スクリーンショット 2015-08-25 20.07.14

エローラさん本当にありがとうございました。

そしてコードの仕組みが分かったので、どんどんやっちゃいました。

エローラさんの記事のカスタマイズを利用させてもらった

Simplicityを自分色にカスタマイズしていきます。コピペでいけるものはどんどん取り入れて個性を出していきます。

▼こちらの記事を参考にさせてもらいました。


僕が利用したのはこんな感じの蛍光ペンみたいになるやつと、リンクにマウスオーバーすると「ふわっ」となるやつです。

▼コードはこちら。

リンクがふわっとなるやつ。
 
a {
	color: #2098a8;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
	transition: 0.3s;
}
 
a:hover {
	color: #f9e111;
}
蛍光ペンみたいに強調されるやつ。
 
.sample07 {
    background: linear-gradient(transparent 60%, #ffff66 60%);
}

蛍光ペンのやつは「.sample07」でAddQuicktagに登録しないと出ませんよ〜。

細かいところですけど、パソコン上で見るときにやっぱり自分の色が出せるポイントでもあるかなと。ちゃんとできて嬉しいです。(初歩の初歩だろうけどw)

エローラさん本当に勉強になりました。エローラさん愛してます

その他もろもろのカスタマイズ

「Simplicity カスタマイズ」で検索して出てきたのを、片っぱしから読んでいって取り入れたいと思ったカスタマイズをしてみました。好みもあると思うので、興味のある方はどうぞ。

▼素敵なデザインだなと思ったのはこちら。

この記事の中のグローバルメニューのカスタマイズと、スマホメニューのカスタマイズをパクり参考にさせていただきました!ありがとうございます!(フォントの変え方も知りたい…)

▼ちなみにコードはこちら。

グローバルメニューに上下のボーダーを入れるやつ。
 
#navi {
   border-top:3px solid #000000;
   border-bottom:3px solid #000000;
}
スマホメニューのやつ。
 
#animatedModal a {
  color:#000;
}
#animatedModal ul li a{
  color:#000;	
}
#animatedModal ul li {
  border: 1px solid #000;
}
#animatedModal{
  background-color: rgba(255,255,255,0.85) !important;
}

追記:フォントを「游ゴシックに変更」

最近よく見かけるフォントである「游ゴシック」これをSimplicityに実装するコードがこちら。いつもの表示に飽きたらフォントを変えてみるだけでも、雰囲気が変わるので簡単でオスススメなカスタマイズですよ!

▼コードはこちら。

テーマのフォントをかえるやつ。
 
body {
  font-family:
      YuGothic,'游ゴシック',
      'Hiragino Kaku Gothic ProN',
      Meiryo, '游ゴシック', sans-serif;
  font-size:1em;
  /*height:100vh;*/
}

スキンをオレンジメニューに変えても黄色を取り入れる姿勢

少し個性が出るようにいじりました。これで「無事に自分らしくなった…。」と思ったんですが、これをするとテーマスキンカラーである「淡なのはな」→「オレンジメニュー(サブなし)」に変更する必要がありました。

黄色」がテーマの僕のブログ。黄色がいなくなるなんてダメ。

 気をつけるポイント

スキンを変えると、デフォルトのグレーを基調としたhタグになったりします。引用もグレーっぽいし、トップページの記事の日付もグレー。

これじゃ納得いかないので、そこも調べて子テーマに追記しました。

▼追記したのはこちら。

hタグを黄色っぽく変更するコード。
 
.article h2 {
  border-left:7px solid #f9e111;
  margin: 40px -29px 25px;
  padding:20px 30px;
  font-size:26px;
}
.article h3,
#comment-area h3,
#related-entries h3{
  font-size:23px;
  border-bottom:5px solid #f9e111;
  padding:10px 0;
}
引用を黄色にするやつ。
 
blockquote {
  background: none repeat scroll 0 0 rgba(245, 245, 245, 0.8);
  background-color:#f9f9db;
  border: 1px solid #FFFFFF;
  margin: 1em 0;
  padding: 20px 55px;
  position: relative;
}
 
 
blockquote:before {
  color: #f9e111;
  content: "“";
  font-family: serif;
  font-size: 600%;
  left: 0;
  line-height: 1em;
  position: absolute;
  top: 0;
}
 
blockquote:after {
  bottom: 0;
  color: #f9e111;
  content: "”";
  font-family: serif;
  font-size: 600%;
  line-height: 0;
  position: absolute;
  right: 0;
  bottom: -16px;
}
 
/* Internet Explorer11のみに適用したい設定 */
@media screen and (min-width:0\0) {
  *::-ms-backdrop, blockquote:before { left:  -55px; }
  *::-ms-backdrop, blockquote:after  { right: -55px; }
}
投稿した日付を黄色っぽくするやつ。
 
.post-meta{
  margin-bottom: 0.5em;
  text-align:right;
  background-color:#f9f9db;
  color:#555;
  font-size:16px;
}
クレイジーワイフ
めんどくさーい。変えなきゃよかったのにね。
シゲ
ああそうだね。もうここまできたら引き下がれないよ。
偶然の産物
やるならとことんですね。

ついでにもっと個性を追い求めてみた。もう止まりませんわ。

グローバルメニューに拡大縮小の効果をつけてみた

エローラさんの記事の中に気になる参考リンクがあったので、それを掘り下げていってみた。

▼するとこちらの記事に出会った。

CSSで面白い効果を作ってる記事だった。かなり面白かったので取り入れたくて、コードを参考にさせてもらった。

グローバルリンクに少し変化があるといいなあと思ったので、無理やり放り込んでみた。すると面白い効果があったので、そのまま利用させてもらうことに。

Avatar image
ワイフ
どんな変化があったの?
Avatar image
シゲ
パソコンでブログタイトルとか、サムネイル(画像)をマウスオーバーしてみたらわかるよ。

▼こうなりました!パソコンの方はやってみてください〜。

oABnw3IaLc

Avatar image
偶然の産物
ほー!こりゃ面白いですね!

▼コードはこちら。

ビヨーンってなる効果
 
#navi a{
    display: inline-block;
    color: #03c;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}
 
a:hover {
    -webkit-transform: scale(1.5,1.5);
    -moz-transform: scale(1.5,1.5);
    -o-transform: scale(1.5,1.5);
    -ms-transform: scale(1.5,1.5);
    transform: scale(1.5,1.5);
}

あまり意味のない装飾ですが、個性的な演出なので僕は大満足です。必要ないと言われればそれまでのヒマつぶしブログですからね〜。

そして最後のカスタマイズは…。

せっかく記事にまでしてくれたのに今頃カスタマイズした件

先日、Simplicityを使ってるブロガーさんののぶさん(@designlikes11)が記事にしてくれたカスタマイズ。あとがきやまとめの部分に、自分のアイコンをのせるというもの。

▼こういうやつ。

スクリーンショット 2015-08-25 21.08.19

個性的なものですごくやりたくて、聞いてみたらなんと記事にしてくれた!

▼こちらがその記事。めっちゃ嬉しかった〜!

でも一つ問題がありました。僕の記事下にあるこの記事下紹介がh4タグ、これまでまとめになってしまったのだ。

▼ここがおかしなことになったのです。

スクリーンショット 2015-08-25 21.37.47

Avatar image
ワイフ
ばかだなー。もうのぶさんに土下座したほうがいいんじゃない?
Avatar image
シゲ
その節は本当にありがとうございました。そして本当にすいません…。土下座します。m(_ _)m
Avatar image
偶然の産物
ご迷惑をおかけしました。僕も土下座します。m(_ _)m

前に書いた「ブログプロフィールを記事下に!Fancier Author Boxが見栄え良くてオススメ!」で入れてあるプロフィールのタグがh4なのでこれに影響が出ちゃいました。このプラグイン入れてないなら、かなり個性的な「あとがき」になるので是非利用してみてください!

あとがき!

今回はSimplictyの他のブログとの差別化を図りたいと思い、カスタマイズに挑戦しました。思いの外時間がかかってしまいましたが、今の所満足しています。

ただ慣れない作業の繰り返しだったので、正直疲れました。

今回のカスタマイズを機にまた個性的なカスタマイズができるよう、色々な方のブログをみてパクる参考にさせてもらおうかと思います。勉強させてもらいます〜。

Avatar image
ワイフ
どうせまたパクっちゃうんでしょ。
Avatar image
シゲ
あくまで参考に、だ。
Avatar image
偶然の産物
パクリメディアー。

参考にさせてもらった方々、本当にありがとうございました〜!

追記

▼久々にブログカスタマイズやりました。こんなのもありますよ!

久しぶりにブログ初心者のsimplicityカスタマイズ。 リニューアルしてみようとあーだこーだと奮闘してみた。 ちょっとずつ頑張ってみたものの読みにくくなったような。 それよりも大切なことがちょっとわかった気がした秋の夜。

追記

▼テーマをSimplicityからDigiPress「GRAPHIE」へ変更しました。

ははは、じゃあねー!( ´ ▽ ` )ノ

この記事が気に入ったら
『いいね!』してね

Twitter でシゲを

コメントをどうぞ!

*
*
* (公開されません)