はてなブックマークアプリ

アプリなら、
コメントが見やすい!

アプリで開く

アプリなら、コメントが見やすい!

アプリで開く

はてなブックマーク

  • はてなブックマークって?
  • アプリ・拡張の紹介
  • ユーザー登録
  • ログイン
  • Hatena

はてなブックマーク

トップへ戻る

  • 総合
    • 人気
    • 新着
    • 国内
    • 国際
    • 経済・金融
    • IT
    • 社会
    • 文化
    • 事件・事故
    • はてなブログ(総合)
  • 一般
    • 人気
    • 新着
    • 今日の出来事
    • 生活
    • グルメ
    • 新型コロナウイルス
    • 今後の「働き方」
    • 夏の風物詩
    • ビジネス・経営
    • 雑学
    • 将棋・囲碁
  • 世の中
    • 人気
    • 新着
    • 新型コロナウイルス
    • 働き方
    • 生き方
    • 地域
    • 医療・ヘルス
    • 教育
    • 恋愛
    • はてな匿名ダイアリー
  • 政治と経済
    • 人気
    • 新着
    • 政治
    • 経済・金融
    • 企業
    • 仕事・就職
    • マーケット
    • はてなブログ(政治と経済)
  • 暮らし
    • 人気
    • 新着
    • カルチャー・ライフスタイル
    • ファッション
    • 運動・エクササイズ
    • 結婚・子育て
    • 住まい
    • グルメ
    • お金
    • はてなブログ(暮らし)
    • 掃除・整理整頓
    • 雑貨
    • 買ってよかったもの
    • 旅行
    • 趣味
  • 学び
    • 人気
    • 新着
    • 人文科学
    • 社会科学
    • 自然科学
    • 英語
    • ビジネス・経営
    • デザイン
    • 法律
  • テクノロジー
    • 人気
    • 新着
    • IT
    • セキュリティ技術
    • はてなブログ(テクノロジー)
    • AI・機械学習
    • プログラミング
    • エンジニア
  • おもしろ
    • 人気
    • 新着
    • まとめ
    • ネタ
    • おもしろ
    • これはすごい
    • かわいい
    • 雑学
  • エンタメ
    • 人気
    • 新着
    • スポーツ
    • 映画
    • 音楽
    • アイドル
    • 芸能
    • サッカー
    • 将棋・囲碁
  • アニメとゲーム
    • 人気
    • 新着
    • マンガ
    • Webマンガ
    • ゲーム
    • 任天堂
    • PlayStation
    • アニメ
    • バーチャルYouTuber
    • オタクカルチャー
  • おすすめ

    掃除・片付け

『ぽんひろ.com』

  • 人気
  • 新着
  • すべて
  • 【WPテーマ問わず】コピペでできるブログカスタマイズまとめ

    3 users

    ponhiro.com

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

    • 暮らし
    • 2020/09/02 10:32
    • 【診断に使える】YES・NOチャートをWordPressで作る

      7 users

      ponhiro.com

      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時

      • テクノロジー
      • 2020/09/01 17:25
      • wordpress
      • 画像の上にリンクを複数貼る方法!ツールを使えば簡単にできる

        3 users

        ponhiro.com

        では、作り方を順に見ていきましょう! STEP1:画像を用意する当たり前ですが画像がなければ始まりません。 リンクを貼りたい画像を何でもいいので用意しましょう! ペイントでもイラストレーターでもCanvaでも何でも大丈夫です。pngでもjpgでもgifでも画像であれば大丈夫です。 STEP2:「HTML Imagemap Generator」で座標付きのコードを簡単作成!イメージマップの作成ツールはいろいろありますが「HTML Imagemap Generator」は日本語でシンプルなのでオススメです。 画像をドラック&ドロップし、開きます。 あとはリンクになる部分を図形ツールで作っていきます。 例では四角形の形をしたリンクなので短形を描くを選択します。 リンクになる部分をドラックします。 これを繰り返して全てのリンクを作っていきます。 これでコードが出来上がってるのでそれをコピペします。

        • 世の中
        • 2020/08/29 18:03
        • Useful Blocks | 痒いところに手がとどくWordPressブロックプラグイン

          4 users

          ponhiro.com

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

          • 暮らし
          • 2020/08/07 22:55
          • 追尾と相性が良い【CVボタンデザイン】マイクロコピー付きでコンバージョン率をあげる | ぽんひろ.com

            4 users

            ponhiro.com

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

            • テクノロジー
            • 2020/05/14 21:11
            • HTMLとCSSでタイムラインデザイン!WordPressでショートコードも!

              3 users

              ponhiro.com

              /********************************* * タイムライン *********************************/ .ptimeline-wrap{ margin:0 auto 2rem; } .ptimeline-wrap .ptimeline{ padding:0 !important; list-style:none !important; } .ptimeline-wrap .ptimeline-label { padding: 3px 0 0 2px; color: #aaa; font-size: 12px; font-weight: 500; } .ptimeline-wrap .ptimeline-title { font-size: 1.1em; font-weight: bold; line-height: 1.5; color

              • 学び
              • 2020/03/21 21:39
              • 【表】スマホで見るとアコーディオンになるテーブル【WordPressカスタマイズ】

                3 users

                ponhiro.com

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

                • 世の中
                • 2020/03/04 17:48
                • 【超簡単!】Cocoonトップページをスッキリとサイト型へカスタマイズ!

                  10 users

                  ponhiro.com

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

                  • テクノロジー
                  • 2019/12/07 18:10
                  • WordPress
                  • 【コピペ簡単】ヘッダー固定、スクロールヒントを表示させるテーブル【WordPress】

                    10 users

                    ponhiro.com

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

                    • テクノロジー
                    • 2019/10/08 18:34
                    • カスタマイズ
                    • WordPress
                    • CSS
                    • 開発
                    • ブログ
                    • 【Cocoon】コピペで簡単!タイトル入力可のおしゃれなボックスを作る!

                      4 users

                      ponhiro.com

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

                      • テクノロジー
                      • 2019/09/21 22:46
                      • ボックス分けされたナビを作る!回遊率をアップしよう!

                        6 users

                        ponhiro.com

                        「コンテンツ、埋もれてないですか?」 3クリックルールというWeb界に有名なお話があります。 目的のページに行くまで3クリック以内でたどり着けないとユーザーが去っていってしまうそうな。 まぁこれは後に否定されているのですがグッチャグチャなサイト、どこに何があるかわからないサイトはさすがに良くないです。 スムーズに目的地にいってもらうためにはナビゲーションが必要不可欠ですね。 ナビゲーションといえばヘッダーに配置するグローバルナビゲーションが一般的ですが今回は ボックスナビゲーションを作成します!

                        • 学び
                        • 2019/09/21 22:27
                        • 記事終わりにボタンを表示させてクリック率をあげる【記事別に変更可能】

                          4 users

                          ponhiro.com

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

                          • テクノロジー
                          • 2019/09/12 15:56
                          • WordPress
                          • CSS
                          • javascript
                          • ツール
                          • アフィリエイト
                          • どこよりも簡単にJINのトップページをサイト型にカスタマイズ!

                            4 users

                            ponhiro.com

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

                            • 世の中
                            • 2019/08/30 10:09
                            • ブログ
                            • 【Cocoon】プロフィールをオシャレで可愛くしてみた!

                              4 users

                              ponhiro.com

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

                              • テクノロジー
                              • 2019/08/23 22:38
                              • Wordpress
                              • ブログ
                              • あとで読む
                              • 【30通り以上!】Cocoonカスタマイズ!コピペで簡単!

                                8 users

                                ponhiro.com

                                詳細 今ココ!がわかる順序を表すタイムラインをHTMLとCSSで作る 通知エリアを二つにする 詳細 通知エリアを2つにする方法 メニューをカスタマイズ!PCのグローバルメニューをオシャレかつ利便性アップ! PCのグローバルメニューを上部に固定し、追尾させるカスタマイズです。 詳細 【Cocoon】ヘッダーメニューをオシャレにカスタマイズ!上部に固定追尾! スマホ時にヘッダー&メニューを固定する! スマホでスクロール時にヘッダーを固定追尾させるカスタマイズです。 下スクロール時に隠れ、上スクロール時に表示されます。 詳細 【Cocoon】スマホでヘッダーを固定追尾!メニューも開けるようにする! スマホ時にメニューを横スクロールできるようにする よく見るタイプのメニューのカスタマイズ方法です。 詳細 Cocoonのスマホメニューをカスタマイズ!コピペ可!横にスクロールできるようにするよ! コメ

                                • 学び
                                • 2019/08/02 22:06
                                • ぽんひろ.com

                                  5 users

                                  ponhiro.com

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

                                  • 学び
                                  • 2019/07/29 22:42
                                  • 【HTML/CSS】スマホに特化したテーブルデザイン!コピペで簡単

                                    6 users

                                    ponhiro.com

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

                                    • テクノロジー
                                    • 2019/07/21 19:22
                                    • css
                                    • あとで読む
                                    • 【Cocoon】全40通り!おしゃれなリスト(箇条書き)を作る!コピペOK!

                                      3 users

                                      ponhiro.com

                                      こんにちは、ぽんひろ(@ponhiroo)です。 今回はCocoonのリストをカスタマイズします。 (※Cocoonじゃなくても使えます。) Cocoonのリストってシンプルすぎて少し味気ないですよね。 いかにもカスタマイズしてくれって感じなので、やってしまいましょう! ちょっと長めの内容となっています。初心者さん向けに書きましたが、つまずいたらごめんなさい。 最初の設定は少し面倒ですが、1回やってしまえば楽なのでがんばってください! それでは手順を見ていきましょう!

                                      • テクノロジー
                                      • 2019/07/08 11:48
                                      • URL
                                      • 後で読む
                                      • CSS
                                      • アイコン吹き出し付きボックスをHTMLとCSSで作る!レスポンシブ対応!

                                        6 users

                                        ponhiro.com

                                        /************************************ ** アイコンつきリスト ************************************/ /* ボックス全体 */ .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-

                                        • テクノロジー
                                        • 2019/07/05 22:45
                                        • CSS
                                        • デザイン
                                        • CSSでドット絵を描く!知識必要なし!

                                          6 users

                                          ponhiro.com

                                          こんにちは!DQは5と7が好きなぽんひろ(@ponhiroo)です。 ドラクエ5のドット絵をCSSで作ってみました! ということで、今回は「CSSでドット絵を描く」。 この記事では <div class="dot-1"></div>.dot-1{ position:relative; width: 140px; height: 140px; margin:0 auto; } .dot-1::before { content: ""; position: absolute; top: 30px; left: 15px; width: 5px; height: 5px; background: transparent; box-shadow:5px 5px 0 transparent, 10px 5px 0 transparent, 15px 5px 0 transparent, 20px 5

                                          • 学び
                                          • 2019/07/01 00:14
                                          • 【HTML/CSS】tableタグを使わない比較表デザイン!レスポンシブ対応!

                                            57 users

                                            ponhiro.com

                                            /************************************ ** 比較表 ************************************/ /* 比較表全体 */ .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-

                                            • テクノロジー
                                            • 2019/06/30 02:09
                                            • css
                                            • デザイン
                                            • レスポンシブ
                                            • font
                                            • あとで読む
                                            • アイキャッチ画像の簡単な作り方!プロっぽく作るコツ!【写真編】

                                              12 users

                                              ponhiro.com

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

                                              • テクノロジー
                                              • 2019/06/03 18:58
                                              • SEO
                                              • ブログ
                                              • Webデザイン
                                              • 写真
                                              • デザイン
                                              • 画像
                                              • Cocoonスキン「Season(シーズン)」を作りました!【WordPress】

                                                5 users

                                                ponhiro.com

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

                                                • 学び
                                                • 2019/05/04 11:05

                                                このページはまだ
                                                ブックマークされていません

                                                このページを最初にブックマークしてみませんか?

                                                『ぽんひろ.com』の新着エントリーを見る

                                                キーボードショートカット一覧

                                                j次のブックマーク

                                                k前のブックマーク

                                                lあとで読む

                                                eコメント一覧を開く

                                                oページを開く

                                                はてなブックマーク

                                                • 総合
                                                • 一般
                                                • 世の中
                                                • 政治と経済
                                                • 暮らし
                                                • 学び
                                                • テクノロジー
                                                • エンタメ
                                                • アニメとゲーム
                                                • おもしろ
                                                • アプリ・拡張機能
                                                • 開発ブログ
                                                • ヘルプ
                                                • お問い合わせ
                                                • 公式Twitter
                                                • ホットエントリー

                                                はてなのサービス

                                                • はてなブログ
                                                • はてなブログPro
                                                • 人力検索はてな
                                                • はてなブログ タグ
                                                • はてなニュース
                                                • App Storeからダウンロード
                                                • Google Playで手に入れよう
                                                Copyright © 2005–2022 Hatena. All Rights Reserved.
                                                設定を変更しましたx