はてなブログテーマ「Innocent」カスタマイズ！グローバルメニューの背景・文字色を変更、背景色の透過、マウスオーバー時に色をかえる方法 - hatebcustom
はてなブログテーマ「Innocent」をカスタマイズして、前回の投稿で設置したグローバルメニューの色を変更しました。 背景・文字の色の変更と、背景色の透過、マウスオーバー時に色を変化させる方法について。 メニューの色を変える メニューの背景色を透過させる マウスオーバー時に色を変化させる 前回は、はてなブログテーマ「Innocent」でグローバルメニューを作成しました。 rubirubi.hateblo.jp そのままでも十分、よくなったのですが、すこしシンプルな気もします。シンプルが好きなかたは、このままでもよさそうですね♪ もともと、はてなブログテーマ「Innocent」は、カスタマイズを前提としてシンプルにつくられているみたいなんですよね。 はるなぴさんのブログより ブログのイメージチェンジや、ちょっとした気分転換に、グローバルメニューの色を変えてみてはいかがでしょうか(*^^*)
フォントサイズの単位にvwを使うという選択肢 - FOXISM
自分のサイトの文字の大きさ、いろいろ悩みますよね。どの大きさが一番読みやすいのか、どうしたらみんなに読んでもらえるのか。でも個人サイトであるのなら、最終的には自己満足でいいんです。私はそう思います。 はてなブログでも、よく「本文は何pxが読みやすい」「行間は◯◯だ」みたいな記事がよくあります。まぁその内容はそれぞれの人の好みやこだわりがあるので好きにすればいいと思います。それで悩むのも楽しさです。ただ、そういう記事の中であまり触れられることのない「vw」という単位があります。これを使ってみるのもまた面白いですよ、というお話です。 今回の始まり 今回の記事は、以下のはるなぴさんの記事を読んでの感想記事です。 別に内容に突っ込んだりするわけではないのですが、紹介です。 1行の文字数を考えるならvw 上のはるなぴさんの記事の中で、1行の文字数について触れられています。 印刷物の場合ですが横書きの
はてなBlogでどの言語のシンタックスハイライトなのかをCSSで表現する - 理系学生日記
今日は CSS で、以下のように「どの言語のシンタックスハイライトなのか」を示すボックスを作りたいと思います。 before after 前提 ぼくは Markdown でこの Blog を今書いているんですが、ソースコードを書くと、はてな Blog では以下の HTML でレンダリングが行われます。 $ echo "hello world" hello world ↓ <pre class="code lang-zsh" data-lang="zsh" data-unlink=""> $ <span class="synStatement">echo</span> <span class="synConstant">"hello world"</span> hello world </pre> まずはボックスをつくる 上記のとおり、ソースコードは <pre class="code"> で
はてなブログでコードブロックをコンソール風（背景色が黒）にするCSSカスタマイズ - はるなぴログ
はてなブログテーマInnocentでコードブロックの背景を黒にするCSSカスタマイズを紹介します。 はてなブログテーマInnocentのカスタマイズを行うことでコンソール風の表示を狙います。 マークダウン記法で記事を書いていますが、このカスタマイズ方法のお陰でプログラミングコードをすっきりと表示させることができています。 はてなブログテーマInnocentデフォルトのコードブロック表示 外部CSSファイルにCSSカスタマイズを記述 CSSカスタマイズ方法 はてなブログテーマInnocentデフォルトのコードブロック表示 はるなぴは、はてなブログテーマInnocentを使用しています。 Innocentというテーマはとても良くできていますが、CSSカスタマイズすることを前提に作ってあるようです。装飾は控えめです。 コードブロックもそのひとつです。デフォルト表示では囲み枠の中に記述されるのみで
斜体（イタリック体）による強調は日本語には合わないWebデザインだ！ - はるなぴログ
はてなブログで強調表示の表現をCSSカスタマイズしてみます。 はてなブログテーマInnocentの強調表示 斜体（イタリック体）による強調は日本語には合わない 外部CSSファイルにカスタマイズ内容を記述する 強調表示の使い過ぎに注意 はてなブログテーマInnocentの強調表示 普通に使うのはemタグとstrongタグです。この他にmarkタグを使用することもあります。 はてなブログではInnocentというテーマを使っていますが装飾はミニマムです。 emタグは斜体（イタリック体）で表示されるのみです。字が斜めに傾いて表示されます。 斜体（イタリック体）による強調は日本語には合わない この斜体というのが曲者で、もともと欧米の書体の強調表示が元になっています。 なので日本語の強調表示に斜体を当ててみても今一つ強調しているようには見えません。アルファベットなどの欧米書体の中で使う分には良いので
Dropboxのファイルを共有化してから外部CSSとして直リンクする方法 - はるなぴログ
Dropboxのファイルを共有化してから外部CSSとして直リンクする方法について備忘録として書きます。 無料ブログはじめ様々なブログシステムではCSSを書き換えるのに手間がかかる場合があります。 こういう時はDropboxからCSSファイルを直リンクしてしまうのが簡単でお勧めです！CSSの修正がすぐに確認できますよ！ Dropboxを利用して外部CSSリンクとして直リンク Dropboxアプリからの操作 直リンクになるようにURLを修正 外部CSSリンクとして動作させる CSS設定の確認に便利なChrome拡張機能 まとめ Dropboxを利用して外部CSSリンクとして直リンク Dropboxアプリをインストールしてから実行するのが簡単です。 Dropboxアプリからの操作 Dropboxアプリを開きます。そして外部CSSとして動作させたいファイルをコピペしてDropbox内に置きます。
はてなブログで人気のテーマ20種類のHTTPS化対応状況を調べてみる - FOXISM
先日はてなブログがHTTPS化に対応した事により、私のテストブログの1つもHTTPS化することができました。以前HTTPS化が発表された時に「はてなブログの人気テーマはHTTPS化に対応しているのか？（混在コンテンツに引っかからないか？）」と調べたのですが、それから時間も経ち、実際にHTTPS化できるようになったので、改めて調べてみました。 なお、これは2018年2月28日現在での状況であり、順番は適当です。また、スクリーンショット画像はPC版の全文形式ですが、一覧形式にしても変わりません。スマホ版はチェックしていません。 2018.06.17 現在は、はてな側でテーマ内のコードを一部書き換えたのでほとんどのテーマで対応済みになっています。この記事のリスの中では「Material」のみが、非対応となっています。 2018.04.17 はてなが提供しているドメインを使用した全てのブログがHT
スマートフォン表示で、はみ出したtableをスクロールさせるCSS
このようにtableを横スクロールさせるには、HTMLとCSSを編集すればOKです。 1、HTMLの編集 まずは、tableを「divタグ」で囲みます。ここでは、そのdivタグに”scroll”というclass名を付けました。 <div class="scroll"> <table border="1" cellspacing="0" cellpadding="5"> <tbody> <tr> <th>商品名</th> <td colspan="5">インターネット回線</td> </tr> <tr> <th>初期費用</th> <td colspan="5">事務手数料3000円 ＋ 標準工事費0円</td> </tr> <tr> <th>プラン</th> <td>30Mコース</td> <td>50Mコース</td> <td>100Mコース</td> <td>200Mコース</td>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はてなブログテーマInnocentのデフォルト表示を見た感想 - はるなぴログ
http://www.okuni.me/entry/hatenablog-hard-to-read-cause
Innocent（はてなブログテーマ）の表示を確認する - はるなぴログ