Lognote

ネット集客に強い整体院サイトを制作

box-css-thumbnail

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

公開日:2016-05-03
最終更新日:

Pocket

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

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

今回は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の使い方は以下の記事で紹介してます。

以上、「シンプルだけど目立つ!ブログ記事内で使えるボックスCSSカスタマイズ」という記事をお届けしました。

-ブログ運営
-,

この記事のタイトルとURLをコピーする

オススメ商品はこちら!

シンプルだけど目立つ!ブログ記事内で使えるボックスCSSカスタマイズ
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

nth-child-comparison-table-thumbnail

疑似クラスnth-childで作るおしゃれな比較風テーブル

擬似クラスnth-childを使ったおしゃれな比較風テーブルのカスタマイズ方法を紹介します。

hatebu-favorite-button-thumbnail

はてなブックマークのお気に入りユーザー追加ボタンをブログ記事内に追加する

どうしてはてなブックマークにはブログ用フォローボタンがないのでしょうか! はてなブックマークには記事をブックマ …

ogp-cache-clear-thumbnail

コピペで簡単!OGPキャッシュ更新フォームの設置用コード

WordPressでサムネを新しいものに変えると、Facebookにリンクを貼ったときの画像が更新されずに真っ白に...

moving-from-lolipop-to-xserver-thumbnail

WordPressをロリポップからエックスサーバーに移転する方法

WordPressブログをロリポップからエックスサーバーに移行したので、そのときの全工程を備忘録として残したい …

facebook-link-image-reload-thumbnail

Facebookに表示されなくなったサムネイル画像を再読み込みさせる方法

ブログのサムネイルを変えると、Facebookでシェアした画像のリンクが外れてサムネイルが消えてしまうこ...

コメントを入力

日本語が含まれない投稿は無視されます。(スパム対策)

トラックバックURL

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士


Lognote
2017/9/12
ご報告いただきありがとうございます! それは知りませんでした! メーカーの違いとかもあるのでしょう...
通りすがり
2017/9/12
比較的新しいカメラではサムネイル見れないらしいですよ。 うちもコーデック入れましたが2016年発売カ...
Lognote
2017/9/05
>> 堀田様 お役に立てて何よりです! 他に良い予約プラグインが出てくれればいいんですけ...
堀田
2017/9/05
ありがとうございました。 PHPを7 にしたらエラー吐き出して、有料版は PHP7 対応なんで有料...
Lognote
2017/8/16
>> たろ様 子テーマのコピー方法を省略しておりました。 解説記事を書きましたので、よろ...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい