【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

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