blogger 見出し css 4

Bloggerの見出しが変なので変更する方法を紹介します。一番大きい見出しである記事タイトルはh1であるはずなのに、Bloggerではなぜかh3になっています。このままでは、すごく不便だと思ったので、どこに振り分けられているのか調べたうえで自分で変更しました。 2014年8月17日日曜日 Edit this post. 見出しをオシャレなデザインに変更して、アナタのサイトをオシャレに変身させちゃいましょう！, アフィリエイト初心者でも稼げるサイト・ブログ作成に、おすすめなWordPressテーマ, 保護中: 【当選者専用】Twitter無料プレゼント企画：アイキャッチテンプレ165の受取り案内. 今回は、見出しの装飾CSSについて書きたいと思います。CSSとHTMLで「見出し(タイトル)」の様々なデザインを作ったのでご紹介します！, 見出しは、「

」「

」などを用いて文章のタイトルや段落を分ける時に使いますが、記事内では必ず使うものですよね。, 私も最初は苦戦しましたので今回は、初心者の方でも簡単に見出しのデザインを変更出来るようにコピペでOKな見出しの装飾CSSのサンプルを集めました。, ※また、お使いのテーマによっては、デザインが崩れてしまう場合もあるので「class」を使う見出しの設定方法も一緒にご紹介します。, 今回、そのアイキャッチを誰でも使えるようにテンプレにしました。今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。, 例ではh1タグにしていますが、h2〜h6に変えてそのまま使うことができます。コピペする際に書き直して頂ければと思います。, 文字色を青にして、下線を破線（dashed）に変えました。点線（dotted）にしても良いでしょう。, ふきだし風に背景色を塗ってみました。border-radiusで角を丸くしても良いかもしれませんね。, 背景色がある程度濃い場合は、破線を白にしても良いでしょう。この例では少し線を太くしています。, リボン風の見出しです。左側の位置を調整して、裏に織り込まれているように見せられると良いですね。, 蛍光ペン風。数字（70%の部分）を小さくすればより蛍光マーカーが太く、大きくすれば細くなります。, 片側だけが尖ったようなデザインです。３行以上の長文見出しを書くと若干デザインが崩れてくるので、ご注意くださいませ。, 左右両側を斜めに尖らせ、さらに下線をつけてみました。二重線（border: double…）などにしても良いでしょう。, ストライプ柄の見出しです。ごちゃごちゃして見えないようにストライプ柄は薄めの色にするのが良いでしょう。, 水色系統でまとめてみました。以下のCSSでは文字を中央揃えにしていますが、左寄せのままでも良いでしょう。, 文字の両側に線を伸ばすデザインです。モノクロベースのデザインによくマッチしそうです。中央寄せで使うのがおすすめです。, 文章の下に小さく線をつけるデザインです。こちらも中央寄せのデザインで使いたいところです。, ボーダーが交差したようなデザインです。ボーダーや文字をカラフルな色にしても良いかと思います。, calcというプロパティを使っています。IE8以下およびAndroid4.3以下では使えないのですが、両方含めても全体の閲覧のうちごくごくわずかでしょう。もし、それらのブラウザで開くと上下のみ線が表示されるようになります（これはこれでオシャレなので問題ありません）。, 上下を曲線のボーダーではさみました。こちらも中央寄せのデザインで使うのがおすすめです。, 大カッコバージョンです。見出しサイズと本文サイズにしっかり差をつけるのがポイントです。, 奥行きのある3Dな見出しボックスです。使いどころは限られるかもしれませんが、見る人の目をひくことは間違いありません。, h1:first-letterというセレクタにすれば、一文字目のデザインだけを変えることができます。, 右側へと流れるように消えていく下線です。和風なデザインのWebサイトやブログにはとくに合いそうです。, フラットデザインベースのWebサイトには合いませんが、どこかで使いたい表現ですね。, タイトルなどに使いたい反射表現。残念ながら対応しているのはSafari（iOS含む）とChrome、Operaのみです。, Font Awesomeを使えば、アイコンを取り入れた幅広い表現ができるようになります。。FontAwesomeの導入方法と基本的な使い方はこちらの記事で解説しています。見出しにアイコンを使う方法にも触れています。, FontAwesomeが導入済みであれば、これから紹介する見出し例はCSSのコピペで使うことができます。, 旧VerのFontAwesomeを使っているときはfont-family: FontAwesome;に変えて下さい。, 背景色をつけ、さらに上下を点線で挟んでみました。色やアイコン種類は好みで変えて頂ければと思います。, HTMLタグのようにはさんでみました。ただし「切り替えボタン」にも見えるのでユーザビリティ的にはあまり良くないかもしれないですね。, いかにもフラットデザインらしい見出しです。記事本文だけでなくWebページ内の様々なところで使えそうです。, の下にカラフルな円を敷いてみました。プログラミング関連のWebサイトに相性が良いのではないかと思います。, 見出し文の上にタブをつけてみました。アイコン種類や「Check」という部分はCSSで好きな文字に変えることができます。, 文の前にアイコンをのせてみました。アイコンの背景だけ色を濃くすることでオシャレでメリハリのある見出しにすることができます。, 旧VerのFontAwesomeをお使いの場合には、font-family: FontAwesome;、content: "\f040"へと2点の書き換えをお願いします。, 小さな吹き出しにアイコンを入れてみました。電球アイコンを入れるとピコンとひらめいたようなデザインになりますね。, 使い勝手が良さそうな表現です。例によってアイコン種類や色はお好みで変えてくださいませ。, カーソルのアイコンを先頭に置き、CSS3のアニメーションで点滅させてみました。多用すると見る人が不快に感じてしまうかもしれないので注意しましょう。, 最後にゆるい雰囲気のウェブサイト・ブログに合いそうな見出しデザインサンプルを紹介します。, FontAwesomeを使っています。シンプルな円なのですが、円の色にバリエーションをもたせるとオシャレでかわいく見えるのではないでしょうか。, この例では見出しにクラス名をつけ、それに対してそれぞれ色を指定しています。このようなCSSの書き方についてはこちらの記事で解説しています。, ふきだし風です。背景は控えめな色にするのがポイントです。こちらもFontAwesomeを使っています。, カラフルな肉球のアイコンフォントを見出し文の前に置いてみました。ペット系のブログなどでどうぞ。, さらに文字の背景を塗り、バーのようにしてみました。円と同系統色にするのがおすすめです。, 上で紹介してきた見出し例ではフォントサイズ（font-size）を指定していません。というのも、h1〜h6のどれに適用するかによって、また環境によってベストなサイズが変わってくるからです。使用する際には、フォントサイズはいちばんマッチしそうなものを試して頂ければと思います。, 「箇条書き」や「ボタン」「ボックス」などについても同じようにスタイル例を紹介しています。よかったら目を通してみてください。. 値を1つだけ記述した場合は「上下左右」の間隔を指定します。 2013-03-28. ・ridge（隆起した線）, 上下左右の間隔を指定します。ある日のこと、テレビの録画用HDDを丸ごとコピーするためにUbuntuというOSが必要であることがわかりました。UbuntuというとLinuxベースのOS（オペレーションシステム）です。フリーで使えるうえに、さまざまなアプリが揃っているので前々から使ってみたいと思っていました。ではさっそくUbuntuのインストールにレッツ&トライ！今回の解説にWindows10を使っています。 BloggerでCSSを追加する方法。（見出し編） CSS練習; Gunosyの正体。ブログの読者を増やす為の読ませる技術; ロゴマークをつくる。アマゾンアフィリエイトに登録してみた。フェイスブックの迂闊な「いいね」はいいねじゃない話。 4月 (14) 詳しくは、下記にて, 見出しのデザインを変更するためのCSSとHTMLの書き方をご紹介します。こちらは、そのままコピペしてご自身のサイトで使って頂いても大丈夫です。, google Chromeだとデザインがすぐに反映されないので、CSSを変更したあとはキャッシュの削除をして確認してくださいね。, 見出しは、記事を読みやすくする為に必要なものです。今回は、様々なデザインの見出しCSSのサンプルを用意しました。, まずは、CSSの設定方法についてです。あなたのお使いのテーマの中に「style.css」のいうスタイルシートを探してください。, その中に、下記で紹介する見出しのCSSをコピーして貼り付けるだけです。張り付けたあとは、ファイルを更新ボタンを忘れず押してくださいね。, 下記のCSSサンプルをそのまま使う場合は、最初の「p#sample1」の部分と同じclass名になるようにしてください。, まずは、見本です。それぞれ、何を設定しているのか簡単に説明しますのでサンプルを変更しあなただけのデザインに変更したい場合は参考にしてください。, 見出しの文字色をカラーコードで指定します。文字色を変更しない場合は、記載の必要はありません。, 見出しの背景色をカラーコードで指定します。背景色を変更しない場合は、記載の必要はありません。, 線の種類は、「solid」の部分を変えれば点線など数種類の線が使用できます。下記に一例を載せておきます。, ・solid（実線・1本線）・dashed（破線）このページは初めてUbuntu（ubuntu-ja-16.04-desktop-amd64）をインストールした直後にネットワークにWi-Fiの選択肢が出ない問題への解決方法を記載しています。Wi-Fiの選択肢が出ず無線LANに接続できない問題に対する回答は一つです。ズバリあなたがお使いのUbuntuに無線LANドライバがインストールされていません。私も初めてUbuntuをインストールして無線LANに接続できなかったときは本当に困りました。わざわざホコリの被った有線LANをパソコンに接続して各種のアップデートやインストールを行うはめになりました。, SDXCカードにLinuxのUbuntuをインストール/起動してみたやって見たらすごく見栄えが良くなりました。同じ文章を2つ比較で掲載しています。比べて見てください。. [blogger]見出しにスタイルを付けたい！付箋風スタイルとクレヨンっぽいのを設定してみた。 Labels: Blogger カスタマイズ. 記事の本文に入力したテキストに対して、(1)表示形式(見出し)、(2)リストと箇条書き、(3)引用、(4)配置、をそれぞれ設定する方法について解説します。 CSSのみで作る見出しデザインあとがき ; 見出しデザインの使い方・コピペする場所. いちいち、複数のASPにログインの手間が省けます。↓. 4. 背景に画像を使用したい場合は画像のURLを記述します。画像を使わない場合は、記載の必要はありません。では、ここから実際にコピペでOKな見出しCSSのサンプル集をご紹介していきます。 Bloggerの場合、CSSはHTMLの内部に組み込まれています。 CSSファイルが別にあるわけではないので注意！関連記事：【ブログカスタマイズ】CSSはHTMLと別のファイルじゃなくていい！CSSの書き方は3パターンある。 ①HTML内のCSSを書き換える HTMLの編集画面を開くまず、Bloggerのホーム画面か … ホームページやブログでHタグは必ず使用しますが、文章を読みやすくするためにもデザインに合わせた見出しが必要になってくると思います。 ... Webサイトを装飾していく時に無視できない要素、見出し・リスト・引用文。特にWordPressでオリジナルのテーマを作る時は、ブログ用にこれら基本の要素すべての装飾もすると思います。 ... スタイルシート見出しメーカーは、好きな色でシンプルなスタイルシートの見出しを作成するだけのシンプルなツールです。サンプルカラーから調整してもよし、自分で好きに着色してもよし、使い方は出来上がったソー ... https://www.sunabox.net/2012/05/blogger_13.html, [blogger]見出しにスタイルを付けたい！付箋風スタイルとクレヨンっぽいのを設定してみた。, Webサイトの基本要素見出し・リスト・引用文のスタイルを整える | Webクリエイターボックス, 【デザインに役立つCSSで作成する見出しタグのサンプル集 | KOBO TAKE】, [blogger]下から上まで一気に飛ぼう！「ページトップに戻る」ボタンを付ける。そして回転させる・・・。, [Blogger] モバイル表示時、記事上と記事下にGoogle Adsenseの広告を表示する方法。, [blogger]もっと詰めて！サイドバーのガジェット上下の余白を詰めて配置する方法。(04/28追記), 【iPhoneアプリ】googleマップとイラストの融合！【いい日旅立ち京都】がなかなか良さそうな雰囲気！, [blogger]シンプルな関連記事表示がしたい！「Smarter Related Posts Widget for Google Blogger - v2.0」！, このブログ、投稿記事の背景は『#fffffc』という指定にしているので、ちょっとだけ差が出るように真っ白に。, 『margin』も同様の順番ですが、右を投稿の枠と重なるように、左は枠から飛び出させて貼り付けたっぽく見えるように・・・なってるといいな。, 『box-shadow』は、IEではうまく動作しませんが、基本Chromeで過ごしてるので設定。. Bloggerの編集画面には、H2からH4までの3つの見出しタグが付いています。見出しタグをつけることによってブログにメリハリをつけ、読者に読みやすいページを作ることができます。, Bloggerでは、CSS（スタイルシート）で見出しタグを装飾することができます。, 硬い樹木の一覧今回はcssのみで作れる見出しデザインについて100個サンプルを作ってみました。見出しなどで使えるデザイン例についてどこよりも詳しく紹介・解説しています。すべてcssのみで実現しているものになりまります。コピペしてそのまま使用していただいて構いません。 Bloggerの見出し＜h2＞、小見出し＜h3＞、順見出し＜h4＞活用方法のCSSデザイン . Font Awesomeを使えば、アイコンを取り入れた幅広い表現ができるようになります。。 FontAwesomeの導入方法と基本的な使い方はこちらの記事で解説しています。見出しにアイコンを使う方法にも触れています。値を2つ記述した場合は「上下」「左右」の間隔を指定します。 Blogger：見出し設定(4)テンプレートデザイナーで見出しをカスタマイズ . HOME CSS CSS見出しデザイン参考100選！コピペ可！どこよりも詳しく解説！, JAJAAAN代表です。このサイトの制作者です。趣味は、最近始めたアウトドア、最近始めた釣り、最近始めた格闘技です。尊敬する人はさかなくん。人生で学んだことは「女は怖い」ご連絡はメールかTwitterでDMください。メール Twitter, 見出しなどで使えるデザイン例についてどこよりも詳しく（おそらく..）紹介・解説しています。すべてCSSのみで実現しているものになりまります。, コピペしてそのまま使用していただいて構いません。デザイン例によって作成時のポイントや注意点も書いています。, 見出しについて、マークアップで使用されるHTMLタグはh1〜h6になるかと思います。サンプルのHTMLではh2を例にしていますが、hタグである必要はありません。ご自由なHTMLタグにスタイルを当ててください。, サンプルの中には、IEではIE用にスタイルを追加しなければいけないものもあります。そのようなCSSはサンプルでは書いていないので、IE対応が必要な場合は確認してIE用スタイルを追加するようにしてください。, 見出しなどで使えるデザインでは複数行になることを考えたデザインにすることが重要です。デザイン作成時は一行のみでデザインしていたから問題なかったけど、運用時に文字数が多くなって複数行となったら崩れてしまった、という場合も多いです。 1行のみを想定した見出しであれば問題ありませんが、複数行にする可能性がある見出しデザインを作成する場合は注意が必要です。, hタグについては、各ブラウザごとにデフォルトでスタイルが適用されています。リセットCSS・ノーマライズCSSなど、デフォルトCSSについて何も調整をしていない場合、ブラウザによって表示の差異が発生する場合があるので注意しましょう。, シンプルな見出しです。実際にはシンプルな見出しが一番使用するケースが多いのではないでしょうか。色についてはご自由に編集してください。, 上下に二重点線を引いています。borderはdottedではなく、dashedのほうが刺繍のようなイメージが出ていいかもしれませんね。, シンプルに線を工夫した見出しデザインになります。サンプルでは黒線ですが色を変えてみるのも良いでしょう。, ストライプの線を引いた見出しのデザインです。線の色を変える場合は、liner-gradientで指定している色の値を変更してください。, 見出し全体を枠線で囲み、陰影に見えるような箇所をストライプにしてみたデザインです。, 少し強引ですが、擬似クラスなどを重ねて表現しています。アイコンはFont Awesomeを使用しています。, 両サイドに二重線を引いています。サンプルではhタグをinline-blockにしています。, 両サイドに線を引いているように見えますが、実際は背景となる要素に線を引き、文字に背景色を指定しています。このようにすることで、幅いっぱいに線を引くことができ、かつ文字数による線の横幅を気にする必要もなくなります。, 見出しを囲っている線をグラデーションにしたパターンです。実際は線にグラデーションをかけているわけではなく、グラデーション背景の上に白地の見出しを乗せている形になっています。, background-clip: text;を使ってテキストにグラデーションをあしらっています。, ゴールドをイメージしたグラデーションのパターンです。実際に使用する際にはテキストに影を付けたり、色を調整してコントラストを大きくするなどして、もっとテキストと背景にメリハリを出して文字を見やすくする工夫をしたほうが良いでしょう。, テキストをゴールドにしたパターンです。黒背景との相性が良いです。高級感を訴求したいコンテンツに合う見出しデザイン例です。, 上下の線をゴールドにして、影を付けたパターンです。和風・高級といったイメージに合う見出しデザイン例です。, 上下左右それぞれ色の異なるborderを指定することでサンプルのような立体感のあるデザインになります。さらにシルバーのグラデーションをかけて金属感のある見出しにしています。, タグ風の見出しデザイン例です。サンプルではdisplay:inline-blockを指定して、文字サイズによって見出しサイズが変わるようにしています。横幅いっぱいに広げたい場合はブロック要素となるようにinline-blockの記述を消すか、display: blockと指定してください。, タグっぽく見せるために擬似クラスで穴を表現しています。くり抜いているわけではないので、穴が合いているような表現をする場合は穴の色を背景色と合わせる必要があります。, CSSで作るリボン風の見出しデザインです。ランキングやおすすめといった箇所で多く使えそうですね。, 見出しにリボンの装飾が付いたデザインです。サンプルでは背景が黄色、見出しが白色ですが、使用シーンに合わせて色を変えてください。, 見出しの左側だけ背景に周り込んだイメージのデザインです。サンプルのように影を付けることでより立体感を出すことができます。, CSSで作る吹き出し風の見出しデザインです。ポイントなどを訴求する時に良さそうなデザインです。, 吹き出し風の見出しです。人物・キャラクラーなどの写真・イラストと一緒に使うと良さそうですね。, CSSのbackgroundで背景パターンを作成した見出しデザイン例です。 CSSを使うことでも背景パターンを作成できますが、パターンの内容によってはSVG画像などを背景パターンに使ったほうが綺麗で確実な場合もあります。, radial-gradientでドットのような背景を作成しています。ドットのサイズはあまり大きくすると荒くなり見た目が悪くなります。きれいなドット柄の背景を作りたい場合はCSSではなく普通に背景画像を繰り返すようにしたほうがいいでしょう。, linear-gradientに角度を付けて指定して斜めストライプの背景柄を作成しています。縦ストライプも角度調整で作成できます。, CSSでテキストに直接スタイルを当てた見出しデザインや、テキストの見せ方を工夫した見出しデザインです。, CSSのtext-shadowを使うことで文字を縁取ることができます。縁取る境界線のサイズはtext-shadowの値で変えることができますが、あまり大きくするとカクカクした感じになります。, text-shadowはいくつも指定できるので、縁取り用のshadowと、影を作るためのshadowと両方を指定することができます。, これもよく見る見出しのデザインですね。:first-letterを使って最初の一文字目にのみスタイルを当てています。, 背景色と同じ色のtext-sahdowを付けることで文字のデザインを工夫しています。, 擬似クラスで正方形を作り左上と右下に設置しています。左上のカッコでは上側と左側にborderを、右下のカッコには右側と下側にborderを設定しています。正方形のサイズとborderのサイズを変えることでカギ括弧のサイズを変えることができます。, 「01」の部分は別の文言やアイコンでもいいでしょう。STEPなど流れを説明する時の見出しで良いかもしれません。, アイコンを追加してみたパターンです。アイコンの見せ方は様々あるので使う箇所に適したデザインにしてみましょう。, サンプルの「01」の部分にはwebフォントで「Roboto」というフォントを使っています。, 「POINT」というサブコピーを見出しに入れてみたデザインです。POINTの部分は擬似クラスのcontentに記載しています。, サブコピーにアイコンを使用してみたパターンです。アイコンも擬似クラスで指定しています。, 左右にアイコンを設置してみた例です。一行だけの場合なら文の前後にアイコンを置くだけでよいですが、複数行になるケースも想定する必要がある場合はpositionでアイコンの位置を指定するようにします。, いかがでしたでしょうか。あまり使うケースが考えられない見出しデザインも多かったと思いますが、何かのときに参考にしていただければと思います。. Android Studioを使い始めて2日が経過しました。参考ウェブサイトを参考に、アプリを作ろうとしたらどうもうまくいきません。あれこれ調べているうちに、また1からやり直そうとしてあることに気が付きました。それはPackage Nameを最初に決める時に、私は何かやらかしたのではないかということです。プロの解説を読んでみると、, border-left:20px #pink;（サイズpx　色# 左側に四角い図形を表示する）, Ubuntu初回起動時にWi-Fiが繋がらないというより選択肢が出てこない問題への対処法, ちょっとだけLinuxにさわってみたい人のための Bash on Ubuntu on Windows入門, 【解決】AcerのAspireノートPCでBiosにF2で入る方法が完璧にわかった！, 【解決】ランダムなハードウェアアドレスをオンにすると家庭用のwifiに繋がらなくなる（Windows10の話）, 時間をかけて作ったページがSearch Consoleのインデックスカバレッジで除外されている件について, タブレットKindle Fire HD 10 VS Huawei Media Pad M3 Lite10 : 2018年5月版, Package Name（パッケージ名）の決め方 - Android Studio プログラミング, 数行目の～となっているところの行の左側の三角▲が横になった文字をクリックし、スタイルシートを開きます。, ここにCSSを追加し、既存のスタイルシートをオーバーライトします。という入力欄に直接CSSを記入します。ここに記述したスタイルシートが優先して適用されます。. Amazonの通常検索（商品を探すとき普通に利用する検索窓）に、除外（-）検索と、または（|）検索があるのはご存知でしたでしょうか。調べたら他にも色々機能がありました。あまり知られていないですよね.。たぶん。 Amazonの詳細サーチのところに説明がありました。これは気が付き... 海外から物を直接購入できると、世界が広がる気がします。中国の様々な商品を扱っているECサイトを利用したいけど、中国の激安通販サイトは怪しくて、商品が届かないのでは・・と不安に感じる人は多いでしょう。あと買い方など購入方法や、荷物の配送や追跡方法など、良く分からず心配になりま... 前回「PHP勉強に必要な「WebサーバApache」や「データベースMySQL」や「PHP」の準備不要なワンパッケージXAMPPの導入」を設定したので、今日はApache Web ServerとMySQL、PHP、PerlがオールインワンになったXAMPPの動作テストをしてみまし... 2014年にYahooショッピングは無料化して大きなニュースになりました。私もそのころにYahooショッピングに出店しました。ここ数ヶ月運営してみた感想をまとめます。追記2015/5/30：黄色線では、半年後のコメントも加えてみました。追記2015/7/1：さらに追記は... 時間をかけてiPhone6とiPhone6Plusの木（wood）のiPhoneケースメーカを集めました。ウッドケースを探している人は、必ずお気に入りが見つかるでしょう。ここでお気に入りが見つからなければ、自分で作るしかないでしょう。前回から比べると、木のケースを作... Photoshopパターン素材ってご存知ですか。指定の範囲を繋ぎ目なく自然にテクチャーできる素材です。はてなブなどや、ITライフハック系のサイトで良く取り上げられています。参考記事デザインがはかどる、継ぎ目のない無料パターンテクスチャ素材40枚まとめ http:/... AllBlogToolsには、自由に使えるBloggerのデザインテンプレートが1000種類以上あります。AllBlogTools（ http://www.allblogtools.com/ ）の使い方を紹介します。 Blogger（ http://www.blogger.c... ふりむけばコウホウ : すごく見栄えがよくなった！Bloggerの見出し＜h2＞、小見出し＜h3＞、順見出し＜h4＞活用方法のCSSデザイン, すごく見栄えがよくなった！Bloggerの見出し＜h2＞、小見出し＜h3＞、順見出し＜h4＞活用方法のCSSデザイン, http://1.bp.blogspot.com/-BwxZOGOCd6s/U_B29G1573I/AAAAAAAATZ8/fhzoAPZW-Cw/s1600/06.png, http://1.bp.blogspot.com/-BwxZOGOCd6s/U_B29G1573I/AAAAAAAATZ8/fhzoAPZW-Cw/s72-c/06.png, http://www.furimuke.com/2014/08/bloggerh2h3h4css.html, http://weboook.blog22.fc2.com/blog-entry-348.html, banggood（バングット）とは。実際に購入！評価・評判や購入方法や荷物の配送を紹介, 好きな木(wood)ケースが必ず見つかる！iPhone6とiPhone6Plusのウッドケースのメーカ一覧.