初心者でもできる!|Simplicity2をおしゃれにするサイトまとめ!

スポンサーリンク

こんにちは、ぼっち大学生のトトモネです。昨日ブログのカスタマイズをいろいろしていたので、その時に参考にさせていただいたサイト様をまとめます。私はHTMLやCSSの知識はないのでコピペさせていただいてます。利用者が多く、コードを公開してくださっている人が多いので、素人でもサイトをカスタマイズできるSimplicityの強みを実感しました。

スポンサーリンク

カスタマイズ初心者向けアドバイス

私はHTMLやCSSのコードの読み方すらわからないような素人です。そんなカスタマイズ素人の人に向けたアドバイスをはじめにしておきます。

Simplicity2はCSSをいじらなくてもカスタマイズできる。

Simplicity2のカスタマイズのタブは非常に充実しています。CSSをいじらなくても大部分はカスタマイズすることができます。ほんとSimplicity2すげえ……!

カスタマイズのタブに一度目を通して、本当にCSSを追加で書き込まなきゃいけないのか見てみるといいと思います。

CSS書き込みは子テーマに。

WordPressのCSS編集は子テーマと呼ばれるテーマに書き込みます。もし導入していなかったら、こちらのSimplicity2の公式サイトから導入してください。→Simplicity2の子テーマ

反映されないときはキャッシュ削除

CSSをコピペしたのにデザインが変わらない!ってときは、元のページのキャッシュが残っていることがあります。本来はページの読み込みを早くしてくれるいいやつなのですが、今回はサイトデザインの変更の邪魔です。ブラウザからキャッシュを削除しましょう。私の環境(google chrome)だと、その他のツールっていうところの閲覧履歴の削除を選べば消せます。chromeは履歴残してキャッシュだけ消すとかもできます。マジ便利。

何でもググる前にいじってみる。

だいたいのことはググれば解決します。しかし、それでは応用が利かないし、これからもHTMLやCSSと付き合っていかなければいけない私たちは知識を得なければいけません。

0から作るのは初心者には難しいです。コピペさせていただいたモノをアレンジするところから始めましょう。色を変えたり、フォントを変えたりしてみましょう。これなら簡単にできます。

 

それでは、参考になったサイト様の紹介に移ります!

Simplicity2カスタマイズ(PC編)

このカスタマイズはstyle.cssに書き込みます。

グローバルメニュー、フォント、スキンなど

これらはSimplicityのカスタマイズのタブから簡単に変更できます。グローバルメニューの色変更は、カスタマイズの「色」というタブから変更できます。グローバルメニューの色を黒にして、字を白、マウスを当てた時の色(ホバー)を灰色にしています。

フォントはレイアウトから変更できます。フォントは源ノ角ゴシック、フォントサイズはPC、モバイル共通で18pxにしています。短い記事が多いのでスクロールがすく終わってしまうのが寂しいので大きめにしてみました。

スキンはシックを選びました。スキンを変えるだけでサイトの印象は大きく変わると思います。

レイアウト(全体)タブにある一覧リストのスタイルを大きなエントリーカードにしました。なんとなくです笑

ヘッダーとロゴを画像にする

Simplicityに画面幅いっぱいのヘッダー画像を設定する方法

Simplicityの公式サイトです。Simplicityは公式のサポート、つまりわいひらさんのサポートが手厚いのも素晴らしいところですね!

このページでおおまかなやり方はわかるのですが、実際にやってみてのアドバイスをしますね。

「ヘッダーの高さpx(デフォルト:100)」っていうところは、自分の用意した画像に合わせて調整する必要があります。私の場合、用意した画像が680pxで、ヘッダーの高さは320pxに設定しています。

自分の失敗話を少し。はじめはヘッダー画像にロゴも入れちゃっていたんですよね。こんな感じに。

こうして、ブログタイトルと、キャッチコピーを非表示にしておkって思ってたんですが……。(ブログタイトル非表示についてはこちらのSimplicityの公式フォーラムからどうぞ。リンク コピペでうまくいかなかったので、#site-titleと#site-descriptionを別々の{}に分けたらうまくいきました。)

これだとヘッダー画像をクリックしてもホームに戻らないんです。これはいかんなって思って、やり直しました。

ヘッダー画像を用意して、ロゴ画像を別に用意しまして、ヘッダータブのロゴを画像にするにチェック。その時に、ロゴ画像を横に大きくしてクリックしやすくしてみました。こんな感じ。

地味な工夫ですが笑

あ、画像編集にはGIMPを使っています。無料で高性能な画像編集ソフトです。前は重いイメージだったけど今はサクサクで動きますね。

タグクラウド

Simplicityのおすすめカスタマイズの方法を8つピックアップ

こちらのサイト様は8つのカスタマイズを紹介してくださってます。私がコピペさせていただいたのは2のタグクラウドのデザイン変更。私はフォントサイズが変わってほしかったので、コードの一番最後の、「fontsize:12px !important;」の部分を削除しました。これで普通のタグクラウドのように文字サイズが変化します。

 

PCのカスタマイズは今のところこんなものです。まだまだいじりたい部分はあるのですが、記事を書くのをこれ以上遅らせるわけにはいかないので。

Simplicity2カスタマイズ(スマホ編)

こちらのカスタマイズはmobile.cssに書き込みます。

追従するかっこいいメニュー

【保存版】Simplicityをおしゃれに!初心者でもできたカスタマイズ総まとめ。

このサイト、めっちゃオシャレ……!こちらのサイト様ではSimplicity2のカスタマイズがたくさん掲載されています。このなかでも私がコピペさせていただいたのは、スマホのアコーディオンメニューです。このメニュー、ぬるって動いてほんとかっこいいんです。Simplicity2のデフォルトのメニューは右上固定なんですよね。追従のもあるのですが、大きく幅を取るデザインになっていて私の好みではありませんでした。

ここで、注意!このカスタマイズなんですが、始めは反映されなかったんですよね。これ何でかっていうとモバイルの設定を変更する必要があるんです。レイアウト(モバイル)のタブから、モバイルメニュータイプをアコーディオンツリーに変える必要があります。デフォルトだと、うまく反映されないのです。

こちらのコードをコピペさせていただいてから変えたのは、ハンバーガーアイコンの色を黒に変えること、フォントも元に戻しました。

background-color: #2ea3f2 !important; このコードの#2ea3f2の部分を#000000に変更。

font-family: ‘Open Sans’;のコードを削除しました。

実は、メニューを左上に固定したかったのですがうまくいかずに挫折しました笑 ハンバーガーアイコンは左にできたのですが、メニューを閉じるときの×が右になってしまうんですよね……。これが初心者の限界です笑

おわりに

Simplicity2のカスタマイズで参考にさせていただいたサイト様を紹介しました!今の私のサイトがあるのはこれらサイト様のおかげです。本当にありがとうございます!

まだまだカスタマイズしたい部分は多いです。カスタマイズは奥が深い……。

私たちのカスタマイズはこれからだ!(打ち切りのマンガ感)

おしまい

 

ブログ
スポンサーリンク
スポンサーリンク
スポンサーリンク
かろめも