はてなブログのサイドバーにある「注目記事」や「プロフィール」などのモジュール、通常はここの見出しは全て同じスタイルのものが使われますが、これをcssで個別に設定することもできます。 でででーさん (id:d3dayo) さんが以下のような記事を書いてましたので、それをcssでやる、というものです。（コメントで書くと長くなりそうだったので記事にしました。） 元々のhtml部分 でででーさん さんはhtmlモジュールに入力するものを<div class="hatena-module-title">人気記事</div>から書いていましたが、注目記事部分のhtmlは元々以下のような記述になっています。 <div class="hatena-module hatena-module-entries-access-ranking" data-count="5" data-source="total_b

先日、WWDC関連の記事でGIZMODOを見ました。そしたら、なんかいいというか、まぁ全体的に最近やりたい感じのデザインだったんですね。とくに気に入った個別記事のタイトル部分について、真似してみることにしました。 GIZMODOの個別記事のタイトル部分がいい http://www.gizmodo.jp/2017/06/wwdc-2017-liveblog.html GIZMODOの個別記事の個別記事はこうなっています。これの、タイトル部分が気に入りました。タイトルの上にアイキャッチ、というのはよく見かけますが、GIZMODOの場合はタイトルの背景にアイキャッチを置いています。かつフィルタか何かで暗くしています。 最近、ここのようにメインエリアを白いカードのようにするデザインにちょっと惹かれており、それとこういう「カードの上端に横幅もピッタリあった画像」というのをやりたかったのでした。 考え

以前からこのブログでは記事下に「この記事が気に入ったらいいね」のいいねボタンを読者登録などのフォローボタンにしたものを使っていました。これは記事の画像に「その記事の最初の画像」を使っていたのですが、これを「アイキャッチとして設定された画像」に変更しました。 追記（2018.03.17） Feedlyの部分のコードを少し修正しました。ついでにボタン部分のテキストに下線がつかないようにしました。（.iine-icon a{text-decoration:none;}のところ。） 以前のものと新しいものの比較 これが以前の「この記事が気に入ったらフォロー」です。 こちらが新しい「この記事が気に入ったらフォロー」です。 …ぶっちゃけ、見た目はほとんど変わっていません。ただし、表示している画像は「記事の最初の画像」から「アイキャッチとして設定された画像」に変わっています。私の記事はいつもアイキャッチ

質問系サイトってブログネタの宝庫ですね。はてなブログに関する質問で、そのブログで使われているテーマを調べる方法はないか、というのを見かけました。これは簡単です。 1.ページのソースを表示 とりあえずPC版でのやり方です。使っているブラウザはChromeでもFirefoxでも大丈夫です。 大抵のブラウザはページ上で右クリックすると出てくるメニューの中に「ページのソースを表示する」というような項目があります。それをクリック。 右クリック禁止サイト？javascriptオフって試してください。 cssを探す 今見ていたサイトのソースコードが表示されます。その中からcssを読み込んでいる部分を探します。はてなブログの場合はたいてい105行目くらいにあると思います。細かいところは違いますが、以下のようなコードが有るはずです。 <link rel="stylesheet" type="text/css

cssで作るシェアボタンのデザインパターンをたくさん考えてみました。とりあえずシェア数の表示がない、単純なボタンとして36種類あります。（色違いなども若干含みます。） 記述するhtmlはどれも同じようなものですが、一部微妙に異なるものもあります。基本的にはcssだけでデザインを決めています。アイコンフォントに関してもcssだけでほとんどやっていますが、そのコードは省略していますのでソースを見てください。 コピペでもだいたい使えると思いますが、それぞれ微調整が必要なものもあると思います。なのでコピペだけでなく自分のサイトに合わせて調整できるcss中級者以上向けですね。スマホ表示も考えてないし。（スマホで見ると崩れてるやんwと思う人はこの記事の対象外です。） というか、ローカルなhtmlで作っていたものをここにコピペしたらうまく動かないものやフォントが反映されていないものがありました。面倒なの

例：自分のブログが http://anisma.hatenablog.jp/ であれば、 http://anisma.hatenablog.com/ を作成します。これで他の人がそのURLを使うことはできません。同じようなURLだと紛らわしくなることがあるので、そういったものは先に取ってしまって保護したほうがいいという考えもあります。 ブログをコピー テストブログを作成したら、メインブログのcssや加えたhtml、設定などをそっくりコピーしてきます。基本的には設定画面を2つとも開いてコピペです。 続いて、ブログの記事をすべて取り込みます。 まずはダッシュボードから設定→詳細設定→エクスポート（記事のバックアップと製本サービス ）と進み、ブログの記事をエクスポートします。テキストファイルでダウンロードできるので、PCの適当なところに保存します。 続いてダッシュボードのインポートからブログデー