NUMBER333のPC用WordPressテーマを新しく作成しました。今回覚えたテクニック7つをメモを兼ねてご紹介するので参考にどうぞ!TOPNUMBER333のPC用WordPressテーマを新しく作成しました。>何故深夜はこうも作業が捗るのか。本日も“monograph”をお読み頂きありがとうございます。PITE.(@infoNumber333)です。PCからNUMBER333をご覧の方は気づいているかもしれませんが、昨晩(?)WordPressのPCテーマを新しく作りなおしました。基本的には以前のテーマをベースにして少しずつ改造していった結果今はこんな感じに落ち着いています。直し足りないところがいくつかあるのですが、今日はこれくらいで。大規模にテーマを作りなおすのはNUMBER333を始めてからこれで多分7〜8回目でしょうか。大体四半期に一度くらいのペースで作りなおしていますね。NUMBER333を読んでくれた人の中でたまに「Webデザインはどこかで勉強したんですか?」と嬉しい質問をしてくれる人がいるのですが、HTML/CSSに関しては完全に独学、というか専門の本すら買ったことはありません。言うか、これくらいのものであればネットの断片的な知識を拾っていけば誰でもすぐに作れると思います。大事なのはどちらかというとGoogle先生への質問力。作り方」で一番最初の方に出てくるこの2つの記事には最初の頃とてもお世話になりました。Webクリエイターボックスこういうのを読みながら最初は気に入った無料テーマを見つけてそれを画面とにらめっこしながら少しずつ、少しずつ理解できる所からいじれるようになっていけばいいと思います。やりたいことがあったら、検索してみましょう。大体誰かが既にやっています。その先人の知恵と情報に感謝しながら恩恵に預かっていけば自ずと自分の作りたいものに近づいていけると思います。いうわけで一応僕も今回新しくWordPressのテーマを作る上で覚えたことをメモがてら記事にして残しておきます。一度やったことでも時間が経つとすぐ忘れちゃいますからね。テーマを作る際に参考にして頂ければ嬉しいです。スポンサードリンク今回覚えた7つのテクニック今回は下記の7つのテクニック(?)を覚えました。・Webデザインに黄金比/白銀比を使ってみた。・「iconDB」でアイコン取り放題。・カラーテーマは他人のセンスを拝借。・長すぎる文章は抜粋。・サイドバーをスクロールで固定。順に説明していきます。Webデザインに黄金比/白銀比を使ってみた。今までは完全にセンスというか適当で各要素のフレームだったりレイアウトを決めていたのですが、そろそろちゃんとした方法を学びたいなと思い、巷でよく聞く「黄金比」や「白銀比」というものに手を出してみました。「黄金比」は有名ですが「白銀比」ってあんまり聞いたことありませんよね?「白銀比」というのは日本の古い建築にも使われている比率の一つで黄金比よりもややどっしりとした安定感のある印象を出せるものらしいです。詳しくはよくわからないのですがこの数字通りにモノを作ると何故か人間に「しっくりくる」ようになってしまうという魔法の数字。これを見よう見まねで今回Webデザインに取り入れてみました。なんとなく見栄えも良くなったし、いざ人に何か言われても「これ黄金比使ってるからね?」と言えばだいたい無双できそうなのでそれだけでも価値があると思います。RatioというWebサービスを使いました。簡単に黄金比は白銀比などを算出できるのでオススメです。DB」でアイコン取り放題。今回流行りに乗って(遅い)メニュー周りをフラットデザインで固めてみました。フラットデザインで大事なのが一発で意味がわかる「アイコン」。DB」というWebサービス。それっぽい単語で検索すればいい感じのフラットアイコンが出てくる上に、アイコンのサイズや色、ファイル形式まで自由に選んでダウンロードできるという神サービスなので覚えておいて損はありませんよ。いうかブックマークしておこう。カラーテーマは他人のセンスを拝借。フラットデザインでもう一つ大事なのが「配色」。要素が少ないのでこれをミスっちゃうともうどうしようもありません。ここはセンスで通す勇気はないので、僕はいつもツールを使うかすでに人が作ったセンスの良いカラーテーマをそのまま拝借するようにしています。COLOURloversという海外のサイトに上の画像のようにセンスの良い人が作ったカラーテーマが沢山投稿されているのでその中から気に入ったものを選ぶだけ。このサイトに上げられている時点である程度のセンスはもう担保されているのでどれを選んでも絶対に失敗はしないというわけです。ありがとうセンスのある外人。今回ホームやアーカイブの記事一覧の縦幅をそろえるためにタイトルが長すぎた場合は指定の文字数で抜粋するというjQueryを使いました。Eijiという記事の一番下のやつをほぼコピペしただけ。この方法でやると改行した文章でもしっかりと省略してくれるので重宝します。サムネイルは簡単に復数作れる。以前質問されたことがあるのでこれもやり方を。今回はテーマを作成するにあたって「記事一覧」「サイドバー」などの部分ごとに記事のサムネイルを複数作って配置しています。これは結構カンタンで「functions.php」の中に、add_theme_support('post-thumbnails');add_image_size('archivesquare',241,241,true);こういった記述を加えるだけ。上の行はサムネイルを使えるようにするもので、下段はサムネイルの名前とサイズを規定しています。この下段の行の名前、数字を変えて下に加えて行けばいくつでも好きなサイズのサムネイルを生成することができます。?>サムネイルを呼び出す時はこう。入れた名前のサムネイルが生成されます。使いやすいWebサイトを目指してどんな記事にも「3クリック以内」でたどり着けるようにカテゴリーを階層ごとに表示できるようにカスタマイズしました。カテゴリーの中身の整理が全然出来ていないのですがとりあえず仕組みはこれで大丈夫なはず。「wp_list_categories(“title_li=&child_of=$categoryid&depth=1&show_count=1”);」という風に少し変えて使っています。Order」っていうプラグインだったという記事を見かけこれがまさにドンピシャ。これがなかったら一生悩んでました。ハンサムさんマジハンサム。サイドバーのスクロールで固定。この手のブログでよく見かける「スクロールするとついてくるサイドバーのやーつ」。これ毎回テーマを作るたびに動かなかったりして時間取られるんですよねー。わからなくなるので今回ここにメモしておきます。ぼくはまちちゃん!(Hatena)という記事のソースをほぼコピペしただけ。これは実装も簡単だし動作も快適なのでオススメ。ホーリーはこう思うよ。今回は大体こんな感じのことをやりました。いじればいじるほど次にやりたいことが出てくるので終わりが見えないです。phpとかちゃんと勉強したいなー。拙い内容ですが、誰かが参考にして頂けると嬉しいです。LINE@で!ここまでお読みいだきありがとうございます!更新情報や限定コンテンツはLINE@でお届けしていますので、右のボタンから登録をお願いします!あなたのスマホに記事を直接お届け。カスタマイズSPONSOREDtotal75share!シェアしてくれるとめっちゃよろこびます。(3)FOLLOW記事の更新情報や日々の出来事はSNSで。フォローしてもらえるとうれしいです。HIDETAKA中目黒在住のブロガー、28歳。つきましてNUMBER333のPC用WordPressテーマを新しく作成しました。今回覚えたテクニック7つをメモを兼ねてご紹介するので参考にどうぞ!monographはiPhone・Macなどのガジェットを中心に管理人PITE.の気になるモノを幅広く紹介するブログメディアです。月間50〜70万PV。気軽に楽しんで行って下さい。