IT情報-ブログTweet私事ですが十数年前に仕事でWEB系プログラムの経験があり、cssについて少しはわかっているつもりでしたが、最近はてなブログで久しぶりにcssに触れるたび脳の老化を感じていたので、脳トレも兼ねて『カエレバ』で作ったブログパーツをカスタマイズしてみました。カエレバのカスタマイズについては、コピペでOK系のサイトがたくさんあるようですが、年末年始に時間もあったので一からcssを書いてみました。ついでに何番煎じかわかりませんが、デザインcssの変更方法をご説明します!サンプルコードはパソコン表示、スマホ表示(レスポンシブデザイン)のそれぞれに対応しています。カスタマイズしていった様子をご紹介しますが、結果だけ知りたい方はカスタマイズ方法まとめへどうぞ^^カエレバの使い方は割愛しますので公式サイトをご覧ください。最終調整スマホ表示カスタマイズ方法まとめdivの可視化カエレバの『デザイン:amazlet風-2(cssカスタマイズ用)』でブログパーツを作り、はてなブログにコピペしただけのものがこちらです。このブログパーツは<div>という要素でできており、各<div>にはclass名がついているので、このclass名を使って自分好みにカスタマイズしていきます。スムーズに作業できるようclass名を表示させました。わかりやすくするため、cssで<div>に線とスペースを入れてみました。左に画像、右にそれ以外という配置にしたかったので、次のcssを追加しました。/*配置を調整*/.kaerebalink-image{float:left;width:30%}.kaerebalink-info{float:right;width:60%;}しかし『float』を使ったので『booklink-footer』が崩れています。フッター調整1今までこの『booklink-footer』に何か表示されたことはなくて、今後もたぶん表示されないと思います。bookとあるので本関連でしょうか?とりあえずレイアウト崩れを直すために次のcssを追加します。/*フッター調整1*/.booklink-footer{clear:both;}レイアウトは綺麗になりましたが、『booklink-footer』に何も表示されない場合は下に変なスペースができてしまいます。フッター調整2とりあえず我が家では『booklink-footer』に何か表示されることはないので、高さを低く設定することにしました。次にフォントサイズの設定です。カエレバ『kaerebalink-powered-date』の関係が微妙なため、合計3つのclass名にフォントサイズを設定しました。ここはお好みのサイズに変更してください。続いてリンク部分です。シンプルにしたかったので商品名やカエレバのフォントカラーは記事内と同じ標準の色で、下線なしに変更しました。none;color:#454545;}ショップのリンクは背景色を各ショップのアイコンに近い色に、フォントカラーはシンプルに白で統一しました。カラーコードは、クリックするだけでカラーコードがわかるというChromeの拡張機能を使って割り出しましたが、どのショップも似たような色ですね。#FFFFFF;}さらにリンクをボタン風に、角を丸く、縦2×横2の配置に、文字列を中央に、など微調整を行いました。5px;border-radius:5px;}最終調整テスト用の線とスペースを消して、一番外の<div>に線とスペースを追加しました。#ddd;padding:20px;}スマホ表示パソコン表示用に画像などの配置をいじりましたが、スマホでは<div>要素を縦に並べて表示させたいのでそのためのcssを追加しました。div{clear:both;width:95%;margin:5px;text-align:center;}}カスタマイズ方法まとめ上記で少しずつ設定してきたcssをまとめたものです。width、height、marginなどなど、数字を入れている部分は好みで変更してください。div{clear:both;width:95%;margin:5px;text-align:center;}}仕事でやる場合は閲覧環境などいろんなパターンを想定して、何をされてもOKなようにもっといろいろコードを追加するのでしょうが、我が家は素人ブログなのでとりあえず見た目がOKならOKということで^^もし今後問題点を発見したら追記していきます!きちんと入門しようかな...。カエレバ楽天市場AmazonYahooショッピングWowmaこのブログでは夫婦と2匹の猫の日々のあれこれを書き綴っています。はてなブログPro30代の夫婦と2匹の猫の、日々のあれこれを綴る日記です。職業はDJではありません。dj-mope.com.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。