Simplicityのヘッダー周りをカッコよくカスタマイズしてみた

シェアする



URLをコピーする
Simplicityのヘッダー周りをカッコよくカスタマイズしてみた
https://fwww7.com/2016/08/27/post-3949/

どうもIT大好きFwwwです。

Simplicityはデフォルトのテーマカスタマイザーだけでも、

数多くの箇所をカスタマイズできるので初心者にも優しいテーマですよね。

ですが、実は作者のわいひらさんは私たちの目に見えないかゆいところまでカスタマイズできる項目を作ってくださっています。

ご存知のとおりSimplicityを構成しているファイルの数は多いですね。

しかし、その分どのファイルをいじれば該当箇所をカスタマイズできるかが分かるので、

Simplicityを使用するユーザーにきちんと気配りされていて素晴らしいと思います。

そして、最近Simplicityのカスタマイズにハマっています。

これからは、カスタマイズしたことを自分でも後から思い出せるように、

備忘録代わりとして記事として残していこうと思います。

この記事を参考にSimplicityをカスタマイズしたらできること

  • ヘッダー背景をグラデーションにする

当サイトでは現在CSSのみでヘッダー背景をグラデーションでフラット仕様にしています。

Simplicityヘッダー背景

元々ヘッダー背景が真っ白な殺風景だったため、グラデーションでフラットにしたことで少しはマシになったかなと思います笑

  • サイトタイトルをタイプライター風にカッコよく表示させる

僕がサイトデザインで一番こだわっているところがこれです。

サイトタイトルを下記のようにタイプライター風に表示させることで、

訪問者を「あっ(驚)」と驚かせることができます。

サイトタイトルをタイプライター風に表示

表示の仕方がカッコよくて気に入っているので、ほとんど自己満足です笑

  • ページローディング時にJavaScriptのエフェクトをかけて、ローディング具合を訪問者にお知らせする

当サイトではユーザーエージェントがPCの場合のみ、

ページローディング時にエフェクトを加えて訪問者にローディング具合を知らせています。

それは、スマホではブラウザ標準でローディングエフェクト機能がついてることが多いためです。

今回使用するライブラリではローディングエフェクトが多数提供されているので、

自分好みのページローディングエフェクトが見つかるのではないでしょうか。

スポンサーリンク

Simplicityのヘッダー背景をグラデーションにカスタマイズしよう

色彩感覚がなくてもプロ並みのグラデーションを提案してくれるサイト

安心してください!!

僕みたいに色彩感覚がない方でも、プロ並みのグラデーションを提案してくれるサイトが存在します。

それはuiGradientsです

上記サイトにアクセスすれば、画像のようにグラデーションを表示とともにカラーコードを提案してくれます。

uiGradients

また、uiGradientsのサイト内にある左右ボタンをを押せば、

順にさまざまなグラデーションを提案してくれます。

グラデーションの種類が豊富なので、

一つくらいは納得するものがあるのではないでしょうか。

自分にあったグラデーションを探すことができたら、

style.cssを編集してさっそくあなたのサイトにも適用してみましょう。

左側のカラーという箇所に左側から徐々に表示させたいカラーのカラーコードを挿入して、

右側のカラーという箇所に右側から徐々に表示させたいカラーのカラーコードを挿入してください。

もし、サイトイメージに合わなければ、

再度uiGradientsで納得するグラデーションを探してみてください

スポンサーリンク

Simplicityのサイトタイトルをタイプライター風に表示できるようカスタマイズしよう

サイトタイトルをタイプライター風に表示させるのにJavaScriptを使用するので、

キャッシュ系プラグインで挙動がおかしくなっても対応できませんので予めご了承ください。

footer-insert.phpに下記のソースを追加してください

上記ソースはPCでのみローディングようにしています。

なぜなら、キャッシュ系プラグインを使用していない私の環境でさえ、

モバイルでは挙動がおかしいことがよくあったからです。

次に先ほど紹介したJavaScriptのソースをサイトタイトルに適用するために、

header-logo.phpを編集します。

<!– サイトのタイトル –>から<!– サイトの概要 –>の手前までを総入れ替えします。

スマホでは挙動がおかしくなるため、従来の表示方法を適用させてます。

次にstyle.cssに下記のソースを追加してください。

サイトタイトルをタイプライター風に表示させるカスタマイズは以上です。

遅くなりましたが先ほどのfooter-insert.phpに書いたソースコードを編集すれば、

タイプライター風に表示させる時の早さや、

末尾のアンダーバーの点滅の有無などをカスタマイズ可能です。

上記の”delay(140*i)”ではタイプライター風に表示させる時の速さを指定しています

140より小さければ早く、大きければ遅く表示されます。

また、サイトタイトルを表示させたあとにアンダーバーが点滅しますが、

下記コードを消せば無効にすることが可能です。

Simplicityにカッコいいページローディングエフェクトを加えるカスタマイズをしよう

今回、Simplicityのページローディング時に、

エフェクトを加えるのに使用するJavaScriptのライブラリはPACE.jsです

普通JavaScriptで一から開発すると手間がかかります。

しかし、このPACE.jsは自サーバーにファイルを設置して、

JavaScriptをインクルードさせCSSを適用するだけで実装可能です。

なので、初心者の方でも比較的簡単に導入できるのではないでしょうか。

ではでは、さっそくPACE.jsを導入していきましょう。

まずは、PACEにアクセスします。

最初にDownloadという項目のPACE.JSボタンを右クリックして、

名前をつけてリンク先を保存でpace.min.jsをダウンロードします、

PACE.js download

次に、Themesという項目より下にあるのが今回実装可能なエフェクトたちです。

PACE.js テーマ

デフォルトではフラットな青色となっていますが、

画像にもあるようにCHOOSE A COLORボタンを押せば好きな色に変更することが可能です。

そして、Simplicityに実装したいローディングエフェクトが見つかれば、

DOWNLOADテキストをクリックします。

PACE.js dl

すると、画像のようにcssだけが記述されたページに推移するかと思いますので、

それを全てstyle.cssに追加しておいてください。

PACE.js css

そして、先ほどダウンロードしたpace.min.jsをSimplicityのjsフォルダへ設置してください。

最後にheader-insert.phpに下記コードを追加してください

もし上手くいかなかったら、手前にjqueryを読み込ませるなどしてください。

まとめ

今回紹介したSimplicityをカスタマイズする項目は、

僕が自己満足して読み込ませていたものです笑

需要はないと思いますがカスタマイズすればSimplicityを、

もっとカッコよく個性的にできるのではないでしょうか。

Simplicityカスタマイズマニュアル

スポンサーリンク

シェアする



URLをコピーする
Simplicityのヘッダー周りをカッコよくカスタマイズしてみた
https://fwww7.com/2016/08/27/post-3949/

オススメ記事