はてなブログでSNSのボタンをオリジナルデザインにカスタマイズしたい。そんなときに使えるSNSタグとボタンカスタマイズのCSSをメモしておきます。
はてなブログには独自の変数があるので、これにそってタグを書き換えます。
| 変数 | 説明 |
|---|---|
| {Title} | 記事タイトル |
| {Permalink} | 記事URL |
| {URLEncodedPermalink} | URLエンコードされた記事URL |
自分のFlickr画像をブログに使うならMarsEditが断然オススメ
私は運営しているブログの画像置き場にFlickrを使っています。
Flickrにアップした画像をブログに貼り付ける際、Web上でタグを取得してくるのもいいけど…それってめんどくさい！
ウェブサイトを使うなら手順は、画像をアップ→Flickrのウェブサイトに移動→貼り付けたい写真を選択→タグを取得→ブログ記事に貼り付け…
こんなことやってたら1記事書くのに時間がかかりすぎて、いつか疲れちゃいます。
この面倒な作業を一瞬で終わらせてくれるのが、MarsEditです。
続きを読むLINE・はてブのマークもあるアイコンWebフォント「Ligature Symbols」を使う方法
このサイトの記事上下にあるTwitterやFacebook、グーグルプラス、LINEなどのシェアボタンにWebフォントを使ってみました。Google＋はPC表示までウィンドウザイズを広げると現れます。
こういったボタンは画像で作ると簡単だけど、拡大縮小でボヤケたり、サイズの変更ができなかったりするのでCSSで作ったほうが綺麗です。SEO的には画像を使わないことで、表示の高速化にも役立ちます。
今回使ったウェブフォントは、「Ligature Symbols」です。
Twitterのアイコン「」はもちろん、「」や「」のアイコンまでフォントとして使えるようになります。
続きを読むCSSで左に画像・右に文字列を配置するレイアウト
左に画像・右に文字列のレイアウトを実現する方法を書いてみます。PCで見ないと表示が崩れる実現方法ばかりです（笑）
レスポンシブデザインでスマホも適応させるならメディアクエリで表示を分けましょう。
続きを読む