【CSS】ブログデザインTIPS集~随時更新します!~

こんにちは。KOUKIです。

派遣プログラマー兼SEで生計を立てつつ、副業でブロガーをやっています。

ブログを運営していると、色々な問題に直面しますよね。

その内の一つが、ブログのデザインですね。

こんな疑問があると思います。

A子
A子

自分のブログのデザイン、何だかやばいなぁ。白黒だ

CSSでブログのデザインを変更できる事は知っているけど、なんだか難しいなぁ。

B男
B男

私は、サイト開発に携わったことがありますが、サイトのデザインって結構難しいですよね??

本記事では、ご自身でブログを運用されている方向けに、HTMLタグにクラスを追加するだけで、デザインを導入できるツールを公開します。

想定対象読者

〜〜〜〜注目〜〜〜^^ ・ 自分でブログを運用されている人
・ 簡単にかっこいいデザインを取り入れたい人
・ プラグインを追加せずに、CSSだけでデザインする方法を探している人
・ ブログデザインのリファレンスを探している人

提供するソースコードについて

ソースコードとして、「selfnote.css」を提供します。

まだまだサンプル数が少ないですが、随時更新予定です。
※サンプルを提供いただけると助かります

BootStrapをベースに、HTMLタグに独自CSSクラスをあてると、予め定義されたスタイルに従ってHTML要素をデザインできるようにしました。

要するに、独自のCSSフレームワークを作りました。

BootStrapって何?という方は、こちらの記事を参考にしてください。

ソースコードは、本記事のあとがきに記載しています。

尚、ソースコード作成には、下記のサイトを参考にさせていただきました。

https://love-wave.com/css-waku/

諸注意

他のクラスと被らないようにCSS設計してますが、問題がありそうな場合は、設定を無効にしてください。また。プラグインで導入した方がデザインが楽な場合もあります。

クラス一覧

selfnote.cssが提供するクラス一覧です。

tr>
クラス名用途
text-{color}フォントカラーを設定。
text-b-{color}フォントカラーを太字で設定。
mark-{color}100%のマーカーを引く。span,strongタグを推奨。
mark-{color}-half50%のマーカーを引く。span,strongタグを推奨。
btn-{color}-halfボタンデザインを適用。aタグを推奨。
w-{size}要素のサイズを変更。sizeには50~100が指定可能。
outline-dash-{color}破線型のボックスデザイン。
outline-tape-{color}テープ風のボックスデザイン。
outline-kokuban黒板風のボックスデザイン。
kokuban-title黒板風のボックスデザインのタイトル。
outline-title-{color}タイトル付きボックスデザイン。
outline-title-inline-{color}タイトル付きボックスデザインのタイトル。
relation_box関連記事用ボックスデザイン
relation_box span関連記事用ボックスデザインのタイトル
relation_link関連記事用ボックスデザインのリンク
table-simpleシンプルなテーブル。
table-blackブラックテーブル。
table-stripストライプ柄のテーブル。

カラーの種類

本ツールで扱うカラーは、下記の6種類だけです。ブログなので、それほど数はいらないと思いました。

カラーバリエーション
・ primary
・ secondary
・ success
・ danger
・ warning
・ info

スタイルの指定方法

スタイルは、HTMLタグに次のように指定してください。

上記の通り、「selfnote」というクラス名を追加しないとselfnote.cssのスタイルは適用されないようにしてます。

この対処により、他のCSSファイルとの「クラス名の競合」を防いでいます。

XXXXには、クラス一覧に記載している「text-primary」や「btn-primary-half」などが入ります。

KOUKI
KOUKI

selfnote <クラス名> <クラス名> … と繋げていけば、複数のスタイルをあてることも可能です。

CSS導入手順

方法1: ソースコードをstyle.cssに書き込む

私は、WordPressテーマ「アルバトロス」 を使っています。

その為、アルバトロスを前提に設定しますが、やり方は他のテーマでも同じだと思います。

まずは、管理画面から「外観」-> 「テーマエディタ」に移動します。

アルバトロスのテーマでは、「albatros」と「albatros_custom」の2つが存在しますが、カスタム用の「albatros_custom」の「sytle.css」を更新してください。

オレンジ枠で囲った部分にソースコードを書き込んで、SAVEする

これで、導入は完了です。

方法2: cssファイルの組み込み

スタイルを適用させるもう一つの方法は、ソースコードを「selfnote.css」のファイル名で保存し、自分のサーバー上に格納する形式です。

KOUKI
KOUKI

私の場合は、albatros配下に「selfnote.css」を格納しています。

selfnote.cssをサーバーに格納後、スタイルを適用したいHTMLファイルのheadタグに次のタグを追加してください。

KOUKI
KOUKI

私の場合は、albatrosを使っているので、「header.php」に次のタグを追加します。

尚、index.htmlの場合は、次の通りです。

これで準備はOKです。

アルバトロスは、オープンケージ社が販売しているテーマで、アルバトロス以外にも様々なテーマがあります↓

How To Use

selfnoteスタイルの簡単な使い方をご紹介します。

テキストカラー

primary color

primary color

secondary color

secondary color

success color

success color

danger color

danger color

warning color

warning color

text color

text color

マーカー

Primary Color Lorem ipsum dolor sit amet consectetur adipisicing elit.

Primary Color Lorem ipsum dolor sit amet consectetur adipisicing elit.

Secondary Color Lorem ipsum dolor sit amet consectetur adipisicing elit.

Secondary Color Lorem ipsum dolor sit amet consectetur adipisicing elit.

Success Color Lorem ipsum dolor sit amet consectetur adipisicing elit.

Success Color Lorem ipsum dolor sit amet consectetur adipisicing elit.

Danger Color Lorem ipsum dolor sit amet consectetur adipisicing elit.

Danger Color Lorem ipsum dolor sit amet consectetur adipisicing elit.

Warning Color Lorem ipsum dolor sit amet consectetur adipisicing elit.

Warning Color Lorem ipsum dolor sit amet consectetur adipisicing elit.

Info Color Lorem ipsum dolor sit amet consectetur adipisicing elit.

Info Color Lorem ipsum dolor sit amet consectetur adipisicing elit.

ボタン & 要素サイズの変更

Click Me! Click Me! Click Me! Click Me! Click Me! Click Me!

Click Me!

Click Me!

Click Me!

Click Me!

Click Me!

Click Me!

ボックス

破線型のボックス

破線型のアウトラインです。

破線型のアウトラインです。

破線型のアウトラインです。

破線型のアウトラインです。

破線型のアウトラインです。

破線型のアウトラインです。

テープ風のボックス

テープ風のアウトラインです

テープ風のアウトラインです

テープ風のアウトラインです

テープ風のアウトラインです

テープ風のアウトラインです

テープ風のアウトラインです

黒板風のボックス

ブログデザイン集 ポイント1: ブログのデザインは割と簡単だ
ポイント2: 自分のフレームワークを作るとGood!
ポイント3: ブログのカスタマイズは、サイトの個性にも表れる

タイトル付きボックス

タイトル
・ブログ愛してる!
タイトル
・ブログ愛してる!
タイトル
・ブログ愛してる!
タイトル
・ブログ愛してる!
タイトル
・ブログ愛してる!
タイトル
・ブログ愛してる!

関連記事用ボックスデザイン

テーブル

テーブルの基本構造

テーブルタグの外側をdivタグで囲み、divタグにクラスを設定してください。

head1 head2
body1 body2

シンプルなテーブル

テーマ 内容
データ データ
データ データ
データ データ
データ データ

ブラックテーブル

テーマ 内容
データ データ
データ データ
データ データ
データ データ

交互に背景を変えたテーブル

テーマ 内容
データ データ
データ データ
データ データ
データ データ

合わせて知っておきたい便利ツール

あとがき

いかがだったでしょうか。

このように「よく使うデザイン」をCSSファイルで管理するとブログデザインが比較的に楽になりますね^^

これからもブログのパーツでよさそうなものがあったら、追加していきたいと思います。

それでは、また!

ソースコード修正歴

日付 修正履歴 バージョン
2019/9/26 新規作成 v1
2019/10/17 関連記事用ボックスデザイン追加 v2

selfnote.css

コメントを残す