Roll Play My Life

= ryuji_026

はてなブログのデザインを変更しました

はてなブログここ)のデザインを変更した。

外部参照で.cssを読み込ませたのでその備考録。

外部のcssを読みこませる

設定画面の「デザイン」->「カスタマイズ」->「デザインcss」にインポートするcssのアドレスを書く。んだけど。

f:id:ryuji_026:20120529155539j:plain

(めっちゃ汚いソースだからみないでね。)

そこで外部参照指定するんだけど、どっかサーバにアップロードしてもいい。が、今回はDropboxを利用する。

dropboxでは認証ユーザー以外がアクセスするためのURLが生成できる。

dropboxの任意の場所にcssファイルを保存したら、右クリックから「dropbox」->「リンクの取得」をクリック。

(たぶん)ブラウザで展開されるURLをさっきのところで指定すればいい。と思うじゃん?

よくみると直接データを参照してるページではないのでこれでは×。(調べたところによるとこれでいいはずだったのに)

展開されたページの上部に「ダウンロード」の項目があるので、そこのリンク先のURLからダウンロード用のオプション(?dl=1みたいな)を削除したURLで指定する。


cssを編集

ブログのページをブラウザで開きながら、dropboxに保存したcssファイルを編集していけばリアルタイムで確認できる。

しかし、これだとdropboxにデータをアップロードする分の時間(8秒くらい)待たなくていけないので、おかげてながら作業が捗ってしまった。

このままだと困るのでブログトップのHTMLを直接コピペしたものをローカルに保存して、確認しながら編集、とか開発環境にぶち込む、とかしてください。(ぼくはやっていない。)


ここのcss

  • リンクにhoverで2pxの下線表示
  • activeで1px下に落とす

activeで1px下に落とすのに手間取った。

a:active {
	top: 1px;
	border-bottom:2px solid #ff265c;
	}

でいけるとおもったら

	position: relative;

が必要。

結果こうなる。

a:active {
	position: relative;
	top: 1px;
	border-bottom:2px solid #ff265c;
	}

activeにもborderを記述しなきゃいけないかどうかは謎。

つまるところ

はてな記法作った人天才。

追記

はてなブログでは「続きを読む」、「スーパー続きを読む」が使えない。

終わってる。

自分で実装するのは無理なので必死で探したら見つかった。

はてなダイアリーで書いていたときは使ったこともなかったんですが、最近立て続けに長めの記事を書いたら、トップページが長くなりすぎて見難くなってしまったので、無理やり使えるようにしてみました。

id:m4iさんありがとうございます。
はてなブログで「続きを読む」記法 - カワイイはつくれる

広告を非表示にする