ブログ散歩

ブログ生活をより楽しむ方法を探しています。

【はてなサイドバー】のデザインをオリジナルにカスタマイズ(背景画像編)

f:id:hachi001:20171218004022j:plain

サイドバーの背景を変更する方法

だいたいのテーマで変更可能だと思います できないテーマの人はごめんなさい。

サイドバーのカテゴリーの背景に画像を表示させますす

*背景に色だけ付ける方法はこちら→【はてなサイドバー】のデザインをオリジナルにカスタマイズ - ブログ散歩

*コードをCSSに設定してください。
やり方はこちら→CSS てのを設定する方法 - ブログ散歩

お好きな画像を用意します

今回はこちらさまの画像をいただきました

フリー素材blue-greenかわいいWEB用フリー素材無料配布。ホームページ作成に


お好きな画像の上で、右クリックし、「名前を付けて画像を保存」します。

f:id:hachi001:20171218002229j:plain

はてなで画像をアップロードしてURLを確認する方法

画像をはてなにアップロードします。
(他にやり方があるのかもしれませんが、私にはこれしかわかりません。)

1、「記事を書く」通常通り記事を書く画面へ行きます。
2、記事に画像を載せてください。
3、「HTML編集」を押します。

f:id:hachi001:20171218002541j:plain

4、「src="」~「"」の間のもじが画像のURLです。コピーしてください。

f:id:hachi001:20171218002751j:plain

5、ブラウザのタブを新規で作り、アドレス部分にペーストしてみてください。

f:id:hachi001:20171218002912j:plain

画像が表示されれば、画像URLをコピーできています。

全カテゴリーの背景に画像を表示する

「url(」~「)」の間に画像URLをペースト(貼り付け)します

f:id:hachi001:20171218004308j:plain

.hatena-module{
background: url(画像URL) repeat;
}

f:id:hachi001:20171218003412j:plain

カテゴリー「検索」の背景に画像を表示する

「url(」~「)」の間に画像URLをペースト(貼り付け)します
.hatena-module-search-box{
background: url(画像URL) repeat;
}

カテゴリー「リンク」の背景に画像を表示する

.hatena-module-links{
background: url(画像URL) repeat;
}

f:id:hachi001:20171218003458j:plain

カテゴリー「最新記事」の背景に画像を表示する

「url(」~「)」の間に画像URLをペースト(貼り付け)します
.hatena-module-recent-entries{
background: url(画像URL) repeat;
}

カテゴリー「カテゴリー」の背景に画像を表示する

「url(」~「)」の間に画像URLをペースト(貼り付け)します
.hatena-module-category{
background: url(画像URL) repeat;
}

カテゴリー「月別アーカイブ」の背景に画像を表示する

「url(」~「)」の間に画像URLをペースト(貼り付け)します
.hatena-module-archive{
background: url(画像URL) repeat;
}

カテゴリー「注目記事」の背景に画像を表示する

「url(」~「)」の間に画像URLをペースト(貼り付け)します
.hatena-module-entries-access-ranking{
background: url(画像URL) repeat;
}

カテゴリー「関連記事」の背景に画像を表示する

関連記事に色をつけると、記事下の関連記事にも色がつきそうな気がするので載せておりません。
あしからず

横一列画像を設定する方法

「repeat」部分を「repeat-x」に変えると、X(横)方向にだけ、画像がリピート表示されます。

f:id:hachi001:20171218004523j:plain

.hatena-module-entries-access-ranking{
background: url(画像URL) repeat-x;
}

f:id:hachi001:20171218004646j:plain

「repeat」部分を「repeat-y」に変えると、Y(縦)方向にだけ、画像がリピート表示されます。

f:id:hachi001:20171218004523j:plain

.hatena-module-entries-access-ranking{
background: url(画像URL) repeat-y;
}

f:id:hachi001:20171218004756j:plain


いかがでしょうか?まぁんまみ~~~や~~ですね。