カスタマイズ素人のわたしでも1週間で出来た!「Simplicity」カスタマイズ5つ【追記あり】

よければシェアお願いします(。・・。)

トーク
早いものでブログを書き始めてから1週間以上が経ちました。記事を書きながら、時間を見て「Simplicity」をカスタマイズ。すぐカスタマイズにのめり込んでしまうので、カスタマイズをやっていいのは「記事を書いたあと」と心に決めてます(笑)

カスタマイズは素人同然なので、やり出したら時間かかっちゃうんです。それでも何とか目指したい形になってきました!ブログ開設初日のカスタマイズの面影はもうどこにもありません…w

ブログ開設日にやったSimplicityカスタマイズのまとめ
こんばんは。べるだ(@verdad0619)です。 昨日開設したばかりのこのブログ。 Simplicityのカスタマイズが楽しすぎて...

今回は、ブログ開設後1週間で行った「Simplicity」のカスタマイズを5つ紹介します。

スポンサーリンク

タイトルロゴの作成/位置調整

ブログ初日には、Google Fontsを使ってフォントを大きくすることでロゴっぽく見せていたんですが、きちんとロゴを作成することにしました。

Squarespace Logo」でロゴを作成しました。
作成したロゴはこんな感じ↓
mattarilog-logo-1

“まったりコーヒーを飲みながら”ってイメージでカフェのカップのようなイラストにしたんですが、なんか透明のカップみたいになってしまいました(笑)でもカワイイからいいや♪

参考 初心者でもできた!「Simplicity」でカスタマイズしたこと6つ!-【たもトピ】

ロゴの位置調整

サイトタイトルをロゴにした際に、キャッチフレーズ(サイト概要文)との余白や全体的な位置が気になったのでCSSで調整しました。

【変更前】
サイトロゴ-カスタム前

【変更後】
サイトロゴ-変更後

余白を狭くして、サイトロゴを左寄せに。グローバルメニューの左端と位置が合うようにしました。ちょっとしたことなんですけどね。なんか気になっちゃっていろいろ試してこうなりました。

追加したコード

#site-description

4行目からの#site-descriptionがキャッチフレーズ(サイト概要文)の位置についてです。margin-topを「-15px;」にすることで、サイトロゴとの余白を狭めました。本当はもっといい方法があるのかも。ロゴのサイズによってmarginの値は変わってくると思うので、調整して下さいね。

#header .alignleft

11行目でmargin-leftを「0」にすることで、ロゴが左寄せになります。変更前と比べて、ロゴ左の余白もなくなってますよね?この辺りは、ヘッダーの背景画像を何にするかによって、左寄せにするか、そのままがいいかが変わってくると思うので、変更しながらしっくりくる位置を探してみて下さい。

カラー変更

サイトのイメージカラーを「グレー+グリーン」から「グレー+ブルー」に変更したいなぁーと思い、リンク色や見出しタグ(h2,h3)の変更を行いました。

リンク色の変更

リンク色は、Simplicityのカスタマイザーの設定で、「色」→「リンク色」で簡単に変更できます。

見出しタグ(h2,h3)の変更

h2,h3タグ共に下記のサイトを参考にしてカスタマイズしました。

参考 シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50-【NxWorld】

POINT!
【NxWorld】では、サンプルコードが全てh1タグになっているので、Simplicityで使えるように「.article h2」や「.article h3」に変更してコードに書いていきましょう!

ribon

h2タグは、NxWorldの「32. リボン #3」を参考にカスタマイズ。
本当はリボンの部分を記事枠内からはみ出させて囲っているように表示させたかったんですが、わたしの技量じゃムリでした(>人<;)なので、折り返し部分を無くして、ステッチ要素だけ残しました。リボン要素はどこへ?(笑)

カラーを青(#1789BE)にして、ステッチを白に。ステッチだけなら、このコードじゃなくて、もっとシンプルに出来るのかも。CSSはもっと勉強しなきゃダメですね。

h2

実際に入れたコード。

追記

管理人のアイコン
べるだ

青(#1789BE)では、ちょっとサイト全体の色が暗くなりがちだったので、シアン系の色に変更しました。「background-color: #1789BE;」の部分で好きな色を指定してみてくださいね!

ピョコボのアイコン
ピョコボ

変えすぎじゃない?

管理人のアイコン
べるだ

だってカスタマイズ楽しいんだもーん。早くデザイン落ち着かせて、記事書きます…

h3はNxWorldのコードそのまま使わせてもらってます

h3タグは、NxWorldの「23. 下ボーダー(2カラー) #1」を使わせてっもらってます。

h3

h1→.article h3に変更しただけ。
だったんですが・・・

またまた追記。

管理人のアイコン
べるだ

h3タグもh2タグの変更に合わせて、カラー変更しています。

画像と現在のh3タグの色が違うの分かりますか?
色を変えるだけでも、サイトの印象はグッと変わります!

サイドバーの見出し変更

サイドバーの見出しもNxWorldのコードを使わせてもらいました。
Simplicity2を使用している人は下記のコードで、このサイトと同じように装飾できます。

サイドバー

Simplicity1を使用している人は、「#sidebar h3」を「#sidebar h4」に変更して使用してください。

人気記事ランキングのカスタマイズ

サイドバーウィジェットに表示できる人気記事ランキングの順位部分を色付けするカスタマイズを行いました。別の記事に詳しく書いているので、よかったらどうぞ^^

Simplicityの人気記事ランキング順位を色付けして目立つようにカスタマイズ
こんにちは。べるだ(@verdad0619)です。 わたしが使用しているWordPressのテーマ「Simplicity」には、プ...

タグクラウドのカスタマイズ

【カスタマイズ前】
タグ変更前

【カスタマイズ後】
タグ変更後

タグのサイズを均一化して、枠を付けてみました。均一化はもしかしたら元に戻すかもしれませんが、とりあえず今の時点ではこれでいきたいと思います。

font-size: 14px !important;

3行目のこの一文でタグのフォントサイズを均一化しています。

追記

ピョコボのアイコン
ピョコボ

また追記!?

管理人のアイコン
べるだ

ご、ごめんなさい…
アイコンをつけて、マウスオーバー時に背景を透過させてみました。

変更後はこんな感じになりました▼

タグクラウド再カスタマイズ後の画像

実際の仕上がりはサイドバーにあるタグを見て下さいね。マウスをのせると色が変化します。スマホから見てる人は画面下の方にスクロールして見てくださいね。

コードも参考までに…

16〜18行目でマウスオーバー時の透過設定をしています。
見るブラウザによって設定が違うので、それぞれのブラウザに対応できるように、こう書くそうです。

CSSの設定っていろいろあるんだなぁー。
で、次です。アイコンを付けたい人は下記のコードも追加してください。

アイコンWebフォントの「Font Awesome」を使用するやり方です。

content: “\f02b”;

「Font Awesome」で好きなアイコンを探したら、「”\f02b”」の部分を書き換えてあげましょう!オリジナルのタグクラウドの完成です♪

まとめ

いろいろなサイトさんを見ていると「こうしたい!」っていうのが増えてきてカスタマイズしてしまいます^^

ピョコボのアイコン
ピョコボ

カスタマイズもいいけど、記事書きなよ!

管理人のアイコン
べるだ

はい…

少しずつでも自分の思っているサイトに近づいていくと楽しいですよ!カスタマイズ初心者のわたしにも出来たので、Let’s challenge!

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

Twitter でべるだを