新年あけましておめでとうございます。Clipをよろしくお願いします。そんなわけで新年はじめにブログテーマを大幅リニューアルしてみました。Clipをよろしくお願いしますリニューアルしたきっかけ理由は簡単。前のデザインに飽きてしまったから。リニューアル当初はpjaxとかアニメーションを取り入れて満足していたのですが、かれこれ1年以上あのデザインでブロブを書いていると新鮮味が薄れてくるんですよね。その前も似たようなデザインをちょこっとテコ入れした感じだったし。そこで半年前くらいから時間もあったし、ちまちま進めようと思ってデザインからコーディングまでフルスクラッチでリニューアルしてみました。やりすぎて年越しまで引きずってしまったのは私の性格が出ているなと感じます。テーマカラーは派手な黄色一色から茶色とオレンジ色に変更。落ち着いた大人になりたいという思いも込めて。ロゴは鹿のイラスト素材1を使用しています。いいロゴが作れたら変えたい...。今回のリニューアルではまだAMPテーマを作っていないので、もっと精度の高いテーマを作り直す予定です。これもまたいつ完成するかわかりませんが。こだわったポイントリニューアルにあたって意識したことやこだわりなど。前回までのデザインは、マテリアルデザインのお手本に沿ってレイアウトしていましたが、今回はいろんなサイトやブログを見て「これいいな」と思ったデザインを参考にしつつデザインしてみました。ナビゲーションをクリックしたときの波紋エフェクトは前回の踏襲で、指定した要素をクリックしたら<div>タグを生成してCSSアニメーションで効果を出しています。押したときに反応があると楽しいですよね。pjaxによるスムーズな画面遷移pjaxを使ったスムースなページ遷移やローディングアニメーション(1番やりたかった)なども好評で良かったです。久しぶりにゴリゴリにjs弄ったので楽しかった!以前はそのまま画面を書き換えるだけで終わっていましたが、記事一覧から次ページを読み込むときと他のリンクで画面遷移方法や効果を変えるのが難しかったです。結局クリックしたリンクのclassやページURLなどで分岐するようにしました。シンプルなコードに出来そうですが私にはコレが限界...。エフェクトとかスマホだと結構重いのでスマホだけオフにしておこうか悩み中...。Windowsでもフォントを綺麗に地味にこだわったポイント。日本語フォントこそ指定したい自動カーニングを参考にテキストの文字詰めを実装し、以前当ブログでも紹介したCSSでアンチエイリアスを掛けています。グリット分けをFlexboxにここに来て古いIEをバッサリと切り捨ててみました。floatやinline-blockを使っている場所もありますが、ほとんどのカラム分けをFlexboxにしています。.column-nというclassを親要素に付けて、横並びにする要素を.colで囲うと高さが揃った横並びが実現します。今回は勉強のために使ってみましたが、FlexboxはIE関係のバグも多いらしくなかなか難しいです。横導線をしっかりとグローバルナビゲーションをドロップダウンリストに変更したり、検索機能でカテゴリやタグで絞込検索が行えるようにしました。カテゴリ間の移動を多くしてもらいブログの回遊率を上げる作戦です。カテゴリやタグも見直して、多く使われたタグはカテゴリにして階層化、あまり使っていないタグは削除しておきました。格安SIMカテゴリは料金プランのまとめとか作る予定。Clipをよろしくお願いします最近は全然ブログの更新サボりがちだったので、今年こそ一週間以上ブログを放置するのは避けたいですね。更新してガンガン稼げるブログに仕上げていけたらなと思っています。iOSやMacで変なところで改行が発生するという謎のバグが残っているので、もう少し不具合修正や気に食わないところをカスタマイズする予定です。「ここおかしくない?」とかのバグ連絡や「デザインかっこいい!」などの賞賛コメントを頂けるとブログ更新のモチベーションにつながるので是非ともよろしくお願いします。Clip改めクリエイタークリップをよろしくお願いします。33.1でロゴがアニメーションするようになっていた25歳の誕生日をお祝いしてもらうためのコンテンツを作った話WordPressをロリポップ!からMixHostへ移転しました。鹿このブログを管理している鹿。Webデザインとガジェットが好き。Meこのブログを運営している”自称”カワイイ鹿。フロントエンドエンジニアを目指して勉強しているなかで、スマートフォンやタブレットなどのモバイルガジェットを集めています。Inkscape」を試してみました。Simsellerで「梅の花満開!ウインターセール」を開催中。キャンペーン2020」で事務手数料無料+SIMのみプランが激安価格で申し込める!Satechiの電流・電圧チェッカー「ST-TCPM」レビュー。UBOOM」レビュー。Clip(クリエイタークリップ)は、ウェブデザインやガジェットについて書いているブログです。フロントエンドエンジニアを目指して勉強しているなかで、スマートフォンやタブレットなどのモバイルガジェットを集めています。ClipHOMEABOUTPROFILECONTACT。