ブログをリニューアルしました！使用したオンラインサービス・CSSライブラリ・jQueryなどをメモ

こんにちは。ゆうこ（＠chibiyuko_0124）です。
やっと、やっと…！ブログをリニューアルできました！わーーい！！
浮気性なのでデザインを何度もやり直して、なんとかこの形に落ち着きました…。
こだわったところや使用したjQueryなど備忘録程度に書き込んでおこうと思います◎

レスポンシブWEBデザインで組みました

今回も引き続きレスポンシブで組みました◎
PCと他のデバイスでテンプレートを分けようか迷ったけど、レスポンシブのほうが編集が楽なんで！（●⁰౪⁰●）
以前のデザインは特にスマホが殺人的な見づらさだったけど…ちったあ改善できたかな？

なるべくプラグインは使わない！

プラグインを使うとソースがぐっちゃぐちゃになるし、重くなるし、バージョンアップするとデザインが崩れたり使えなくなったり…といったことがイヤだったので極力使わないようにしました！

記事ページに表示される「関連記事」だけは「WordPress Related Posts」というプラグインを使っています。
このプラグインだと、自分で掲載したい記事をチョイスできるのがいいな〜と思って＊
でもここもphpで自動化させちゃおうか迷うな〜。

サイドバーのランキングにはちょっと手こずって、こちらの記事のおかげで表示できました！！（TOT）

プラグインなしで人気記事ランキングを表示

→WordPressにプラグインを使わず定期的に更新される人気記事を表示する

WEBフォントはこの4つ！

日本語はGoogle FontsのM+1p

Google Fonts M+1p WEBフォントカクッとしつつ曲線もありつつでほんとかわいい…。
なにより太さが7段階で選べるのがうれしい！
日本語のWEBフォント、もっともっと増えてほしいな〜。
→Google Fonts + 日本語早期アクセス・Google Fonts + Japanese Early Access

本文の英文はRubik

こちらもGoogle Fontsです。
M+1pとの太さの差が気になるけど…。
→Google Fonts Rubik

見出し英文はSOFIA

商用可能無料英文 WEBフォント SOFIA サイドバーなどで使用しております。
かわいすぎずエレガントすぎずで使いやすい〜♡
下記のサイトからダウンロードできて、「Generator」というメニューからWEB用に書き出しができます♪
→SOFIA 英文WEBフォント

アイコンフォントはAwesome

WEBフォントアイコンフォント Awesome Awesomeは定番中の定番だあね〜。
安定のかわいさ♡
そして種類も豊富で助かります！
→Awesome

ちょっと動きを入れて遊びゴコロを

ホバーで画像にアニメーション

css アニメーションホバーロゴやアイキャッチにカーソルを持ってくると、にょんっと動くようにしました。
下記のCSSライブラリで実装してまふ。
→Hover.css

無限スクロール

jQuery　無限スクロール 2ページ目以降の記事の表示を、スマホサイトでよくあるような、ボタンを押すと続きがふわっと出てくる形にしました。
下記のサイトを参考にしました。
→【jQuery】無限スクロール［Infinite Scroll］を極限までカスタマイズ。

要素がふわっと表示

jQuery フェードインふわっと表示別のページに遷移したときに、ページ全体がふわっと表示されるように記述しました！

CSS・JSの圧縮＆合体させました

極力軽くしたかったのと、CSSやJSは何個も読み込むのがめんどくさいしソースをなるべくスリムにしたかったので圧縮して合体させました◎

軽量化に便利なOnline JavaScript/CSS Compressor

CSSやJSをフォームにコピペするだけです。
便利〜〜（◍•ᴗ•◍）♡
→Online JavaScript/CSS/HTML Compressor

JSを合体！JMerge

フォームにURLを入力して「Continue」をクリックするとそのサイトで使われているJS一覧が表示されます。
合体させたくないJSはクリックすると一覧から消えます。
「Combine them！」をクリックすると合体したJSテキストがざざーーっと表示されるので、コピペで保存すればよろしおす◎
→JMerge