【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…

メジャーアップデート。デザインバージョン3をリリースしました。

本日、メジャーアップデートをおこない、バージョン3になりました。 coool.blue 見た目はあまり変わりませんが、CSSの部分で大改造しました。 デフォルトで用意されているCSSから避ける形にしました。 ただし、完璧ではありません。 なお、バージョン3からI…

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

本日、デザインバージョン「2.1.3」をリリースしました。 ボタンのどこでも押してもボタンが反応しない不具合の修正 ボタンのどこでも押してもボタンが反応しない不具合の修正 ボタンが3つほどあるのですが、ボタンのどこを押してもボタンが反応しない不具合…

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

本日、デザインバージョン「2.1.2」にアップデートしました。 トップページの記事一覧を完全にカード型に 記事ページの本文の背景が出ない問題の修正 「次のページ」のデザインを刷新 リンクの上にマウスを置くと色の変更 さいごに トップページの記事一覧を…

【ブログデザイン】バージョン3を準備中です。

ついこの間、バージョン3にすることはないと書きました。 しかし、今、バージョン3の準備中です。 なぜバージョン3をリリースするのか ローカルで作業中 出来るだけ自作のCSSを使う 今月中にはリリースしたい 大幅なデザイン変更はない 内部の大幅な改造 さ…

【マイナーアップデート】ヘッダやブログタイトルの色とフォントを変更しました。

本日、バージョン2.1を公開しました。 ヘッダを青系に変更 フォントの変更 対応時間 ヘッダの色については今後変更するかも知れない フォントに関してはこのままで行く さいごに ヘッダを青系に変更 当ブログは「coool.blue」ですが、どうしても青系の色を使…

【ブログデザイン】Edge、Chrome、Firefox、IEに対応

当ブログは、はてなブログを使っています。 HTMLの骨組みとCSSが予め用意されています。CSSについては任意ですけどね。 HTMLをいじることは出来ませんが、CSSは上書きできます。 よって、自作のCSSを書いてブログデザインをしました。 用意されているCSSを使…

「display:flex」→「display:grid」に変えてみる。

CSS

当サイトは、はてなブログを使っていて、元になるCSSの上に自作のCSSを上書きするという感じになっています。 ヘッダとフッタ、2カラム構成のレイアウトというのは残しています。 あとは、自分好みにCSSでデザインしていく形にしています。 display:flexを使…

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

先日、バージョン1を公開しました。 coool.blue これでやめておこうと思ったのですが、軽微な修正をしていると、ちょっと問題を見つけてしまって、ちょっと対応しました。 今回、バージョン2です。 今日は、具体的な内容について書いてみたいと思います。 画…

とりあえず、完成形としておこう。

3日ほど前から、はてなブログでデザインテーマを作っています。 あらかじめ用意されている「HTML]と「CSS]があって、用意されているCSSを参考にしながら、CSSを書いていくスタイルです。 今回、トップページにかなりこだわりました。 どうしてもカード型にし…

【CSS】軽微な調整をしました。バージョン1終了。

3日ほどかけてブログデザインのカスタマイズをしていたのですが、ひと段落つきました。 しかし、気に入らないことがあったのです。 paddingからの離脱(完璧ではない) レスポンシブ対応(条件付き) 左右の余白の問題 さいごに paddingからの離脱(完璧では…

PC、iPhone、そしてiPadに対応

本日、オンライン飲み会をしました。 コロナで会う事ができないので、LINEのビデオ通話でオンライン飲み会をしました。 それはさておき、このブログでは、ガツンとデザインテーマを作りました。 ちゃんと上手く行っているのだろうか・・・。 出来る限りのこ…

デザインテーマ完成しました。

3日ほどかけてデザインテーマを作りました。 かなり疲れました。 徹夜もしましたね。 僕、HTMLとCSSが得意ですが、かなり苦労しましたね。 特にiPad。縦横でサイズが変わりますので、細かい調整が必要でした。 何気にiPhoneも疲れましたけども。 メディアク…