超シンプル!エアメールNo.2イタリアンバージョンを作ってみた。

airmail_no2

ホワイトベースのサイトを作りたくて、エアメール風にしてみました。
今回の、エアメール柄(?)は、画像で作っています。

↑のイタリアの建物外観は、お得意の写真ACさん[【無料】年賀状素材「写真AC」]の素材を使わせて頂いています。
再配布禁止ですので、お気に召しましたら、そちらでご用意下さい<m(__)m>

h1タグには、切手&消印を入れてあります。
こちらは、フリー素材*ヒバナ *  ⁂さんでお借りしています。再配布OKという太っ腹なサイトさんですので、赤×青のストライプ画像と一緒にimagesフォルダへ入れてあります。

しつこいようですが、リンクを貼って頂くか、フッターの表記は消さないようにお願い致します<m(__)m>

前回、エアメール柄でスキンを作りながら、イタリアの国旗バージョンも可愛いかも?というノリで作ってみました。
少し晴れやか?な印象でしょうか?

宜しければ、お持ち帰り下さい。

スポンサーリンク

Air mail エアメールNO.2

No.1の記事でも書いたように、No.2を作りました。
イタリアの国旗の3色の組み合わせも良いじゃないか?と作ってみたら、ピッタリはまりました(#^^#)(笑)

旅の旅行記等のブログには、シンプルながら「旅感」も出てて良いのではなかろうか?と…。
airmail_no2_2


ブログタイトル

❤ GoogleのWebfontを使っています。設定済ですので、ブログのタイトルを”英語で入れる”と、見本のような感じになります。可能な限り、英語でつけて欲しいなぁ(笑)

今回は、背景も無し。真っ白ですので、ヘッダーは今回はストライプで囲ってみました。
もちろん、画像やロゴがあれば差し替えて頂いて結構です(^^♪

airmail_no2_6

サイトタイトルへの装飾で背景等が入っています。キャッチフレーズとのカラミで装飾の幅を調整したい場合は、↑のとおり
#site-title の部分(赤丸)で、長さを調整する等で対応下さい。

また、ストライプが上手に出ない場合は、↑の 80|border-image: url(“…………”) 15 15 round;
の 15 15 (黄色の丸)を 30 30 に変えてみて下さい。
実は、この装飾は、ストライプ画像をcssで指定要素を囲むように配置してくれるように作ったのですが、
ストライプ画像は大きさもストライプの幅も、No.1と同じものを使っているにも関わらず、こちらは上手にストライプになりませんでした。
※No.1は、 30 30 の数字を入れています。
こちらは 15 15 と指定し、柄を大きくするようにして、何とかストライプ柄を再現出来た感じです。

仕方なく、柄を大きくしないと綺麗なストライプになりませんでした。
検証したのですが、原因不明のまま…。

これはこれで、良いではないか?と(笑)

見出し類

❤ h1~h5まで設定致しました(h6)は今回から設定していますが、色違いなだけです(笑)
あまり見出しに工夫はしていませんので、説明が多いような堅いブログよりは、旅行記等の緩い感じ(笑)におススメなスキンです。  

airmail_no2_4

サイドバーのタイトル

❤ サイドバーは、サイトタイトルと合わせたフォントへ変えてあります。
英語であれば、上品な(笑)感じになりますので、是非お試しください(日本語で入れた場合は、上下の画像を参照下さい。)

一覧リスト エントリーカード(デフォルト)、タイル状airmail_no2_3

❤ エントリーカード デフォルトのエントリーカードでは、一覧リストはこの様になります。

今回は、3列や2列のタイル一覧には、対応していません。
main枠幅を変更しないと入らなかった為と、このストライプをタイル状に並べた場合、あまりにも煩い印象になりましたので、main幅を変更してまで実装する必要もないと思いました。悪しからずご了承下さい。  (↓の見本はNO.1を流用しています<m(__)m>)airmail_no1_5_thumb2

タイルを選択した場合は、カラム落ちは無かったのですが、3列上手に並びませんでした(2列も同様です)

ダウンロードは下のリンクよりお願いします。 手順等は、Simplicityさんのこのページが見やすいと思います<m(_ _)m>

ダウンロードしたファイルをご自身のSimplicityテーマのskinフォルダへ追加頂き

ダッシュボード ➡ 外観 ➡ カスタマイズ ➡ スキン よりこのskinを選択してお使い下さい。

スキン追加方法の手順は、Simplicityさんのサイトでもご確認頂けます。