「Diver」とは、使い勝手もさることながら、「機能の数」「サポート体制」がスゴイ、2017年最強とも言われているテーマです。

「Diver」を見てみる

当ブログでは、これまで無料の「agama」を使っていました。

オシャレで高機能なWordPress無料テーマなら、「Agama」

2017.4.28

コチラ（↓）でご案内している、「6日連続企画」の、第1弾です。 ★　（↓）の4点を、すべて満たしています！ 　オシャレで、無料のWordPressテーマ 　レスポンシブ対応（スマフォ表示もOK） 　「外観」→「カスタマイズ」での、設定が多い 　ワンクリックでダウンロードできる　（SNSシェア/無...

この時は、

「もっと、おしゃれにしたい・・・！」
「でも、サブブログだし、あくまで無料テーマで！」

との思いで、悩みに悩んで選んだテーマでした。

※他にも、厳選の無料テーマは、コチラ（↓）からどうぞ！

【2017年】厳選・オシャレなWordPress無料テーマ6選

2017.4.28

先日、リニューアルオープンした、当ブログ。 実は、WordPressの「無料テーマ」を使っています。 以前は「Simplicity」を使っていましたが、 「もっと、おしゃれにしたい・・・！」 「でも、サブブログだし、あくまで無料テーマで！」 との思いで、約50個以上のテーマを試し、今のデザインに変わ...

それを今回一新し、さらに「有料テーマ」を選んだのには、ワケがあります。

なぜテーマを変えたのか、なぜ「Diver」を選んだのかについて、少しお話しさせて下さい。

WordPressテーマ「Diver」- 2017年注目の有料テーマにリニューアルにしたワケ

そもそも、当サイトは「実験ブログ」でした

「コビトブログ2」が、本日より、リニューアルいたします

2017.4.22

本日より、サイトのデザインを一新し、「コビトブログ2」を再開いたします。 以前、訪れたことがある方にとっては、ビックリするほど変わった、当ブログです。笑 その理由や、どのように生まれ変わるかを、改めてお話しさせてください。 リニューアルオープン そういえば、いつから休んでた？ 3月頭より更新できて...

以前、コチラの記事（↑）で書きましたが、

もともとこのブログは「雑記ブログ」の実験用に作ったモノでした。（その時は「Simplicity」という、無料テーマでした）

そして、その実験が終わった後は、「もっとオシャレなサイトにしたい！」という思いから、無料で抜群にオシャレなテーマ「agama」に変えた、という経緯があります。

この時は、

こんな感じに、考えていました。

しかし、僕の思いとは裏腹に、ブログの状況が一変します。

ブログの急成長

なんと、気づけば、

• 　結構なアクセスを稼ぐようになってきた
• 　特に、モバイルからの流入が、圧倒的に多い

という、予想外の事態が起きました。それも、全く更新していない8月～11月の現在にかけてです。（これは、無料テーマ「agama」が、SEO強いことも一因だと思います）

嬉しい反面、僕の気持ちとしては「まだ、しっかり自慢できるサイトにできていない・・・」というモヤモヤがあって、「まずは、ブログをしっかり作り込まねば！」との思いが強くありました。

日頃から、「ブログは、自分が楽しんで、やれるからこそ、価値がある」と、思います。渋々やっていたり、結果ばかり気にすると、モチベーション落ちちゃうなぁと。

僕の場合は、自分が納得できるブログになっていないまま、記事を書くのが、少し苦痛でした。そこで、色々とカスタマイズをしようとした矢先・・・

無料テーマ特有の（お約束とも言える）、問題が起きました。

コチラ（↑）でも書きましたが、無料テーマには、3つの事がありがちです。

今回は、特に深刻なトラブルが起きたわけではないですが、モバイルユーザーが多いのにも関わらず、スマホ用のカスタマイズが、すごく大変なことがわかりました。

そこで、今回は思い切って「サブブログも、しっかり有料テーマでやる」決断をしました。

なぜ「STORK」ではなく、「Diver」を選んだの？

僕のメインブログである「コビトブログ」に訪れたことがある方は、有料テーマと言えば「STORK」という印象をお持ちの方も、多いと思います。

それは「Diver」を当ブログで採用した今も、変わりません。

ハッキリ言ってしまいますが、僕自身、無料・有料問わず、これまで100近くのテーマを触ってきて、その中で一番のオススメは、変わらず「STORK」です。

本業の関係で、WordPressテーマ探しの旅をしていると、今年は「シンプル・細文字・すっきりデザイン」が増えてきたなぁと。
でも、ストークの「絶妙なポップさ・親近感がわくデザイン」は、やっぱりダントツだなぁと、思ったり(✿´ ꒳ ` )

— 狐火兎＠コビトブログ (@cobito_tajuso) 2017年9月8日

（↑）とつぶやきましたが、これ以上の「絶妙なポップさ・親近感がわくデザイン」かつ、SEOに強いテーマには、出会っていないです。

特に、ブログやWordPress初心者の方にこそ、最初に選ぶテーマが「STORK」であってほしいと思っています。それほど完成されたデザインですし、手軽にSEOに強いブログを作れます。

※詳しくは、コチラを見てね

ただ「STORK」は、1回の購入で1サイトにしか使えません（利用規約）。

再び購入しても良かったのですが、

• 　仕事柄、いろんなWordPressテーマを触る事
• 　このサブブログは、好きなコトを楽しんでやるために始めた事
• 　このサブブログで、もっといろんなテーマを紹介したい事

がありまして、「折角だから、違う有料テーマを使ってみよう」と思ったのでした。

そうして、色んな有料テーマを見て回った中で、

そんな今注目のテーマ「Diver」に、たどり着きました。

「Diver（ダイバー）」の魅力・気になるところ

圧倒的な機能の数・サポート体制が、他にはない魅力

いままで、調査分析してきたWordpressテーマやWebサイトは、１００は優に超えています。ただWebサイトに詳しい人というわけではなく、実践でしか得られない生きた知識や技術で開発いたしました。

出典：Diver公式サイト

（↑）には、たくさんテーマを見て触ってきた僕でも、とても納得です。

例えば、

こんなにも、機能が盛りだくさんです！

特に、「吹き出し」や「ボタン」「ボックス（囲み枠）」等、よく使うパーツのほか、アフィリエイト向きに、「ランキング」「Q&A」「レビュー（星もつけられる口コミ機能）」などが、（↓）のような「入力補助」で、誰でも簡単に使えます。

ほかにも、「STORK」には無い、

• AMP対応
• スマホ用に、固定フッターメニューがある
• 1回の購入で、複数サイトで使える

といった機能まであり・・・、本当に「かゆいところに手が届く」、大満足の内容です。

詳しい機能は、コチラ（↓）の「デモサイト・紹介ページ」から見てね。

「Diver」の機能を見てみる

さらにスゴイのが、「サポートに対する姿勢」です。

満足度100%を目指して、手取り足取りサポートいたします。
私達「Diver」開発チームは、ご利用いただいたお客様全員に満足していただきたいと思い開発をしております。しかし、お客様は十人十色であり、デザインの好みやこだわりのポイントなどが少しづつ違うため、100%満足とまでは言えませんでした。
そこで私達一同は、無料で相談出来る場を設けることによって一人ひとりのこだわりや好みに合わせて調整させていただくことを決めました。
なぜこんなことをするのかというと、お客様の声が「Diver」をより強化して成長させてくれると考えたからです。ほんとに些細な事でも構いませんので、お気軽にご意見やご要望をお聞かせください。

出典：Diver公式サイト

いくら有料テーマと言えど、「一人ひとりのこだわりや好みに合わせて」いくらでも・無料で対応する、というサポート体制は、本当に珍しいです。

しかも、その応対のスピード・丁寧さに、はやくもファンが増えているようです。

これだけの機能・サポートがあるので、お値段は「17,980円(税込)」と、決して安くはないです。

でも「買った後は自分でどうぞ」という素っ気ないテーマより、「買った後も、困った時はいくらでもサポートします」というテーマは、長く使いたい方にとっては、値段以上の価値になると思います。

ただ、気になるところもある

こんなに魅力たっぷり「Diver」ですが、いくつか気になるところも。

バージョンアップが頻繁な事は、最新機能がどんどん追加されているという、良い面がある一方で、「修正」「不具合（バグ）」が多い場合もあります。

後者は、まだ新しいテーマでは必ず起こるコトなので、そのうち減っていくとは思いますが、「動作が安定しない」というのは、まだ少し不安なところですね。

また、便利な機能をたくさん使える事は、こちらも一方で、ページの読み込み・表示遅延につながる場合もあります。これらは、今後時間やノウハウが溜まっていくことで、自然と解決されると思いますが、少しだけ注意が必要です。

あと、僕が一番気になるのは、パッと見が「ごちゃっ」としているところです。コンテンツ間の余白が少なかったり、文字が詰まっていたり、そういう細かい所は、これからカスタマイズしていこうと思います。

まとめ

「Diver」は、とにかく豊富な機能があるので、それらを「しっかり使いこなせるか」が大切です。

そのため、

には、ピッタリのテーマだと思います。

ほかにも、最近はブログのイメチェンや差別化のために、このテーマを使う人も増えてきているようです。しかし、まだそのあたりのノウハウが、あまり探しても見つかりません。

なので、僕も「Diver」ユーザーの一人として、これから使っていく中で、

などを、今後もどんどん紹介していきたいと思います！

コチラもおすすめです

【コピペで簡単】タイトル（見出し）CSSテンプレート 15選

直感的に、すぐ配色セットを選べる、本当に使えるカラーサイト7選

The post wordpressテーマ「Diver」- 2017年注目の有料テーマにリニューアル! first appeared on コビトブログ2｜デザイン・趣味・おすすめ情報.

蝉の声や日差しの眩しさからも、暑さを感じつつ、昨日今日と列島を横断している台風のように、急なゲリラ雷雨もあるこの季節。

「夏だけは、本当ツラい・・」という友人も多いですが、僕は一番好きな季節です。

というのも、学生の頃サッカーをやっていて、真っ青な空の下、汗かきながら、ボールを追いかけた思い出が、この季節が来るたび蘇るからです。

まぁ今となっては、エアコンが手放せない毎日ですが(*'▽')

サイトの衣替え（8-9月）のお知らせ

8-9月は、晩夏をテーマに

さて、すでにお気づきの方もいらっしゃるかもしれませんが、6月の時と同様、8月も、ブログトップページのスライダー写真（2枚）を衣替えをしました（↓）。

見てみる

夏真っ盛り！というより、少し「晩夏」な雰囲気も感じる写真を、チョイス。

いかにも夏らしい、ビーチや海の写真とも迷いましたが、9月末まで、2か月間のトップページを飾るので、ちょっと儚げな、名残惜しいようなニュアンスも入れてみました（伝わるかは置いておいて・・・笑）

特に2枚目は、日本らしい花火（夜空に浮かぶ大輪・線香花火など）にするかも迷ったんですが、ちょっと切なすぎるなぁと思って、楽しげなものにしました。

僕自身、日本の花火は大好きなんですが、一瞬の儚さに、何だかめちゃくちゃ切なくなってしまうんですよね。その余韻や、目に焼き付く感じが、これまた良いんだけども。

ちなみに、前回（6月）は、こんな感じでした（梅雨らしさを感じつつ、おっくうにならない写真をチョイス）。

その詳細や、以前の衣替えについて、コチラ（↓）からどうぞ♪

今後も、2ヶ月に1度（次回は10月ですね！）、トップページの衣替えをするので、良かったらのぞいてみて下さいね！

ちなみに、衣替えに使った写真もそうですが、実は、僕がブログで使う写真には、必ず「加工」を入れます。今日はそんなお話を、少しさせてください（part2）。

ブログに使う写真画像（アイキャッチなど）の、加工について

僕のブログで使っている写真は、ほぼすべて、無料で使える写真素材をベースにしています。おそらく、ほとんどのブロガーの方も、そうだと思います。

しかし、無料写真を使うと必ず起こるのが、「どこかで見たコトある」問題。

僕は「既視感」と言ったりするんですが、「前にも見たことがある」とか「他のと似たような感じだな」と思われちゃうのを、なるべく避けるようにしています。

というのも、たったそれだけで、記事やブログの「価値」が下がってしまうからです。

人って、無意識的に「目新しい」ものに興味をもつので、「よくあるやつ」には関心が向きにくいです。

そこで、フリーの写真素材を、ブログで使う場合には、「ニュアンス」を変えます。

前回→（サイトの衣替え（6月・梅雨）と、ブログで使う写真の加工について）の記事では、いろんなニュアンス例をご紹介しました。

今回は、そんなニュアンスの「統一感」について、話したいと思います。

褪せた・ノスタルジーな、ニュアンスの統一例

例えば、今回衣替えで使ったコチラ（↓）の画像。

少しわかりにくいかもしれませんが、元の素材と比べると、少し「褪せた色合い」に変えています。これにより、パッと見の印象に、「セピアっぽさ」「ヴィンテージ感」「ノスタルジー感」等が出ます。

もう一つ、わかりやすい例がコチラ（↓）の画像。

「あなたのサイトも狙われている「WordPressの脆弱性」について」という記事の、アイキャッチに使っている画像です。ぐっと、アンティークっぽいセピアさが増したと思います。

実は、当「コビトブログ2」では、この「色あせた・ノスタルジーなニュアンス」に、ほぼ統一しています。

他のアイキャッチも、見てみる

一方で、メインの「コビトブログ」では、真逆のニュアンスに統一しています。

色彩はっきり・コントラスト強めな、ニュアンスの統一例

例えば、コチラ（↓）の画像。

少しわかりにくいかもしれませんが、森や車の陰影がハッキリし、「色彩鮮やかな」ニュアンスに変えています。

文字も含めて、「1枚の写真」としての存在感がグッと増すので、このアイキャッチだけで「しっかり主張」してくれちゃいます。

該当記事は、コチラ（↓）からどうぞ♪

もう一つ、わかりやすい例がコチラ（↓）の画像。

前述の「褪せた・ノスタルジー」なニュアンスであれば、元の素材の方が、それっぽいですよね。

しかし、あえて「色彩鮮やかな」ニュアンスに統一するため、カラーリング・陰影を足して、ハッキリとした印象に加工しています。

該当記事は、コチラ（↓）からどうぞ♪

このように「コビトブログ」は、当「コビトブログ2」と違って、「色彩はっきり・コントラスト強めなニュアンス」に、ほぼ統一しています。

他のアイキャッチも、見てみる

★ 画像加工（特にニュアンス）は、統一感が大切

ブログにとって、アイキャッチなどの目立つ画像は、「ブログを好きになってもらえるか」の第一印象を、大きく決定づけてしまいます。

そのため、違うニュアンスを使い過ぎると、変にごちゃっとしたブログに思われてしまいます。（例えば、いろんなものを取り過ぎた、バイキングのお皿の上のような感じです）

「ブログの印象・雰囲気」を、パッと見でわかってもらうためにも、「ニュアンスの統一感」を大事にしてみて下さいね。

写真加工・画像編集に、興味のある方は

「よくあるフリー素材を、そのまま使いたくない！」

「ニュアンスを変えて、自分だけのアイキャッチを使いたい！」

そう思ってくださった方は、まずコチラ（↓）で紹介している、無料のデザインツールを、ぜひ使ってみて下さい！

また無料のツールじゃ物足りなくなった方は、有料ツールに挑戦して、自分のスキルアップを図ってみても良いと思います。

慣れれば、今回ご紹介した加工くらいなら、5分ほどで出来るようになりますよ～！

◎ さいごに、少しだけ近況報告を♪

twitterで先に、少しだけお話しさせて頂きましたが、本業の方で、ありがたいことに海外でお仕事させてもらうことになりました！

といっても、拠点は変わらず東京で、来年3月頃まで、少しタイとNYを行き来することになりそうです(>ω<*)

会社員時代には、考えられなかった働き方だなぁ・・・としみじみ思いつつ、これからも新しい事への挑戦や勉強を、頑張っていきたいと思います♪

そして、向こうでもちゃんとPC環境が整えられる目途が立ったので、相変わらずマイペースではありますが、しっかりブログの更新も続けていきます。

今後とも、どうぞよろしくお願いいたします！

コチラもおすすめです

【2017年】厳選・オシャレなWordPress無料テーマ6選

直感的に、すぐ配色セットを選べる、本当に使えるカラーサイト7選

【コピペで簡単】クリック展開 アコーディオン（折りたたみ）CSSボタン

The post サイトの衣替え（8-9月・夏）と、写真加工話part2 first appeared on コビトブログ2｜デザイン・趣味・おすすめ情報.

湿気が大の苦手なので、僕にとっては1年のうち、一番ツラい季節です。。

でも雨はわりと好きなので、雨音を聞きながら、家でのんびりネット・・・が、一番良いですね♪

サイトの衣替え（6月）のお知らせ

6月は、雨をテーマに

さて、すでにお気づきの方もいらっしゃるかもしれませんが、6月より、ブログトップページのスライダー写真（2枚）を衣替えをしました（↓）。

見てみる

梅雨の季節らしさがありつつ、あんまり憂鬱にならない写真を、チョイス。

雨が降ると、少し外出がおっくうになったりしますが、「しとしと」という雨音や、草花をつたう雨露には、何とも言えない風情があり。

それに、晴れ上がった時の、キラキラした水たまりも、すごく素敵ですよね。

四季のある日本ならではの味わいを、このブログにも取り入れていきたいなぁと思いました♪

ちなみに、前回（4月）は、こんな感じでした（リニューアルしたばかりだったので、あまり季節感はないですが）。

今後も、2ヶ月に1度（次回は8月ですね！）、トップページの衣替えをするので、良かったらのぞいてみて下さいね！

ちなみに、衣替えに使った写真もそうですが、実は、僕がブログで使う写真には、必ず「加工」を入れます。今日はそんなお話を、少しさせてください。

ブログに使う写真画像（アイキャッチなど）の、加工について

僕のブログで使っている写真は、ほぼすべて、無料で使える写真素材をベースにしています。おそらく、ほとんどのブロガーの方も、そうだと思います。

しかし、無料写真を使うと必ず起こるのが、「どこかで見たコトある」問題。

僕は「既視感」と言ったりするんですが、「前にも見たことがある」とか「他のと似たような感じだな」と思われちゃうのを、なるべく避けるようにしています。

というのも、たったそれだけで、記事やブログの「価値」が下がってしまうからです。

人って、無意識的に「目新しい」ものに興味をもつので、「よくあるやつ」には関心が向きにくいです。

そこで、フリーの写真素材を、ブログで使う場合には、「ニュアンス」を変えます。

鮮やかさ・鮮明さをつける、ニュアンス例

例えば、今回衣替えで使ったコチラ（↓）の画像。

少しわかりにくいですが、もとの素材と比べると、少し「鮮明な」ニュアンスに変えています。これは比較すると微妙な違いなんですが、実はパッと見の印象が、ガラッと変わるので、僕はよく使っている変化のつけ方です。

カラーリングを変える、ニュアンス例

もう一つ、今回の衣替えで使ったコチラ（↓）の画像。

これはさっきより、違いがわかりやすいと思います。鮮やかさだけでなく、セピアな「カラー」ニュアンスもつけています。

こういったニュアンスに変えることで、トップページを飾る「1枚の写真」としての存在感を、よりアップさせています。（もちろん、好みによって元の方が良い！って方もいるかと思いますが；）

劇的な、ニュアンス変化の例（上級編）

そして、もっとわかりやすいのが、コチラ（↓）。

元の画像とは、ハッキリ違う印象になっていると思います。

コチラは少し上級編ですが、このようにニュアンスを変えると、無料の写真素材でも「目新しい」ものとして、見てくれている方に、強い印象を残すことが出来ます。

以上、ご紹介したのは、あくまで「ニュアンス」を変えるだけ、いわゆる「写真加工」と呼ばれる編集です。

これをさらに、応用していくと、もっと「自分だけのオリジナル」画像を作っていくことが出来ます。

実は、現在メインブログの「コビトブログ」の方で、アイキャッチ画像（記事のトップに表示される画像）を、一部更新しております（↓）。

こちらも、アイキャッチを変更！（↓）他の記事も変わっていきます～(*'▽')

失敗しないドメインの選び方 https://t.co/eHXHdzV4w5 @cobito_tajusoさんから

— 狐火兎＠コビトブログ (@cobito_tajuso) 2017年6月5日

コチラも、シンプルなアイキャッチに(*'▽')

WordPress が選ばれる、4つの理由 https://t.co/Q6q2C1s6jF @cobito_tajusoさんから

— 狐火兎＠コビトブログ (@cobito_tajuso) 2017年6月6日

これも、まずは「写真加工」をした後、文字入れなどをして、上記のようなアイキャッチに仕上げています。

メイン・サブブログともに、アイキャッチについて問合せを頂くことも多いので、今回は「写真加工」について、少しだけ裏側をお話しさせて頂きました。

もっと詳しいアイキャッチの話は、メインブログで記事としてアップする予定なので、もう少しお待ちくださいね。

写真加工・画像編集に、興味のある方は

「よくあるフリー素材を、そのまま使いたくない！」

「ニュアンスを変えて、自分だけのアイキャッチを使いたい！」

そう思ってくださった方は、まずコチラ（↓）で紹介している、無料のデザインツールを、ぜひ使ってみて下さい！

また無料のツールじゃ物足りなくなった方は、有料ツールに挑戦して、自分のスキルアップを図ってみても良いと思います。

慣れれば、今回ご紹介した加工くらいなら、5分ほどで出来るようになりますよ♪

コチラもおすすめです

【2017年】厳選・オシャレなWordPress無料テーマ6選

直感的に、すぐ配色セットを選べる、本当に使えるカラーサイト7選

【コピペで簡単】クリック展開 アコーディオン（折りたたみ）CSSボタン

The post サイトの衣替え（6月・梅雨）と、ブログで使う写真の加工について first appeared on コビトブログ2｜デザイン・趣味・おすすめ情報.

コピペするだけ、簡単です。

アコーディオン（折りたたみ）ボタン CSSテンプレート

本来、この機能は、ちょっとムズカシイ

このパーツは、

など、いろんな呼ばれ方をされており、とっても便利なもの。

ただ、実装には「Java Script」や「jQuery」など、スクリプトで定義することが多く、初心者には難しいところがありました。

また、「onclick」タグを使えば、HTMLに書き込むだけで使えるものもありますが、「WordPress」では、エディタを切り替えると、「onclick」タグが消えてしまうので、「PHPでショートコードを作る」など、面倒な作業が必要だったり。。

そこで、今回「2か所にコピペするだけでOK」の、CSSだけテンプレートを作ってみました。

CSSだけ アコーディオンボタン

HTML

<div class="ac-container">
<input id="ac-1" name="accordion-1" type="checkbox" />
<label for="ac-1"> クリックしてね </label>
<div class="ac-small">
<p>ここに文字を入れるよ！</p>
</div>
</div>

CSS

/* アコーディオン */
.ac-container{
    width: auto;
    margin: 30px auto;
}
.ac-container label{
    width: 300px;
    text-align: center;
    background: #ff9b9b;
    margin: auto;
    padding: 10px 5px;
    position: relative;
    display: block;
    height: 40px;
    cursor: pointer;
    color: #fff;
}
.ac-container label:hover{
    background: rgba( 255, 155, 155, 0.55 );
    -webkit-transition: all .3s;
    transition: all .3s;
}
.ac-container label:after{
    color: #fff;
    font-family:"FontAwesome";
    content:"\f067";
}
.ac-container input:checked ~ label::after {
   color: #fff;
   font-family:"FontAwesome";
   content:"\f068";
}
.ac-container input{
   display: none;
}
.ac-container div{
   background: rgba(255, 255, 255, 0.5);
   margin-top: -1px;
   overflow: hidden;
   height: 0px;
   position: relative;
   z-index: 10;
   transition: 
   height 0.3s ease-in-out, 
   box-shadow 0.6s linear;
}
.ac-container input:checked ~ div{
   transition: 
   height 0.5s ease-in-out, 
   box-shadow 0.1s linear;
   box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container div p{
   color: #777;
   line-height: 23px;
   font-size: 14px;
   padding: 20px;
}

/* 高さの定義 */
.ac-container input:checked ~ div.ac-small{
   height: 150px;
}
.ac-container input:checked ~ div.ac-medium{
   height: 200px;
}
.ac-container input:checked ~ div.ac-large{
   height: 300px;
}

使い方

まず「CSS」コードを、利用されているテーマの「スタイルシート」に、追加します。「外観」→「テーマの編集」から、テーマの「style.css」に、上記をコピーし、「ファイルを更新」してください。

その後、このパーツを使いたい場所に、「HTML」コードを挿入すれば、OKです。

※HTMLコードは、コチラ（↓）のプラグインを使うと、ワンクリックで使えて便利です。

「AddQuicktag」で、面倒なタグ打ちから、オサラバ！

また、少しだけ、補足解説を。

まとめ

このパーツは、組み合わせ次第で、いろんな活用ができる便利ツールです。CSSだけで作ると、動作が軽く、リスクも少ないので、オススメです。

また表示・非表示に合わせて、「＋」⇔「－」と変わるところは、アイコンを割り当てているだけなので、お好きなアイコンに変えて使ってくださいね。

今回ご紹介した内容は、自分用に作ったメモ的な部分もあり、まだ改良の余地があるのですが、それも踏まえて、今後も更新していきたいと思います！

コチラもおすすめです

【コピペで簡単】タイトル（見出し）CSSテンプレート 15選

直感的に、すぐ配色セットを選べる、本当に使えるカラーサイト7選

The post 【コピペで簡単】クリック展開 アコーディオン（折りたたみ）CSSボタン first appeared on コビトブログ2｜デザイン・趣味・おすすめ情報.

その中の、「第3弾：PORTFOLIO」「第4弾：Pixgraphy」など、いくつかのテーマでは、「自作子テーマが必要」でしたね。

WordPressのテーマによっては、「第1弾：Agama」「第2弾：Customizr」のように、もともと子テーマを用意してくれている場合もありますが、無い場合も多いです。

そこで今回は、子テーマを自分で作る方法を、ご紹介します。

WordPress 自分で子テーマを作成する方法

そもそも、子テーマって？なんで必要？

WordPressの使いたいテーマ（＝親テーマ）を継承しつつ、カスタマイズしたいところだけを、別に定義したサブテーマを、「子テーマ」と呼びます。

子テーマが無いと、親テーマが更新されるたびに、カスタマイズをイチからやり直す羽目になったり、もしカスタマイズを失敗しても、簡単に戻せるなど、メリットがたくさんあります。

詳しくは、コチラ（↓）で解説しているので、見てね。

自分で子テーマを作るには、以下の3つを作成するだけです。

それでは、順に、やり方をご案内します。

1．子テーマ用フォルダを作る

まず、子テーマ用のフォルダと、必要なファイルを設置します。

サーバ上のファイル操作をしますので、やったことが無い方は、必ず事前にコチラ（↓）を参考にして下さい。

ファイル転送用ツールにログインして、ご自身のドメインフォルダから、「public_html」→「wp-content」→「themes」の順に、フォルダ階層を辿り、子テーマを作りたい「親テーマ」のフォルダ名をコピーします。

（↑）の画像は、例えば「第6弾：Gridsby」の子テーマを作る場合です。

「themes」フォルダ内に、「gridsby」というフォルダがあるので、それを「ダブルクリック」or「F2」キーで選択し、フォルダ名をコピーします。

次に、右クリックを押し「新規」→「ディレクトリ」で、新しいフォルダを作成します。

フォルダ名を、「（コピーした親テーマフォルダ名）_child」とします。

「themes」フォルダ内に、親テーマ・子テーマのフォルダができていれば、OKです。（画像の場合だと、「gridsby」「gridsby_child」というフォルダが出来ています）

2．子テーマ用の「style.css」を作る

先ほど作成した子テーマフォルダに移動して、右クリックを押し「新規」→「ファイル」で、新しいファイルを作成します。

ファイル名を、「style.css」とします。

エディタが開くので、（↑）の画像を参考に、以下の内容をコピぺします。

/*
 Template:（親テーマ名）
 Theme Name:（子テーマ名）
 Description:（親テーマ名） の子テーマです
 Author:（あなたの名前（英数字で））
 Version:1.0
 */

「（親テーマ名）」「（子テーマ名）」「（あなたの名前）」の、計4ヶ所を、間違えないよう記入してください。

左上の「（ファイルの保存）」アイコンを押して、内容を保存します。

その後は、右上の「×」を押して、エディタを閉じます。

3．子テーマ用の「function.php」を作る

先ほど作成した子テーマフォルダに移動して、右クリックを押し「新規」→「ファイル」で、新しいファイルを作成します。

ファイル名を、「function.php」とします。

エディタが開くので、（↑）の画像を参考に、以下の内容をコピぺします。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
}

左上の「（ファイルの保存）」アイコンを押して、内容を保存します。

その後は、右上の「×」を押して、エディタを閉じます。

作成した「子テーマ」フォルダ内に、（↑）のように、「style.css」「function.php」の、2ファイルが出来ていればOKです。

あとは、WordPressのダッシュボードで、「外観」→「テーマ」から、作成した子テーマを「有効化」して、終了です。お疲れさまでした！

まとめ

子テーマが正常に適用されると、「外観」→「テーマの編集」から、（↓）のように、子テーマフォルダや、作成したファイルが確認できます。

あとは、好きにカスタマイズしてくださいね～！

また、親テーマにしかないファイルを、子テーマに持ってきて、編集することもできます。

詳しくは、コチラ（↓）を見てね。

今回ご紹介したやり方で、オシャレなWordPressテーマにも、ぜひ挑戦してみて下さいね♪

コチラもおすすめです

【コピペで簡単】タイトル（見出し）CSSテンプレート 15選

直感的に、すぐ配色セットを選べる、本当に使えるカラーサイト7選

The post WordPress自作子テーマの作り方 first appeared on コビトブログ2｜デザイン・趣味・おすすめ情報.

この企画も、いよいよ最後となりました～！

これらの条件を満たし、クリックするのが楽しくなる、アニメーションが光る多彩なテーマ「Gridsby」を、今回はご紹介します！

こちらは、フォトライクでありながら、ブログとしても使える、多彩なテーマです。本企画でご紹介した「第3弾：PORTFOLIO」と同じように、ファーストビューにフォトギャラリーのようなタイル状の魅せるデザインがあり、クリック時のアニメーション効果が、他サイトと一線を画します。それでいて、ブログライクにも使える、便利なテーマです。

その魅力と、具体的にどんな機能があるのかを、ご案内します。

Gridsby

オススメ度：★★★★★（満点5）

DEMOサイト / WordPress公式サイト
ダウンロードリンク（ダッシュボードから検索でもDLできます！）

フォトライクでありながら、ブログとしても使える、多彩なテーマです。何と言っても、特徴的なのが、コチラ（↓）のアニメーション効果です。

フォトギャラリーをクリックすると、ページ遷移を待つアニメーションが入り、また横からスライドインするように、ページが表示されます。また、右上の「×」を押して、ページを閉じると、写真がタイルに戻っていくように、アニメーションが入り、楽しい演出をしてくれます。

個人のブログで、ここまでのアニメーション効果がついているのは、本当に珍しいので、非常に目立つ存在になれるはず。

そして、カスタマイズ項目も多いです。たくさんの「Google Fonts」が選べるほか、SNSフォローボタンも多く、また色の設定も細かくできるのは、本当に珍しいです。標準で、SNSシェアボタンが用意されているのも、嬉しいですね。

また、「第3弾：PORTFOLIO」と違って、このように（↓）、トップページにはギャラリー以外のエリアも確保されており、個別の記事ページも、とても見やすいブログライクなデザインになっているので、使い勝手も良いです。

ただ、細かい所までこだわろうと思うと、CSSカスタマイズが必要（まぁ無料テーマは、大体そうですよね）。

特に、ウィジェットエリアの追加は、必須です。そして、子テーマが用意されていないので、自作する必要があります（そんなに難しくないです）。

ただ、言ってもそれぐらいで、必要な機能は、ほとんど搭載されており、使い勝手がいいテーマです。「Instagram」ライクに、写真・画像をメインコンテンツにしても良し、ブログライクに使っても良しの、用途に合せたやり方ができるテーマだと思います。これも別ブログで、使いたいなぁ。

まとめ

とても、オススメのテーマなので、おしゃれなテーマにしたい方は、是非一度、インストールしてみてください！

ただ、以下の点にだけ、ご注意を。

DEMOサイトだけでも、見てみてね！

「DEMO」を見てみる

そして、ここまで「6日連続企画」を、見て下さった方、ありがとうございました！！

改めて、「総評」をコチラ（↓）の記事の、最後にまとめました。

どんな方に、どのテーマがオススメなのかも見て頂いた上で、自分に合うテーマを選んでみてくださいね。

コチラもおすすめです

【商用OK】ニューヨーク公共図書館でも、約20万点を無料公開中！

GW・連休は、「TABICA」で「ローカル体験」に出かけてみませんか？

The post 多彩なアニメーションのWordPress無料テーマ「Gridsby」 first appeared on コビトブログ2｜デザイン・趣味・おすすめ情報.

今回を含めて、この企画も残り2テーマとなりました～！

これらの条件を満たし、スッキリ、王道の「マテリアルデザイン」テーマ「Materialize」を、今回はご紹介します！

こちらは、Googleが推奨したことで、話題となった「マテリアルデザイン」を使った、スッキリ王道のテーマです。前回ご紹介した、「第4弾：Pixgraphy」にトップページの構造は似ていますが、より全体がスッキリと落ち着いた、ブログライクなテーマです。

その魅力と、具体的にどんな機能があるのかを、ご案内します。

Materialize

オススメ度：★★★★☆（満点4）

DEMOサイト / WordPress公式サイト
ダウンロードリンク（ダッシュボードから検索でもDLできます！）

こちらはGoogleが推奨している、「マテリアルデザイン」をベースに、作られたテーマです。

マテリアルデザインとは

マテリアルデザインとは直訳すると「物質デザイン」です。
デザインのパーツを物質として捉え、現実世界のルールに基づくことによって、より直感的な操作にユーザーを誘導するデザインです。マテリアルデザインは、Googleの製品やアプリケーションによく使われており、Androidの普及とともに浸透していきした。

出典：TECHACADEMY「事例から学ぶ！マテリアルデザインとは【初心者向け】」

簡単に言うと、影や重なりで、普段見慣れている「三次元」の世界を、さりげなく表現することで、より「直感的」な操作ができるように、考えられたデザインの事です。最近は、「二次元」のフラットデザインと、対比されることが多いです。

このテーマには、ボタンや画像、記事の枠など、随所にこの「マテリアルデザイン」が、使われています。

また、スッキリとまとまっていて、可読性も高い、おしゃれさが特徴。さらに、「第4弾：Pixgraphy」と同様、「後ろの画像が固定されたままスクロールできるやつ（こういう感じ↓）」の、「パララックス効果」が使えます！（僕も、コレやりたかった。。）

カスタマイズ項目も多めで、ページごとに、サイドバーの有り無し等、細かいレイアウトを指定できるほか、標準で用意されている、SNSフォローボタンが多いです。

トップページには2種類のヘッダーボタンが、用意されているほか、標準フォントが読みやすくデザインされていて、使い勝手が抜群です。

そのほか、ギャラリーデザインが綺麗かつ機能的なので、とても便利です。

ただ、僕が試した限りだと、トップページで記事が「全文表示」されていて、本文の抜粋を選ぶ項目が見当たらないので、ここがカスタマイズ必須そうです（☆を1つ減らした要因となりました）。また、ウィジェットエリアの追加、SNSシェアボタンの追加も必要です。そして、子テーマが用意されていないので、自作する必要があります（そんなに難しくないです）。

この辺りが、うまくクリアできれば、大活躍するテーマだと思います！

まとめ

とても、オススメのテーマなので、おしゃれなテーマにしたい方は、是非一度、インストールしてみてください！

ただ、以下の点にだけ、ご注意を。

DEMOサイトだけでも、見てみてね！

「DEMO」を見てみる

ラストの、第6弾は、コチラ（↓）！

クリックするのが楽しくなる、アニメーションが光る多彩なテーマ「Gridsby」をご紹介しています！

Gridsby

詳細はコチラ

コチラもおすすめです

【商用OK】ニューヨーク公共図書館でも、約20万点を無料公開中！

GW・連休は、「TABICA」で「ローカル体験」に出かけてみませんか？

The post マテリアルデザインの、WordPress無料テーマなら、「Materialize」 first appeared on コビトブログ2｜デザイン・趣味・おすすめ情報.

ついに、この企画も後半に突入しました～！

これらの条件を満たし、画像・写真で魅せる、こだわりのデザインテーマ「Pixgraphy」を、今回はご紹介します！

こちらは、細かいパーツ・デザインに、特にこだわって作られたテーマです。これまで本企画でご紹介した、「第1弾：Agama」と「第3弾：PORTFOLIO」を足して、さらにブログライクにした感じと、良いトコどりなテーマです。特に、画像・写真の魅せ方が秀逸なので、華やかなブログを目指したい方には、ピッタリなテーマです。

その魅力と、具体的にどんな機能があるのかを、ご案内します。

Pixgraphy

オススメ度：★★★★☆（満点4）

DEMOサイト（現在公開停止中） / WordPress公式サイト
ダウンロードリンク（ダッシュボードから検索でもDLできます！）

まず目を惹くのは、トップページの美しいデザインです。さりげなく、「左上」にプロフィール情報、「右上」にSNSボタンが配置されているのに、このおしゃれさはスゴイです。

カスタマイズ性はそこまで高くないものの、「パララックス効果」と言えば、コレ！というくらい人気のある、「後ろの画像が固定されたままスクロールできるやつ（こういう感じ↓）」が、使えます！（僕も、コレやりたかった。。）

トップページはデザイン性だけではなく、「第1弾：Agama」と同様に、「スライダー」の役割もあるので、機能的です。（↓）

また、このトップの「スライダー」の下には、「第3弾：PORTFOLIO」のように、タイル状に並ぶ画像が美しいです。左下にある画像のように、マウスを合わせると、記事のタイトルなど詳細情報が現れます。

これだけデザインされたトップページにも関わらず、各記事ページは、割とシンプルなブログライクデザインなので、そのメリハリが素晴らしいです。こだわって作られているのが、伝わります。

ただ、カスタマイズ項目は、あまり多くなく、最低限と思った方が良いかも。

というのも、トップページにある肝心の「スライダー」機能が、実は無料版だと、完全には使えません（あくまでヘッダーの背景として、同じような見た目にはできます）。他にも、ウィジェットエリアの追加、SNSシェアボタンの追加が必要な上、子テーマが用意されていないので、自作する必要があります（そんなに難しくないです）。

また、動作が少し安定しないところが気になったので、☆を1つ減らした要因となりました。

しかし、そんなネガティブな面も凌駕する、デザイン性の高さが、魅力です。さらに、「Contact Form 7」や「Jetpack」といった、WordPressの人気プラグインとの連携もサポートしている上に、わかりやすいマニュアル・サポートも充実しているので、本当に魅力がたくさん詰まったテーマです。

一目ぼれした方は、無料版を何とかカスタマイズして、使いこなすか、単純に有料版にアップグレードすることをオススメします。（有料版は$59と、割と良心的価格なので、気になる方は「ココから」見てね。）

僕も、一度は使いこなしてみたい！

まとめ

とても、オススメのテーマなので、おしゃれなテーマにしたい方は、是非一度、インストールしてみてください！

ただ、以下の点にだけ、ご注意を。

DEMOサイトだけでも、見てみてね！

「DEMO」を見てみる

第5弾は、コチラ（↓）！

スッキリ、王道のマテリアルデザインテーマ「Materialize」をご紹介しています！

Materialize

詳細はコチラ

コチラもおすすめです

【商用OK】ニューヨーク公共図書館でも、約20万点を無料公開中！

GW・連休は、「TABICA」で「ローカル体験」に出かけてみませんか？

The post 画像・写真で魅せる、WordPress無料テーマなら、「Pixgraphy」 first appeared on コビトブログ2｜デザイン・趣味・おすすめ情報.

これらの条件を満たし、計算された美しさを誇る、シンプル・フォトブックのようなテーマ「PORTFOLIO」を、今回はご紹介します！

こちらは「第1弾：Agama」「第2弾：Customizr」と比べると、圧倒的にシンプルですが、緻密に計算された美しさがあり、とても評価の高いテーマです。フォトギャラリーのようなトップページで、コンテンツ重視のブログを目指す方に、ピッタリなテーマです。

その魅力と、具体的にどんな機能があるのかを、ご案内します。

PORTFOLIO

オススメ度：★★★★★（満点5）

DEMOサイト / WordPress公式サイト
ダウンロードリンク（ダッシュボードからはDLできません！）

タイル状に並んだ画像が美しい、「Instagram」にも似た、魅せるデザインです。カスタマイズ項目は、このように（↓）、それほど多くありませんが、「Font options」から「ヘッダー用」と「記事などの全体用」のGoogle Fontが分けて選べるなど、細かい配慮があります。（英語の項目は、「Chrome」ブラウザで、右クリック→「日本語に翻訳」をすると、ラクに使えます♪）

このテーマは、個別記事ページも含め、とにかくシンプルで「美しい」です。最近は、無駄に文字数が多かったり、バナー・リンクがベタベタに貼られているなど、情報量の多すぎるブログは、パッと見の印象で、嫌がられる傾向にあります。そのため、あえてトップページをシンプルに抑えることで、逆に「気になる、見てみよう」と、ポチッを誘う効果があります。また「Agama」「Customizr」には無かった、SNSシェアボタンが標準で用意されているのも、嬉しいですね。

そして、一番の魅力は、やはりトップページのデザインです。コチラ（↓）のように、画像にカーソルを合わせると、記事のタイトルや詳細が、アニメーション表示され、とてもおしゃれなんです。

ただ、細かい所までこだわろうと思うと、やっぱりCSSカスタマイズが必要です（まぁ無料テーマは、大体そうですよね）。

特に、ウィジェットエリアの追加は、必須ですし、サイドバーが無いので、少し不便に感じるかも。また、子テーマが用意されていないので、自作する必要があります（そんなに難しくないです）。

シンプルな分、思い通り・自由自在とはいきませんが、むしろ、そのままが十分素晴らしいので、コンテンツ重視にしたい方には、とてもオススメのテーマです。特に、僕はこのテーマは「アフィリエイト」向きになると思っています。トップページに、ただシンプルに自分のオススメする商品の画像（記事）が並ぶと、ありがちな広告とは差別化出来て、面白そうです。

まとめ

とても、オススメのテーマなので、おしゃれなテーマにしたい方は、是非一度、インストールしてみてください！

ただ、以下の点にだけ、ご注意を。

DEMOサイトだけでも、見てみてね！

「DEMO」を見てみる

第4弾は、コチラ（↓）！

画像・写真で魅せる、こだわりのデザインテーマ「Pixgraphy」をご紹介しています！

Pixgraphy

詳細はコチラ

コチラもおすすめです

夢の「6時間労働」！・・・でもない？

GW・連休は、「TABICA」で「ローカル体験」に出かけてみませんか？

The post シンプルで美しい、WordPress無料テーマなら、「PORTFOLIO」 first appeared on コビトブログ2｜デザイン・趣味・おすすめ情報.

これらの条件を満たし、おしゃれなベースはそのままに、カスタマイズ性抜群のテーマ「Customizr」を、今回はご紹介します！

無料とは思えないくらい、たくさんの機能が詰まっていて、さらにユーザーの使い勝手にも配慮されています。前回ご紹介した「Agama」と、どちらを当ブログで採用するか、最後まで本当に悩みました。

その魅力と、具体的にどんな機能があるのかを、ご案内します。

Customizr

オススメ度：★★★★★（満点5）

DEMOサイト / ダウンロードリンク（WordPress公式サイト）
（ダッシュボードから検索でもDLできます！）

「Agama」に負けず劣らない、カスタマイズ性の高さで、ブログライクなデザインです。ビジネス用にも使われるほど、ベースのデザインがしっかりと設計されています。もちろん、「パララックス効果」も標準装備です。

何と言っても、「外観」→「カスタマイズ」から、設定できる項目の多さが、魅力。その項目数は、「Agama」をも超えます。「Customizr（カスタマイザ―）」の名前通りですね。

無料版でも、ページごとにレイアウトが変えられるなど、幅広いカスタマイズが可能。ユーザーの思い通りに、サイトを作ってもらえるよう、細かい配慮がされています。ここだけで、やりたいことは、ほぼできちゃいます。（英語の項目は、「Chrome」ブラウザで、右クリック→「日本語に翻訳」をすると、ラクに使えます♪）

特にオススメの機能が、「フロントページ・スライダー」と「フィーチャー・ページ」。HTML/CSSに詳しくない方でも、簡単にオシャレなパーツが使えます。

また、子テーマも用意されているので、便利です！

「子テーマ」をダウンロード

ただ、細かい所までこだわろうと思うと、やっぱりCSSカスタマイズが必要です（まぁ無料テーマは、大体そうですよね）。

特に「Agama」同様、ウィジェットエリアやSNSシェアボタンの追加は、必須だと思います。標準フォントも少し読みにくいので、変更した方が良いですね。また、少しテーマの構造が複雑なので、どのcssファイルの記述をカスタマイズしたらいいのか、判別するのが大変かも。

ただ、このテーマ自体は、結構前にリリースされているので、検索すると、ある程度ノウハウが出てきます。特に、コチラ（↓）のサイト様は、動画でやり方を解説してくれているので、とてもわかりやすいです。

非常に魅力的なテーマなので、僕も別ブログで使うと思います！

まとめ

とても、オススメのテーマなので、おしゃれなテーマにしたい方は、是非一度、インストールしてみてください！

ただ、以下の点にだけ、ご注意を。

DEMOサイトだけでも、見てみてね！

「DEMO」を見てみる

第3弾は、コチラ（↓）！

計算された美しさを誇る、シンプル・フォトブックのようなテーマ「PORTFOLIO」をご紹介しています！

PORTFOLIO

詳細はコチラ

コチラもおすすめです

ずっと気になっていた「Twitter」の怪しいDMの話

【商用OK】メトロポリタン美術館が、約20万点の作品を無料公開！

The post カスタマイズ性抜群の、WordPress無料テーマなら、「Customizr」 first appeared on コビトブログ2｜デザイン・趣味・おすすめ情報.