【ブログ】デザインバージョン「3.3.4」を公開しました。

本日、デザインバージョン「3.3.4」を公開したのでご紹介する! 画像の上にマウスを乗せるとアクションさせるCSSを実装 トップページのカード型の枠線を強調 さいごに 画像の上にマウスを乗せるとアクションさせるCSSを実装 メインブログでも実装したが、画…

【ブログ】デザインバージョン「3.3.3」を公開しました。

本記事から文体を変えます。よろしくお願いいたします。 さて、本日、デザインバージョン「3.3.3」をリリースしたので報告する! トップページ本文のサイズを調整 サイドバーの本文の文字サイズを調整 画像のhoverの実装 対応時間 さいごに トップページ本文…

【マイナーアップデート】デザインバージョン「3.3.2」をリリースしました。

本日、デザインバージョン「3.3.2」をリリースしましたのでご紹介します。 記事エリアの拡大 パンくずリストが記事と被る問題の修正 記事タイトル文字の大きさ変更 コンテンツエリアの拡大 さいごに 記事エリアの拡大 余白を大きく取って読みやすさを重視し…

【マイナーアップデート】デザインバージョン「3.3.1」をリリースしました。

本日、デザインバージョン「3.3.1」をリリースしましたのでご紹介します。 コンテンツ間の余白の調整 記事ページでサイドバーと重なる問題の修正 さいごに コンテンツ間の余白の調整 コンテンツ間の余白を調整しました。 高さの異なるコンテンツをタイル状に…

【CSS】column-countは使いにくい

CSS

当ブログは「column-count」を使っています。 簡単に言えば、「display:flex」と似たような動きをするモノです。 ここでは詳しく書きません。いや、書きたくても書けないのです(笑)。 で、「column-count」はとても手軽で使えるCSSですが、ちょっと使いにく…

デザインバージョン「3.3」をリリースしました。

本日、デザインバージョン「3.3」をリリースしましたのでご紹介します。 タイル状を一工夫 一部の角丸を解除 フォントサイズの調整 記事タイトルの文字数制限を解除 さいごに タイル状を一工夫 当ブログのトップページはタイル状にしていましたが、ちょっと…

デザインバージョン「3.2.1」をリリースしました

先日、デザインバージョン「3.2.1」をリリースしましたのでご紹介します。 パンくずリストの配置を変更 作業時間は30分 スマホ表示とは違う形に しばらく様子を見る さいごに パンくずリストの配置を変更 パンくずリストは記事の上に表示させていたのですが…

【ブログ】デザインバージョン「3.2」をリリースしました。

本日、デザインバージョン「3.2」をリリースしましたのでご紹介します。 ヘッダをメインブログと同様に パンくずリストの配置もメインブログと同じに ロゴ文字サイズの変更 Chrome,Edge,Firefox,IEで表示確認済み PCで見たときのみ さいごに ヘッダをメイン…

メインブログのデザインをカスタマイズしました。

このブログはサブブログですが、メインブログに関してデザインのカスタマイズをしました。 www.miscellaneous-notes.me 今日は、主な変更点に関して書いてみたいと思います。 主な変更点 対応時間 このブログのデザインのカスタマイズは? さいごに 主な変更…

【はてなブログ】デザインバージョン3.1をリリースしました

本日、デザインバージョン3.1をリリースしました。 主な変更点は以下になります。 IE対応の強化 display:grid→display:flexに カテゴリボタンのカスタマイズ さいごに IE対応の強化 「IEなんてコンテンツが崩れない程度でいいや」 そう思っていました。しか…

ブラウザチェックが一番ダルイ。

本日、友達のホームページを作ってお見せしたのですが、殊の外喜んでくれました。 公開する気はないみたいですけどね。今回、ボランティアで作らせてもらいました。 勉強になった部分があり、作って良かったと思っています。 さて、ホームページを作ることは…

IEで「display:grid」は癖があるし使わない方がいい

CSS

時間が許す限りホームページ制作をしています。 ここはブログですけどね。 はてなブログを使っております。 さて、今日の話題はIEです。 IEを嫌っている人は沢山いる印象ですが、まぁ、僕も嫌いですよ(笑)。 IEを無視して作ったサイトがいくつかあって、対応…

【CSS】画像の正方形は無理があるのでbackground-imageを使うことにした。

CSS

先日、object-fitについて書きました。 coool.blue object-fitで正方形にするのは簡単です。 しかし、px指定するのですが、画面サイズが変わるとpxを変えないといけない。 これは。。。 でた結論がこちら。HTMLから。 <a href="sample-2.html"><div class="photo" style="background-image:url('images/tum-2.png');display:block;"></div></a> imgではなくて、background-imageを使…

【CSS】object-fitで画像を正方形にトリミングできる!

CSS

今、ポートフォリオサイトを作っています。 特にネットに公開することはないのですけどね。 実力試しとCSSを忘れないようにするために作業しています。 今日、一番ポイントとなったのは、画像の正方形トリミングです。 まぁ、2~3枚程度なら手動でトリミング…

【はてなブログ】デザインのフルリニューアルしてみて

当ブログは、2021年4月17日に開設したばかりの新しいブログになります。 はてなブログを使っていて、デザインテンプレートが沢山用意されていますが、出来るだけ自作しようという事で3日くらいかけて対応しました。 完全オリジナルではない 4月17日に完成 今…

はてなブログでページャーをカスタマイズしてみた。

記事の下にページャーがありますね。 何もデザインしなければテキストだけですね(このブログの場合)。 そのままだと味気ないということでカスタマイズしてみました。 .pager.pager-permalink.permalink { margin-top: 20px; } .pager-prev a { margin-bott…

メインブログのデザインを変更しました。

本日、メインブログのデザインを変更しました。 www.miscellaneous-notes.me ベースはこのブログのデザイン 1日程度かかった 満足するものができた 細かい修正があれば対応 ローカルで作業 さいごに ベースはこのブログのデザイン デザインのベースはこのブ…

【はてなブログ】デザインバージョン「3.0.4」をリリースしました。

本日、デザインバージョン「3.0.4」をリリースしました。 主な変更点をご紹介します。 目次のカスタマイズ パンくずリストのカスタマイズ タグページとカテゴリーページ、そして日付ページのカスタマイズ さいごに 目次のカスタマイズ 目次をカスタマイズし…

はてなブログのパンくずリストをカスタマイズしてみた。

CSS

はてなブログでは、パンくずリストを設置することが出来ます。 まずは、パンくずリストを表示させるようにしました。 そして、CSSをこんな感じで書きました。 #top-box { background: #fff; margin: 0 8px; border-radius: 10px; } .breadcrumb { padding:4p…

【ブログ】デザインバージョン「3.0.3」をリリースしました

本日、デザインバージョン「3.0.3」をリリースしました。 主な変更点を書きたいと思います。 パンくずリストを左寄せにした ボタン類のデザイン変更 その他、軽微な修正 さいごに パンくずリストを左寄せにした 前バージョンでは、パンくずリストを中央寄せ…

【CSS】エラーに困る。

CSS

本日、記事をスマホで見たとき、横スクロールが出ていました。 「うそんw」 という感じで、はじめは全ての記事でそうなっているのかと思いましたが、どうもこの記事だけらしい。 こやつです。 coool.blue CSSを書いて表示させたのですが、それを削除すると…

【はてなブログ】サイドバーのカテゴリーをカスタマイズしてみた。

元々、カテゴリを表示させるつもりはなかったのですが、カテゴリを表示させてあるブログが沢山あって、「これは導入するべき」と思いました。 そのまま表示させるのは味気ないということで、ちょっとCSSでカスタマイズ。 全てのデザインテーマに対応している…

【CSS】消しゴム機能のあるモノ

CSS

表示させたくないときは ブログデザインをしていますが、どうしても表示させたくないモノがあります。 そのときはどうするのかと言うと、こやつを使います。 display:none SEOの観点から言うとどうなのって話ですが、まぁ、僕的には気にしないですね(笑)。 …

【css】文字リンクに下線を引くか問題。

CSS

皆さんのブログでは、文字リンクに下線を引きますか? 作業で頻繁にグーグル先生に教えてもらっていますが、ほとんどのサイトで下線は表示されていないですね。 リンクは下線を引く? デザイン的に見て グーグルの検索結果で 下線を取っ払った 「青色→リンク…

【ブログ】デザインバージョン3.0.2をリリースしました。

本日、デザインバージョン3.0.2をリリースしました。 タグボタンのカスタマイズ パンくずリストの中央配置 さいごに タグボタンのカスタマイズ タグの必要性をあまり感じないけど、まぁ、一応、タグを設置しているのでデザインすることにしました。 「10分で…

【はてなブログ】ヘッダのデザインをカスタマイズしてみた。

ブログは、バリバリとCSSで改造しています。 4日ほどかけてブログデザインの完成。現在、バージョン3.0.1です。 coool.blue 今日は、はてなブログにおけるヘッダのカスタマイズについて書きたいと思います。 CSS バックアップを取ってから 割と簡単だった 作…

【ブログ】background-positionで上手くいかないので・・・。

CSS

皆さんは、ブログのアイキャッチ画像がない場合、どうしますか? 空白にしますか? 僕は空白にしていましたが、トップページに統一感がありません。 何故なら、画像があるのとないのとでは、トップページの印象が変わるからです。 なので、自作で画像を作り…

【マイナーアップデート】デザインバージョン3.0.1をリリースしました

本日、デザインバージョン3.0.1をリリースしました。 サイドバーの見出しをカスタマイズ サイドバーのコンテンツ間のマージンを見直し 記事ページ下の「関連記事」デザインを変更 タグ文字のサイズ変更 Edge,Chrome,Firefox IE、iPhoneで表示確認済み 対応時…

はてなブログのデザインで気を付けたいたった1つのこと。

当ブログは、2021年4月17日にオープンしました。 はてなブログ Proを使っていて、ブログを何個か作れます。 当ブログは、サブブログという位置づけです。 メインは以下のサイトになります。 www.miscellaneous-notes.me 確か2017年から運営しているかと思い…

【ブログデザイン】IEに対応しました(部分対応)

先日、デザインバージョン3をリリースしました。 coool.blue IEのサポートはしないと決めていたのですが、サポートをすることにしました。 IEは除外していたが 部分対応 4つのブラウザに対応 さいごに IEは除外していたが IEは除外していました。何故ならIE…