【WPテーマ問わず】コピペでできるブログカスタマイズまとめ

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

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

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

ボックス系カスタマイズ

tableタグを使わない比較表

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

上下の比較ができるリスト

参考 上下の比較ができるリストボックスを作る

アイコンと吹き出しが付いたボックス

ここにタイトル

• リスト1
• リスト2
• リスト3

吹き出し内容

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

テーブル系カスタマイズ

上左の見出しを固定スクロールできるテーブル

参考 見出し固定、さらにスクロールヒントを表示させるテーブル

スマホで見るとアコーディオンになるテーブル

参考 スマホで見るとアコーディオンになるテーブル

スマホでも見やすい比較表

参考 スマホに特化したテーブルデザイン！

画像系カスタマイズ

アイコン付いた画像キャプションを作る

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

画像に使えるCSSまとめ

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

その他カスタマイズ

リンクカードを作る

参考 リンクカードの作り方【HTML・CSS】

診断ツールを作る

30秒診断

あなたの余命はあと何年！？

※結果はフィクションです

1.運動は週にどのくらい行ってますか？

• 毎日
• 週2〜3回
• ほとんどしていない

2.脂っぽい食べものはどのくらい食べますか？

• 毎日
• 週2〜3回
• ほとんど食べない

2.脂っぽい食べものはどのくらい食べますか？

• 毎日
• 週2〜3回
• ほとんど食べない

2.脂っぽい食べものはどのくらい食べますか？

• 毎日
• 週2〜3回
• ほとんど食べない

3.睡眠時間はどれくらいですか？

• 6時間以下
• 6〜8時間
• 8時間以上

3.睡眠時間はどれくらいですか？

• 6時間以下
• 6〜8時間
• 8時間以上

3.睡眠時間はどれくらいですか？

• 6時間以下
• 6〜8時間
• 8時間以上

3.睡眠時間はどれくらいですか？

• 6時間以下
• 6〜8時間
• 8時間以上

3.睡眠時間はどれくらいですか？

• 6時間以下
• 6〜8時間
• 8時間以上

3.睡眠時間はどれくらいですか？

• 6時間以下
• 6〜8時間
• 8時間以上

3.睡眠時間はどれくらいですか？

• 6時間以下
• 6〜8時間
• 8時間以上

3.睡眠時間はどれくらいですか？

• 6時間以下
• 6〜8時間
• 8時間以上

3.睡眠時間はどれくらいですか？

• 6時間以下
• 6〜8時間
• 8時間以上

診断結果

あなたの寿命は32年です。

もう一度診断する

診断結果

あなたの寿命は52年です。

もう一度診断する

診断結果

あなたの寿命は56年です。

もう一度診断する

診断結果

あなたの寿命は60年です。

もう一度診断する

診断結果

あなたの寿命は65年です。

もう一度診断する

診断結果

あなたの寿命は72年です。

もう一度診断する

診断結果

あなたの寿命は87年です。

もう一度診断する

診断結果

あなたの寿命は92年です。

もう一度診断する

診断結果

あなたの寿命は98年です。

もう一度診断する

参考 【診断に使える】YES・NOチャートをWordPressで作る

タイムラインを作る

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

ボックスナビを作る

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

CVボタンを作る

参考 追尾と相性が良い【CVボタンデザイン】マイクロコピー付きでコンバージョン率をあげる

テキストのコピーボタンを作る

参考 ワンクリックでコピーするボタンを作る

棒グラフを作る

参考 棒グラフをコピペで作る

割合が一目でわかる棒グラフ

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

CSSだけで縦に並ぶ要素を横に並べてスライダーにする

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

記事終わりにボタンを表示させる方法

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

Twitter埋め込みツイートをプチカスタマイズ

参考 Twitter埋め込みツイートをカスタマイズ！CSSを変更する方法も

画像の上に複数のリンクを貼る方法

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

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

ドット絵を画像ではなくCSSで描く方法

参考 ドット絵を画像ではなくCSSで描く方法

【テーマ限定カスタマイズ】スマホで目次を固定追尾させる方法

スマホでも目次を固定表示させる方法

Cocoon

参考 Cocoonスマホで目次追尾

JIN

参考 JINスマホで目次追尾

SANGO

参考 SANGOスマホで目次追尾

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

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

【30通り以上！】Cocoonカスタマイズ！コピペで簡単！

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

ponhiro.com

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

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

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

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

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

ponhiro.com

2019.08.07

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

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

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

ponhiro.com

2019.08.20

記事一覧