ウェブリブログのCSS編集メモ - 2019年7月以降の新システム用

css_title.jpg


こちらは、2019年7月に行われたウェブリブログのシステムリニューアル後のCSS編集などに関してまとめたページです(今後も追加予定)。


ブラウザの開発ツールを使って知識ゼロから始めるCSS編集



(1)「HTML編:開発ツールの使い方とウェブリブログの新システムのレイアウトの仕組み」

・ブラウザの開発ツールの起動方法
・新システムのレイアウトの仕組み

(2)「CSS編:開発ツールを使ったCSS編集のやり方」

・開発ツールを使ったCSS編集のやり方
・文字の大きさ、太さ、行間、文字間隔などを調節する時に便利な機能の紹介

(3)「ボックスモデルを理解してブログのサイズを調整する」

・ボックスモデルの説明
・ウェブリブログの各コンテンツの横幅の調整のやり方
・リニューアル前と後でのwidthとheightの計算方法の違い

(4)「フレキシブルボックスレイアウトを理解してコンテンツの並びや配置を調整する」

・フレキシブルボックスレイアウトの説明
・flex-directionとjustify-content、align-itemsの関係のまとめ
・ブログのタイトルの文字の位置を変える方法
・ブログのタイトルを文字から画像に変更する方法
・タイトルを完全にオリジナルなものに作り変える方法


ベーシックデザインを使ったCSS編集例



ページ全体、ヘッダー領域

・ページ全体、ヘッダー領域全体、タイトル領域全体、タイトル領域全体(インナー)、タイトルの文字、タイトル下のブログパーツ領域、ヘッダー領域のブログパーツ

コンテンツ領域全体、プロフィール領域、メイン領域の中身(トップページ)

・コンテンツ領域全体、プロフィール領域、メイン領域の中身(トップページ)、.Main__contents、.Entry、.Entry__heading、.EntryInnerWrap、.Entry__text、.EntryPosted、.Entry__readMore、.Pager、.Pager__item


その他



特定の記事ページだけデザインを変える方法 - ウェブリブログ新システム・CSS編集

・新しいシステムで特定の記事ページだけデザインを変える方法
・ウェブリブログのテンプレートを利用して記事ページのデザインを変える方法
・ウェブリブログのテンプレートのCSSから記事ページに埋め込むCSSを抽出するプログラムの紹介
・JavaScriptを使ってCSSを記事内に埋め込む方法

ウェブリブログの新システムでJavaScriptの動作が遅くなる原因














スポンサーリンク


記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。