はてなブックマーク

HOMEHTML&CSS【CSS】olタグのカスタマイズ！番号に装飾を加える方法 【CSS】olタグのカスタマイズ！番号に装飾を加える方法 HTML&CSS HTMLでolタグの番号に「色」や「装飾」を付けたい時ってありますよね。 デフォルトのolタグだと、テキストに指定した「色」しか反映されませんし「装飾」をすることもできません。 そこで今回はolタグのカスタマイズ方法についてご紹介していきます。 olタグの装飾サンプル まずはどのように装飾ができるのかサンプルを見てみましょう。 HTML <ol> <li>番号つきのリストが入ります。番号つきのリストが入ります。番号つきのリストが入ります。</li> <li>番号つきのリストが入ります。</li> <li>番号つきのリストが入ります。番号つきのリストが入ります。番号つきのリストが入ります。</li> </ol> HTMLは通常通りに記述

HOMEWordPress【WordPress】httpからhttpsへのリダイレクト設定 【WordPress】httpからhttpsへのリダイレクト設定 WordPress 契約しているサーバーで、任意のドメインにSSL化を設定したら、https://〜でホームページにアクセスすることが出来るようになります。 しかし普段そのホームページにアクセスしているユーザーは、SSL化されたことに気付いていませんので、http://〜のままアクセスしてしまいます。 今回紹介するhttpからhttpsへのリダイレクトを設定することにより、http://〜にアクセスしたユーザーであっても、強制的にhttps://〜へ誘導することが出来ます。 それではリダイレクトの設定に進んでいきましょう。 WordPressの管理画面の設定 管理画面から「設定 ＞ 一般」へ進みます。 「WordPress アドレス（

HOMEWordPressWordPressでタグを一覧取得したり、単体で取得したり、リンク付きで取得したり WordPressでタグを一覧取得したり、単体で取得したり、リンク付きで取得したり WordPress WordPressでタグを取得する場合、ヘッダーやフッター、サイドバーのような共通パーツで取得したり、記事一覧ページや記事詳細ページで取得することがあります。 これらのようなシーンで使用することができるコードをまとめてみました。 登録されているタグをすべて取得 ここでは「 get_tags 」というタグ取得の関数を使用しています。 登録されているタグをすべて取得するので、主にヘッダーやフッター、サイドバーなどで使用します。 タグの取得 <?php $tags = get_tags(); foreach( $tags as $tag) { echo $tag->name; } ?>

HOMEWordPress絶対に失敗しないWordPressの移行手順！データベースからファイル一式をバックアップして移行する方法 絶対に失敗しないWordPressの移行手順！データベースからファイル一式をバックアップして移行する方法 WordPress プラグインを使用せずに、WordPressを移行する方法を紹介します。 すごく簡単なので、是非試してみてください。 データベースの新規作成 まず最初に行うことは、移行先のレンタルサーバーでデータベースを新規作成します。 作成方法はレンタルサーバーのコントロールパネルにログインして作成。もしくはMySQLで作成します。 WordPressのデータベース名MySQLのユーザー名MySQLのパスワード 任意の名前で上記項目を設定してください。 移行元のWordPress内のファイルをバックアップする FileZilla（ファイルジラ）などのF

フォーム作成に便利なWordPressプラグインMW WP Form。 CSSでレイアウトをカスタマイズする際など、どのようなHTMLが出力されるのか事前に知りたりとき用にコードをまとめてみました。 入力項目 日付

HOMEWordPressWordPress カスタムタクソノミーのタームをすべて取得したり、単体で取得したり、リンク付きで取得したりする方法 WordPress カスタムタクソノミーのタームをすべて取得したり、単体で取得したり、リンク付きで取得したりする方法 WordPress カスタムタクソノミーのタームを取得する方法をご紹介します。 ヘッダー、フッター、サイドバーのような共通パーツではカスタムタクソノミーのタームをすべて取得したり、投稿一覧ページや投稿詳細ページでは、投稿に属するタームを取得する方法になります。 カスタムタクソノミーのタームをすべて取得する カスタムタクソノミーのタームをすべて取得する場合、次の3つの関数のいずれかを使用する方法があります。 get_terms get_categories wp_list_categories 投稿されているタームをすべて取得するので

HOMEJavaScriptスクロールすると途中で表示される「トップへ戻るボタン」の実装。さらにフッター手前で止める場合の実装。 スクロールすると途中で表示される「トップへ戻るボタン」の実装。さらにフッター手前で止める場合の実装。 JavaScript スクロールすると途中で表示される「トップへ戻るボタン」の実装 See the Pen scroll-to-top_standard by RECOOORD (@recooord) on CodePen. 上記デモを下へスクロールしてください。 「 トップへ戻るボタン 」が途中で表示され、クリックするとページトップに戻ります。 今回はこちらの実装方法を紹介していきます。 HTMLの記述 <section>SCROLL DOWN</section> <p class="button">㊤</p> 「 section 」タグはページのコンテンツ部

HOMEJavaScriptページ内リンク（アンカーリンク）で特定の場所までスムーススクロールさせる ページ内リンク（アンカーリンク）で特定の場所までスムーススクロールさせる JavaScript jQueryでスムーススクロールを実装します。 スムーススクロールとはページ内リンク（アンカーリンク）までの距離をアニメーションして移動する実装になります。 ホームページ制作では必ず使用する場面がありますので覚えておきましょう。 サンプルをみる スムーススクロールとはどんなものなのか。まずは上記のサンプルを確認してみましょう。 上部のリンクをクリックすると、指定したリンク先までスクロールしていきます。 スムーススクロールのJavaScript $(function(){ $('a[href^="#"]').click(function(){ //スクロールのスピード var speed = 50

HOMEJavaScript【jQuery】ウィンドウをスクロールすると下からふわっとコンテンツがフェードインする実装 【jQuery】ウィンドウをスクロールすると下からふわっとコンテンツがフェードインする実装 JavaScript ※文章・コード見直しの為、2020年10月30日に更新しました。 フェードインアニメーションのサンプルは以下を参照してください 上記のフェードインアニメーションのサンプルを下にスクロールしてみてください。下からふわっと要素が表示されていると思います。 今回はこのような実装ができるように紹介していきます。 HTMLの記述 <ul> <li class="animation"><img src="https://unsplash.it/300/200" alt=""></li> <li class="animation"><img src="https://uns

HOMEHTML&CSSCSS コピペだけで実装できるローディングアニメーション！ CSS コピペだけで実装できるローディングアニメーション！ HTML&CSS ※文章・コード見直しの為、2020年11月18日に更新しました。 ローディングアニメーションは基本的にHTMLとCSSで作成されています。 今回は初心者の方でも簡単に実装出来るように、ローディングアニメーションを参考サイトから選択して、コピペだけで実装していきたいと思います。 まずはローディングアニメーションの参考サイトを２つご紹介します。 参考サイトからローディングアニメーションを選択する Loaders.css https://connoratherton.com/loaders シンプルなアニメーションや可愛いもの、特徴的なものまで揃っています。 Single Element CSS Spinners https://pro

HOMEWordPressMW WP Form バリデーションルールを追加しエラーメッセージをカスタマイズする MW WP Form バリデーションルールを追加しエラーメッセージをカスタマイズする WordPress カスタマイズのサンプルコード 以下コードをfunctions.phpに記述してください。 function my_validation_rule( $Validation, $data, $Data ) { $Validation->set_rule( 'name', 'required', array( 'message' => 'どれか１つ選択してください' ) ); $Validation->set_rule( 'name', 'noEmpty', array( 'message' => 'メッセージを入力してください' ) ); $Validation->set_ru

HOMEHTML&CSSCSSで画像を正方形にトリミングして縦横比を維持したまま可変してくれる方法 CSSで画像を正方形にトリミングして縦横比を維持したまま可変してくれる方法 HTML&CSS Photoshopでトリミングした画像をそのまま表示できればいいのですが、Webサイトだと画像サイズが均等じゃないものを表示する場面が出てきます。 例えばWordPressのようなCMSで、画像を出力する際など投稿者によってサイズがバラバラだったりします。 そこで今回はCSSで画像をトリミングし、縦横比を維持したまま可変してくれる方法を紹介していきます。 実装のサンプル まずはデモをご覧ください。 PCで見られている方はウィンドウサイズを縮めたりしてみてください。画像の縦横比は維持されていると思います。 基本的にはHTMLとCSSだけで実装することが出来ます。 HTMLの記述 <ul> <li><i