ソーシャルボタンを縦に並べて配置するときに大切なことツイートシェアはてブLINEPocketおはよじ!おはよじ!!@knk_nです。今回もブログ改造ネタです。急いで作ったせいで細かなところが汚くてネタに困らないぜ。ブログを見てるとTwitterなどのソーシャルボタンを縦に並べている方って案外多いですよね。私も今回縦に並べてみたのですが、ボタンレイアウトっていろいろ難しいですね。縦に並べる方向けに私がやってるカスタムをシェアしようと思います。そんなに難しくないので気軽にお試しくださいね。実はソーシャルボタンカスタマイズの記事は二回目だったりする。おわりに縦に並べるとボタンがギザギザしやすい縦に並べるとギザギザしやすいとはどういうことか。これをご覧いただこう。こちらはiPhoneのテーマで使っている横並びのソーシャルボタン。こちらは最近までのPCテーマで使われていた縦並びのソーシャルボタン。ボタンの横幅がギザギザしてるのがわかるだろうか。上のほうもギザギザしてはいるけど下ほどは目立っていない気がする。ボタン同士の横幅がけっこう異なるために縦に並べるのは見た目を考えるとかなり難しい。私も最近までこの問題を放置していたのだが、ようやくキレイに並べることができた。ボタンの横幅を揃える方法キレイに並べるにはボタンの横幅を揃えるしかない。調べた中でTwitter、Facebook、Evernoteクリッパーは横幅の変更ができるようなのでやってみた。?>などを変更する必要があります。!オリジナルデザインのTwitterツイートボタンの作り方。和洋風◎ツイートボタンのカスタマイズといえば彼が有名だろうか。小粋空間こちらのページに詳しく書かれています。style.cssにこれを書いただけ。!important;}このあたりが横幅の限界かな。Facebookのいいね!ボタンいいね!ボタンは英語表記にすると幅をグッと抑えることができます。iframeタイプのボタンだと言語の変更が簡単にできます。allowTransparency="true"></iframe>?locale=en_USの部分で英語表記になります。width=とかもいじれるけどそんなに見た目に反映されなかった。Facebook開発者EvernoteサイトメモリーEvernoteのサイトメモリーは使われているPNG画像を他のボタンに合わせてサイズ変更しただけです。src="http://static.evernote.com/noteit.js"></script>ヘッダにはこれを。/></a>ボタンを配置したい部分にこれを。おわりに微々たるカスタマイズでしたが、少しは見栄え良くなったんじゃないかな。自分のページのソーシャルボタンギザギザしててやだなーって方はぜひお試しを。Web技術この記事が気に入ったらいいねしよう!最新記事をお届けします。Japanに参加してきたのでやった...ABOUTこの記事をかいた人けんけん日本・台湾を行き来し、ホームページ制作、デザインの仕事をしながらこのブログを書いているブロガー。このブログではモノを中心に、ガジェットやWEBサービス、旅、ランニングなど新しいライフスタイルを提案することを目指しています。居酒屋バル!」グルメ2019.8.27台北市大同區の「大稻埕魯肉飯」で抗肉便當をいただきました!けんけん日本・台湾を行き来し、ホームページ制作、デザインの仕事をしながらこのブログを書いているブロガー。このブログではモノを中心に、ガジェットやWEBサービス、旅、ランニングなど新しいライフスタイルを提案することを目指しています。