こんにちは、くーへいです。 先日、CSS3の仕様書を全て読んでまとめてみたのですが、その中でいくつか気になるモジュールがあったので、順次まとめて行こうと思っています。 今回はみんな大好き、アニメーションです！ jQueryなどのJavaScriptを用いれば可能なことはご存知かもしれませんが、今回はCSSだけで行うアニメーションです。 グローバルナビゲーションなどでも用いられている、みょーんとなるアレですね。 IE8やIE9では対応していませんので、スマホサイトが中心になるかもしれませんが、今後のトレンドとなっていくことは間違いないでしょう。 CSS3におけるトランジション（transition）とアニメーション（animation）の違い パッと見では分かりにくいのですが、違いは以下の通りです。 トランジションが:hoverなどのきっかけが必要なのに対し、アニメーションは設定が可能 トラ

読みました！ www.wakatta-blog.com まさにその通りだと思います。 特に ブロガーもアフィリエイターも、信用と収益化を両立させたいのであれば、収益性の高いサービスやプロダクトを、自家でつくることです。 この部分に関しては共感しか無いんですよ。実際にある程度の認知なり収益を出した人って別に収益性の高いサービスやプロダクトを生み出しているんですよね。もしくは最初からあまりブログとかアフィリエイトをメインに行うのではなくサービスやプロダクトを個人で生み出して上手く収益化している人もいます。 しかしながらはてなブログ界隈の話ですが、少し様子が違うように思う部分もあるんですよね。 ブロガーとアフィリエイター、逆に見える はてなブログでは収益やPVの報告をした上で最近はサロンへの勧誘が行われています。 これって、いろいろな人が書いているけど一昔前の情報商材の悪質なアフィリエイターが行

Hover.cssとは Hover.cssとは、手軽にホバーエフェクトを利用できるようになるCSSライブラリです。 すべて、CSSで動作するので、AタグなどのHTML要素のクラス指定部分にクラス名を記述するだけで、100種類以上の様々なマウスホバーエフェクトを手軽に使えるようになります。 利用するときは、こんなタグで利用できます。 Font Awesomeのアイコンフォントを利用したことがある方なら、Font Awesomeを利用するように、クラスを指定するだけで使うことができるので、簡単に利用できます。 Hover.cssの主な利用手順Hover.cssを利用するのに必要な主な手順は、以下の3手順です。 Hover.cssのダウンロード＆設置Hover.cssを呼び出すHover.css用のタグを記入する利用するファイルも、hover.css（縮小版はhover-min.css）の1つの

マウスオーバーのやり方には、色んな方法があります。 CSSを使うにしても「CSSスプライト」を使ったり、JavaScriptでも「jQuery」を使ってみたりと言ってしまえば、コーディングする人のセンスや能力で、色んなコーディングの仕方があって多種多様な方法があります。 今回は、マウスオーバーの基礎と言っても過言ではない！？ CSSの擬似クラス(:hover)を使ったマウスオーバーをメモっていきたいと思います。 普通のテキストのマウスオーバー あまり普通のテキストに、マウスオーバーを設定をすることはありません。 段階を踏むという意味での紹介です。 HTML <p class="demo1">マウスを持ってくると文字が赤くなるよ。</p> CSS .demo1:hover{ color: #ff0000; } これが、基本の形という感じです。 .demo1:hoverという感じで、セレクタの

つまり、基本的にはHTMLがしっかりしていれば文章自体は存在するんですが、CSSも上手く使ってやらないと見やすくならないということですね。 他にもJava Scriptなどを使うと、文章に「動き」をつけることが出来ますが、基本的には上の２つを使ってカスタマイズするのが主流な流れだと思ってください。 はてなブログ：PC版カスタマイズ PC版でカスタマイズしている部分は、以下の通りです。 ブログデザインテーマ＆記事幅 デザインはブログテーマの「Innocent」です。このテーマは、少し設定するだけで簡単にグローバルメニューが設置できるのが魅力です。 記事幅に関しては、初期設定だとAdsenceが記事幅より飛び出してしまっていたので、720pxに変更しています。「Innocent」を作った作者の半月さんがカスタム記事を書いているので、そちらを参考にして変更しています。 記事自体は「Blank」テ

2016 - 02 - 02 僕がはてなブログで行った１２のカスタマイズまとめ ブログ-はてなネタ 広告 シェアする Twitter Google+ Pocket 自分用のメモとして、これからカスタマイズしようとしているはてなブロガーに向けてこの記事を書きます。 ※H28/2/2現在で自サイトに施しているカスタマイズ（見える範囲で..）をまとめたもの ※はてなブログ（スマホはPro必須）におけるデザインテーマ「レスポンシブルー」を使用した場合のカスタマイズです。 ヘッダー変更 プロフィール画像変更 定期購読ボタンをファーストビューに 文字サイズ 続きを読む 見出し 目次 シェアボタン 記事下関連記事（ＰＣ） 記事下に「合わせて読みたい」（スマホ） カエレバ・ヨメレバ スマホ回遊率ＵＰ  ヘッダー変更 ＰＣ設定：デザイン→カスタマイズ→ヘッダ→タイトル変更→画像だけ表示→ファイルを選択 スマ

画像に枠を付ける場合、画像編集ソフトなどを使ってやる方法もありますが、記事を書いて画像を載せる度に画像を加工するのは面倒くさいのでCSSで指定します。 まずCSSに以下の記述をします。 .gazouwaku{ border:1px solid #333;/* 外枠の色 */ padding:5px;/* 余白 */ background-color:#ffffff;/* 余白部分の色 */ } 実際に画像に枠を付ける時は画像URLの後にclass="gazouwaku"を入れればＯＫです。 <img src="画像URL" class="gazouwaku" /> こういったちょっとした事でブログ全体の見栄えも良くなると思いますのでよろしければどうぞ。 もちろん、「gazouwaku」は任意ですので、ご自身で好きなように指定しても構いません。

ヘッダーにメニューを設置してカスタマイズしました お詫び：今回の記事は「コピペで簡単」って記事ではないです。 スマホ対応はまだしてませんが、パソコンで見るとタイトル下にメニューが表示されます。 メニュー自体は前から設置していたのですが、ちょこっと手直ししました。 テーマによっては簡単にメニューを設置できるみたいですが、当ブログは自力でCSSいじっているのでメニューの設置も自力でやりました。 今回のコードは、あまり初心者向けではないので参考になるかは微妙です。そもそも、コードの出来に自信ありませんww　駆け出しなので許してちょ☆ サンプルコード まずはHTMLです。これをデザイン→カスタマイズ→ヘッダにぶち込めばベースができます。 ※もしここにコードが表示されてない場合は、ページを再度読み込んでください。 リンク先のアドレスはご自身のブログのカテゴリーURLを貼ってくださいね。 id=”js