IT the Best

HTML/CSS/JSに関する情報やはてなブログのカスタマイズに関する情報を掲載しています。

slideToggle() - たった1行でできる表示/非表示の切り替え | jQuery Introduction

slideToggle()slideToggle()メソッドはHTML要素の表示/非表示を切り替える時に使います。1行だけで表示/非表示を切り替えることができるのでとても便利です。...jQueryの設定方法 - jQueryを使用するまでの手順 |【jQuery】 - IT the Best...$("tag.classna…

jQueryの設定方法 - jQueryを使用するまでの手順 |【jQuery】

jQuery使用方法読み込み外部から読み込む方法(CDN)jQuery:Google:Microsoft:「jQuery(公式)」「Google」「Microsoft」が公開しているjQueryファイルを読み込んでjQueryを使用します。三つのいずれかをheadタグ内に記述してjQueryを使用することができます…

toggleClass() - 条件式を書かずにクラスの追加/削除をする | jQuery Introduction

toggleClass()このメソッドは、引数に指定されたクラスの追加または削除を行います。条件式を書くことなく容易にクラスの切り替えができます。例クラス"sample2"の追加と削除(クラスの切り替え) 追加$("div.sample1").toggleClass("sample2")

opacity - 透明度を変更し画像などをぼかす -hover処理あり- | CSS Introduction

opacityCSSのopacityプロパティはHTML要素の透明度を変更することができ、画像にぼかしをいれたり透明にしたりすることができます。マウスオーバー時に画像をぼかすことで、画像の強調表示も可能です。opacity: 透明度(0.0~1.0); ...見本、例(html,css)あり.…

transform:scale() - マウスホバー時に写真などを縮小/拡大する | CSS Introduction

transform:scale()関数をマウスホバー時に設定して写真などの要素を強調表示させる。transform:scale()transformプロパティのscale()関数は、要素の大きさを水平方向と垂直方向に対して変更することができます。要素をマウスホバー時に拡大/縮小することで強…

【サンプルあり】リアルタイムに値を取得/表示するスライダー(レンジバー) -コピペ可能- |【HTML】【JavaScript】

スライダーの値をリアルタイムに取得HTMLのinput要素のtype:rangeは、スライダーによる数値の指定ができます。スライダーの値(value)をリアルタイムに取得して表示させる方法を、HTMLとJavaScriptで書き記しました。JavaScriptにjQueryを使用しています。(…

【見本あり】簡単1行!階層リストを開閉式リストにする【jQueryPlugin】| listfolding.js

たった一行でHTMLの多階層リストをクリックで開閉可能にする【jQueryPlugin】HTML-JavaScript(JS)-jQueryプラグイン-サンプルありjQueryとプラグインファイル...DEMO...使用方法「HTMLUListElement」には入れ子になったリスト(階層リスト)のトップリスト(最…

GoogleAdSense広告のコードを改変してレスポンシブ対応にする方法 |【Google AdSense】

GoogleAdSense(グーグル アドセンス)広告を固定サイズで掲載すると画面サイズ(ページレイアウト)に応じたレスポンシブサイズでなくなり、画面からはみ出したデザインになる可能性があります。当記事は、それを防ぐためにGoogleAdSenseの固定サイズの広告ユニ…

JavaScript/CSSコード圧縮 便利簡単な無料圧縮ツール【Minifier】

JavaScript/CSSコードの圧縮が簡単にできる無料圧縮ツール【Minifier】の紹介記事になります。リンクJavaScript MinifierCSS Minifier使用方法圧縮 コードを貼り付けてボタンを押すだけで簡単に圧縮することができます。JavaScript Minifier左側のテキストエ…

記事の目次をサイドバーに表示して記事を読みやすくしよう!【はてなブログカスタマイズ】

今回のはてなブログカスタマイズは、記事の目次をサイドバーにも表示するものです。記事のよこに目次を置くことで読んでいるところを把握することができ、記事が読みやすくなります。記事が長い場合に効果的です。記事の目次を表示するには、記事編集画面で…

【WEBデザイン】背景色と文字色の組み合わせ -キレイめカラー集-

個人的に相性が良いと思った背景色と文字色の組み合わせを、備忘録として書き記している記事です。 「salmon」「white,#555」 「salmon」「white,#555」 background-color: salmon;color: white; background-color: salmon;color: #555;

【CSS】背景パターン --サンプル集-- | 【WEBデザイン】

投稿日:2019/07/19 CSSだけでできる柄物の背景を、備忘録として書き記している記事です。 ドット柄 ドット柄 <div class="style1"></div> .style1{ background-color: #04bd41; background-image: linear-gradient(45deg, #00ad39 25%, #04bd41 25%,transparent 75%, #04bd41 75%); ba…

【CSS】背景色 グラデーション --サンプル集-- | background:linear-gradient 【WEBデザイン】

投稿日:2019/07/19 CSSのbackgroundプロパティに指定する複雑な値を、備忘録として書き記している記事です。 虹色 虹色 <div class="style1"></div> .style1{ background: linear-gradient(135deg,rgb(255, 0, 0),rgb(255, 20, 172),rgb(90, 40, 255), rgb(60, 120, 255),rgb(80, 255,…

はてなブログのカテゴリーとパンくずリストを階層化表示にする -SEOに効果あり- |【はてなブログカスタマイズ】

パンくずリストの階層化表示は、ページがそのサイトのどこにあるのかを示し、記事のカテゴリーを詳しく表示することができます。そのため、SEOの効果的な対策として取り入れられています。...はてなブログでのパンくずリストを含むカテゴリーを階層化表示さ…

ソースコードハイライト【Google Code Prettify】にCSSだけで言語情報を記述する - 開発日記

Photo by Sean Lim on Unsplash Google Code Prettify HTML CSS JavaScript sample html JavaScript Google Code Prettify 使用している code-prettify https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst HTML、CSS…

同カテゴリーが記事下の関連記事に表示されない時の対処法 - 【はてなブログ】| 【カスタマイズ】

[画像]問題と対処法 記事下の関連記事の仕様 サイドバーの関連記事モジュールの仕様 カスタマイズ サイドバーに関連記事モジュールを追加する 関連記事モジュール以降にJavaScriptを埋め込む サンプルコード 表示するデータの変更 関連記事を記事下に表示す…

【CSS】でスクロールバーの表示を変えて、個性的なデザインにカスタマイズする【WEBデザイン】

今回の記事は、[画像]この見慣れたスクロールバーのカスタマイズに関する記事です。前置きFirefox、IEなどでは、サポートされていません。スクロールバーのカスタマイズで使用する疑似要素のブラウザ互換性[画像] ::-webkit-scrollbar::-webkit-scrollbar-::…

【はてなブログ】カテゴリー別記事一覧のサイトマップページを作る |【カスタマイズ】

カテゴリーを取得 カテゴリー別に記事を取得 表示 カテゴリー別の記事一覧ページを固定ページで作りました。 html,css,javascriptそしてphpを利用して表示させています。 ※固定ページは、はてなブログPROのみ作成できます。 カテゴリーを取得 var category_l…

【WEBデザイン】CSSで画像をホバー時にハイライトさせてオシャレにする

記事トップ画像のように、マウスホバー時に画像を拡大/縮小・ぼかしをしてハイライトさせます。cssの「transition」「opacity」「transform」プロパティの3つを使用しています。サンプル(マウスホバー時)拡大/縮小ぼかし透明度の値:0.5変化時間の設定説明tr…

navigatorプロパティ一覧 判定処理の使用例あり | 【JavaScript】【navigator】

navigator プロパティ一覧(2019/6/20時点の標準のみ) 実際の値 ブラウザ情報 デバイス情報 使用例 navigator.userAgent navigator.onLine navigator navigatorオブジェクトは、ブラウザの情報やデバイスの情報を取得することができます。 ・ブラウザ情報 ブ…

はてなブログのカテゴリーとパンくずリストを階層化表示にする -SEOに効果あり- #階層カテゴリーパンくずリストの表示

階層カテゴリーパンくずリストの表示 当記事は、階層カテゴリーを表示するために開発したJavaScriptファイルの説明になります。#階層カテゴリーパンくずリストの表示 ※https://cdn.it-the-best.com/js/category/2.2/category.min.jsの説明 www.it-the-best.c…

はてなブログのカテゴリーとパンくずリストを階層化表示にする -SEOに効果あり- #カテゴリーの表示を変える

カテゴリーの表示を変える カテゴリー情報を取得する 階層化カテゴリータグを表示させない 階層化カテゴリーの表示を変える すべてのカテゴリーを取得 カテゴリー一覧(階層化表示にする) カテゴリータイトルの表示を変える 当記事は、階層カテゴリーを表示す…

はてなブログのカテゴリーとパンくずリストを階層化表示にする -SEOに効果あり- #説明

説明 階層カテゴリーについて パンくずリストについて ファイルについて JavaScriptファイルの説明 はてなブログのカスタマイズ設定について パンくずリスト カテゴリー一覧 当記事は、階層カテゴリーを表示するために開発した機能の、おおまかな説明になり…

【CSS】超簡単「WEBデザイン」を美しくする | ボックスシャドウ(box-shadow)

Google Chromeで簡単にUIで設定値を変更できる前回、Google Chromeの開発ツールが超便利という記事を書きました。今回は、その開発ツールを使った簡単WEBデザインの紹介をします。CSSのbox-shadowというプロパティをつかって要素にかげをつけるデザインです…

【JavaScript】超簡単!スマホかPCの判断のしかた | navigator.userAgent

navigator.userAgent 使用方法 効果 navigator.userAgent navigatorオブジェクトのuserAgentプロパティを使ってデバイスの判断をします。 userAgent userAgentでは、ブラウザのユーザエージェント情報を取得することができます。 ユーザエージェント情報には…

【htaccess】超簡単便利!Webサイト引っ越し時のリダイレクトのテスト/動作確認ができる | htaccessテスターの紹介

unsplash-logo Becca Tapert htaccessとは ApacheWebサーバーのディレクトリごとの設定ができるファイルです。設定できる内容は、パスワードの設定、Webページのリダイレクトなどがあります。 レンタルサーバーでは、リダイレクトをするときなどに、このhtac…

【JavaScript】エラーを回避するorエラーを条件分岐に使う「テクニック」 | 【try catch】

try catch文 使用方法 catch finally 効果 try catch文 try{}catch(error){} 使用方法 tryのカッコ内にテストしたい(エラーになる可能性がある)文を入れ、catchのカッコ内にはtryに入れた文がエラーとなったときに処理させる文を入れます。 try:通常処理 ca…

【はてなブログカスタマイズ】ホーム画面におすすめ記事を表示させる

今回のはてなブログカスタマイズはコチラ ホーム画面に独自のおすすめ記事を表示させる 良い記事が書けたけどなかなか発信しきれていない。そんな記事は誰にでもあるとおもいます。そんなときは、ホーム画面だったりでアピールしたりと対策をしましょう。 記…

【WEBデザイン】を美しくする | グラデーション(linear-gradient())

【WEBデザイン】を美しくする | グラデーション // linear-gradient() 使い方 グラデーションの方向 途中色 グラデーションをつくる linear-gradient() CSSのbackgroundプロパティに使用することのできる関数です。 使い方 background:linear-gradient(グラ…

【JavaScript】【String】文字列を指定文字数分の文字列にする | String.substr()

Stringオブジェクトのsubstr()メソッドを使った、文字列の文字数操作です。 使用方法 ストリング変数.substr(開始位置,抜き出す文字数) ※引数が一つだけの場合は、それを開始位置と判断しそれ以降の文字列を抜き出します。 <script> var str="123456789" var str2=st…