はてなブックマーク

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時

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

プロフィールはこちら Webデザイナー×ブロガーで現在3サイト運営してます。1サイト月間43万PV達成！当ブログは2019年2月START！ デザインと動物が大好きなアラサーおじさん。 依頼も引き受けてるのでお気軽にご連絡を！

プロフィールはこちら Webデザイナー×ブロガーで現在3サイト運営してます。1サイト月間43万PV達成！当ブログは2019年2月START！ デザインと動物が大好きなアラサーおじさん。 依頼も引き受けてるのでお気軽にご連絡を！

<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; /*

プロフィールはこちら Webデザイナー×ブロガーで現在3サイト運営してます。1サイト月間43万PV達成！当ブログは2019年2月START！ デザインと動物が大好きなアラサーおじさん。 依頼も引き受けてるのでお気軽にご連絡を！

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

比較表第2弾！スマホに特化したテーブルデザインを作りました！ 第1弾がこちら！ 関連 tableタグを使わない比較表デザイン！ 前回はtableタグを使わずに比較表を作る方法を紹介しました。 今回はtableタグを使って表を作りますがtableタグってスマホでみると「ギューっ」って詰まって見にくくなることありませんか？ 調整するのも面倒でなるべく使いたくないって人もいるのではないでしょうか。 そこで今回、HTML、CSSがわからなくてもコピペで使えるレスポンシブのテーブルを作りました。

こんにちは、ぽんひろ(@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-

こんにちは、ぽんひろ(@ponhiroo)です。 アイキャッチ画像についてお悩みですか？難しいし、面倒ですよね。 ただ、ルール通りにやればアイキャッチ制作ってそこまで難しくないんです。 ということで今回はアイキャッチ画像を簡単にオシャレにプロっぽく作る方法を紹介します！ ちなみに例で紹介しているアイキャッチ画像はPhotoshop、Illustratorを使って制作していますが、無料ツールの「Canva」でも作れる内容になっています。