私が記事中で使っている CSS を WordPress.com の多くのテーマでも使えるようにした CSS を「comemo ベーシック」として公開します

私がこのブログで現在使っている CSS のうち、記事内で使っているものの一部を WordPress.com の多くのテーマでも使えるようにしたものを「comemo ベーシック」という名前をつけて公開します。たとえば、テーマ「Twenty Eleven」にこの CSS を適用すると以下のような感じになります。

t demo | WordPress.com のデモ用-2

テーマ「Twenty Eleven」に CSS セット「comemo ベーシック」を適用した場合

テーマ「Goran」の場合はこんな感じ。

t demo | WordPress.com のデモ用-3

テーマ「Goran」に CSS セット「comemo ベーシック」を適用した場合

CSS セット「comemo ベーシック」は以下のとおりです。これからも適宜、修正・追加していく予定です。

以下は、CSS がちゃんと適用されているか確認する用の記述のサンプルです。

色を変更する場合は、「#888888」の部分を適宜、テキストエディタ等で置換してください。

名称未設定.css-1

たとえば、以下のような感じで色を変更できます。

t demo | WordPress.com のデモ用-4

Firefox をお使いの場合には 1 、アドオン「Stylish」をインストール・有効化した上で、以下の CSS をインポートすると、

以下のような感じでビジュアルモードでも comemo ベーシックの CSS が適用されます。

投稿の編集 ‹ t demo — WordPress-2

以下、検討課題です。

すべてのテーマに対応しているわけではありません

WordPress.com のテーマの記事部分を示す CSS のクラス名はすべてのテーマで共通ではなく、以下のように何種類か存在します。 2

したがって、CSS が適用されないテーマもあります。その場合には、「.entry-content」の部分等を該当テーマで使われているクラス名「content」等と差し替えれば OK です。

テーマ全体のデザインとのバランスがうまくとれない場合があります

これはテーマ毎にデザインが異なるがゆえの宿命とも言える、避けがたい問題だとは思うのですが、例えば、テーマ「Blaskan」に CSS セット「comemo ベーシック」を適用すると、以下のように、全体として、文字の大きさのバランスがとれなくなります。

書式確認用の記事 | t demo

テーマ自体の CSS と干渉し合い、デザインが壊れる場合があります

テーマの種類によっては、デザインが崩れてしまう場合があります。たとえば、以下のような感じで注意書きのデザインに引用を示すデザインが入り込んだりしてしまいます。このようなテーマ自体の CSS との干渉も前項と同様避けがたく 3 、その都度、CSS を修正することになると思います。

書式確認用の記事 | t demo-1


  1. Google Chrome では Stylish を使ってビジュアルモードへ CSS を適用させることができていません。もともとできないのか、それともなんらかの工夫をすれば適用できるようになるのか、そのあたりのことについてはわかりません。 
  2. すべてのテーマについてデータ取りをしているわけではありません。 
  3. 技術的には可能ですが、テーマ個別に対応したほうが手っ取り早いです。 

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。