わたしと納豆ごはん

納豆、Web、雑記など

Web

はてなブログの日付表示をいろいろカスタマイズ(十の位の“0”を消す、漢数字・元号表示)

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

【2019年以降・仕様変更版】はてなブログAMPのソーシャルボタンをCSSでアレンジ

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

inputタグとか使わないCSSだけのハンバーガーメニュー

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

はてなブログ用デザインテーマ『Space』を公開しました

すっかり納豆のことばっかりなこのブログですが「Web」というカテゴリーもあります。これはいわゆる CSS や JavaScript といったプログラム系?のもので、多くははてなブログのカスタマイズ系の記事です。まあ、そういうのが好きですし、いまでもちょいちょ…

JavaScriptだけで実装する、ページ内リンクのスムーズスクロール(はてなブログ仕様)

前回、jQuery で脚注もスクロールで移動するようにするスクリプトを紹介したのですが、この動作だけで jQuery を使うのはちょっと…、などと思うことがあるかもしれません。わたしもどちらかと言えばそんな方です。なので、いろいろ調べてみてJavaScriptだけ…

【jQuery】はてなブログの脚注も、するするスクロール移動するスクリプト

今回は久々に、はてなブログのカスタマイズ系の記事です。はてなブログでは「脚注」や「目次」を設置する機能があり、これでページ内リンクを設置できます。で、このページ内リンクですが、サイトによってはスルスルとスクロールして移動する所がありますよ…

Windowsの游ゴシックをfont-weightを使わずにMacに合わせる方法

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

はてなブログのAMPで、SNSボタンのデザインをCSSでアレンジ

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

【超小技】はてなブログで日付の表示形式を“年月日“などにするCSS

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

WiMAX 2ヶ月目の使用感レポート(WiMAXレビュー、その2)

Web

WiMAX を契約したことは前回の記事でお伝えした通りです。あれから二ヶ月が経ちました。それまでにいろいろと感じたことや分かったことが出てきたので、WiMAX に関することを改めて書き留めておきます。

【小ワザ】はてなブログで検索ボックス内の文字(プレースホルダー)の変更方法

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

::placeholderを使ったプレースホルダーの位置調整と、iPhoneとかだけ位置を個別調整した話

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

<em>の強調と傍点と、text-emphasisと非対応ブラウザ対策

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

はてなブログの月別アーカイブを滑らかに開閉したり自動で閉じたりする、いわゆるアコーディオンにカスタマイズ

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

vertical-align 考察(よく分からない vertical-align と、和文で中央揃いがズレる問題)

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

はてなブログでURL最後に「 / 」(スラッシュ)を付けるべきか、付けないべきか

はてなブログではカスタムURLで一部のURLが自由に設定できるのですが、けっこうURL名って悩みますよね。その悩む中の一つに、URL最後の「 / 」 (スラッシュ)があります。このスラッシュは「トレイリングスラッシュ(trailing slash)」と呼ばれるもので、実…

WiMAXを契約したので、キャンペーンや通信速度とかのレビューを書く

Web

今月、WiMAXを契約しました。WiMAXとは家でも外でも快適にインターネットが楽しめる高速モバイルインターネット。手で持ち運べるルーターで、外でもインターネットがガンガンつなげられ、回線工事や配線といったことも不要の素敵アイテムです。リンク:【公…

はてなブログのAMP配信で、imgからamp-imgへ変換する際の表示サイズの継承ルール

img要素には width属性とheight属性とがあります。これらは通常は指定していたほうが良い、と言われています。あらかじめ表示サイズを指定することで、レイアウトの計算がしやすくなり、体感的に表示が速くなるからです。まあ、CSSでも指定できるので、絶対…

Flickr の画像埋め込みの特徴と、はてなブログでの小技と、埋め込みの問題点

はてなブログは Flickr を使って、画像を簡単に貼り付けることができます。このお手軽さ加減はかなりのものです。このブログでもよく使っていました。ただ Flickr は軽くないんですよね、いろいろと。画面だったり、スクリプト使ってたりと。そこで以前、Fli…

img要素にあるsizes属性の変わった使い方(sizesに画素密度メディアクエリを使う)

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

リストのマーカーをCSSでカスタマイズする方法まとめ

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

画像 + タイトルと説明 + ボタンというアフィリエイトリンクを、レスポンシブさせるCSSの一例

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

jQueryを使わず、CSSとJavaScriptで実装するトップに戻るボタン

「トップに戻るボタン」というものがあります。ブログの右下によく表れる、押せばページ上部に戻れるアレのことです。これを設置する場合、jQueryを使った方法が多く紹介されています。ですが、もし「トップに戻るボタン」だけにjQueryを使っていたら、軽い…

はてなブログスマホ版のページ内リンク位置調整を無効にする簡単な方法

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

ヘッダ固定時のページ内リンクのズレをCSSだけで解消する3つのテクニック

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

はてなブログのスマホ版アイコン画像をフォトライフやインラインイメージを使って変える方法

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

このブログ「わたしと納豆ごはん」のスマホ版デザインをカスタマイズしました

久々の更新です。何をしていたのかと言えば、このブログのスマホのほうのデザインをカスタマイズしていました。わたしは集中し始めると周りが見えなくなってしまう性分です。また始めたことが、一段落つくまでは気になってしまい、他のことを忘れてしまうと…

はてなブックマークのアイコンを、アプリのアイコンのようにグラデーションにするCSS

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

はてなブログのAMPでは、アドセンスのコード(非同期)を自動変換する

先日(2017年5月5日)、はてなブログでAMP用に記事中にGoogle AdSense(アドセンス)をせっせこと設置していたのですが。そのとき、広告の表示を統一だせる目的で、PCなどの従来の記事用とAMP配信の記事用と2つの広告ユニットのコードを並べて記入していたの…

Googleアドセンス審査に合格したので、合格のコツや参考になる記事を紹介する

今週のお題「ゴールデンウィーク2017」、ゴールデンウィーク定番のお題ですね。私は去年と同じく仕事です。ですが何かないかな~と思い、Google AdSense(アドセンス)を申請してみました。正確には30記事ほどになったら申請しようと思っており、それがたま…