【はてなブログカスタマイズ】色々な「SNSシェアボタン」と「フォローボタン」を集めてみた。 - LIABLIFE（リアブライフ）
カスタマイズに終わりはない…。誰かがそんなことを言ったとか言わないとか…。 よくあることなんですが、気付くとブログをカスタマイズして遊んでいます。カスタムして気分転換！これが一番楽しい！（書き手に向いてないのは知ってます。） その度に検索して探すのが面倒なのでココにに集めることにしました。 今日はSNSシェアボタンとフォローボタンを集めてみました。ボタン１つで雰囲気が変わるので重要だと思います。 ちなみに「俺のやつ勝手に載せるな！」って方は連絡下さい。光の速さで消しますので…。 あと載ってる順番に意味はありませんので、あしからず…。
Google AdSenseのダブルレクタングルをスマホ表示の時に片方だけ消す方法 - FOXISM
ブログの記事下にアドセンス広告を横に2つ並べて表示している人は多いですよね。いわゆるダブルレクタングルというものです。これ、スマホ表示の時にどうしてますか？ スマホ表示の時も無理やり横に並べることはできますが、それでおかしな横スクロールが発生してはカッコ悪いです。かといってこれを縦に2つ並べると、おそらくポリシー違反となってしまいます。 ならばどうしたらいいのかと言うと、答えは「公式が認める方法を使って、スマホ表示の場合に広告を1つ消す」です。 ダブルレクタングルというのは、上の画像のようにレクタングルサイズ（300×250や336×280）のアドセンス広告を横に2つ並べることです。効果が高かったりバランスがいいということで採用している人も多いと思います。 はてなブログのテーマでレスポンシブデザイン対応のものを使っている時、この広告表示にも注意しておかないと先に書いたように横スクロールが発
このブログのcssを野良テーマ「FOXISM1」として公開します - FOXISM
今現在（2017年9月8日）このブログで適用しているcssを野良テーマとして公開します。これをコピペすれば、誰でもこのサイトと同じテーマにできます。 野良テーマの適用方法 はてなブログのデザイン設定から「デザインcss」にこのページで公開するcssコードをコピペしてください。テーマはcssでしかないので、それだけでこのブログと同じになります。 また、デザインcssの最初には上の画像のように<system>～</system>の部分があります。これはテーマのcssファイルを読み込んでいる部分です。なのでこの部分は削除します。 そうすると元々適用されていたテーマが消えるので、その上から今回のコードを貼り付ければOKです。 注意点 もともと入れてあるcss（テーマではなく自分で設定したもの）と干渉する部分があるかもしれません なので、デザインcssの一番上にコピペするのが吉かも とりあえずテスト
cssで作るシェアボタンのデザインパターン36種類 - FOXISM
cssで作るシェアボタンのデザインパターンをたくさん考えてみました。とりあえずシェア数の表示がない、単純なボタンとして36種類あります。（色違いなども若干含みます。） 記述するhtmlはどれも同じようなものですが、一部微妙に異なるものもあります。基本的にはcssだけでデザインを決めています。アイコンフォントに関してもcssだけでほとんどやっていますが、そのコードは省略していますのでソースを見てください。 コピペでもだいたい使えると思いますが、それぞれ微調整が必要なものもあると思います。なのでコピペだけでなく自分のサイトに合わせて調整できるcss中級者以上向けですね。スマホ表示も考えてないし。（スマホで見ると崩れてるやんwと思う人はこの記事の対象外です。） というか、ローカルなhtmlで作っていたものをここにコピペしたらうまく動かないものやフォントが反映されていないものがありました。面倒なの
cssで作るあのサイトのあのボタンみたいなボタン - FOXISM
前回の記事で基本的なことは書いたので、次は模倣。いくつかのサイトにある、実際に使われているボタンに似たものを作ってみます。 実際に使うかどうかは別として、cssの練習にはこういうのが良いんじゃないでしょうか。 基本的に、以下のaタグのみのごく簡単なhtmlを使って作っていきます。クラス名や中の言葉は変わっていきます。いろいろ察してください。 <a href="#" class="btn">ボタン</a> また、いつものことですが、使っているテーマなどによっては、そちらのcssが優先されてここでの指定がきかない場合もあります。!important付ければ大抵なんとかなりますが、あまり美しくはないですね。 ではでは、いってみましょー。 Amazon（サインイン） 元となるボタン できたもの css Amazon（アカウントを作成） できたもの css はてなブログ（写真を投稿） 元となるボタン
cssによるボタンデザインの備忘録 - FOXISM
a.btn{ display: inline-block; /* インラインブロック化 */ padding: 1em 2em; /* 余白設定 */ line-height: 1; /* 行の高さ */ color: #fff; background-color: #2196f3; text-decoration: none; } a.btn:hover{ background-color: #42a5f5; } point paddingの値を上下1em、左右2emくらいにすると、フラットデザインっぽくなる。ここまで広げなくてもいいけど、狭いとダサくなるので、それなりに余裕ある数値にするといい感じ。 角丸に demo ボタンリンク a.btn{ display: inline-block; padding: 1em 2em; line-height: 1; color: #fff; b
画像 + タイトルと説明 + ボタンというアフィリエイトリンクを、レスポンシブさせるCSSの一例 - わたしと納豆ごはん
よく「画像＋タイトルや説明＋ボタン」という組み合わせがあると思います。主にAmazonアソシエイトといったアフィリエイトとかで。 この組み合わせ自体はよくあるのですが、サイトがレスポンシブデザインのとき、画像と文章とボタンの配置がうまくいかずイライラすることはありませんか？ レイアウト的に変な空間ができたり、ボタンが大きくなりすぎたり…。 ボタンが一つならまだ簡単なのですが、2つ3つと増えたり減ったりと、ボタンの数自体もその都度変わるものなら、全部に通用するCSSを作るのは面倒ちぃものです。 今回、Amazonや楽天のアフィリエイト用に自作のものを作ったので、何かの参考なるかなぁーと思い紹介したいと思います。 スポンサーリンク 画像+タイトルと説明文+ボタンのHTMLとCSSでは紹介していきます。こういうのってなんて言うのでしょう？ アフィリエイトリンクかな？ 今回のコード紹介は Code
jQueryを使わず、CSSとJavaScriptで実装するトップに戻るボタン - わたしと納豆ごはん
「トップに戻るボタン」というものがあります。 ブログの右下によく表れる、押せばページ上部に戻れるアレのことです。 これを設置する場合、jQueryを使った方法が多く紹介されています。 ですが、もし「トップに戻るボタン」だけにjQueryを使っていたら、軽いとは言えないそれをわざわざ導入するのは、ちょっともったいない気がします。 シンプルにするっとトップに戻り、フェードインしながら表れるトップに戻るボタンでしたら、CSSとJavaScriptだけでも簡単に実装できます。 スポンサーリンク トップに戻るボタンは、必要か不要かその前に「トップに戻るボタン」については不要だという意見があります。ブラウザの機能やスクロース・スワイプを使えば簡単に戻れるので、ボタン自体の意味は無いというものです。 まず、わたし自身はトップに戻るボタンをほぼ押したことはありません。押したと言えば「自分で作ったトップに戻
ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ
ウェブサイトにおいてユーザーが特に操作する機会の多い部分のひとつが、ナビゲーションメニューでしょう。モバイル端末でのアクセスが増えているいま、より使いやすいスタイルが求められるようになっています。 今回は HTML と CSS、わずかな JavaScript で実装できるさまざまなナビゲーションメニュー用コードスニペットをまとめてご紹介します。アコーディオン型やサークル型、ドロップダウンやフルスクリーン、水平型、モバイル用、Off-Canvasメニューなどをスタイル別に100個まとめています。あらゆるWebデザインプロジェクトで使えるスニペットを、きっと見つけることができるでしょう。 ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ コンテンツ目次 1. アコーディオンメニュー 2. サークル型ナビメニュー 3. ドロップダウンメニュー 4. フルスクリーンメ
画像を使わずに、CSSのみでリストアイコンを表現したサンプル 10 - NxWorld
いずれもli要素と組み合わせて使えそうなリストアイコンのサンプルで、画像は使用せずに全てCSSのみで実装してみたものです。 最近ならwebフォントやSVGで使い勝手良いものが実装できたり、あとは使用できるブラウザは限られてきたりしますが、問題ないブラウザであればサイズやカラー変更といったこともCSSのみで簡単に変更できます。 はじめに 最後のサンプルのみol要素使ってますが、その他に関しては全てHTMLは下記のように単純なul, li要素を使ってます。 <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet,
初心者のための簡単なBootstrap3のはじめ方
BootstrapのようなCSSフレームワークを使うことで簡単に迅速にレスポンシブデザインやWebサイトのレイアウトをつくることができるようになります。 今までは１からレイアウトを作っていたり、テンプレートを使用して毎回同じようなレイアウトになったりしていましたが、Bootstrapを使うことでより簡単に自由なレイアウトを構築することが可能になりました。 そこでこの記事では最新版の3.0を使ってBootstrapの基本的な使い方から、Gridシステムの使い方まで紹介していきます。また、Bootstrapをさらに使いやすくするためのツールなども紹介していきます。 Bootstrap3をダウンロードする ではまず始めに以下の公式サイトからデータをダウンロードします。左側にあるダウンロードボタンからダウンロードしましょう。 Bootstrap3のダウンロード ファイルの中身はこのようになっていま
BootstrapのベースのCSSを使ってさまざまな要素を実装してみよう！基本要素とナビゲーションのスタイル
先日の記事「Bootstrapのグリッドシステムの基本な使い方（翻訳版）」で、Bootstrapのファイルのダウンロードからファイルのセットアップ、グリッドシステムの基本的な使い方まで紹介しました。 次のステップとして、ベースのCSSを使ってさまざまな要素を実装してみましょう。 Base CSS and Navigation Systems in Bootstrap 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 BootstrapのベースのCSS 見出し（hx）を実装する 「small」を使って実装 引用（blockquote）を実装する 連絡先情報（address）を実装する コード（code）を実装する 整列のclassを実装する 強調のclassを実装する フォーム（form）を実装する テーブル（table）を実装する 画像
Webデザインの知識がなくてもOK！Bootstrapの使い方【入門者向け】| TechAcademyマガジン
目次 本記事では、Bootstrapの基礎をおさえた上で、よく使う、グリッドシステム、テーブル、ボタン、フォームの具体的な使い方を順番に紹介します。 Bootstrapとは Bootstrapを使う準備 グリッドシステムの使い方 テーブルの使い方 ボタンの使い方 フォームの使い方 Bootstrapとは BootstrapはTwitter社が開発したCSSの「フレームワーク」です。通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。 もともとTwitter社内で作られたもので、以前は「Twitter Bootstrap」と呼ばれていましたが、現在では「Bootstrap」のみで呼ばれるようになっています。 Bootstrapを使うメリ
Bootstrapでレスポンシブなカラム作成 ブレイクポイントとカラム数の指定方法をマスター | 隣IT
サンプルの「col-md-4」の場合、大きな画面では３カラムで表示されますが、ブラウザの横幅が992pxになったとたん、１カラムの縦積みに変化します。 これを「col-sm-4」に変更すると、切り変わるポイントは768pxになります。 「col-xs-4」を指定すると切り替えは無くなり、どれだけブラウザサイズを狭めても、３カラムのまま表示され続けます。 ★覚えておくポイント ◆「lg・md・sm・xs」というブレイクポイントの定義がある。 ◆指定したブレイクポイント以下のサイズになると、とにかく１カラム縦積みになる。 ◆「xs」だけ例外で、指定したカラム数のまま表示されつづける ③ カラム分割数の指定方法 次は「col-md-4」の数字部分についてです。 Bootstrapのカラムというのは、あらかじめ１行を１２列に分割してあります。 この分割済みの１２列を「幾つづつまとめる」と定義するの
font-smoothingでOSXでのフォントのレンダリング方法を調整する - Qiita
Non-standard であることに注意すべき Non-standard This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future. https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth MDNにもこう記載があるとおり、正式な仕様策定のトラックからは外れています。 影響範囲や、ブラ
[CSS] before/after（擬似要素）の基本から使い方までを徹底紹介!! | ヨッセンス
「:before」で「pタグ」の前に文字を挿入 では、「before」属性を使って、すべての<p>の前に「オレ的には」というウザい文言を入れてみます。 「before」で前に文字を挿入 ではCSSを見てみます。 p:before { content: "オレ的には" ; } こんな感じですね。 たったこれだけの指定です。「p:before」のように「:（コロン）」の後ろに「before」と入れます。 で、その中で「content:"ここに自由に文章を入れる"; 」という指定をするだけです。「ダブルクォーテーションマーク」をお忘れなく! サンプル1 「:after」で「pタグ」の後ろに文字を挿入 では今度は後ろに入れてみます。たぶん予想できそうですけど、「after」って英単語を使うだけです。 「after」で後ろに文字を挿入 p:after { content:"……と言ってみる"; }
![[CSS] before/after（擬似要素）の基本から使い方までを徹底紹介!! | ヨッセンス](https://cdn-ak-scissors.b.st-hatena.com/image/square/ae881a6d73c795de683729e28d02776cf2197309/height=288;version=1;width=512/https%3A%2F%2Fyossense.com%2Fwp-content%2Fuploads%2Fcss-before-after-300.png)
今更だけどretina対応を考えてみた[簡単] | Cntlog
そろそろiPadminiのretina対応が発表されて意識の高い気分の人たちが、「うむ、やはり時代はretinaだな」とか言うんじゃないかと睨んでます。 PC版であまりretinaディスプレイを意識して作った事はないのですが、スマホは別ですね。 まだまだ通信量を下げておきたいところなので、コーディグ前にどのように画像を切り出すかが悩ましいところです。 高解像度用の画像に対応させる方法 1.読み込ませる画像の大きさを半分にする。 メリット：簡単 デメリット：画像修正の時はHTMLも触らないといけない場合がある。（管理がしにくい） 2.JavaScriptライブラリを使う（今回はRetina.js） メリット：高解像度用の画像を用意するだけで、勝手に読みこんでくれる（管理しやすい） デメリット：読み込む画像の数が増えるので、通信量が増える。 3.Media Queriesを使って高解像度用のデ
![今更だけどretina対応を考えてみた[簡単] | Cntlog](https://cdn-ak-scissors.b.st-hatena.com/image/square/5c2d915aad5d9cf326a23609f76e3bd321549b28/height=288;version=1;width=512/https%3A%2F%2Fblog.cntlog.net%2Fwordpress%2Fwp-content%2Fuploads%2Fcropped-01.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Emmetでよく使うショートハンドまとめ｜Gimmick log
Add a little magic!
Button Hover Animation