「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｜デザイン・趣味・おすすめ情報.

そんな「アポカリプス」（黙示録）のような、地球・人類の終末論は、しばしば話題になるものです。

そして先日、「世界の終末は、確実に近づいている」という、興味深い記事があったので、ご紹介したいと思います。

世界中の有名科学者が“人類滅亡寸前”を指摘！ 21世紀で終了の確率は50％！

著名科学者らが警告「100年以内に人類滅亡」
世界の終わりは確実に近づいてきている。ホーキング博士のみならず、世界中の科学者があちこちでアポカリプス（終末）を予言していると、歴史ある米ニュースサイト「Salon」（5月1日付）が報じている。

引用元：TOCANA「【悲報】「マジで世界滅亡2分前」世界中の有名科学者が“人類滅亡寸前”を指摘！ 21世紀で終了の確率は50％！」

元ネタは、コチラ（↓）のニュースサイトで、記事には、200近いコメントが寄せられています。

そして有名科学者のみならず、国連などの世界的機関までもが、「21世紀での終焉」説に触れています。

有名科学者・世界的機関が、主張する「終末」の理由

科学者らの主張

世界的機関の主張

さらに、「人間自らの手による、終末」も、危惧されています。

国家間戦争が、世界の終わりを招く危険性

最近、話題となっている北朝鮮・アメリカ間の緊張もあって、戦争による終末説も、にわかに現実味を帯びています。

また、今年に入ってから、地球最後の日までの、残り時間を概念的に示す「世界終末時計」が、トランプ米大統領の誕生に伴い、30秒も進められ、残り「2分30秒」となりました。米ソ冷戦に匹敵する、「核戦争」の危機に、警鐘を鳴らしています。

科学技術の進歩による、終末の可能性も

国家間以外にも、個人・集団が「世界の終わり」を招く、危険性もあるそうです。

それを、可能にしてしまったのが「科学技術の進歩」。例えば、直径約3cmほどの「小型ドローン」に弾丸を詰め、遠隔操作できる「銃」のように、使うことができるとのこと。しかも、それほど入手・操作が難しいものではないようです。

生物兵器も含め、このような進歩した科学技術が悪用され、大規模テロにつながる危険性もあります。

まとめ

自然災害から大規模テロまで、「世界の終末」の引き金となるリスクは、無数にあり、あくまで推測の域を出ませんが、21世紀に入ってから、その「危機感」が高まっているようです。

宇宙好きな僕としては、隕石の衝突なんかも、可能性あるんじゃないの？とは思いますが、現実味があるのは「ウイルス」「科学技術兵器」なのかもしれません。

「100年以内」と言われると、にわかに信じがたいところもありますが、自分が生きているうちに、どう変わっていくのか、どこまでそれを見届けられるのか、未来が気になりますね。

コチラもおすすめです

人類が月に「もう1度行けない」理由　アポロ計画とは

BMWがレゴを本物に！空飛ぶバイク「Hover Ride」

The post 有名科学者らが語る「21世紀で世界が終わる確率50%」 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｜デザイン・趣味・おすすめ情報.

いつまで経っても、疲れが取れない・・・

そんな経験ありませんか？

睡眠不足ではなくても、身体が重く、あくびが止まらない・・・、そんな疲れの原因は、一体何なのか。

その、さまざまな可能性について、書かれた記事を見つけました。

あなたがいつも疲れている理由は、何なのか？

睡眠不足ではないはずなのに、日中なぜか疲れていたり、あくびばかりしてしまうことがあります。この疲れの原因は一体何なのか？ということで、運動不足・水分不足・社会的時差ぼけなど、疲れを引き起こすさまざまな可能性について、YouTubeの科学チャンネルAsapSCIENCEが迫っています。

出典：GIGAZINE

（↑）の動画内容をまとめると、以下の8つの原因が考えられるそうです。

1．運動量の少なさ

慢性的な疲れの原因に、「運動量の少なさ」があるそうです。

ある研究で、週2・3回の運動を、1カ月半続けると、普段よりも元気が出て、睡眠時間を増やさなくても、ぐっすりと眠れるようになった、とのこと。

確かに、思い返してみれば、学生時代に部活でヘトヘトの時に限って、信じられないくらいグッスリ眠れた気がします。

室内での、軽い筋トレやストレッチでも、少し心がけて取り組むことで、睡眠の質をあげられるかもしれません。

2．夜のコーヒー・エナジードリンク

コーヒーやエナジードリンクに含まれる「カフェイン」により、脳が休まらず、疲れの原因になっている可能性も。

眠気覚ましに、よく使われる「カフェイン」。その仕組みは、眠気を誘う「アデノシン」という物質の作用を、抑えてしまうからと言われています。

しかも、その効き目は長く、睡眠前の6時間以内に摂取すると、睡眠の質が下がってしまうそう。

夕食後のコーヒーで、ほっと一息・・・もいいですが、それは翌日の疲れにつながっているかもしれません。

3．水分不足

ある研究では、体内の水分が、普段より1.5％落ちると、血液が濃くなり、筋肉や臓器に栄養や酸素を運ぶスピードが落ちてしまうようです。

また、「喉が渇いたなー」と感じた時には、すでに2％も水分量が落ちているそう。

そのため、1日を通して、小まめに水分を取ることも、疲れを溜めない効果があるようです。

4．寝る前のアルコール

就寝前のアルコールは、体温を下げるほか、レム睡眠の時間が減ってしまうことが、研究によってわかっています。特に、午前3時～8時にかけて、睡眠の質が悪くなるとのこと。

ほろ酔い気分は、身体がポカポカして、気持ちいいもんですが、翌日そのツケを払わされているのかもしれませんね。

5．平日と週末の睡眠スケジュール

平日が忙しすぎて、週末に「寝溜め」してしまう人も多いと思います。

僕も起きる時間を気にせず、昼まで寝るのも大好きですが、やはり就寝時間や睡眠時間が、マチマチだと、身体は疲れてしまうようですね。

身体は「習慣化」したことに対して、無意識的に活動できるようになり、負担が軽くなります。

睡眠も、普段から習慣づけを心がけることが、大事なようです。

6．日中帯の昼寝

「昼寝」が、脳の活動に良い効果があると、最近よく言われますね。

特に、20分という時間であれば深い眠りに入って夜眠れなくなることなく、体を休めることができるのだそう。

ちょっと疲れたなぁと思ったタイミングで、仮眠をとるのが大切ですね。

7．ストレス

精神状態が、身体に与える影響も、やはり大きいようです。「他人が自分をどう思っているか・・・」「自分の選んだ選択が正しかったのか・・・」「5年後、10年後、幸せでいられるのか・・・」、ぐるぐる頭を悩ませる心配事が多すぎると、肉体も疲れ切ってしまいます。

不眠症となる原因の多くも、ストレスだと言われます。現代病で、避けられないモノではありますが、多少は折り合いをつける必要もありますね。

8．夜型タイプ

約20%、5人に1人が、「夜型」タイプなんだそうです。

ただ、今の社会は「朝8～9時」始業の、会社や学校が多く、社会的な時間は「朝～夜」となっています。

そのため「夜型人間」は、「社会的時差ぼけ」に苦しむことがあるそう。この「社会的な時間」と「自分の中の、生物時計」が合わないことで、慢性的な疲れにつながるようです。

まとめ

僕はヘルニア持ちなところもあって、寝不足や、ストレス・疲れの改善について、よく調べますが、どこも結局、こんなことを言われます（↓）。

「毎日規則正しく、3食バランスよく食べて、8時間くらい寝て、適度な運動をして、ストレスを溜めないことが、大切だよ！」

それが、できたら苦労しないよ！って、いつも思います(*'▽')笑

特に現代社会で、「規則正しく」・「ストレス溜めない」なんて、本当に難しいと思うんです。

ただ今回の記事では「水分摂取」や「アルコール・カフェイン」、「昼寝」など、すこし実践できそうなものもあったので、ご紹介しました。

特に、「8. 夜型タイプ」は、本当にどうしようもできないコトなんですが、僕自身「夜型」タイプで、今のフリーランスになってから、ほとんど病気をしなくなったので、「確かに」と実感した点もあります。

いつか、疲れのない、スッキリとした朝を迎えたい・・・！

そんな方は、できそうなコトから、少しだけ取り組んでみてもいいかもしれませんね。

コチラもおすすめです

人類が月に「もう1度行けない」理由　アポロ計画とは

科学雑誌「Newton（ニュートン）」が、自力再建断念！

The post どれだけ寝ても、いつも疲れが取れない理由とは？ first appeared on コビトブログ2｜デザイン・趣味・おすすめ情報.

この話を耳にしたことがある方は、多いと思います。しかし、あれから48年・・・・、2度めの月面着陸に成功した、との話はありません。その理由は、何故なのか、本日おもしろい見解を見つけました。

そもそも「月面着陸」は真実だったのか・・・その疑惑も含めて、ご紹介したいと思います。

人類が月に「40年以上行っていない」理由

それは「アポロ計画の功罪」だった？

1969年、人類は初めて月面を歩いた。しかし、その3年後のアポロ17号の打ち上げ以来、有人月面着陸は行われていない。一体その理由とは？　質問サイト「Quora」に寄せられた質問に、SF作家のC・スチュアート・ハードウィックが回答した。

なぜ私たちは40年以上、月に行っていないのか？　そのわけは、実に莫大な費用がかかるから、そして行かなければならない実用的な理由がないからです。

引用元：Forbes「人類が月に「40年以上行っていない」理由　アポロ計画の功罪」

この記事の中では、「月面に人類初の足跡を残すための事業に、約50万の人力と、世界一豊かな国家の軍事力と産業力が投入された」と言われています。つまり、そこまでお金をかけてでも、「アメリカの大偉業」として、歴史に名を遺すことに、執念とお金が懸けられていた、というわけですね。

なぜもう一度行けないのか」の答えは「お金がないから」である。1960年代、アメリカがアポロに使った金は250億ドル、1ドル360円の時代、日本円でざっと9兆円、当時の物価は今より安かったから、今やるとなったら何10兆円になるかもしれない。

引用元：MAG2NEWS「陰謀論「アポロ11号は月には行ってない」を中学生があっさり論破」

日本の今年（平成28年度）の、税収で「約58兆円」（参照）。

なので、「何10兆円」となると、税収のほとんどを使い果たす気で、挑戦しないとならないレベルです。これは確かに、実現しづらい額ですね。

そもそも「月面着陸」したって、本当？

「人類が月に行ったのは、真実か？」「アポロ計画の陰謀論」という話も、昔からアツく議論されています。

事実、アメリカが大金を投入してまで、「アポロ計画」を実行した背景には、ソ連との開発競争や、威厳争いがあったとも、言われているため、「ねつ造」したのでは？と疑う方も多いようです。

その数々の疑惑については、コチラ（↓）に、わかりやすく掲載されていたので、参考にしてみてくださいね。

• アメリカ人の20パーセントは、月着陸について疑いを持っている？
• アポロでの月面の足跡は、映画「カプリコン・ワン」に出てくるものとそっくり!
• アポロの写真には星が全然写っていない!
• ロケット噴射でできるはずのクレーターがない!

引用元：月探査情報ステーション「第三話 人類は月へ行っていない!?」

また、上記の疑惑について、最新のCG・グラフィック技術を用いて、検証してみた内容も、すごく面白いです。（↓）

一部で捏造説が唱えられる「アポロ11号」の有名な月面着陸写真。NVIDIA社は、最新コンピューターグラフィックス技術を使って光の当たり方を再現し、捏造でないことを証明した。

引用元：WIRED「アポロ11号の「月面着陸は事実」：NVIDIA社が最新GPU技術で証明」

まとめ

月面と言えば、漫画や映画で登場する「月面基地」や、地球からは見ることができない「月の裏側」など、宇宙・SF好きには、たまらないテーマの1つ。

人類が月面に行ったのか、再びまた着陸できるのか、真相・未来は定かではありませんが、夢が膨らみますね！

ちなみに、ガンダム好きな僕の友人いわく、

「え？2045年には、宇宙世紀が始まって、「コロニー」の建築が始まるよ？」

だそうです。あと28年！宇宙開発がんばってくれー！(*'▽')

コチラもおすすめです

 BMWがレゴを本物に！空飛ぶバイク「Hover Ride」

科学雑誌「Newton（ニュートン）」が、自力再建断念！

The post 人類が月に「もう1度行けない」理由　アポロ計画とは 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｜デザイン・趣味・おすすめ情報.