余白

[Cocoon]アイコンリストにステップ箇条書きのカスタムクラスを追加した とりあえずのメモ

[Cocoon]アイコンリストにステップ箇条書きのカスタムクラスを追加した

これが普通のアイコンリストです。追加CSSクラスにstep-listを追加する全体が太字になる2行目はそのままリストタイトルの文字が大きくなる項目内の行間と項目間の余白が調整されるそこに、追加CSSクラスに「step-list」を入れて、アイコンを変更してみます。 追加CSSクラスにstep-listを追加する全体が太字になる2行目はそのままリストタイトルの文字が大きくなる項目内の行間と項目間の余白が調整されるstyle.cssに追加しました。/** step-listタグを...
Typoraで印刷用にフォントや余白を調整したい(カスタムテーマCSS) Mac

Typoraで印刷用にフォントや余白を調整したい(カスタムテーマCSS)

Typoraで表示・印刷のスタイルを変更するには、ユーザーテーマ用CSSファイルを作ります。ただし、macOS版のTyporaでは印刷時の余白設定が直接できないため、いったんPDFにエクスポートしてから印刷する必要がありました。印刷時の余白を直接指定したいなら、別のマークダウンエディタ「MarkText」も選択肢です。Mark Textを試してみると、Typoraとはまた少し勝手が違います。私は、とりあえずPDFエクスポートで対応しようと思います。Typoraのテーマを変更す...
[Windows] Wordがないので「ワードパッド」で文書を印刷してみる Windows

[Windows] Wordがないので「ワードパッド」で文書を印刷してみる

「ワードパッド」は、Windowsに元から入っている文書作成ソフトです。一般的に使われる「Word」と似ていますが、最小限の機能しかありません。パソコンによっては「Word」が入っていない場合があります。そういうときに「ワードパッド」が役に立ちます。
[Cocoon]アイコンリストのデザインをラベルボックスみたく余白をつめた ニッチな話題

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

Cocoonのアイコンリストのデザインが、ラベルボックスに比べて余白が多すぎる感じがしたので、修正しました。ビフォー・アフターを比べる元のデザインがこれでちょっとラベルボックスに比べると間延びしている気がします。こんなふうにしました。ほんとはさらにリストタイトルをラベルのようにしたかったんですが、ボーダーをつけるdiv要素を変えるのは大変だったので、やめました。Cocoonのラベルボックスのいいところ記事の中のポイントが目立って、読みやすいことです。Cocoonのアイコンリス...
とりあえず今の追加CSSをバックアップしておく(2020年9月11日現在) ニッチな話題

とりあえず今の追加CSSをバックアップしておく(2020年9月11日現在)

いろいろスタイルを設定したので、ここまでの「追加CSS」の中身をここにメモしておきます。それぞれの機能について、ブログで説明しているページがあればリンクも貼っておきます。ブログのデザインを練り上げている過程が全部わかる!改めてみるとコードの重複があったりするので、ちょっと整理したほうが良さそうですね。追加CSS全体(2020年9月11日現在)長いのでこちら/*** 印刷時のフォント*/@media print { p { font-family: 'Noto Serif JP...
写真に余白をつけたい  【 LINEカメラの「フィット」と「フィル」】 スマホ基礎

写真に余白をつけたい 【 LINEカメラの「フィット」と「フィル」】

自分の撮影した写真を壁紙にするときに、縦横比が合っていないと一部分が切り取られてしまうことがあります。今回は、ラインカメラアプリで写真の編集をして解決します。縦横比の違う写真を壁紙に設定すると…スマートフォンの画面の縦横比は16:9であることが多いですが、写真は4:3, 1:1など異なる比率の場合も少なくありません。フィットとフィルそこで使うのが「LINE Camera」アプリです。写真の切り抜きをすることを「トリミング」といいます。通常は、写真の一部を切り抜くときに利用しま...