支援者募集中!仕事依頼はこちら

コピペでできるブログカスタマイズまとめ【HTML&CSS】

コピペでできるブログカスタマイズまとめ【HTML&CSS】 HTML&CSS

当ブログで紹介しているブログカスタマイズ記事をまとめていきます。

WordPressを使ってるブロガーやアフィリエイター向けに作っていますが基本的にHTML、CSSで作ってるので誰でも利用可能です。一部環境によってはできない場合があります。

HTML、CSSがわからなくても使えるようになってると思うので初心者さんでもぜひやってみてください!

ブログカスタマイズまとめ【ぽんひろ式】

左タイトル
  • リスト1
  • リスト2
  • リスト3
右タイトル
  • リスト1
  • リスト2
  • リスト3

二つ並べたボックスを一つにまとめて比較表のようなボックスを作ります。

箇条書き、文章、画像何でも入れられます。

参考 tableタグを使わない比較表デザイン!レスポンシブ対応!

【HTML/CSS】tableタグを使わない比較表デザイン!レスポンシブ対応!
HTMLとCSSで比較表を作りました!比較表はtableタグで作ることが一般的ですがtableタグは使いません!コピペで出来るようにサンプルをいくつか用意しました。スマホでも使えるようにレスポンシブ対応になっています。 好きにカスタマイズして使ってください!
タイトル
比較A比較B
見出し

強調文字

比較Aコンテンツ

強調文字

比較Bコンテンツ

見出し

強調文字

比較Aコンテンツ

強調文字

比較Bコンテンツ

もっとがっつり比較したい人向けの比較表!

スマホでも見やすくなっているのと見出しが追尾するようになっています。

参考 tableタグを使ったスマホで見やすい比較表!HTMLとCSSがわからない人でも簡単!

【HTML/CSS】tableタグを使った比較表!コピペで簡単!
HTMLとCSSがわからなくても使える「スマホで見やすいテーブルデザイン」。サイズが合わなくなったりスマホで見ると何かとストレスがあるtableタグをコピペで利用できるようにしました。レスポンシブ対応で画像を使った比較もできます。

  • STEP1
    タイトル1
    ここにテキストここにテキストここにテキスト
  • STEP2
    タイトル2
    ここにテキストここにテキストここにテキスト
  • STEP3
    タイトル3
    ここにテキストここにテキストここにテキスト
  • STEP4
    タイトル4
    ここにテキストここにテキストここにテキスト
  • STEP5
    タイトル5
    ここにテキストここにテキストここにテキスト

参考 HTMLとCSSでタイムラインデザイン!WordPressでショートコードも!

HTMLとCSSでタイムラインデザイン!WordPressでショートコードも!
JIN利用者からSANGO風のタイムラインを使いたいと依頼がありました。そこでHTMLとCSSを使ってWordPressのテーマに限らず使えるようにしました。さらにタイムラインのデザインアレンジ、例えばアイコンをマークにしたり、画像をマークにする方法も紹介します。
ここにタイトル
  • リスト1
  • リスト2
  • リスト3
吹き出し内容

アイコンと吹き出し付きのボックスです。

アイコンや吹き出しの内容はその都度変更可能です。

参考 アイコン吹き出し付きボックスをHTMLとCSSで作る!レスポンシブ対応!

アイコン吹き出し付きボックスをHTMLとCSSで作る!レスポンシブ対応!
アイコン画像と吹き出しを入れたボックスのカスタマイズです。HTMLとCSSでレスポンシブ対応になっています。画像や吹き出しの内容はもちろん自由自在に変えられます。コピペで簡単にできるようになっているのでぜひ使ってください。

image-sample
ここに画像の説明を入れます

画像のキャプションをどうにか可愛いくできないかと思って作りました!

コピペでできるようになっていますがサイズ調整などが必須です。

参考 画像キャプション(補足)をアイコンで超可愛くする【HTML/CSS】

画像キャプションをアイコンで超可愛くする【HTML/CSS】
HTMLとCSSで画像のキャプションを可愛いくします!ただそれだけ!目立つので読者の印象に残るのではないでしょうか。画像サイズ問わず使えるようになっていますが位置やサイズの調整は必須になっています。他にもカスタマイズをやってるのでよかったらご覧ください。

画像に使えるCSS コピペで簡単

コピペでできる画像に使えるCSSをまとめました。影をつけたり、明度を上げたり、角を丸くしたり…。

参考 ブログの画像に使えるCSSスタイル20選!コピペで簡単!

ブログの画像に使えるCSSスタイル20選!コピペで簡単!
ブログで画像を使うときに困ったことありませんか?真ん中に寄せたい、サイズを大きくしたい、影をつけたい、文字を上に入れたい、文字を周りに入れたい、角を丸くしたいなど。それらは全てCSSで簡単にできます。また、料理の写真は彩度、明るさ、コントラストを変更すると美味しそうにみえますがそれもCSSで変更可能です。

10%
10代
40%
20代
10%
30代
10%
40代
30%
50代

割合がわかる積み上げ棒グラフをHTMLとCSSで作ります。

ショートコードで簡単挿入できるようにしました。

参考 割合がわかる積み上げ横棒グラフ

【HTML/CSS】割合がわかる積み上げ横棒グラフ【WordPress】
割合がわかる積み上げ棒グラフをHTMLとCSSで作ります。コピペで簡単に誰でもできます。HTMLやCSSの操作が難しいWordPressユーザーのためにショートコードを使って簡単挿入できるようにしました。色のバリエーションは5色です。

JavaScriptを使わずにスライダーを作る方法。

縦に並ぶ画像やボックスを横並びにできます。

参考 CSSだけで縦に並ぶ要素を横スクロールにする方法!

CSSだけで縦に並ぶ要素を横スクロールにする方法!
JavaScript(jQuery)を使わずにCSSだけでスライダーを作る方法です。縦に並ぶ要素を何でも横に並べてスクロールにできます。コピペでできるようになっているので誰でも簡単に利用できます。縦に並べると少し邪魔な画像やボックスにオススメです。

記事終わりにボタンを出してクリック率をあげる

記事を読み終えたあたりでボタンを出し、クリック率をあげる方法です!
記事別にボタンは設定可能です。

参考 記事終わりにボタンを表示させてクリック率をあげる

記事終わりにボタンを表示させてクリック率をあげる【記事別に変更可能】
クリック率をあげて成約率をあげたい運営者は多いはず!そんな方のためにリンクを画面に固定追尾させる方法を紹介します。ただ常に表示されてると邪魔になって逆効果になる可能性があるので記事終わりに表示されるようにしました。コピペで簡単にできるようになっています。

これは一つの画像ですがその画像の上にリンクが4つ貼られています。

ツールを使えば簡単にできるので使い方など紹介しています。

参考 画像の上にリンクを複数貼る方法!ツールを使えば簡単にできる

画像の上にリンクを複数貼る方法!ツールを使えば簡単にできる
画像の上にリンクを貼りたいときありませんか?実は意外と簡単にできるのです。しかも複数リンク作れてレスポンシブにもできます。CSSは使わずにHTMLだけでできます。HTMLのイメージマップを使います。

スマホでもいつでも目次を開き、飛べるようにする方法です。

Cocoon編

参考 Cocoonスマホで目次追尾

Cocoonでスマホで目次追尾

JIN編

参考 JINスマホで目次追尾

JINカスタマイズ スマホで目次追尾

SANGO編

参考 SANGOスマホで目次追尾

sangoスマホで目次追尾カスタマイズ

Cocoon限定カスタマイズはこちら!

WordPressの無料テーマCocoon利用者向けのカスタマイズ記事もアップしてますので、よかったらご覧ください。

参考 Cocoonカスタマイズまとめ!おしゃれなものや機能性をあげるものなど!

Cocoonカスタマイズまとめ!コピペで簡単!
Cocoonのカスタマイズまとめです。おしゃれなものから機能性をあげるものまで紹介します。プロフィール、タブ切り替え、トップページ、リスト、ボックス、スマホのメニュー固定方法なども紹介していきます。

JIN限定カスタマイズはこちら!

有料WordPressテーマJIN利用者向けのカスタマイズ記事もアップしています。

サイト型トップページの作り方

参考 どこよりも簡単にJINのトップページをサイト型にカスタマイズ!

どこよりも簡単にJINのトップページをサイト型にカスタマイズ!
WordPress「JIN」のトップページをサイト型にカスタマイズする方法!記事がズラーっと並べてあるものを自由自在にオリジナルのトップページが作れるようになります。ブログカードを利用するので操作も簡単に!JINで新着記事を取得するショートコードも作りました。

スマホヘッダーを固定追尾させる

参考 【JIN】スマホヘッダーを固定追尾させるカスタマイズ

【JIN】スマホヘッダーを固定追従させるカスタマイズ
JINをスマホで見たときにヘッダーを固定するカスタマイズ。コピペで簡単にできます。常時固定、スクロール時に小さくする、スクロール時に非表示にする、の3通り選べるようになっています。また、JINの子テーマでJavaScriptを使う方法も公開しています。

記事一覧

HTML&CSS

ボックス分けされたナビを作る!回遊率をアップしよう!

HTML&CSS

記事終わりにボタンを表示させてクリック率をあげる【記事別に変更可能】

HTML&CSS

【HTML/CSS】割合がわかる積み上げ横棒グラフ【WordPress】

HTML&CSS

ブログの画像に使えるCSSスタイル20選!コピペで簡単!

HTML&CSS

HTMLとCSSでタイムラインデザイン!WordPressでショートコードも!

HTML&CSS

画像キャプションをアイコンで超可愛くする【HTML/CSS】

HTML&CSS

【HTML/CSS】tableタグを使った比較表!コピペで簡単!

HTML&CSS

CSSだけで縦に並ぶ要素を横スクロールにする方法!

HTML&CSS

アイコン吹き出し付きボックスをHTMLとCSSで作る!レスポンシブ対応!

HTML&CSS

【HTML/CSS】tableタグを使わない比較表デザイン!レスポンシブ対応!

ページトップへ