整体師がWordPressテーマ作りました

Healerは、スマホ&タブレット対応・SEO対策済みの整体院・サロン専用テーマです。

お客様の声やWeb予約カレンダー表示機能など便利機能が搭載されています。

公式サイト

シンプルだけど目立つ!ブログ記事内で使えるボックスCSSカスタマイズ

box-css-thumbnail

ポイントや注意事項などを目立たせて表示するためにはボックス表示がオススメです。

テキストだけずらーっと並んだ記事は読んでいて結構苦痛。間にボックス表示をかませることでちょっと小休止。記事がぐっと読みやすくなります。

今回は5種類用意してみました。シンプルなものからちょっと変わったものまでありますので、自由にカスタマイズしてみてください。

シンプルなボックスカスタマイズ5種

ノーマルボックス

ボーダーで囲まれたシンプルなボックスです。

See the Pen ノーマルボックス by Lognote (@lognote) on CodePen.

アイコンフォント付きボックス

アイコンフォント「Font Awesome」を使ったボックスです。

Font Awesomeの使い方は以下の記事で紹介しています。

ボーダーやカラー、アイコンなど自由に入れ替えて遊んでみてください。

See the Pen アイコン付きボックス by Lognote (@lognote) on CodePen.

アイコンフォント付きボックス(タグなしver)

テキストがないバージョンです。

See the Pen webアイコン付きボックス(タグなしver) by Lognote (@lognote) on CodePen.

テキスト付きボックス

アイコンがないバージョンです。

See the Pen テキスト付きボックス by Lognote (@lognote) on CodePen.

テキスト付きリストボックス

参考サイトや過去記事の紹介をするときにとても目立つのでオススメ! 外部リンクにはtarget="_blank"を付けましょう。

下段のボックスにはサイト内リンクとわかるように右下にブログタイトルが入れられます。

See the Pen テキスト付きリストボックス by Lognote (@lognote) on CodePen.

ボックスのタグのフォントはGoogle Web FontsのLoraを使っています。こちらも好みに合わせて変更可能です。

Google Web Fontsの使い方は以下の記事で紹介してます。

box-css-thumbnail
この記事が良かったら、いいねして
最新記事をチェックしてください!

Twitterで

コメントを残す

入力エリアすべてが必須項目です。
メールアドレスが公開されることはありません。

Gravatarに登録すると、お好きな画像をアバターに設定できます。