滋賀咲くブログで やってみよう♪

変更前

=>

変更後のイメージ

「最近の記事」の表示の、記事と記事との分かれ目が解かりにくいのが、気になっていました。

記事のタイトルの先頭に、何か目印になる画像を入れるといいのかなと思い、やってみることにしました。

目印のために準備した画像は、7x12 px の「」←この画像（p-linkmark01.gif） です。

やるべき作業は、

　1.　目印の画像のアップロード
　2.　テンプレートの、スタイルシートの変更

です。

1.　目印の画像のアップロード

よろしければ、「」この画像を右クリックからお持ち帰りください。
（必要に応じて、加工してください）
InternetExplorer ですと、

　1)　画像の上にマウスポインタを移動
　2)　右クリック
　3)　「名前を付けて画像を保存」をクリック
　4)　画像を保存

で、できると思います。

画像のアップロードは、

　1)　滋賀咲くBlog にログイン
　2)　左メニューの「画像一覧」をクリック
　3)　アップロードするファイルを選択
　4)　「アップロード」をクリック

で行います。

アップロードしたファイル名は、後のスタイルシートの変更で必要になりますので、覚えておいてください。
メモ帳などにファイル名を、コピー & ペーストしておかれると、便利かと思います。

2.　テンプレートの、スタイルシートの変更

スタイルシートの編集は、
　1)　滋賀咲くBlog にログイン
　2)　左メニューの「テンプレート」をクリック
　3)　「カスタマイズ」をクリック
　4)　「スタイルシート」を書き替える
　5)　「登録」をクリック

で行います。

「スタイルシート」は、つぎのように書き替えました。

スタイルシート

最後に、次の 7 行を追加してください。 .aside{ background-image:url('p-linkmark01.gif'); background-repeat:no-repeat; padding:0px 0px 0px 10px; color:#009999; font-size:12px; } アップロードした目印画像のファイル名が p-linkmark01.gif でない場合は、スタイルシートの p-linkmark01.gif の部分をアップロードした目印画像のファイル名に変えてください。 background-image:url('p-linkmark01.gif'); の青文字の部分がファイル名です。 ピンクの太い文字の部分は、消したり書き替えたりしないようにしてください。