カテゴリー一覧はこちら

ワードプレスのテーマを「LION Media」→「SANGO」に変更しました。

こちらのブログを始めてから「LION Media(ライオンメディア)」のテンプレートをずっと使っていたのですが、何かものたりなさを感じるようになりました。
(決してLION Mediaが悪いとかではなく自分の完全な好みの問題です。LION Mediaは無料かつスタイリッシュなデザインでとても素晴らしいテンプレートです。)
そんな中ブログをあれこれ見ている中でものすごく気になったデザインがありました。色々調べているうちに辿りついたのが現在使用している「SANGO(サンゴ)」というテンプレートだったのです!!

SANGOはポップなデザインなのにお洒落

柔らかなデザインなのですが、どこか洗練された印象を受けます。本当に見ていて飽きないというか長居したくなるようなデザインです。英文フォントで使用しているGoogle Fontsの「Quicksand」もSANGOのデザインと合っています。

SANGOは動きがスムーズ

サイト全体が軽くサクサクと動きますのでストレス無く見れます。動的な動きもほとんどJavaScriptを使用しておらずHTML+CSSでの実装だそうです。

SANGOはカスタマイズが豊富

カスタマイズの専門知識が無くても直感的にある程度サイトを作り込むことができます。また、マニュアルがとても充実しているので初心者にもとても優しいテンプレートです。開発者との距離が近く色々と教えていただける点もポイントが高いです!

30種類以上のボタン・30種類以上の見出し・30種類以上のボックスデザイン・20種以上の箇条書きデザインがありどれを使うか迷っちゃいます。

参考 WordPressテーマ「SANGO」29の魅力SANGO

値段は10800円と少し高めではありますが、それ以上の価値がこのテンプレートにはあります。

今回LION MediaからSANGOに乗り換えをおこなったのですが、少々設定変更が必要な箇所がありました。

LION Mediaで設定していた文字装飾のCSSが全て外れた為、ただのテキスト表示になってしまいました。LION Media独自のCSSがかかっていたので、こちらの各クラスにCSSでデザインの再設定が必要です。

LION Media文字のマーカー(今回は黄色)の再設定

CSS

.markerYellow {
background: linear-gradient(transparent 65%, #ffff66 0%);
font-weight:bold;
}
参考 CSSで“蛍光ペン”っぽく文字にマーカー線を引く方法vdeep

見出し(今回はH2)のデザインの再設定

CSS

.entry-content h2{
position: relative;
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 2px white;
padding: 0.2em 0.5em;
color: #454545;
}

.entry-content h2:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #a8d4ff;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}
参考 SANGOでデフォルトの見出しを変える方法SANGO カスタマイズガイド

LION Mediaでデフォルトで入っていた見出しの目次機能ですが、こちらも無くなっています。ですが、「Table Of Contents Plus」というプラグインを使う事で、全く同じ機能を設置できます。

参考 目次プラグイン「TOC+」の設定方法SANGO カスタマイズガイド

個人的に好きなフェードして現れる動きです。このブログでは記事内のタイトルでふわっと文字が浮き上がるような演出で使っています。参考になるかは分かりませんが備忘録がてら記載しときます。このCSSを張り付ければタイトルがフェードして現れます。

CSS


.entry-title {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

まだまだサイト作成に関しては初心者ですが、少しづつスキルアップできたらな…と思っております。それと、テンプレートの購入を迷っているのであれば早めに購入した方が良いと思います。今回テンプレートの変更をして記事の修正だったりサイトのカスタマイズであったり記事数の少ないサイトだったおかげですぐに終わらす事ができました。記事数がもっと多かったら…..ですので、できるだけ早めの購入をおすすめします!