HOME > みんなの智恵の和 > そのほか > ブログ記事にかわいい枠をつけてみる(フリー画像もどうぞ)

ブログ記事にかわいい枠をつけてみる(フリー画像もどうぞ)

my_flame

ナガツカ製作所 toriです。
他の人のブログを見ていると、「これ、どうやって表示してるの?」って思うことありませんか?
私もwebページを作ったり、プログラミングしたりしていますが、
他の人の作ったものを見て勉強することが多々あります。

ちょっとかわいい枠の付け方をご紹介します。
下にフリーで使っていただける画像も用意しましたので自由にダウンロードしてお使いください。

※パソコンでの操作を前提に説明しています。
※ブログのhtml編集モードで記事を書く必要があります。
※cssを利用して表示します。

html? cssって何?と思われる方はこちらをご覧ください。

枠をつける手順(cssファイルを編集できる場合)

A1.cssサンプルAをメモ帳などにコピペしておく 
A2.背景画像をブログにアップロードしてURLを取得
A3.cssファイルを編集
A4.記事を書く

枠をつける手順(cssファイルを編集できない場合)

B1.cssサンプルBをメモ帳などにコピペしておく 
B2.背景画像をブログにアップロードしてURLを取得
B3.cssサンプルBを編集
B4.記事を書く

です。


A1.ワード、メモ帳などに以下の記述(cssサンプルA)をコピーしておく

.my_flame{background-image:url(“背景画像のurl”);margin: 10px auto; padding: 20px; width: 80%; border-radius: 10px;}.my_flame div { display: block; padding: 20px; background-color: #FFF; border-radius: 10px; opacity: 0.8;}

A2.背景画像をブログにアップロードしてURLを取得

waku_img2
ブログの新しい記事編集画面を、html編集モードで開きます。
お好みの背景画像を挿入します。以下のような記述が表示されます。(一部省略)

<a href=” この部分をコピー ”><img src=”・・・・・”></a>

画像のURLの部分をコピーして、手順1の『背景画像のurl』部分にペーストします。
URLをコピーしたら一旦記事は破棄します。

A3.cssファイルを編集

ブログのcssファイルを編集できる場合はcssファイルに手順2でできたcssを追加します。

A4.記事を書く

枠を利用したい部分を以下の記述で囲みます。
<div class=”my_flame”><div>
・・・内容・・・
</div></div>


B1.ワード、メモ帳などに以下の記述(cssサンプルB)をコピーしておく

<div style=”background-image:url(“背景画像のurl”);margin: 10px auto; padding: 20px; width: 80%; border-radius: 10px;”><div style=”padding: 20px; background-color: #FFF; border-radius: 10px; opacity: 0.8;”>

B2.背景画像をブログにアップロードしてURLを取得

waku_img2
ブログの新しい記事編集画面を、html編集モードで開きます。
お好みの背景画像を挿入します。以下のような記述が表示されます。(一部省略)

<a href=” この部分をコピー ”><img src=”・・・・・”></a>

画像のURLの部分をコピーして、手順1の『背景画像のurl』部分にペーストします。
URLをコピーしたら一旦記事は破棄します。

B3.記事を書く

枠を利用したい部分を以下の記述で囲みます。

手順2でできた cssサンプルB↓
<div style=”…”><div style=”…:0.8”>
・・・内容・・・
</div></div>


htmlって?

ひらたーく言うと、ホームページの内容を記述しているものです。
htmlに書かれた内容を、インターネットエクスプローラーなどのブラウザソフトが決められたルールに従って表示したものが、今私たちが見ている画面です。

cssって?

htmlには テキストや画像のURLなどが書かれていますが、その文字の色や大きさを指定したり、画像、テキストの配置などのレイアウトを指定し、より見やすいデザインにしてくれるものです。


フリー画像 ナチュラル系背景画像

クリックして表示された画像を右クリックで「名前をつけて画像を保存」で保存してください。
ご利用の際はぜひ FB いいね! もよろしくお願いします!

麻布背景:
waku_asa

フェルト生地:ライトブラウン
waku_felt

フェルト生地:グレイ
waku_felt_gray

フェルト生地:グリーン
waku_felt_green

フェルト生地:マスタード
waku_felt_masterd

フェルト生地:ピンク
waku_felt_pink