CSS

ただのメモ書き

[CSS] 記事一覧画面をスッキリさせた

記事一覧のページで、記事ごとにオレンジ色の枠で囲んであるのが、ちょっとうるさい気がしたので、CSSを修正しました。 /** 記事一覧画面をスッキリさせた*/ .list.ecb-entry-border .entry-card-w...
ただのメモ書き

[note風スタイル] モバイルサイトでのアイキャッチ画像を横一面にした

noteサイトの記事レイアウトを参考に、アイキャッチ画像の余白をなくすことにしました。 まず、メイン全体の余白(padding)をなくしてから、記事要素に余白(margin)を追加しました。 /** モバイルサイトでアイキャッ...
ただのメモ書き

[Cocoon]モバイルサイトフォントを17pxに変更した

これまで、少し文字は大きめにしていましたが、スマホから見た時に、文章の行数が多くなっている気がしました。 そこで、「モバイルサイトフォント」のサイズを「18px」から「17px」に変更してみました。 1行あたりの文字数は、表示...
プログラミング

[CSS] Cocoonで印刷時のアイコンリスト・ラベルボックスに枠をつけた

ウェブページを印刷する時に、通常は「背景画像を表示しない」になっていて、画面で表示されている背景画像や背景色が印刷されません。 これには、インクの使い過ぎを防ぐ効果がありますが、画面表示と見た目が変わってしまいます。 特に、こ...
プログラミング

[CSS] ブログの印刷時のフォントをUDフォントにした

パソコンでの文書作成用に「BIZ UDフォント」をパソコンに入れたのですが、ブログの印刷時のフォントでも活用したいと思います。 ただし、印刷時だけで、通常のパソコンやスマホの画面で表示するときには、デフォルトのフォントのままにします...
インターネット小話

[CSS] ウェブページの印刷時に一番上の画像と文字が重なった【display:inlineとblock】

教室ブログを印刷をしてみると、なぜか印刷が重なってしまうページがありました。 すべてのページではなく、特定の記事だけで起こりました。 ・保護者の「承認」がないとアプリをインストールできないようにするには?【Google ファミ...
ニッチな話題

[CSS]ブログカードの画像のアスペクト比を変更した[object-fit, aspect-ratio]

これまで一行で表示できるタイトル文字数が少なくて、タイトルが長くなると読みにくいことが気になっていました。 ブログカードのデザインを少し変更しました。 そこで、まず画像のアスペクト比を変更したり、文字のサイズを少し小さくして、...
2021.11.06
プログラミング

[WordPress] ブログ記事に印刷用のQRコードを追加する【Google APIs】

ウェブページには、リンクをたどっていくことができるメリットがあります。 教室では、ちいラボのブログ記事を冊子印刷にしてお渡ししているのですが、紙媒体では 関連する記事を読むことができません。 そこで末尾にQRコードをつけて、ス...
2021.11.02
インターネット小話

【再挑戦】AMPページでクリックURLを記録する【Google タグマネージャーのユーザー定義変数・CSSセレクタ】

ウェブサイトのアクセス解析に Googleアナリティクス を使っていますが、単体では外部サイトへのクリック数を計測できません。 通常ページのクリックは、Googleタグマネージャーを使って計測できましたが、AMPページ用のコンテナに...
2021.10.19
インターネット小話

どうして Windows XP でインターネットに接続できないの?【JWordプラグインが破損】(Let’s note CF-W7の場合)

家のパソコンをインターネットにつなごうとしたら、「プラグインが破損」というメッセージが表示されて進まないの。どうしてなのかな? よく、「古いパソコンはセキュリティの問題があって、インターネットにつないではいけない」と言われますが...
2022.01.19
ニッチな話題

AMP用ページを見やすくしたりメニューをつけたり(note風スタイル第7弾)

cocoonのAMP機能で生成している CocoonテーマのAMP設定でAMPページを生成しています。 通常ページとAMPページの差 デフォルトスタイルだと、AMPページのスタイルは通常ページとだいぶ差があります...
インターネット小話

Cocoonで記事一覧の画像と文字の位置を逆にした(note風スタイル第6弾?)

久々にホームページのCSSをいじりました。今回は、記事一覧の画像と文字の配置です。 これも、note風スタイルの一環ですね。 大きな字で見やすいタイトルと正方形のアイキャッチ アイキャッチ画像より、タイトル文に目がいくよ...
2021.03.23
インターネット小話

Googleのカスタム検索ボックスの遅延表示によるガタツキをなくしたい【CLS】

PCでページを表示したときに、サイドバーの検索バーが遅れて表示されて、画面がズレるのが気になります。 遅延表示による画面のガタツキ 検索バーには、Googleのカスタム検索を利用しています。 サイドバーの検索ボックスの遅...
ニッチな話題

[Cocoon] カルーセルの「CLSに関する問題」を改善したいけれど難しそう

読んでいる文章をずらされると腹が立つだろう。 だから、そういうページは直した方がよい。 さて、どうやって? という話。 CLS(累積レイアウト変更)とは ウェブページはあとから画像が表示されると、下にある文...
2021.01.05
ニッチな話題

miエディタでCSSの見出し表示をする

miエディタにしたのは、そろそろCSSを整理しようと思ったからです。 いろんなスタイルを継ぎ足していったので、重複や記述方法のばらつきがあって、ちょっと見直したくなってきました。 そのために必要なのが、エディタの「見出し表示」...
ニッチな話題

macのエディタでmiをインストールした話

わたしは、文章をメモするときにテキストエディタを利用しています。 起動が早いからです。 テキストエディットはプレーンテキストのエディタではない ところが、macのデフォルトのテキストエディタは、「テキスト エディット」は...
ニッチな話題

[wordpress] 設定したCSSが一部反映されない 【LiteSpeed CacheのCSS結合の注意点】

設定を変更していたら、ログアウトしてウェブページを見ると、スタイルシートがおかしいことに気づきました。 スタイル適用の優先順位がおかしい WordPressにログインすると意図したとおりのスタイルが表示されているのですが、ログ...
ニッチな話題

note風スタイル第5弾!引用とコード

note風デザインもそろそろ簡単な微調整です。 今回は引用文(blockquote)とコード(pre)のデザイン。 ビフォア・アフター 元のデザインに比べて、小さくグレー基調にしました。 以前は引用部分が...
ニッチな話題

note風スタイル第4弾!目次のデザイン

「note風スタイル」ということで、ブログのスタイルシートを編集しています。 今回は、目次について。 主な変更点は…… 文字を細く・小さく・薄く背景色をグレーに項目の間に線を追加 noteの目次の特徴は、「控え...
ニッチな話題

[Cocoon] ブログ記事の作成日時・更新日時を2段にする 【white-space pre】

ブログ記事のタイトル部分のスタイルを少しいじりました。 作成日時と更新日時を2段になるようにしました。 こちらがCSSです。 .entry-header .date-tags { order: 3; colo...
2021.03.22
ニッチな話題

note風スタイル第3弾! Cocoonのアイキャッチをタイトルの上に変更した 【display-flex】

Cocoonのアイキャッチ画像は、既定ではタイトルの下に表示されます。 今回はアイキャッチ画像をタイトルの上に表示されるように、スタイルシートを編集しました。 これもnoteのデザインを参考にしています。 タイ...
2020.12.21
ニッチな話題

note風スタイル第2弾!モバイルメニューを編集

こんにちは。以前、noteのような読みやすいブログを目指して、スタイルシート(CSS)を変更しました。 前回は、パソコンでもシングルカラムの方が読みやすいのではないか、というテーマでした。 今回のメインはモバ...
2020.12.21
ニッチな話題

[Cocoon]外部ブログカードのサイトアイコンを上に移動した【CSSのposition:absolute】

以前、funtion.phpでテンプレートを変更することで、ブログカードのデザインを変更しました。 しかし、「デザインを変更するならCSS」ということで、改めて挑戦してみました。 こんなふうに変えました ...
2021.10.23
ニッチな話題

[Cocoon] 引用ブロックをすっきりさせた

引用ブロックのデザインをすっきりさせました。 前後のデザインの比較 もとはこんな感じで こうしました。 引用符を枠線の外に出すことで、ちょっとすっきりしてませんか? CSSコードはこちら ...
ニッチな話題

[Cocoon]アイコンリストのデザインをラベルボックスみたく余白をつめた

Cocoonのアイコンリストのデザインが、ラベルボックスに比べて余白が多すぎる感じがしたので、修正しました。 ビフォー・アフターを比べる 元のデザインがこれで ちょっとラベルボックスに比べると間延びしている気がし...
タイトルとURLをコピーしました