~Time ~自分サイズで暮らす

書ける時&書きたい時に書くブログ~文房具、文房具カスタマイズ、手作りのことなど趣味や暮らしのことなど主に備忘録的に

ブログのカスタマイズ/ アフィリエイトボタンの色変更と和の伝統色HTML (追記有り)

にほんブログ村
トラコミュ
ホームページ制作全般
トラコミュ
HTML・XHTML


 おはようございます。

ブログ内のカエレバに載せているAmazonさんや楽天さんへのリンク先のボタンの色を変えてみました。

参考にさせて頂いたのは


こちら。

kumoaozora.hatenablog.com
     

yossense.com
    

ブロガーの、そらさんYosuke Yano (ヨス)さん

そして、商品紹介ブログパーツ カエレバの素材 を公開されているかん吉さん、ありがとうございます。




 私は、PC関連については素人です。
恥ずかしながら、ワードもエクセルも、一から学んだことが一度もありません。

私は、このブログに訪問して下さる方々の人数の割合から言うと、
恐らく親御さん世代に近いだろう、と・・・中には私の子どもと同年代のユーザーさんも多いだろうと思います。
世間一般のおばちゃんがPC操作しているのを想像して頂けると状況が分かりやすいかな~。(*^^*)

PCは、本を購入するなどして、分からないところを自分で調べる
⇒実際に試してみる
⇒更に不明なことやうまくいかなかった事が出れば何が原因かを考え
⇒更に調べて
⇒実際に試してみる
⇒うまくいったこと&失敗したところをメモして残しておき、後の参考にする。
⇒⇒上記の中で実際に体(感覚)で掴んだことを忘れないようにして自分のものにしていく。

私の場合は、(PCに限らず、暮らしのあらゆる場面で)こういったことの積み重ねでやっています。
他者様にやってもらおうという待ちの姿勢では何事も身につかないので。

こちらのブログのHTMLも同様です。
ブログで使ったHTMLは後で探しやすいように、記事の機能を使って下書き保存にして保管しています。f:id:hanagoromomo:20150506195346g:plainこれも一種の手帳術や整理整頓に繋がることかもしれません。

そうやって覚えていった結果、ワードもエクセルも、文書関連のオープンオフィス等々も、PVに付嘱しているペイント機能も、
使おうと思って開いた瞬間、並んだ様々なボタンのパーツを見て、感覚で使い方が分かることが多いということです。

頭でしっかり考えることも必要ですが、
実際に足・腕などなどを使って動いてみたほうが身につくことは多い
なぁと感じます。^^

書類などPCを使うことが多く文章をたくさん打ち込んだ結果、タイピングは早い方だと思いますが、やっぱり基礎・基本は大切ですね。
いずれ、ワードもエクセルも一からしっかり学ぶ予定で居ます。



 f:id:hanagoromomo:20150506195332p:plainということで。

下記も書き残しておきます。


 私は、和洋折衷が好きな中でも、和に偏っています。
それで、記事で触れたカエレバさんのリンク先のボタンの色には、和の伝統色を使いました。
昔からこの国で使われてきた和の色を眺めていると、にまにましてしまいます。^^

インターネット上でも和の伝統色のHTMLが公開されていましたので載せておきますね。

www.colordic.org
     日本の伝統色 和色大辞典


irononamae.web.fc2.com
     和の色-色の名前と色見本




 f:id:hanagoromomo:20150506195332p:plain商品紹介ブログパーツ カエレバの素材さんの各ボタンの色を変更する際に私が参考にさせて頂いたのは、ヨスさんのブログ記事でした。

yossense.com


上記の記事を参考に、記事内にあったCSSコード (※青い太文字で引用させて頂いた下記のコード )のように、
Amazonさんと楽天さんの色指定の箇所に、和の伝統色のCSSコード(※赤い太文字にした部分に好きな色の#付きのコード)を挿入ました。


f:id:hanagoromomo:20150506195342p:plain(1) Amazonのボタンの色を変更出来ます
.shoplinkamazon {
background : blue!important ; 
}


f:id:hanagoromomo:20150506195342p:plain(2) 楽天のボタンの色を変更出来ます
.shoplinkrakuten {
background: red!important ; 
}


f:id:hanagoromomo:20150506195342p:plain(3) ボタンの中の文字の部分「Amazon」「楽天」の色を変更出来ます
.shoplinkamazon a,
.shoplinkrakuten a {
color : white!important ; 
text-decoration : none!important ;
display : inline-block!important ;
padding : 0.5em 3em!important ;
}


ここから追記/ f:id:hanagoromomo:20150506195358g:plainf:id:hanagoromomo:20150506195358g:plainf:id:hanagoromomo:20150506195358g:plainでは、はてなブログへの設定方法を具体的に。

1. こちらの記事内からお借りするCSSコードをコピーします。
  私は、「PC用~480ピクセルより大きい端末用のCSSコード」をお借りしました。
  スマフォの方は「スマホ用のレスポンシブCSSコード」を。

2. コピーした 1 のCSSコードを、はてなブログ ダッシュボード「デザインCSS」欄内に貼り付けます。
  進み方は、はてなブログ「ダッシュボード」 ⇒ 「デザイン」 ⇒ 「カスタマイズ」 ⇒ 「デザインCSS」 です。

3. ひとまず、2.の後に、はてなブログ ダッシュボード「変更を保存する」 をクリックします、又は、決定ボタンを押します。

4. こちらの記事を参考に、リンク用ボタンの色を自分の好みの色にカスタマイズします。
  私は、今回の自分の記事内で載せた f:id:hanagoromomo:20150506195342p:plain1.2.3.f:id:hanagoromomo:20150506195342p:plain のCSSコード を、
  はてなブログ ダッシュボード「デザインCSS」欄内に、2.で貼り付けたコードの後ろに貼り付けました。
  後でもっとカスタマイズするかもしれません。

5. 1~4で出来上がりです。 /追記終わり



何かの参考にして頂けたら幸いです♪

なお、この記事を見たのがきっかけでカスタマイズされる方がいました折に、参考にしたブログ記事を載せる際には、
孫引きでは無く、
CSSコードを作り公開されたブロガー : ヨスさんのブログ からの記事も併記されて下さい。



それでは。
Have a nice day!今日もよき一日を♪(^^)/ 桃 (@hanagoromomo)でした。


f:id:hanagoromomo:20150619204336p:plain

[備忘録] *[備忘録-Blogカスタマイズ]

by カエレバ
by カエレバ
by カエレバ
by カエレバ
by カエレバ