はてなブログの日付表示に関しては、以前にも記事を書いていて、その時「『01月01日』という表示を、『1月1日』のように」や「元号・漢数字表示」は出来ないと書いていますが、実はCSSだけでも「表示する」のだったらできそうです。なので、これをやってみた…

以前にこのような記事を、別ブログにて書いたのですがこの度、そのSNSボタンの仕様が変更します。そこで、この最新版に合わせたコードを公開したいと思います。次のCSSで、前記事と同じように丸いSNSボタンになります。ちなみに大きさの変更は、元のボタンの…

ハンバーガーメニューといったレスポンシブ対応メニューてよくありますよね。それを設置するのにCSSだけでの場合、HTMLにinputのタグを使ったものをネットでよく見ます。この場合、HTMLにinput等を書かなければ機能しないのですが、HTMLは適切なタグや要素を…

わたしは納豆が好きなのですが、HTMLやCSSなどをちょいちょ書くのが好きです。 といっても本業はそれとは畑違いの仕事。プログラマーやエンジニアとは無縁です。ですので、とうぜん素人に毛が生えた程度、下手の横好き、趣味の延長です。プロの方々には到底…

超久々にWeb系、はてなブログのカスタマイズに関する記事を少し。といっても小ワザですが（笑）はてなブログでもすっかりお馴染みのAMP配信ですが、カスタマイズの自由度が低いのが欠点ですよね。記事本文の自由度は高いですがそれ以外、例えばSNSボタンなど…

はてなブログで記事の投稿日時は「 yy（年）- mm（月）- dd（日）」という風にハイフン（ - ）区切りで表示しています。細かいところまで気にするなら、この表示形式も変えたい所です。例えば「2017年11月16日」という風に変えると和っぽいイメージのテーマ…

前々回の記事に続き、プレースホルダーの小技をもう一つ。はてなブログ限定ですが（笑）と言うのも、はてなブログの今（2017年11月1日）のプレースホルダーは「記事を検索」ですが、一年前ほどのプレースホルダーは「ブログ内検索」だったのですね。当時のわ…

ブログやサイトによくある検索ボックス。はてなブログにもありますよね。この検索ボックスに前もって灰色の文字が書き込まれています。はてなブログでは「記事を検索」と書かれているものです。これ、プレースホルダー（ placeholder ）と言うのですがこのプ…

HTML には<em>というタグがありますよね。このタグはテキストを「強調」や「強勢」するときに使われます。そして欧文ではイタリック体がテキストの強調などを表しているので、このタグで囲まれたテキストはブラウザデフォルトの指定ではだいたいイタリック体にな</em>…

はてなブログの月別アーカイブを表示している方は多いと思います。このブログでも設置していますが、実は気になるところが二つあり、それは 月毎のリストの開閉が急 他の年のリスト表示ボタンを押しても、すでに開いているリストが開いたまま この二つです。…

CSS の中でよく分からなかったのがvertical-align です。vertical-align て特殊ですよね？ なんか思うように揃わなかったり、機能しなかったりします。なんでやねん、よし一度いろいろ実験したろと思っており、やってみました。まあ知っている方、詳しく方に…

img要素に sizes属性というものがあります。この属性は srcset属性とセットで使われ、画像選択の際に、読み込む画像の条件を指定することができる属性です。文字で書いたら何だか分かりにくいですよね。サンプルを見ながら解説します。

HTMLでリストを作ると、自動でマーカーが付きます。非常に便利な機能で、順序付きリストなどでは非常に重宝します。ですが、このマーカーを大きさや位置を調整しようとすると一筋縄ではいきません。ほぼ出来ないと言ってもいい。その点を考慮したら、マーカ…

よく「画像＋タイトルや説明＋ボタン」という組み合わせがあると思います。主にAmazonアソシエイトといったアフィリエイトとかで。この組み合わせ自体はよくあるのですが、サイトがレスポンシブデザインのとき、画像と文章とボタンの配置がうまくいかずイラ…

今回の記事は、前回の記事の延長線上の記事です。そして、非常に短い記事です。なぜ短いかといえば、するべきことが超簡単だからです。前回の記事では、ページ内リンクのズレを解消する方法を記載しています。この位置調整なのですが、もともと固定ヘッダー…

ブログやサイトで固定ヘッダーを設置すると、気になるモノとしてページ内リンクのズレがあります。ページ内リンクで移動すると、リンク先が固定ヘッダーの下になってしまうというアレです。この解決法としてはJavaScriptで調整するのが無難なのですが、スク…

スマホ版を作るにあたり、アイコンにもこだわりました。こだわった、といってもデザインとか、ではなく従来と違う画像を表示することなんですけどね。ブログのアイコンを設定で変えたら済むんですけど、ブログアイコンはファビコンやお気に入りのロゴとかに…

はてなブログでは独自のアイコンフォントが読み込まれており、CSSで設定すればそれらが使えるというのは有名な話です。その中でもよく使われるものは「はてなブックマーク」のアイコンでしょう。そのアイコンはこれなのですが *1 このように文字をくり抜いた…

前々回と前回と続いたAMPの記事も今回で最終回です。今回ははてなブログのAMP CSSで、実際に使えるCSSをいくつかご紹介します。といっても、特別難しいことはありません。AMPページを開いてデベロッパーツールなどで見ていただけたら分かりますが、構造自体…

前回の記事では、はてなブログの記事（HTML）に関する、気をつけておきたいことを紹介しました。今回は、はてなブログのAMP配信で設定できるようになったCSSの設定についてです。記事、つまりHTMLに関しては、はてなブログ側がほとんど自動で変換してくれる…

はてなブログでAMP配信がスタートし、つい先日、CSSを設定することが、できるようになりました。AMPに適用するCSSを設定できるようにしました - はてなブログ開発ブログこれによりAMPでもデザインがカスタマイズできるようになり、このブログでもCSSを設定し…

CSSのposition:relativeとposition:absoluteを使ったデザインがありますが、意外と子要素にposition:absoluteを指定していても、親要素のtext-alignやvertical-alignなどの影響を受けるときがある、といった話です。

【追記 (2017/04/07)：Flexbox（フレキシブルボックスレイアウト）対応ブラウザが増えてきたので、Flexboxを使ったCSSに一部を大幅変更しました。】今回はCSSの話です。みなさんは「ツムツム」というゲームをご存知ですか？ツムツムとはツムツムと呼ばれるぬ…

今回ははてなブログのカスタマイズに関係したCSSの記事です。はてなブログにはパンくずリストがあります。リンク：記事のカテゴリーを「パンくずリスト」として表示できるようにしました - はてなブログ開発ブログだが、このパンくずリスト、記事タイトルが…

スマートフォンからなかなか出来ないはてなブログの記事のマークアップを、モバイルから直接記述する方法です。