リンあれリニューアル。WordPressのテーマ(テンプレート)を新しく作りました+テーマを自作したい人へ
ものづくりが大好きなゆこびんです、こんにちは(๑´ㅂ`๑)
このブログ「もっと知りたいリンゴあれこれ」をWordPressにしてから1年半ちょっと。ブログのデザインを新しくしました。‹‹\(´ω` )/››‹‹\( ´)/››‹‹\( ´ω`)/››
リンあれ専用テーマ(テンプレート)*第二弾! 題して「flat cute theme for Rin*are」です(笑)
いつもサイトまで見に来てくれる皆さんはお気づきだと思いますが、RSSでチェックしてくれてる方は…たぶん気がついてないですよね?
* WordPressでは見た目や構造(デザイン)をテーマthemeといいます。他のブログサービスではテンプレートなどと言われることもあります。このシステムを採るとブログは簡単に着せ替えができるのです。
昨年までのテーマ(テンプレート)は、WordPress+独自ドメインでお引っ越し(2013.4)した際に作ったもので、その前のFC2時代のデザインを踏襲する形でした。作った時すでに「古臭いなぁ」と思っていたのですが、ブログのお引っ越しもあったので、読んでくれているみんなに馴染みのある方がいいなと判断したわけです。
そして時は…流れた…
o< ´・ω・` >o
一年くらいで新しくしようと思ってたんですけどね、WordPressのテーマを作るのは結構面倒くさいんですよね(;´∀`)。(WordPressに限らず、ですがw)
予定は未定! 気持ちよりだいぶ遅れてリニューアルしたリンあれ。新年を新しいテーマ(PC版もスマフォ版も)で迎えることができましたよー!
ってことで、軽くご紹介を!
せっかくの自作テーマだから、スマフォ(モバイル)用テーマもちゃんと作ろう
今回の新テーマもPC向けとスマフォ(モバイル)向けと2つ作りました。
レスポンシブデザインはいろいろな利点があると思いますが、リンあれ的にはやっぱり別に作るのがいいかなと。
一応参考までにこれまでのテーマはこちら↓、1st Editionの「Rin*are」ですw
前のテーマから変化(進化?)したところは、もちろんデザインそのものもそうですが、
- 1) スマフォ(モバイル)用テーマをちゃんと作った
- 2) PC用テーマもスマフォ用テーマも同じサイトだとわかるデザインにした
- 3) テーマ上の画像を全てRetinaディスプレイ対応にした
スマフォ(モバイル)用のテーマなんですが、実は以前のはメニュー周りが適当でした。一応リンクは貼ってあるんだけど、PC用テーマの作りに比べると飛べるリンクが少なかったり、検索窓がなかったり、と。私はネットのサイトをMacから見ることが多いので、そっち基準になってて、スマフォ用テーマは後回しでそのままにしちゃってたんです。(~_~;)
これはとってもよろしくない。
このブログはAppleネタでもiPhoneよりMacの話が多いので、PCからの閲覧が多い方だと思います。ですが、そんなリンあれにもスマフォ化の波はちゃんと押し寄せていて、PVの半分近くがスマフォからの閲覧になっています。実際にtwitterをやっている読者さんの発言から、うちのサイトをiPhoneから見てるという事が発覚。これはヤバい! はやくちゃんと(つまり普通)にしないと!!ε〜(;@-@)
Mac大好き!な硬派な?リンあれでもこの状態ですから、他のサイトさんは相当スマフォから見られてるハズ。サイトをやっている人はスマフォからのアクセスを考えて、ブログづくりに取り組んだ方がいいですよね。
余談ですが、よく「スマフォ(モバイル)用テーマはプラグインにおまかせー」という方もみかけます。なるほど、iPhoneから見た時に同じようなデザインのサイトをよく見かけるのはこういう理由なんですね。私は視覚的な要素を大きく捉える傾向にあるので、同じデザインだと全然印象に残りません(;´∀`)。配色を特殊な組み合わせにするとかヘッダ画像だけでもオリジナルなものにしたらいいのになぁと思います。
ちなみにスマフォ用テーマの想定画面サイズはiPhone 6 Plusです( •̀ .̫ •́ )✧自分が使っているからって理由ですがw。でもちゃんとiPhone 5sの画面サイズでも確認しましたよ。横幅320px(pt)から550px(pt)までのプチリキッドレイアウトです。iPadからはPC用テーマで表示されるようになってます。幅とデバイスの切り分けは以前のテーマと同じです。
今回は、(前回と比べると)PC用とスマフォ(モバイル)用のテーマのイメージをかなり揃えました。ただメニューまわりだけは全く違い、PC用は従来のWebページらしく、スマフォ版はiPhoneのメニューバーを模したものにしました。
[PC向けメニュー]
ヘッダの下に(ほぼ)全部並んでいます。
[スマフォ(モバイル向けメニュー]
タップで必要に応じてメニューが出てくるようにしています。
メニューの構造は違えども、デザインに統一感を持たせたので、Mac(PC)から訪れてもiPhone(スマフォ)から訪れてもひと目で同じサイトだと分かるハズです。
画像のRetina対応については、以前はヘッダのイメージ画像と一部のイラストだけRetina対応させてたんですけど、今回はテーマに使う画像は基本的に全てRetinaディスプレイで見てもキレイにみえるようにしました。
ちなみに、ブログ記事内の画像も、この新テーマになってからは、Retina対応させるようにしています。(古い記事はちょっと、無理!)
実際公開してみて、少し改善したいところも出てきましたが、 新しいテーマにはリンあれ的な仕掛けがいろいろあるので、お時間がある方は、Macから、iPhoneからいろいろいじって(探して)みてくださいね!(*´∇`*) 仕掛けはまた増やすかもかも。
それでは、しばらくこの新しいデザインでリンあれをお楽しみください!
【おまけ】自分のテーマ(テンプレート)を作りたい人へ
「自作テーマ、いいなぁ」って思った人向けに、ちょっとおまけを。
自分でブログのテーマを作るのはちょっと大変です。
でも自分だけのテーマを作れば、みんなに覚えてもらう効果もあります。個性的なデザインで、人に自分のブログや自分自身のイメージを持ってもらうこともできます。(効果を狙うにはそれなりデザイン力は必要ですが)
なにより、自分で作ったものは愛着があります。中身も外見も自分の手作りです。更新も楽しくなります。
部屋に例えるなら、壁紙を好きな模様にして、家具も好きなものを作って配置する。友達が遊びに来たらこのテーブルで一緒にお茶を飲んでおもてなしをしよう、とか。格好でいうなら、今日の髪型はコレでキメよう、この間買ったあのシャツとこのパンツを合わせたら、おしゃれじゃん。こないだこのブーツも彼女に褒められらたし、とか。
自分で物を作るのが好きな人はチャレンジするといいんじゃないかなーと、ものづくり推進委員会Appleブログ代表のゆこびんめは思いますぞ。
(単に効果だけしか考えないなら、お金を払ってできる人に頼んじゃうのがいいと思います。効率的に。)
もしあなたの利用しているのがWordPressなら、自分でテーマを作るための良書が結構あります。
他のブログサービスに関して言うと残念ながら書籍は少ないです。が、WordPressほどできる事が多くないこともあり、HTMLとCSSの知識があれば、後はブログサービスの公式サイト、さらにはそのブログサービスのテーマ(テンプレート)を作っている人のサイトで必要な情報を拾ってくれば作ることは難しくありません。(そのぶん難しいことはできません。)
WordPressでももちろんHTMLとCSSの知識は必要になります。
逆にいうとHTMLとCSSがある程度使いこなせるようになれば、ブログのテーマ(テンプレート)を作るのに必要なのはそのブログサービスで使っている関数だけです。
また、他の人が作ったテーマ(テンプレート)を改造(自分仕様にカスタマイズ)して使うという方法もあります。実はブロガーさんのほとんどがこういうタイプだと思います。ヘッダー画像だけ、自分の撮った写真にしよう、メニューを増やしたい、色を変えたい、ここに広告を貼りつけてetc…。
が、こうしたカスタマイズするにも、HTMLやCSSの知識があるのとないのとでは全然違います。(WordPressを利用しているブロガーさんの力技なカスタマイズ記事を見かける度に、ほんのちょっぴりでもいいからお勉強したらいいのに…と思ってしまいます。)
でも「えいちてぃーえむえる??、しーえすえす?って、自分が分かるようになるのかなぁ…」と不安な人もいるでしょう。
そんな人にまず最初にオススメするのがドットインストールという初学者向けのプログラミング学習サイト。この中にWebページを作るのに必要なものの講座があります。解説動画は基本的に無料です。
●ドットインストール – 3分動画でマスターする初心者向けプログラミング学習サイト
(気に入ったら是非有料のプレミアム会員に!)
過去にこのブログでも紹介しています。
●Webページ制作はパズル。そしてこれからWebサイトやブログを作りたい人、学びたい人におすすめ入門サイト、ドットインストールに感動。
入門のレッスンはすごくわかりやすくまとめてくれています。ホントありがたいですね。私がHTMLやCSSを学んだ時にはこんな素晴らしいサイトはありませんでした。当時ドットインストールがあったら、私は2倍以上のスピードで(1/2以下の時間で)同じことを学べただろうと思います。
最初はHTML入門とCSS入門を見るといいです。その上で必要に応じて(自分が必要だと思ったら)JavaScript入門に進むといいでしょう。WordPress入門というレッスンもあり、その中にテーマを自作するための手順があります。
ドットインストールのレッスンを数本見て「出来そうかも」と思ったら、書籍を買って、更に詳しく系統立てて効率よくお勉強するといいでしょう。
くれぐれもいきなり大作(ブログのテーマ作りなど)を作ろうとしないように。同時にいろいろな事を理解しないといけないので時間がかかり、ヘタすると挫折する可能性が高いです(;´∀`)。(構造を理解するのが得意な人はダイジョブだと思いますが。)まず最初は小さいところから。本のサンプルと同じものを作ってみたり、それをアレンジした簡単なものをひとつ作ってみましょう。
こういった解説本を購入する時、不安であれば本屋さんで中身をチラ見するといいです。よく「基礎学ぶのにいい本ない?」って聞かれるんですが、人によって理解力に差があるのと、理解の仕方が違うのと、さらにHTML、CSSの入門書は数がありすぎて簡単にコレって言えないんですーー。Objective-CとかSwift(iPhoneなどのiOSアプリを作るためのプログラム言語)なら「コレだよ」って言えるんですが(というくらい出てる書籍が少ない)。
私的には、4割以上知らない事が書いてあれば買いだと思います。3割だったら値段と相談です。一通り理解してるつもりでも確認のための買う解説書もあります。
どれだけ時間をかけられるか、また理解の速さもその人次第なので「すぐにできるよ」とは言いませんが。積みかねて行けばできるタイプのものです。(基本的な事をすっ飛ばして器用に切り貼りでなんとかしようとする人は結局は遠回りしてるよ、ってことは確実に言えます。)
最初に「ちょっと大変」と書きましたが、それは「基礎をおさえれば面倒だけれど確実にできるよ」ってことです。
自作テーマを作ってみたい人はチャレンジしてみるといいですよー!楽しいですよー! きっと今よりもっと自分のブログが好きになります。(๑´ㅂ`๑)
…
あ!(º ロ º๑)
ブログ自体をまだ始めてない人は、テーマ(テンプレート)を作るとか作らないとか以前にどこのサービスでもいいので、まずブログを書き始めることをおすすめします!