共働きで消耗した家族が生き方を見直してます。

もう、共働きやめます。

WordPress

SNSシェアボタンのCSSがさっぱりわからん!カスタマイズ前に調べたよ!

投稿日:

どうも、働かない夫です。

ブログカスタマイズはしたいのですが、HTML、CSS、PHPなどプログラミング言語がよく理解しきれていません。初心者には苦労しますよね。

今は優しいブロガーさんが多くカスタマイズのソースコードを紹介していますので、そちらを参考(というかコピペ)させてもらっています。

しかし、やっている内容がわからないのでは、頭が真っ白になります。そこで、前回の記事【STINGER5】ファンを増やすSNSボタンを追加しました!をやる際にコードの意味を調べていきましたので、備忘録をかねて残しておきます。

シェアーボタンCSSの内容

行う前に意味がわからなかった事を整理しました。

  • クラス名の時「.」をつける。ID名の時は半角の「#」をつける。
  • class 1ページ中に何度も使える。
  • id        1ページ中に1度しかつかえない。
  • class属性 「種類・部類」(学級名ようなもの)
  • id属性   「固有の名前」(学籍番号ようなもの)
  • ul要素 番号なしリスト
  • li要素 リストの各項目をli要素で表す。 

たぶん、過去も同じ事を調べたかも?繰り返し学習という事で。。。

【 .share .share h4 .sns】部分

.share{
	width:100%; //横の長さを100%
}


.share h4{
	font-size:120%;  //フォントサイズ120%
	text-align:center; //テキストの位置を真ん中に
}

.sns{
	margin:0 auto;  //上下0 左右は状態に応じて
	text-align:center;  //テキストの位置を真ん中に
	
}

 補足 margin(pxで指定)
値が
1つ 上下左右
2つ ①上下②左右
3つ ①上②左右③下
4つ ①上②右③下④左

【.sns ul .sns li】部分

 

.sns ul {
	list-style:none; //マーカー(先頭記号【・】とか)を表示をしない

}


.sns li { //SNSを2つ並べて表記する。
	float:left; //左側に
	width:48%; //48%の横幅で
	margin:0 2% 3% 0; //上0 右に2% 下に3% 左に0
}

補足
float・・・左右の配置

【sns li a】 部分

 

.sns li a {
	font-size:80%;  //フォント80%
	position:relative; //相対配置
	display:block; //要素をブロックレベルに
	padding:10px; //上下左右を10pxに設定
	color:#fff; //白色に指定
	border-radius:6px; //ボックスの丸みを半径6pxにする。
	text-align:center; //テキストの位置は真ん中に
	text-decoration: none; //テキストに点も線も無し
	text-shadow:1px 1px 0 rgba(255,255,255,0.3); //補足へ

}

 

補足

text-shadow:横方向のずれ 下方向のずれ ぼかし 色

rgba(R赤,G緑,B青,Aアルファー値(透明度));

【.sns li a:hover】

 

.sns li a:hover { // 補足①
	-webkit-transform: translate3d(0px, 5px, 1px); //補足②
	-moz-transform: translate3d(0px, 5px, 1px); 
	transform: translate3d(0px, 5px, 1px);//右に0px 下に5px 手前に1px
	box-shadow:none; //ボックスの陰はなし
}

 

補足①
要素名:hover{
プロパティ :値;
}
:hover擬似クラスは対象の要素の上にマウスが乗っているときに適用されます。

補足②

-webkit- ・・・Firefox向け
-moz- ・・・google Chrome , Safari向け

transform: translate3d(X, Y, Z) // X、Y、Zの方向に距離を移動する

【 Twitter】

/* ツイッター */
.sns .twitter a {
	background:#00acee; //背景の指定
	box-shadow:0 5px 0 #0092ca; //右0 下5px ぼかし距離0 色の指定
}


.sns  .twitter a:hover {//マウスが乗っているとき
	background:#0092ca; //背景の色の指定(上のやつと比べると陰がない)
}

 以降、Facebook等は同じ内容の繰り返しなので省略

パソコンのみの表記部分

/*--------------------------------------
  780px SNS
--------------------------------------*/
.share{
	padding-bottom:10px; //10px下にパティング幅を指定(余白?)
}
.sns ul {
	margin:0 auto; //上下0 左右状態に応じて
	list-style:none; //リスト表記なし
}
 .sns li { //SNSを4つ並べて表記する。
	width:23%; //横幅を23%
	margin:0 2% 3% 0; //上0 右2% 下3% 左0%
}
.sns li a { //SNS内のフォントのサイズを75%
	font-size:75%;
	padding:10px 2px; //上下10px 左右2pxの余白
}
.sns li:nth-child(4n) { //4の倍数目を選択
	margin-right:0; //右側のマージンを0
}

/*-- ここまで --*/
}

 ここまで調べて、前回の【・】が消えない件を発見しましたね。

まとめ

かなり、稚拙で需要あるのかなーこの記事?って感じですが、自分のログを残す!という意味で残しておくのもいいんじゃないかと思います。かなり時間掛かりましたからねー。

CSSの勉強で使ったのはこちらの本

webでも良いけど、アナログ感覚で手元においておきたいので。他に良い本ないかなー。探してます。

初心者の方、カスタマイズめげないで頑張ってくださいね。

 

 

  • この記事を書いた人
ハタオト

ハタオト

職業:専業主夫。サイト作って、静かに生活しています。このブログは好き勝手書いています。

-WordPress
-

Copyright© もう、共働きやめます。 , 2018 All Rights Reserved Powered by AFFINGER5.