16bit!

エンジニアじゃなくなっちゃった人が何かを書くブログ

css

Speaker Deck のスライドをはてなブログにサイズ指定して埋め込む方法

先日のみゃーもりの真摯さの記事を書く際に、Speaker Deckにある@konifarさんのスライドを埋め込んだのですが、Speaker Deckのスライドをサイズ指定してはてなブログに埋め込むのにはちょっとコツが要りそうでしたので書いておきます。 ちなみにはてな記法モ…

【Rails】CSS初心者だけどドロップダウン付きのメニューバーを簡単に作りたい

現在4日連続くらいで更新してるみたいなので、 せっかくだから今日も更新します。 CSS MENUMAKER http://vaginally.hateblo.jp/entry/2013/12/19/175204これを読みました。 すごく簡単そうだったので、キャッチアップも兼ねて、 これで生成されたCSSをベース…

【CSS】はてなブログのプロフィール欄にフラットなボタン的なリンクを載せる

CSS初心者です。先日のQiitaとGitHubのアカウント登録に伴い、 何となくサイドバーのプロフィール欄にそれぞれへのリンクを追加しました*1。で、その際、ただ文字列でリンクするのもつまらなかったので、 何となくフラットなボタン的な感じにしました。 下記…

【UX】「次の記事」は新しい記事のことだけど、「次のページ」は古い記事のこと

ふえぇ・・・UXわからないよぉ・・・。http://sesleria.hateblo.jp/entry/2013/04/07/140025上記のブログでも触れられているのですが、 ブログにおける「次」とか「前」という方向って分かりにくいです。ブログ以外の一般的な話をすると、基本的には、 「左…

【CSS】pager周りのCSSをいじりました ~文字列リンクをボタンっぽくする方法

ページャー*1周りのCSSを少しいじりました。CSS初心者です。 具体的には、 文字列リンクをボタンっぽくした 方向記号を付けた の2点です。「2.方向記号を付けた」についてはちょっと書きたいことがあるんですが、 今日は喉が痛いのでやめときます。 文字列リ…

【CSS】はてなブログのカテゴリ欄をタグクラウド風に

カテゴリ表示周りのCSSを少し弄りました。 具体的には、・サイドバーのカテゴリ表示がタグクラウド風に ・記事タイトル部のカテゴリ表示がふわっとした感じになっています(記事投稿時点)。タグクラウドがまだ流行ってるのかどうかは正直知りませんが、 と…

【CSS】画像をhoverで時計回りにくるっと回転させる

Adsenseの乞食記事が最新投稿であるという状態が個人的に好ましくないので、 とりあえずプログラミングっぽい記事を書いておきます。 CSS初心者です。 .hatena-module-circles .circle-image { border: 1px solid #dddddd; border-radius: 50%; margin: 2px;…

【CSS】はてなブログテーマの魔改造~日付表示を日めくりカレンダー風に~

はてなブログで使ってたテーマが作者さんにより削除されてた・・・— 桜餅あんぱん。 (@sakuramochi702) 2013, 10月 18今までこのブログのテーマに使ってたplatismさんの"Excalibur"というテーマが削除されました。 理由としては、 なんというか過去に作ったもの…

【CSS】はてなブログの3カラム化が難しい件

css

CSS超初心者です。ですが、先日からちょっとCSSに興味が湧いていて、 仕事の合間にちょこちょこ触っており、 今週頭には、「ちょっと勉強がてらはてなブログのテーマでも作ってみようか」と思い立ち、 しばらく公式テンプレの"boilerplate"をもとに適当に弄…

【CSS】【js】CSSとJavaScriptだけで簡単に吹き出し型のポップアップを実装する方法

CSS超初心者です。ですが、jQueryなんかはCSS以上に分からないので、 今回はCSSだけで吹き出し型のポップアップを簡単に実装できる方法を載せます。 HTML <div id="main"> <div id="target" onMouseover="openPopUp()" onMouseout="closePopUp()"> この部分にマウスカーソルが乗るとポップアップが出ます。 <div id="fukidashi" onMouseover="openPopUp()" onMouseout="closePopUp()"> 吹き出しポップアップの中身 <div> </div> </div></div></div>

【CSS】h1,h2などの文字列の先頭に画像を入れたい

タイトルが意味不明。ですが、イメージ的にはこんな感じのことをしたいのです ↓ ※赤色の長方形が画像です。 で、具体的にCSSでどう書くのか調べてみると、 h3 { background-image: url("red_square.jpg"); background-size: 8px 50px; background-repeat: no…

【CSS】【はてなブログ】参加グループのアイコンの角を丸くする

今日ふとダッシュボードを見ていると「はてなブログ グループ」なるものがあったので、試しに「プログラミング(公式)」と「グループテストしたい人のグループ」に参加してみました。で、せっかくだからサイドバー(フッタ)に参加グループを表示してみたの…

【CSS】プロフィール画像を円形に切り抜き、たくない

はてなブログを始めて3日目。とりあえず手始めにテーマストアから良さげなテーマを拾ってきたんですが、platismさんのデザインがどれもシンプルかつオシャレで良いですねー。気に入りました。というわけで、当ブログではそんなオシャレなテーマ集の中から、…