カテゴリー: Web

cssやらweb関係を大してわかりもしないのに書いてますよ。

  • font-familyはこのCSSを使って頂けるととってもありがたいんですよね【css】

    font-familyはこのCSSを使って頂けるととってもありがたいんですよね【css】

    ウェブサイトのフォントに迷っているならもうこれを指定すればいいと思うよ。

     

    たとえばwordpressのテーマってほとんどが外国の作者さんですよね。

    日本語のフォント指定なんてしてくれてませんし!

    DreamWeaverとかがデフォで指定してくるfont-familyもいまいちだし。

     

    じゃあ最近流行のwebフォントはどうか?

    英数字ならファイルサイズが小さく種類もいっぱいあるのに対し、日本語フォントはファイルサイズが大きいのに加え、種類も少ないです。

    FontPlusさんを使うとたくさん使えてサイズ小さくて済みます、使用料を個人で払えるならば…ね。)

    英数字だけwebフォントできっちり指定しても日本語との整合性がとれるかというとぼくにはちょっと無理です(ヾノ・∀・`)ムリムリ

     

    というわけで、ぼく好みのスタイルを載せるので見た人はこれを使いましょう

    (ちなみにブラウザに拡張を入れて気にくわない Yah○○ とか Yah○○ の表示を変えてます。)

     

    font-familyのスタイルシート

     

    丸ゴシック好き派なぼくは

    body {
    	"Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
    }

     

    企業やカチッとしたのが好きな角ゴシック派は

    body {
    	"Lucida Grande", "segoe UI", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, sans-serif;
    }

     

    画像で見てみる

    スクリーンショット撮ったので見てみてください。

    まずは Mac。Macで見ると 英数字が Lucida Grande、日本語がヒラギノ丸ゴになります。

    font-family_firefox

     

     

    次はIE8。

    英数字が segoe UI、日本語が メイリオ です。

    font-family_ie8

     

     

    まとめ

    ただただぼくが気に入ってる指定なんで100%これがいいかと問われれば否です。

    サイトによってテイストが違いますしね。

    が、とりあえず困ったらこれを指定しておけば間違いないんじゃないかと。

    サイトがある程度キレイに見えますよ!(まじで

    フォントのふしぎ  ブランドのロゴはなぜ高そうに見えるのか?
    小林章
    美術出版社
    売り上げランキング: 28,115
  • LINEで送るボタン 公式の設置方法じゃandroidでリンク飛ばないので

    LINEで送るボタン 公式の設置方法じゃandroidでリンク飛ばないので

    若年層に大人気、というか10~20代で使ってへん人いてるんか?ってぐらいのLINE。

    2013年1月17日に公式でソーシャルボタンがリリースされましたね。

    さて、前から試していてすごく今さらなんですが、公式のまんま設置したらandroidで LINEで送る を押してもLINEアプリが起動しないんですよ。

    LINEのホームページに飛んでしまうんです。iPhoneだとアプリ起動するんですけどね。

    ということで、LINEアプリがダイレクトに起動するよう書き変えました。

    ※スマートフォンサイトへの設置方法は読み込む外部スクリプトを書き変えないといけないんで却下。

     

    書き変えたらこうなった

    まず設置方法リンクの一番下から画像zipをダウンロードして然るべきディレクトリに画像を据えておきます。

     

    Webサイトの場合

    <a href="line://msg/text/?LINE%E3%81%A7%E9%80%81%E3%82%8B%0D%0Ahttp%3A%2F%2Fline.naver.jp%2F"><img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a>

    WordPress の場合

    <a href="line://msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a>

    ボタン幅、高さは画像によります。ぼくは 幅 36px, 高さ 60px で。

     

    これでちゃんとandroidでも起動します。

    http://line.naver.jp/R/msg/~ をダイレクトに起動のパラメータ line://msg~ に置き換えた感じです。

     

    うちのサイトではモバイルビューの時だけ出るようにしてますしてました。

    line-button_sample

     

    LINEで送るボタンっている?? 他のソーシャルボタンみたくカウントしてくれたらいいのにー。

    LINEでビジネスとコミュニケーションを加速する方法
    松浦 法子
    ソーテック社
    売り上げランキング: 83,776