イメージの周りに枠を二つ

手軽に使えるCSS講座です。この講座ではイメージの周りに枠を2色入れる方法ご紹介します。CSSを扱った事がある方はコードを見るだけでわかるかと思います。

1

上のコードは以下のようになります。

1
2
3
4
5
img {
	border:1px solid #f25392; /* ピンク */
	padding:2px;
	background:#9caa3b; /* 緑 */
}

一番外側となる色や幅はborderで設定し、内側となる色はbackground、サイズはpaddingで設定します。この他にもborderにdoubleを指定する方法はありますが上記で紹介したコードのほうが扱いやすいと思われます。少しでも画像にアクセントを付けたい時等にどうぞ。

Freshee SBテンプレート

スクリーンショット

海外ではよく使われる「Georgia」フォントを元に作ったテンプレートです。文章が主体のブログに最適です。こちらもシンプルな作りになっていますので改造しやすいと思います。

続きを読む…

Fresheeの公開

4作目のオリジナルテンプレート「Freshee」が完成しました!なかなか仕事が忙しく、テンプレートの新作を作る時間がなかったのですがなんとかできました。今後の予定ですがRagard公式サイトの構成の作り直し+全テンプレートの修正をしたいと思っています。

Vanilla Globeの公開

Ragardのオリジナルテンプレートがいよいよ3つ目の公開です。今までのテンプレートと比べ、色がシンプルです。Serene Bach&Wordpressに対応していますので、テンプレートを1から自分で作ったみたいという方は参考に良いかも?テンプレートへのリンクはこちらです。

Movable TypeやFC2ブログ等にも対応をしたいと思っているのですが、一人ではなかなか全部できないのが現状です。もし対応してくださる方がいらっしゃいましたらお気軽にご連絡ください。テンプレートの再配布については、対応先のサイトで配布する事ができますので、リンク先を教えて頂ければこちらからリンクを貼らせていただきます。

Vanilla Globe SBテンプレート

スクリーンショット

三作目のテンプレート「Vanilla Globe」。バニラにオレンジをちょっとだけをトッピングをしたイメージで作りました。そのまま使うのもよし、更にロゴや写真や色を加えてトッピングするのもよしです。見た目通りシンプルなので、はじめてSerene Bachを触る方にもおすすめです。

続きを読む…