コトバコ」のテーマをリニューアルしました!ブログ開設以来、4度目のテーマになります。最初はDigress社の提供するWordPressテーマ「COLORS」で開設。僕がWordPress向け有料テーマ「COLORS」を導入した3つの理由テーマのイメージはこんな感じ。その後、山根翔さん(@sho_yamane)の運営するShoYamane.meで公開されていたテーマをカスタマイズしたものに変更。ベースはStinger5でした。山根翔さんはフリーランスで活躍するWEBデザイナーさん。当時とは変更されていますが、いつもめちゃくちゃセンスあるサイトを運営してます。TEN○Aの記事とかあれ。今はないみたいだけど。当ブログのテーマを変更しました懐かしいデザインだけど、今見てもこれめっちゃ好き。ものすごく気に入って利用していたのですが、モバイルユーザーの増加に伴い、2カラムのよくあるブログデザインだとスマホとPCでユーザー体験に乖離がある。なんてかっこいい事を言い訳にやりたい放題カスタマイズしました。やりたい事を詰め込んだ、全部のせデザイン。それがついさっきまで使ってたテーマ。ベースはStinger7。自分の全力を尽くしてシンプルでオシャレなデザインにしたつもり。4月にリニューアルして半年以上経つのですが、なんかしっくりこなかったんですよ。大きくしても小さくしてもレイアウト崩れるし。思春期の娘くらい繊細。いう訳でまだ半年しか経っていないのですがリニューアルしてしまいました。見た目だけは気に入っていたのですが、色々と思うところがあったのです。スポンサーリンク選んだのは「AFFINGER4」Stinger5→Stinger7と来てAFFINGER4。ええ、もう完全にENJIさん(@ENJILOG)におんぶに抱っこの姿勢です。AFFINGER4は有料テーマなのですが、本当に抜群に使いやすい!管理画面のカスタマイズ、ビジュアルエディタの豊富な機能、どれを取っても歴代のシリーズと比べても圧倒的に快適な執筆環境が整っていました。今回は出来る限りCSSのみの変更で、ほとんど複雑な事はしてません。テーマをカスタマイズするにあたって、というよりサイトをデザインする上で気をつけた事を覚え書き程度に残しておこうと思います。公式サイト2カラムデザインに戻した前回のテーマで思い切って1カラムデザインに変更したのですが、2カラムに戻しました。理由は至極単純で、見づらかったから。全体に広がるデザインはスタイリッシュな反面、PCの画面ではユーザーフレンドリーじゃないなと感じました。目線を横に動かすのは、縦に流れるよりも負荷が多いのでは。そんな思いがあっての事です。色を使いすぎないこれは以前から気をつけている事なのですが、使う色はなるべく少なくするようにしています。コトバコのテーマカラーは緑。濃淡の差はありますが、主に緑とグレー、ワンポイントに黄色を少し。デザインに長けた玄人は多色構成でも使いこなすのでしょうけど、僕みたいな素人がいろんな色を使い出すとトンデモサイトが出来上がってしまいます。組み合わせの良さそうな2色をベースに構成すると楽。モバイルのメニューボタンこれも以前から気になっていた部分。デフォルトのよくあるメニューボタンってパッと見て分からない上に、タッチしにくい所にあるじゃないですか。誰も触らない所にあるんじゃ意味がないし、どうせ設置するからには触って欲しい。いうわけで、PCと同じような位置に、わかりやすいメニューボタンを置いてみました。文字の大きさ僕は小さい文字が好きです。普段から仕事でPCを使う人は、比較的小さい文字を好む傾向にあるんじゃないかと勝手に思ってます。一般の利用者はそんな事ないんですよね。嫁に見せるといつも「ちぃさっ!!!」と罵られていたので心が折れました。本当にひと回りだけフォントサイズを大きくしました。いった自己満のカスタマイズを始めると自分の感性が全てになりがち。「一番の読者は自分」なんてよく言いますが、そんな事はないです。読んでくれる人あってのブログ運営ですから、読む人の事を考えたデザインを取り入れた方が優しいよね。使うデザインは少なくとにかく前回はいろんな事を試して詰め込みました。自分は最高に楽しかったのですが、これぞ自己満の極み。読者とか置いてけぼり。言うわけで、全体の統一感を持つためにも、なるべく少ないデザインでまとめています。ワンポイントのためのボックスは。OnePointピックアップとかワンポイントを説明するためのBOXですので、引用はこれ私が気になっていることは、世界の誰かが気になっていること。GEEKどちらもテープを利用してます。いうかトップページにも多用してるし色各所で使ってます。クドイ気もしますが、これも色んなデザイン使うとサイト全体がバラバラな印象になってしまいそうなので良いかな、と思っています。引用したのはブログ仲間のギーク(@drying)さんのサイトのキャッチフレーズなんですけど、これすごい好きなんですよ。オススメ記事なんてものを置いてみたグローバルメニューに「コトバコのオススメ!」なんてものを置いてみました。僕が好きな記事をプッシュするためだけのメニューです。ただのタグページへのリンクなのですが、タグページのCSS修正が漏れてました。スポンサーリンク今度こそコンテンツの拡充を...!前回もこんなこと言った気がするんですけど、読者はデザインじゃなくてコンテンツを見に来るんですよ。読みやすさを向上するためにある程度の見やすさって必要だと思うんですけど、一定のライン以上は趣味の世界だと思うんですよね。言え、個人的には程よく満足いってるので、これからガシガシとコンテンツを増やそうと思います!たぶん。言うわけで、今年も残り少なくなってきましたが、今後ともコトバコをよろしくお願い致します。スポンサーリンク最後に。参考にしたサイトとか。ほとんど力技でなんとかしてるカスタマイズですが、どうしてもどうしようもない時に頼ったサイト。vdeep全般的にお世話になってます。困った時のvdeep。Postとか、CSSのデザイン関連はいっぱいパクってます。いつもお世話になってますokutaniさん。vdeepテーマカスタマイズのためのローカル環境もvdeepみて構築しました。vdeep寝ログどうしてもページャー、ページネーションのカスタマイズがキレイにできなくて詰んだと思った時の救世主。この記事がなかったらこのテーマの完成はなかった。WordPressにレスポンシブのページネーションを設置するカスタマイズ方法さすが有名なWordPressテーマ「Simplicity」の開発者様です。コトバコauthor関連記事KOTOBAKOが3年生になりましたどうもこんにちは。(@46sym)です。KOTOBAKOをふりかえるみなさん年の瀬をいかがお過ごしでしょうか。僕は友人から借りたONEPIECEを読みふけって4時間ほど過ごしました。...プロフィールを新しくしましたこんにちは。(@46sym)です。今日は簡単なお知らせだけ。...【残り359日】2019年にやりたい事こんにちは。(@46sym)です。年があけてからと言うもの、お布団とこたつを往復する日々を過ごしていました。...【7ヶ月】11月が終わってたこんばんは。いろんな事に手を出して収拾がつかなくなってきました。(@46sym)です。