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

ブログカスタマイズまとめ【ブロガー、アフィリエイター向け】

ブログカスタマイズまとめ カスタマイズ

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

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がわからない人でも簡単!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

コメント

ページトップへ