Twitterはこちら仕事依頼はこちら

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

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

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

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

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

ボックス系カスタマイズ

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

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

唐辛子比較
辛い

  • ドラゴンズ・ブレス
  • キャロライナ・リーパー
  • トリニダード・モルガ・スコーピオン
  • トリニダード・スコーピオン・ブッチ・テイラー

甘い

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

ここにタイトル
  • リスト1
  • リスト2
  • リスト3
吹き出し内容

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

テーブル系カスタマイズ

上部見出し上部見出し上部見出し上部見出し上部見出し上部見出し上部見出し
1行目:見出し1行目:ここにテキストor画像1行目:ここにテキストor画像1行目:ここにテキストor画像1行目:ここにテキストor画像1行目:ここにテキストor画像1行目:ここにテキストor画像
2行目:見出し2行目:ここにテキストor画像2行目:ここにテキストor画像2行目:ここにテキストor画像2行目:ここにテキストor画像2行目:ここにテキストor画像2行目:ここにテキストor画像
3行目:見出し3行目:ここにテキストor画像3行目:ここにテキストor画像3行目:ここにテキストor画像3行目:ここにテキストor画像3行目:ここにテキストor画像3行目:ここにテキストor画像

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

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

見出しここにコンテンツここにコンテンツここにコンテンツここにコンテンツ
見出しここにコンテンツここにコンテンツここにコンテンツここにコンテンツ
見出しここにコンテンツここにコンテンツここにコンテンツここにコンテンツ
見出しここにコンテンツここにコンテンツここにコンテンツここにコンテンツ

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

タイトル
比較A比較B
見出し

強調文字

ここにテキストここにテキストここにテキストここにテキストここにテキスト

強調文字

ここにテキストここにテキストここにテキストここにテキストここにテキスト

見出し

強調文字

ここにテキストここにテキストここにテキストここにテキストここにテキスト

強調文字

ここにテキストここにテキストここにテキストここにテキストここにテキスト

見出し

強調文字

ここにテキストここにテキストここにテキストここにテキストここにテキスト

強調文字

ここにテキストここにテキストここにテキストここにテキストここにテキスト

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

画像系カスタマイズ

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

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

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

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

その他カスタマイズ

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

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

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

CVボタンを作る

  • 簡単5分登録
  • 別途料金は発生しません


無料
公式HPはこちら

リンク先:https://www.google.com/

現在キャンペーン中!終了まで残りわずか!

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

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

このテキストをコピーします。

何行あってもコピーします。

一瞬でコピーできます。

Copy

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

Twitter

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

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

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

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

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

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

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

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

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

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

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

Cocoon
Cocoonでスマホで目次追尾

参考 Cocoonスマホで目次追尾

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

参考 JINスマホで目次追尾

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

参考 SANGOスマホで目次追尾

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

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

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

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

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

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

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

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

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

記事一覧

上下の比較ができるリストボックスを作る【コピペカスタマイズ】

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

【表】スマホで見るとアコーディオンになるテーブル【WordPressカスタマイズ】

【jQuery】ワンクリックでコピーするボタンを作る【WordPress】

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

【コピペ簡単】ヘッダー固定、スクロールヒントを表示させるテーブル【WordPress】

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

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

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

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

ページトップへ