【コピペOK】html初心者がブログをカスタマイズしてみる【その①】
メインの記事更新を出来るだけサボらないようにしつつ、
最近『こりゃ楽しいなぁ』と思っているのがブログのカスタマイズ。
他の方のブログを辿っていく中、ヘッダやサイドバーを拝見し
『なにコレかっこいいやん』と思い。
『どうやってやっとるっちゃろ？』と調べてみました。
いくつかご紹介します。
(※あべしは九州出身です)
参考にさせていただいたのは下記エントリーです。
(むしろほぼコピペ＋αさせていただきました汗)
ゆきひー (id:ftmaccho)様
みやび (id:miyabi41)様
S.S様
元々ははてブロに実装されているものだけでポチポチやってたのですが
あまり面白味がないというか・・・ちょっとダサい？
そこで、初心者ながらも自分でいじってみました！
※あべしは会社でCソースは軽くいじれども
ウェブデザインなどは全くやったことがない、完全なる初心者
◆ サイドバーSNSフォローボタン
これ、割と当初から『どげんかせないかん』と思ってたんですよね。
なんたって・・・公式、かっこ悪い・・・
コレ→
んー、さすがにもう少し、ねぇ？
『お？シンプルで良さげじゃない？』と思ったのが下記。
てことで実装してみます。
まずはやってみよう！
Feedlyはまだやっていないので、
はてな読者ボタン、Twitterフォロー、Facebookの3つにリンクさせます。
まずは下記コードをコピー。
ダッシュボード＞デザイン＞カスタマイズ＞サイドバーと進み、
モジュールを追加＞HTMLへ。
タイトルのところは何も入力せず、そのままぺたっと枠に張り付けます。
そうすると下記のようなものがサイドバーに出現するはず。
(サイドバーの幅によって見え方が違うはずです)
そしてデザインCSSに下記コードをコピペ。
すると、こうなります！
ここで箱の大きさや並び、色を指定するんです。
あとはご自分のブログのデザインに合うように、
サイズやフォントを調整していくだけです！
忘れちゃうと、私の読者様になっちゃいますよ！笑
もちろん、他のURLも編集して下さいね！
実は下記Naoya様のエントリーで紹介されている、
「15. キューブ状にクルッと回転する」も採用したかったのですが
コレをSNSフォローボタンに応用するのは難易度髙かった・・・
いずれは挑戦してみようと思います。
◆ まとめ
【HTML】や【CSS】なんて聞くとものすごく敷居が高いように思えますが
とりあえず触ってみると初心者でも何とかなるもんです。
何より、触ったものが着実に反映されていくのが楽しい！
まずはやってみる。
コレ大事ですよ～
