cBlog

Tips for you.

Webデザイン

Web上に掲載する画像のカラープロファイルに悩んだがこれで行く

これまで、ブログに掲載する画像はImageOptimで最適化してきた。これは画像の軽量化という意味もあるが、むしろExifを除去したいという動機の方が大きい。除去されるデータはカラープロファイルも例外ではなく、ImageOptimに通すと画像の色が変わることがあ…

脱jQueryその3 クリックするとニューと縦にスライドするメニュー

前回の記事ではサイドバーモジュールのタブ化をネイティブのJavaScriptでゴリゴリ書きました。勉強になりました。今回は、レスポンシブなグローバルナビを脱jQueryします。PCサイズではメニューが横に並び、タブレット・スマホではボタンをクリックするとメ…

脱jQueryその2 サイドバーモジュールのタブ化

連載2回目にして気づいてしまったことがあります。前回の記事では脱jQueryと銘打っておきながら根幹の.slideDown()部分はCSS3で実装してしまいました。反jQueryの受け皿は素のJavaScriptではなくCSSだったわけです。JavaScriptにおかれましては先の都議選に…

脱jQueryその1 はてなブログの目次をクリックで.slideDown()させる

更新:2018-03-17 # 2)のスクリプト改善 こんにちは。いつも人にインスパイアされるcrullerです。 今回は、シロマティさんのbrand-newデザインテーマ「SOHO」に触発されました。 www.notitle-weblog.com どこにかというと、SOHOとともに提供されているカスタ…

公式関連記事を好きな位置に移動させるスクリプトを書いてみた

更新:2018-05-07 #コード追加位置修正しました 出典:staff.hatenablog.com サッカー観るから手短に。 公式の関連記事機能がリリースされましたね。 staff.hatenablog.com 私の場合、勝手にONにされる以外はポジティブな印象を抱いています。その理由は、そ…

ul、ol要素をネスト(入れ子)にするとき、やってはいけない書き方

今まで間違って書いていたんですが… このようなネストされたリストを作るとき、 1つ目 2つ目 2つ目(あ) 2つ目(い) 3つ目 こう書いたら間違いなんですね。 <ul> <li>1つ目</li> <li>2つ目</li> <ul> <li>2つ目(あ)</li> <li>2つ目(い)</li> </ul> <li>3つ目</li> </ul> (これでもなぜか通用してしまう。) 1つ目 2つ目 2つ目…

CSSのmarginやpaddingを指定する順番の覚え方

Webデザイナーや本で勉強した方は常識かもしれませんが、最近( ゚д゚)ハッとしたことがあるんです。 CSSのmarginやpaddingを4つまとめて指定する際の表記する順番です。 全部同じなら当たり前です。 margin: [上下左右]; 2つの場合も、ふーんソウナンダって感じです…

「詳細度」CSSの優先順位は書かれた順番だけではない

次のHTMLとCSSについて、CSSを適用した場合にliのmarginはどうなるでしょう。 HTML <div class="itunes-embed"> <div class="itunes-embed-info"> <ul> <li class="itunes-embed-preview">...</li> </ul> </div> </div> CSS .itunes-embed .itunes-embed-preview { margin: .5em 0; } .itunes-embed .itunes-embed-info .itunes-embed-preview { margin…

はてなブログのidとclassのツリーと図解を作ってみた

更新:2018-05-07 カスタマイズやテーマ作成が捗るよう、はてなブログのid、classをツリーと図に表してみました。自分用ですが、せっかくなので公開します。 取り上げるid、classの選定や画面上への表示には、以下で紹介されているサンプルテーマ「Boilerpla…

サイドバーのAdSenseは規約違反? 404時はJavaScriptで非表示に

更新:2017-07-08 #jQueryを使わないバージョンを一番下に追記しました。こちらの方が速いはずです。併せて、タイトルを変更しました 貼りやすいこともあり、2カラムのWebサイトのサイドバーにGoogle AdSenseの広告を掲載している方も多いと思います。 しか…

ゆきひー氏作Milliard 2列化カスタマイズの画像の縦横比が気になる人へ

( ´ー`)y-~~「直せますよ」 また便乗カスタマイズのカスタマイズ記事です。 ゆきひー氏によるMilliard関連記事プラグイン2列化カスタマイズ、すばらしいです。Awesomeです。 www.yukihy.com ただ、cruller、気になります! 画像の縦横サイズを固定 とのこと…

やっぱり日本語Webフォントを使うのは時代が10年早いと思った

デザインテーマを作ってみてわかったことがある。 [宣伝] Monolithic - テーマ ストア 以下の原因だ。 yaritakunai.hatenablog.com ページのレイアウトだけ読み込まれてタイトルや本文が表示されるのに時間がかかる現象である。 考えてみれば当たり前で、そ…

デザインテーマ「Monolithic」(For はてなブログ)、出来ました。

Monolithic Download now! Monolithic - テーマ ストア 2人は決して離れません。 一体となったメインカラムとサイドバーは、まるでブラウザ上に浮かんだ一枚岩。それらは、いかなるウインドウサイズでも離れることはありません。浮かぶ石板のような表現は、…

シロマティ氏製シェアボタンにGoogle+&Pocketのシェア数を表示させる

ヒャッハー! ブログカスタマイズなっしーヾ(。゜▽゜)ノ 当ブログでも使用させていただいているシロマティさんのシェアボタン。唯一の欠点は、Google+とPocketのシェア数が表示されないこと(デザインテーマ「Brooklyn」もかな?)。 コードの参考元を参照し…

はてなブログのテーマ「DUDE」をレスポンシブデザインに対応させる

はてなブログのおしゃれなデザインテーマ「DUDE」。 tsukuruiroiro.hatenablog.com ご覧のように当ブログでも使用させていただいております。 唯一の残念な点は、レスポンシブデザインに非対応なこと。ちょっといじってみたところ、レスポンシブ対応にできた…

【衝撃の事実】はてなブログのプロフィール欄に隠された機能

みんなー、やってるなしか? ブログのカスタマイズ。cruっしーなんか、いじり出すと止まらなくなるなっしー。既存のCSSのスパゲッティさに頭をこねくり回して、やっぱやめたって保存しないで寝ることも多いなしよ。って、そんなことどうでもいいなしな。今日…

サイドバーのプロフィールにFeedlyボタンを設置

年末年始1日目の午後。 そういや、Feedlyの購読ボタン設置しようとしていたなしな。 Feedlyについて きっかけ&設置方法 mob-channel.hateblo.jp 効果 はてなユーザー以外にも読者になってもらえる。 Feed URL http://〜/feedとhttp://〜/rssがあるなっしー…

CSSだけで背景色を2色にする方法

更新:2017-07-01 #コードを簡略化しました このブログを購読していただいている方は既にお気づきと思いますが、ブログタイトルのデザインを変えたなしよ。正直ダサいと思うなっしー。それでも採用した理由、それはFCバルセロナのクラブカラーが「えんじと青…

番号付きリストがはみ出ていたので直した

はてなブログの人気テーマ「Written」。私も気に入って使わせてもらっています。 このあいだ、番号付きリストが2桁になると、番号が記事左の余白にはみ出していることに気づきました。特に、レスポンシブデザインONにしていてスマホビューで見ると、画像のよ…

【解決】El Capitanにしたらはてなブログのテーマ「Written」でタイトルの文字が太くなった

Written - テーマ ストア - はてなブログ 以前言及していた問題が解決しました。 yaritakunai.hatenablog.com 当ブログをOS X 10.11 El Capitanで見ても、Yosemite以前の表示に戻っているはずです。MacやEl Capitanじゃない方は何のことかわからないですね、…