3分SHAREツイートシェアはてブLINEPocketこのブログはわかったブログの運営者かん吉さんが開発したブログツール「カエレバ」「ヨメレバ」を使用しています。カスタマイズすると見た目が変わるので当然クリック率もあがりますし、自分のサイトに合った色合いにすることも可能です!でも、CSSなんてよくわからないし難しそうという方もいると思います。今回は、そのカエレバ・ヨメレバのカスタマイズができるということで、カスタマイズ方法をコピペだけで実装できるように簡単に紹介します!※2019/01/12追記:カエレバ・ヨメレバの仕様変更で、Amazonだけで取り扱っている商品に対して使えなくなるので、以下の記事で対応させました。url=”https://maipyon.net/amazon-link/”]※2019/03/30追記:Rinkerという商品紹介プラグインでのデザインを似た感じにする方法を紹介する記事を書きました。CSSコピペでOK!Rinker(リンカー)のデザインをカスタマイズしよう!1.カエレバ・ヨメレバをカスタマイズ後のデザインカスタマイズ後のデザインはこのようになります。このサイトはスマホにも対応しているので、柔軟にデザインを切り替えています。スマホでのデザインはこんな感じです。スマホの方では、ボタンが縦に連なる形になるのでレイアウトが崩れず、スクロールで絶対にボタンを見てしまう配置になっています。初期状態では文字だけになっており、Amazonなどへのリンクも小さいのであまり押す気にならないのですが、デザインをカスタマイズすることでボタンが強調されて、クリック率が上がります。2.カエレバ・ヨメレバの設定カエレバ・ヨメレバでの設定方法は次の通り。画像では商品の欄は空欄にしているので、そこにお好きな商品を入れ込んでください。両者とも「~で探す」などの文章を付けたほうがユーザにとって分かりやすく、クリック率があがるのでぜひつけましょう!また、提携しているサイト次第ではAmazonだけでなく、楽天市場など、他のボタンにもチェックを押せるようになります。外観テーマの編集style.css追加の際は一番下にコピペするとうまくいくはずです。外観カスタマイズ追加CSSにコピペをすれば大丈夫です。}}実際に画像で見せてはいませんが、yahoo!ショッピングにも対応済みです!安心してご使用ください。追加CSS内ではコメントを入れることができず、エラーが発生して保存できなかったので、何かエラーが発生する場合はその辺りを疑ってみてください。{}内のbackgroundの値を変えてください!詳しい色は、原色大辞典を見てもらえればと思います。確認方法ですが、カエレバ・ヨメレバ編集画面およびWordPressでの編集画面ではカスタマイズされたものは出てきません。設定したスタイルがなにも反映されていないものが出てきます。反映されてない!と私も思い焦りましたが、プレビューを見るときちんと反映されてました。PCでもスマホでも確認するのめんどくさいなぁ・・・。心配だなあという方がいるかと思いますが、プレビュー画面で、Choromeの右上の「...」を押してその他ツール→デベロッパーツールをクリックしたのちに1、2の順で押せばMobile、つまりスマホで見たときのものと同じ表示になります!今見えてる画像は編集画面の上の方ですが、スマホでこのページにくると画像にあるような画面になる、ということですね。プレビュー画面でデベロッパーツールを呼び出せばOKです!このテクニックはフレキシブルに対応させるコードを書く時には確認しやすくするための必須スキルですので、覚えておいて損はないです!また、他のデザインをいじった後でも、どのデバイスでもデザインにおかしなところがないか見るうえでも重要なスキルです。デベロッパーツールのより詳しい使い方を見るWebデザイン変更をするなら必ず抑えておきたいデベロッパーツールの使い方よりよいデザインを目指すためにchromeの検証機能―デベロッパーツールの使い方について紹介します。この便利機能なしではデザインをいじるのは難しく、私も多用しています。レスポンシブ対応できているか見る方法もあり、「デザインが崩れていて読みにくいor読めない」という理由だけで読者を逃がすことが無いようにします。CSSが分かる人は気に入ったデザインのボタンの色などを参考にすることができますので、どうしても自分でカスタマイズしたいという人は挑戦してみてもいいと思います!4.まとめコピペだけでカスタマイズできるCSSを公開しました。私自身CSSはちょっとかじった程度ですが、自分でCSSをいじれるくらいにはすぐに成長できたので、本などで勉強してみてもいいと思います!CSSをいじれるようになったら、自分のサイトを自由自在にデザインすることができるので自由度が一気に高まります。Webデザインについて学ぶ【初心者向けHTML入門】学習のための基本まとめWebページを自分で作るときに欠かせないのがHTML。これから始めるHTML入門のページになっています。今回は、そんなHTMLについて図やイラストなどを多く使用して基本的な部分を解説していきたいと思います!前半ではHTMLについてとコードの練習方法、後半ではよく使うタグについて紹介していきます。カスタマイズ程度なら簡単にできるようになるというところまで、まずは勉強してみてもいいかもしれませんね。