はぴらき合理化幻想

海外3年/西成ドヤ2年/沖縄2年/事故物件で寝袋3年目、ミニマリスト10年目でダンボール2箱の持ち物と保存食で大阪に定住中。

CSS

LINE風の吹き出しをCSSだけで表示、マークダウンならたった4文字の組み合わせで簡単記述!

ブログに慣れていない人でも記事の中で簡単にLINE風吹き出しを表示できるCSSを自作した。マークダウン記法なら4文字(「-」「 」「1」「.」)の組み合わせだけで、コピペ不要でLINE風吹き出しの会話形式を簡単に表現できるよ。

ブログ記事内に階層化した目次を自動生成できてSEOで有利になる高機能なプラグインを自作した

ブログ記事本文にある見出しを元に目次を自動生成すれば、読む人が記事の概要を掴みやすい。さらに、検索結果に見出しが表示されることがありSEOで有利になる。目次の表示場所を記事内で指定できるし、特定の記事で目次を生成しないようにもできる。何かと高…

リンク文字色は青色推奨、HTMLのデフォルト色でも良い、CSSで下線を消しても色は変えない方がいい

ブログ運営初心者にも分かりやすいようにリンクの文字色を変更する方法や理由を解説する。ブログでデザインに凝りたいというのでなければ、リンク文字色は青色にしておく方がいいよ。

はてなブログで階層化した親子カテゴリーをCSSカスタムで擬似的に表示する方法

はてなブログの標準機能では今のところカテゴリーを階層化できない。サイドバーやフッターにカテゴリー一覧を表示している場合、CSSを編集することで擬似的に階層化でき、親子カテゴリーのように見せることはできる。

はてなブログやはてなブックマークのお知らせ数字バッジの非表示はユーザーCSSで可能、作業中断原因を取り除こう

はてなブログや関連サービスを快適に使うために、標準で備わっている機能をあえて使わないという選択もありだ。便利なはずのサービスが自分のペースを乱すなら本末転倒。サービスを賢く使いたいね。

はてなブログのテーマ「レスポンシブルー」で日付表示の崩れを修正するCSS

はてなブログの利用者が無料で使えるテーマ「レスポンシブルー」を適用しているブログの一部ページで日付表示が崩れる。応急処置的に崩れを解消するCSSを紹介。

リンク先のサムネイル画像をHTMLタグで表示しCSSで装飾を設定する方法

リンク先を画像なしの文章で紹介するよりも、サムネイル画像を一緒に表示した方が直感的に伝えやすい。シンプルなHTMLとCSSで可能。jQueryやJavaScriptは不要。

ユーザーCSSでiframeを簡単に判別!ウェブサイトの表示が遅い原因を特定しやすいよ

ウェブサイトをぱっと見ただけでは、各要素がiframeかどうか分からない。ユーザースタイルシートでiframeを装飾すれば一目瞭然。他人のサイト閲覧時にも便利。

ブログの記事ごとに背景画像を変更できるJavaScriptサンプルコード

記事ごとに背景画像を変更すればそれぞれの記事に個性が出ておもしろいかも。コピペでサンプルコードを追加し、画像のURLを指定するだけ。

コピペでOK!はてなブログの記事直下に最新記事一覧を表示するカスタム

最新記事一覧をサイドバーだけに表示するのではなく、記事直下にも表示可能。記事を「続きを読む」でリード文と本文で分ける書き方をしている方が望ましい。

はてな匿名ダイアリー(増田)は文章が広がって見にくいのでCSSで読みやすくする設定

PCのブラウザで増田を読むと文章が横に広がって見にくい。ついでに文字を大きくするなどの微調整をCSSでしたので公開するよ。

はてなブログでアドセンスのレスポンシブ広告ユニット導入時のCSSサンプルコードver1.1.0

昨日(2014年5月13日)、はてなブログのスマホ表示のHTMLやCSSなどが変更されていた。これに伴い、レスポンシブ広告ユニット用のCSSを微調整した。

ブログPV増加でアクセス数アップ!リンク文字色を未訪問/訪問済みで変えない方がいい!

リンクの文字色を未訪問/訪問済みにかかわらず同色にしていると、訪問者が同じ記事に複数回アクセスしてくれることがある。過去1ヶ月の具体的なPVやUUを公開し、それに基づいて考察・結論付けをした。

はてなブログでアドセンスのレスポンシブ広告ユニット導入時のCSSサンプルコード

アドセンスのレスポンシブ広告ユニットをスマホで表示させると、デフォルト状態だと広告の一部がはみ出てしまう。CSSコードをコピペで追加し、スマホのポートレートモード(横幅320px)ぴったりにしよう。

訪問済みハイパーリンクの文字色をデフォルトから変更するCSS設定

ハイパーリンクの文字色は未訪問か訪問済みかを分けてCSSで簡単に設定できる。しかし、未訪問と訪問済みで異なる文字色にするのではなく、同じにしておいた方がサイト管理者にとっては有利かな。

はてなブログのPC表示とスマホ表示のCSSをカスタムする方法

はてなブログではPC表示とスマホ表示では異なるHTML構造になっている。またclassなどが必ずしも同じとは限らないので、この違いを利用してスマホ表示のCSSだけをカスタムすることも可能。

Google AdSenseのレスポンシブ広告ユニットでスマホ表示サイズにも最適化

アドセンスのレスポンシブ広告ユニット1つを使って、PC表示とスマホ表示で最適化する方法を述べる。JavaScriptではなくCSSでブラウザ横幅に応じて条件分岐可能。

はてなブログで購読中のブログ一覧にある「公式ブログ」を非表示にする方法

昨日(2014年4月21日)から、購読中のブログ一覧が表示されるところに購読していないブログが表示されるようになっていた。申し訳ないけど非表示にすることにした。(2016年2月9日現在、以前に書いたコードが無効になっていたので有効なコードに変更した。)

ユーザースタイルシートを編集できるChrome拡張機能stylebotの使い方

Chrome拡張機能「Stylebot」の簡単な使い方をご紹介。閲覧しているウェブサイトにある不要な情報を非表示にしたり、記事本文の文字だけを大きくしたりと自分好みにカスタムできるよ。

はてなブログの記事ページから新規投稿するスペースの横幅を広げるCSS

記事作成時の利便性を少しでも向上させるためのCSSを考えた。コピペするだけの簡単設定。

はてなブログ記事内にCSSとJavaScriptを入れfeedlyでの表示を確認する実験投稿

feedlyでブログを読んでいると装飾が正常に反映されていないことがある。この記事では、意図した表示になるかどうかを調べるため、稀にしか使わないHTMLタグを使ったり、CSSやJavaScriptをインラインで使用して実験する。

ブログ記事作成を効率化!サムネイル画像付きのリンクを2クリックで作成

HTMLやCSSに慣れていない人でも、簡単にサムネイル画像付きのリンクを2クリックで作成できる。効率化できるところは効率化して、もっと重要な部分に時間を使おう。

はてなブログのサイドバーにある最新記事にサムネイルを表示するならCSSで横幅調整しよう

最近、サイドバーの「最新記事」欄にサムネイルを表示できるようになった。そのまま表示させると記事タイトルが読みにくい。

はてなブログ記事内見出し(h2やh3)に自動で序数(番号)を追加するCSS

記事内の見出しはCSSで自動的にナンバリングできる。記事内の各セクションの順番を途中で入れ替えても、見出しの序数をいちいち書きなおさなくていい。便利。

はてなブログ「続きを読む」の文字列変更や大きくするカスタム

はてなブログではテーマのHTMLを仕様上変更できないので、CSS編集だけで調整する方法。

はてなブログのテーマはCSS編集でカスタム。HTML編集は部分的にしかできない

はてなブログ管理画面のダッシュボードからPC表示用のCSSをカスタムできる場所へのアクセスについて図解している。また、HTMLやJavaScriptの挿入可能部分についても図解。

はてなブログ無料プランのキーワード自動リンク装飾をCSSで無効化する方法

はてなブログの無料プランでは記事内のいくつかの単語が勝手にリンクされてしまう。この機能を根本的に停止するには課金するしかないが、CSSでごまかすことは可能。

てすとてすと