はてなブックマーク

当ブログで紹介しているブログカスタマイズ記事をまとめていきます。 WordPressを使ってるブロガーやアフィリエイター向けに作っていますが基本的にHTML、CSSで作ってるので誰でも利用可能です。一部環境によってはできない場合があります。 HTML、CSSがわからなくても使えるようになってると思うので初心者さんでもぜひやってみてください！

Twitterでたまにトレンドに入る「診断メーカー」や「診断ドットコム」のような診断ツールをブログにも取り入れたい！ そう思い作ったのがこちら。 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時

ブロガー、アフィリエイター向け グーテンベルクプラグイン WordPress 5.0から搭載された直感的に記事の作成ができるエディター「グーテンベルク」。 Useful BlocksはWordPressグーテンベルク専用プラグインです。 自由にスタイル変更可能 記事作成に役立つ複数のブロック 「あったら便利」な記事作成に役立つブロックスタイルが利用できます。 直感的な操作で細かいデザインのアレンジも可能です。 カスタマイズする必要ありません インストールするだけ！テーマ関係なく使える HTML・CSSの知識がなくても簡単にスタイルの変更が可能です。 WordPressテーマ関係なくプラグインを入れるだけで簡単にご利用いただけます。

CVボタンを作ります！ 作成するCVボタンがこちら。 簡単5分登録 別途料金は発生しません 無料 公式HPはこちら リンク先：https://www.google.com/ 現在キャンペーン中！終了まで残りわずか！ PCで見てる方はスクロールしてサイドバーもご覧ください！ 追尾ウィジェットに全く同じHTMLを入れてます。 注意 HTMLに不慣れな方は難しいかもしれません。 追尾は対応してるWordPressテーマのみ使えます。 WordPressユーザー向けに書いてますがそれ以外でも使えると思います。 では早速作り方を見ていきましょう。 マイクロコピー付きCVボタンの作り方 手順は以下の通りです。 手順 STEP1CSSコピペstyle.cssにコードをコピペ この手順を見る STEP2HTMLコピペ記事エディターにコードをコピペ この手順を見る STEP3追尾ウィジェット設定必要であれば

当サイトでは、Amazonアソシエイトをはじめとした第三者配信のアフィリエイトプログラムにより商品・サービスをご紹介、適格販売により収入を得ています。 「うわっ…私のテーブル、崩れてるっ…！？」とお悩みの皆さん、こんにちは。ぽんひろです。 そんな悩みも今日でおしまいです。テーブルのストレスから解放してさしあげましょう。 今回のカスタマイズはこちら！

STEP1:トップページ用の固定ページを新規作成しよう！まずは固定ページを作成していきます。 「固定ページ→新規追加」を選択！ 固定ページのタイトルはサイト名や狙っているキーワードを入れてください。 下記コードをビジュアルエディタではなく、テキストエディタで入力してください。 <h2>新着記事</h2> [new_list count="6" type="large_thumb"] <div class="p-button"><a href="./articles">もっと見る <i class="fa fa-chevron-circle-right"></i></a></div> <h2>おすすめ記事</h2> [new_list count="2" tags="0" type="large_thumb"] <h2>カテゴリ1</h2> [new_list count="2" cats=

当サイトでは、Amazonアソシエイトをはじめとした第三者配信のアフィリエイトプログラムにより商品・サービスをご紹介、適格販売により収入を得ています。

<div class="box1-green"> <div class="box-title">ここにタイトルを入力します</div> <p>ここにコンテンツを入力します。</p> </div>.box1-green{ margin: 2em auto; /* ボックスの余白 */ background: #eef8f3; /* ボックス背景色 */ border-radius:4px; /* ボックス角丸 */ max-width:600px; /* ボックス横幅 */ padding: 3.5em 2em 1.5em; /* ボックス内側余白 */ position:relative; /* 配置に関するもの(ここを基準に) */ } .box1-green .box-title { background: #58be89; /* タイトル背景色 */ color: #fff; /*

当サイトでは、Amazonアソシエイトをはじめとした第三者配信のアフィリエイトプログラムにより商品・サービスをご紹介、適格販売により収入を得ています。

function.phpにコードをコピペプロフィール説明欄でHTMLタグを使えるようにする処理をfunction.phpに書きます。 以下のコードを「WordPress管理画面→外観→テーマエディター→function.php(子テーマ)」にコピペしてください。 注意必ずバックアップを取ってからやってください。 //プロフィール欄でHTMLコードを使えるようにする remove_filter('pre_user_description', 'wp_filter_kses');これで準備OKです。 手順2：WordPressのプロフィール設定プロフィール設定がまだの方はプロフィール設定をまずしましょう。 「WordPress管理画面→ユーザー→あなたのプロフィール」を選択してください。 手順2-1：プロフィールの名前を設定しよう！ ニックネームを入力するとブログ上の表示名が変えられるようにな

Webデザイナーが個人で運営するブログ。Web制作、デザイン、WordPressカスタマイズ(Cocoon)、ブログ運営、アフィリエイトに関することを中心に紹介をしていきます！

当サイトでは、Amazonアソシエイトをはじめとした第三者配信のアフィリエイトプログラムにより商品・サービスをご紹介、適格販売により収入を得ています。 比較表第2弾！スマホに特化したテーブルデザインを作りました！ 第1弾がこちら！ 関連 tableタグを使わない比較表デザイン！ 前回はtableタグを使わずに比較表を作る方法を紹介しました。 今回はtableタグを使って表を作りますがtableタグってスマホでみると「ギューっ」って詰まって見にくくなることありませんか？ 調整するのも面倒でなるべく使いたくないって人もいるのではないでしょうか。 そこで今回、HTML、CSSがわからなくてもコピペで使えるレスポンシブのテーブルを作りました。

当サイトでは、Amazonアソシエイトをはじめとした第三者配信のアフィリエイトプログラムにより商品・サービスをご紹介、適格販売により収入を得ています。 こんにちは、ぽんひろ(@ponhiroo)です。 今回はCocoonのリストをカスタマイズします。 (※Cocoonじゃなくても使えます。) Cocoonのリストってシンプルすぎて少し味気ないですよね。 いかにもカスタマイズしてくれって感じなので、やってしまいましょう！ ちょっと長めの内容となっています。初心者さん向けに書きましたが、つまずいたらごめんなさい。 最初の設定は少し面倒ですが、1回やってしまえば楽なのでがんばってください！ それでは手順を見ていきましょう！

/************************************ ** アイコンつきリスト ************************************/ /* ボックス全体 */ .iconbox{ margin: 0 auto 2em; /* 余白 */ background: #fef9ed; /* 背景色 */ border-radius:4px; /* 角丸 */ max-width:600px; /* 横幅 */ padding: 0; /* 余白 */ box-shadow: 0 1px 3px rgba(0, 0, 0, .2); /* 影 */ } /* ボックスタイトル */ .iconbox .box-title { font-size: 18px; /* 文字サイズ */ background: #fdc44f; /* 背景色 */ text-

/************************************ ** 比較表 ************************************/ /* 比較表全体 */ .compare-box { display:-webkit-box;/* 配置 */ display:-ms-flexbox;/* 配置 */ display:flex;/* 配置 */ max-width:600px;/* 横幅 */ margin: 0 auto 2rem;/* 余白 */ border-radius:4px;/* 角丸 */ box-shadow: 0 1px 3px rgba(0, 0, 0, .2); /* 影 */ background: #fef9ed; /* 背景色 */ } /* 左のボックス、右のボックス */ .compare-box .compare-left-

当サイトでは、Amazonアソシエイトをはじめとした第三者配信のアフィリエイトプログラムにより商品・サービスをご紹介、適格販売により収入を得ています。 こんにちは、ぽんひろ(@ponhiroo)です。 アイキャッチ画像についてお悩みですか？難しいし、面倒ですよね。 ただ、ルール通りにやればアイキャッチ制作ってそこまで難しくないんです。 ということで今回はアイキャッチ画像を簡単にオシャレにプロっぽく作る方法を紹介します！ ちなみに例で紹介しているアイキャッチ画像はPhotoshop、Illustratorを使って制作していますが、無料ツールの「Canva」でも作れる内容になっています。

当サイトでは、Amazonアソシエイトをはじめとした第三者配信のアフィリエイトプログラムにより商品・サービスをご紹介、適格販売により収入を得ています。 Cocoon愛用者の方もそうでない方もこんにちは！ぽんひろ(@ponhiroo)です。 タイトルの通り、Cocoonのスキンを作成したので紹介します！ 名前は「Season(シーズン)」です。春夏秋冬の4種類の配色に分けられたスキンになっています。 オリジナルのスタイルは20種類以上！既存のスタイルも大幅チェンジしました！ Cocoonは元々シンプルなデザインが特徴でしたが、どこか「無機質な男らしさ」を感じる点がありました。 それはそれで良いのですが女性がデフォルト(最初の状態)で使うにはちょっと抵抗があるかなと。カスタマイズをしたくても初心者だとどうしても難しかったりしますよね。 そういった方に向けて、優しさを感じられるデザインを目指して