NxWolrd 2015 Year in Review

  • Posted on
  • Category : Blog
NxWolrd 2015 Year in Review

これまでこういったものは書いてこなかったのですが、せっかくGoogle Analyticsを利用しているので、簡易的なものになりますが今年多くの方々に見ていただいたエントリーを紹介しつつ、当ブログの1年間を振り返ってみようと思います。

2015年の公開エントリー数

2014年に当ブログで公開したエントリーは「157」だったのですが、今年もできるだけ書きたいなと思っていたので “最低150エントリーは公開する” という個人的な目標を立てていました。
結果的にはこのエントリーをのぞいても今年1年で「176」エントリーを公開することができ、その内個人的なブックマーク代わりで書いているカテゴリー(Bookmarks)のエントリーを抜かしたとしても「165」エントリーを公開することができたので、内容はともかく取り敢えず “最低150エントリーは公開する” という自分の中での大きな目標は達成することができました。

来年はもっとインプットを増やしたいという大きな理由に加え、その他にもいろいろあってこのような具体的な数字での目標は作らないことにしようと思っているのですが、引き続き書けそうなら書く(アウトプットする)というスタンスは続けていきたいなと思ってます。

今年たくさんの方々に見ていただいたエントリー TOP10

当ブログで今年公開したエントリーでたくさんの方々に見ていただいたTOP10です。
WordPressのちょっとしたTipsやjQueryプラグインのまとめ、他にもデザイン制作時などに使えるフリー素材や便利なツール・サービスなどいろいろと書いてきましたが、TOP10に入ったエントリーのほとんどがCSSに関連するものになりました。

フォーム周りで覚えておくと便利なCSS Snippets

1.フォーム周りで覚えておくと便利なCSS Snippets

ブラウザやデバイスによって見た目が異なるinputtextareaなどのスタイルを削除したり、チェックボックスやラジオボタンをCSSのみで装飾するなど、フォーム周りをスタイリングする際によく使いそうなプロパティやスニペットをまとめているエントリーです。

手書き風デザインにピッタリなデザイン欧文フォント 30

2.手書き風デザインにピッタリなデザイン欧文フォント 30

いずれも欧文フォントになりますが、手書き風デザインに相性が良さそうなデザインフォントを全30種類まとめたエントリーです。

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

3.シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50

ものごく手間がかかっているようなものはないのですが、画像は使用せずにCSSだけでスタイリングしたタイトル(見出し)のデザインサンプル集です。

CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15

4.CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15

画像が拡大(ズームイン)したりブラーエフェクトをかけたりなど、画像にホバーした際に何か動きをつけたいという時に使えるエフェクトを集めたエントリーです。
このエントリーを公開する少し前から本格的にCodePenを使い始め、デモなどにもよく利用するようになったのですが、このエントリーのデモ用として公開したページが初めてPicksに掲載されてすごく嬉しかったのを覚えています。

CSSで実装するハンバーガーメニュークリック時のエフェクト 10+

5.CSSで実装するハンバーガーメニュークリック時のエフェクト 10+

ハンバーガーメニューをクリックした時の動きをまとめたもので、全12種類のエフェクトを紹介しています。

画像を使わずに、CSSのみでリストアイコンを表現したサンプル 10

6.画像を使わずに、CSSのみでリストアイコンを表現したサンプル 10

list-styleや画像などではなく、主に擬似要素を利用するなどしてリストアイコンを表現してみたサンプル集です。

WordPress:get_the_categoryでカテゴリー名やスラッグを取得する方法

7.WordPress:get_the_categoryでカテゴリー名やスラッグを取得する方法

TOP10に入っている唯一のWordPress関連のエントリーがこれでした。
タイトル通り、WordPressでカテゴリー名やスラッグを取得する方法について紹介しています。

ユニークな見せ方や動きを実装したい時に使えそうなスクリプト 10

8.ユニークな見せ方や動きを実装したい時に使えそうなスクリプト 10

他ではあまり見かけることのないユニークな見せ方や動きを実装したい時、遊び心あるイースターエッグを仕込んでおきたい時などに使えそうだなと思ったスクリプトのまとめです。
窓に水滴がついていく様子を表現できる「rainyday.js」や画像をジグソーパズルにしてしまう「snapPuzzle」などを紹介しています。

年表などでよく使用されるタイムラインコンテンツ作成時に便利なプラグインやチュートリアル 15

9.年表などでよく使用されるタイムラインコンテンツ作成時に便利なプラグインやチュートリアル 15

こちらも主にJavaScriptに関連するエントリーで、年表・沿革・コメント一覧といったコンテンツで用いられているタイムラインデザインを作成する際に便利なプラグインやチュートリアルを紹介しています。
中にはJavaScriptは使わずCSSだけで実装したものやレスポンシブ対応したものもあります。

ゴーストボタンと相性が良さそうなホバーエフェクト 10+

10.ゴーストボタンと相性が良さそうなホバーエフェクト 10+

ゴーストボタンで使えそうなホバーエフェクトのサンプル集で、全てCSSのみで実装できるものになっています。
ゴーストボタンと相性が良いとは言っていますが、もちろん様々なタイプのボタンで利用できると思います。

以上が今年たくさんの方々に見ていただいたエントリー TOP10で、10エントリー中6エントリーがCSSをテーマに書いた内容のものになりました。

ちなみに、当ブログを閲覧してくれた方々が使用しているブラウザとして一番多かったのはChromeで、デモでChromeでの確認を推奨していることも多少は関係しているかもしれませんが、それでも割合的に他のブラウザに比べて圧倒的に多く全体の半数以上でした。
次に大体同じぐらいの割合でFirefoxとSafariが続き、その次にIEという感じでした。
IEはバージョンでいうと11が圧倒的に多かったのですが、思っていた以上にIE8やIE9でのアクセスも多く、このブログの場合IE9以下は非対応ということでまともに見れないようにしているので、せっかくアクセスしてくれたのに申し訳ないことしたかなというのは少し思いました。(とはいえ、いまさら対応するつもりはないのですが…)

また、OSについては書いている内容がないようなのでモバイル環境からのアクセスはかなり少ないのですが、それでも年々増加していて今年も去年に引き続きモバイル環境からのアクセスが増えていました。

来年以降も相変わらず個人的備忘録のような内容でマイペースに更新していくとは思いますが、もし興味ある内容があったりお暇な時間などあれば覗いてやってください。
また、公開しているものでよくわからないことを書いていたり間違った内容などある場合は、参考になるのでどんどん突っ込んでもらえると嬉しいです。
今後もNxWolrdをよろしくお願いします :)

Back to Top

NxWolrd 2015 Year in Review

NxWolrd 2015 Year in Review

/ Blog

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。