ちっぷ絵日記

活動拠点はすもも鯖☆7chが大好きな女子ノフ。

2017 07123456789101112131415161718192021222324252627282930312017 09

| PAGE-SELECT | NEXT

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

| スポンサー広告 | --:-- | comments(-) | trackbacks(-) | TOP↑

ヘッダーに画像を入れてみよう!

ヘッダーに画像を入れてみよう!


難易度:★★


下のように自分で作った画像をテンプレートに入れてみましょう。

※ 配布ではありません!お持ち帰りは禁止です

header_03.png



まず始めに"画像"を用意します。

サイズはテンプレートに合ったものなら何でもおk!

使用したい画像をアップロードして、そのアドレスを覚えておいて下さい。





詳しい方法は続きからどうぞ。

≫ Read More

スポンサーサイト

テーマ : メイプルストーリー - ジャンル : オンラインゲーム

| カスタマイズ | 23:27 | comments:2 | trackbacks:0 | TOP↑

プラグインタイトルの横にアイコンを付ける

↓の画像みたいに
プラグインタイトルの横にアイコンを付けてみましょう。

plugin.png

難易度:★★

まず、テンプレート毎にHTMLCSS(スタイルシート)が違います。

*html:簡単に言えば文章の羅列。
*css(スタイルシート):htmlを飾る(画像や色を使った表示)方法。

公式、共有テンプレートを複数DLして見比べてみたら分かりやすいです。

この辺の意味が分からない人には、ちょっと難しいかもしれません。

詳しい方法は続きからどうぞ。

≫ Read More

テーマ : メイプルストーリー - ジャンル : オンラインゲーム

| カスタマイズ | 14:23 | comments:5 | trackbacks:0 | TOP↑

背景の色を変える

【メニュー】
背景色を変える(基本)
全体の背景色を変える
個別に背景色を変える



背景の色を変える(基本)

background-color: #色の値

変えたい部分の値を、好きなカラーに変更するだけです。
カラー記述がない場合は、上記記述を追加します。


<< ページ全体の背景色を変える >>

難易度:★

全体を表す要素は"BODY"です。
CSS(スタイルシート)から"BODY{~~}"を探し
{}内に記述を追加、または変更すれば色が変更されます。
(BODY要素はスタイルシート上部に表記されている場合が多いです)


上記を実行しても変更されない、違うところが変化してしまった場合は
"id"要素で細かく指定されている場合があります。

HTML編集から<body>を探すと、すぐ下に<div id="○○">と
個別で名前を指定している要素が記述されていると思います。

このテンプレートの場合
<body>

<!-- ▼ブログ全体 -->
<div id="container">

<div id="container">と記述されていました。

名前が分かったら、CSS(スタイルシート)から探してみて下さい。

見つからないときは、ctrl+Fで検索すると早いです。

このテンプレートの場合
#container {
text-align: left;
margin-left: auto;
margin-right: auto;
border-right: 1px solid #FFA4D1; /* サイトライン色(右) */
border-left: 1px solid #FFA4D1; /* サイトライン色(左) */
}

ここに、最初の「background-color: #色の値」を追加して下さい。
元々スタイルシートに記述されている場合はカラー値を変更するだけです。


<< 個別に背景の色を変えたい >>

難易度:★★★

自分が変えたい部分を変数一覧で探し
その部分を指定してある名前を見つけて、スタイルシートを検索して色の値を見て下さい。

備考:)
変数とは、FC2Blog独自に指定された要素です。
<!--comment_area-->~<!--/comment_area--> コメントエリア
<!--plugin-->~<!--/plugin--> プラグイン
などの要素です。


今回は「最新の記事」という部分を変えてみます。
<!-- ▼INDEX表示が邪魔な場合はここを削除 -->
<!--index_area-->
<!-- NEWENTRIES -->
<div id="newentrys">

<div id="newentrys">と記述されていました。

newentrysを、スタイルシートで探します。
#newentrys {
width: 430px;
border: 1px solid #000000; /* 枠線 */
padding: 30px 10px 15px; /* 枠内表示位置 */
margin: 15px 40px 0px; /* 枠外表示位置 */
background-color: #FFECF8; /* 背景色 */
font-size: 11px;
background-position: left top;
}

「background-color: #好きな色;」に変更すると
「最新の記事」に、好きな色が背景色として指定されます。
(当テンプレートの場合、薄いピンク色が背景色です)


プレビューで確認し、保存して終了です。
お疲れ様でした。



FC2変数というのは慣れるまで、見分けるのが大変です。
(実際のとこ、自分もよく分かってないです)
ただ、色々と挑戦することはいいことだと思うので
他の部分にも応用して、たくさん練習してみて下さい。

自分もカスタマイズは失敗、挫折をたくさん繰り返して
やっといまのテンプレートの形に辿りつきました。

頑張って自分好みのテンプレートを作ってくださいね♪

テーマ : メイプルストーリー - ジャンル : オンラインゲーム

| カスタマイズ | 23:12 | comments:0 | trackbacks:0 | TOP↑

背景に画像をつける

ページ内で使用している画像は全てcandied様で借りたものです。
画像のお持ち帰りは、固くお断り致します。


200banbi.gif


【 メニュー 】
背景に画像をつける
背景に画像をつける 応用編
画像タグ一覧


背景に画像をつける


難易度:★★

ブログ全体の背景は body というタグで指定します。

管理画面にある、テンプレートの設定から CSS ( スタイルシート ) を選びます。

body {
margin: 0px;
padding: 0px;
background-color: #F7F7F7;
}



この部分に background-image: url(http://blog-imgs-19.fc2.com/*****.jpg); を追加します。

body {
margin: 0px;
padding: 0px;
background-color: #F7F7F7;
background-image: url(http://blog-imgs-19.fc2.com/*****.jpg);
background-repeat: repeat-y;
background-position: center top;
background-attachment: fixed;

}



背景の色 background-color: #F7F7F7; は、画像が透過されている場合
適用されますが、不要であれば 削除 して下さい。

今回は 横に繰り返す 左中央から表示する 背景は固定 という
指定をしました。

このように細かく指定する場合は 画像タグ一覧 をご覧下さい。









背景に画像をつける 応用編


難易度:★★
 今回は 「 最新の記事 」 という部分に
 この画像を使って、下記サンプルのようにレースを並べたいと思います。


<< Sample >>
image_back_test2.png

管理画面にある、テンプレートの設定から HTML編集 を選びます。

「 最新の記事 」 は、HTML内で <!--NEWENTRIES-->~<!--/NEWENTRIES--> ですので該当部分を探します。

見つからないときは 「 ctrl 」 + 「 F 」 で検索すると早いです。

<!-- ▼INDEX表示が邪魔な場合はここを削除 -->
<!--index_area-->
<!-- NEWENTRIES -->
<div id="newentrys">



<div id="newentrys">と記述されていました。


newentrysを、スタイルシートで探します。

#newentrys {
width: 430px;
background-color: #FFECF8; /* 背景色(薄いピンク色) */
font-size: 11px;
}



この部分に background-image: url(http://blog-imgs-19.fc2.com/*****.jpg); を追加します。

image_back_test.png

「 最新の記事 」 がレースで埋め尽くされてしまいました。
これは、表示方法を何も指定しなかったので、レースが要素全体を埋めつくしています。

画像タグ一覧 を参考に、細かく指定していきます。

#newentrys {
width: 430px;
background-color: #FFECF8; /* 背景色(薄いピンク色) */
background-image: url(http://blog-imgs-36.fc2.com/**********.gif);
background-repeat: repeat-x; /* 横方向に繰り返す */
background-position: left top;/* 表示位置(左上) */
font-size: 11px;
}



image_back_test2.png

きれいにレースを並べて表示することができましたが、
文字がレースと重なっていますの。
このような場合は padding タグを使って、微調整をすると
Sampleのようにレースに文字も重ならず並べることが出来ます。


縦に並べても可愛いですよね。
image_back_test3.png


プレビューで確認し、保存して終了です。お疲れ様でした。














画像タグ一覧

画像の並べ方
プロパティ説明
background-repeat:repeat;デフォルト
repeat-x;横方向のみ繰り返し
repeat-y;縦方向のみ繰り返し
no-repeat;繰り返さない
画像の表示位置
background-position:left;
center;中央
right;
top;
middle;真ん中
bottom;
単位mm,cm,pt,pxなど
親要素の指定値に対する割合
画像スクロール
background-attachment:scroll;スクロールさせる(デフォルト)
fixed;スクロールしない(固定)

画像スクロールしない(固定)とは?

この様に、背景は固定され文字だけ動くことです。
デフォルト状態では、文字をスクロールすると背景も動きます。

テーマ : メイプルストーリー - ジャンル : オンラインゲーム

| カスタマイズ | 12:01 | comments:0 | trackbacks:0 | TOP↑

自分のコメントに背景色・画像を付ける

【 メニュー 】
自分のコメントに背景色を付ける
自分のコメントに背景画像を付ける
画像タグ一覧



自分のコメントに背景色を付ける


難易度:★

下記Sampleのように、自分のコメントに背景色を設定してみましょう。

<< Sample >>
comment sample

管理画面にある、テンプレートの設定からHTML編集を選びます。

HTML内で<!--comment-->~<!--/comment-->を探します。

見つからないときは 「 ctrl 」 + 「 F 」 で検索すると早いです。

<!--comment-->~<!--/comment-->内の要素を

<div class="<%comment_name>">~<div>で、囲みます。

このBlogの場合

<!--comment-->

<div class="<%comment_name>">
<div class="comment_area">
<h4 class="c_title"><a id="comment<%comment_no>" name="comment<%comment_no>"><%comment_title>
<p class="c_body"><%comment_body></p>
<p class="c_state"> | <%comment_mail+name> | <%comment_year>/<%comment_month>/<%comment_day> <%comment_hour>:<%comment_minute> | <%comment_url+str> | ≫ <a rel="nofollow" href="<%comment_edit_link>">EDIT</a><!--/comment_edit--></p>
</div>
</div>

<!--/comment-->



この様に、タグで囲みます。


次に、CSS ( スタイルシート ) の編集です。

下までスクロールして、一番最後の記述から一段空けて下記記述を追加します。
○○内のカラーコードには、お好きな色に書き変えて下さい。

.自分の名前 { background-color:#FFE4B5; }
※名前の前に .( ドット ) が入ります
タグが適用されなくなるので、 .( ドット ) の削除は禁止です。



特定の友達などにも色を付けたい場合は
名前とカラーコードを変えて、先程のタグを追加することで変更できます。

◆ 使用例 ◆
.ちっぷ { background-color:#FFECF8; }
.A子ちゃん { background-color:#75FF75; }
.B子彡ちゃん { background-color:#0000FF; }



この様にタグを追加すると
「ちっぷ」「A子ちゃん」「B子彡ちゃん」
と、いう名前でコメントが投稿されると
指定した色が背景色として色付けされます。








自分のコメントに背景画像を付ける


難易度:★

自分のコメントに背景色を付けるの、応用となります。

画像を使う場合は、下記のように書き換えて下さい。

.自分の名前 { background-image: url(http://blog~~~~.gif); }
※名前の前に .( ドット ) が入ります
タグが適用されなくなるので、 .( ドット ) の削除は禁止です。



但し、このままでは全体に適用されてしまいます。

下記タグを参考に、好みの設定に変更して下さい。

◆ 使用例 ◆
.自分の名前 {
background-image: url(http://blog~~~~.gif);
background-repeat: repeat-y; /* 縦方向に繰り返す */
background-position: left; /* 表示位置(左) */
}

※名前の前に .( ドット ) が入ります
タグが適用されなくなるので、 .( ドット ) の削除は禁止です。



更に細かく指定したい場合は、下記タグ一覧を参考にして下さい。


画像タグ一覧


画像の並べ方
プロパティ説明
background-repeat:repeat;デフォルト
repeat-x;横方向のみ繰り返し
repeat-y;縦方向のみ繰り返し
no-repeat;繰り返さない
画像の表示位置
background-position:left;
center;中央
right;
top;
middle;真ん中
bottom;
単位mm,cm,pt,pxなど
親要素の指定値に対する割合
画像スクロール
background-attachment:scroll;スクロールさせる(デフォルト)
fixed;スクロールしない(固定)


画像スクロールしない(固定)とは?

この様に背景は固定され、文字だけ動くことです。
デフォルト状態では、文字をスクロールすると背景も動きます。


テーマ : メイプルストーリー - ジャンル : オンラインゲーム

| カスタマイズ | 01:19 | comments:0 | trackbacks:0 | TOP↑

| PAGE-SELECT | NEXT

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。