2020-01-24Python, Python WEB開発, エックスサーバー

エックスサーバーで最低限のテスト用Pythonファイルを動かすのに必要だった事のまとめメモです。 テスト用に設置したPythonファイル「hello-world.py」 実行ファイルの置き場所 エックスサーバーではcgiファイルが実行できる ...

2020-01-20WordPress 取得, WordPress

WordPressのWP関数を利用して投稿ページで投稿IDをHTMLとして出力する方法と、PHPの変数として取得する方法です。 投稿IDをHTMLとして出力する 投稿IDをHTML内で投稿IDを出力するにはthe_ID()を利用します。 t ...

2020-01-18CSS, CSS フレックスボックス

display:flexを指定してリストタグの<li>をCSSで横並びにさせる方法と、折り返す方法、簡単なデザインデンプレート集の紹介です。 デフォルトのリストタグ表示 <ul> <li><a href="#" ...

CSS, CSS アニメーション サンプル集

文字やボールなどの要素を弾ませるバウンドアニメーションのCSSサンプル集です。 このページの各アニメーションにanimationプロパティと@keyframes(キーフレーム)を使ったサンプルコードを紹介しています。 ボールをバウンドアニメ ...

2020-01-16CSS, CSS アニメーション サンプル集

ピュアなCSSのみで雨を降らせてみたアニメーションサンプル集です。 雨が降るパターンの各アニメーションにanimationプロパティと@keyframes(キーフレーム)を使ったサンプルコードを紹介しています。 背景に雨が降るCSSアニメー ...

CSS, CSS アニメーション サンプル集

CSSのみで文字や画像などをドットタイプの星などでキラキラ光らせるアニメーションサンプル集です。 CSS関連のページは作成していますが、幾分センスと根気が足りないのでイマイチ感は多めにみてやってください。 背景をキラキラ光らせるCSSアニメ ...

2020-01-15CSS, CSS アニメーション サンプル集

文字や要素をスライド(横移動)表示するCSSアニメーションのパターンサンプル集です。 このページでは各アニメーションにanimationプロパティと@keyframes(キーフレーム)を使ったサンプルコードを紹介しています。 transfo ...

2020-01-18CSS 見出しタグ, CSS

h2やh3などの見出しタグのデザイン等使えるボーダーにグラデーションを使ったCSSサンプル集です。 共通HTML <h2 class="sample1">sample1</h2> <h2 class="sample2">s ...

2020-01-18CSS, CSS テキスト

ピュアなCSSの機能では要素に対してはn番目でのスタイル割り当てができるものの、n文字目やn行目の指定してスタイルを割り当てる事はできません。 通常CSSだけでn文字目、n行目毎にスタイルを当てる場合はspanタグなどを使って要素として反映 ...

2020-01-18JavaScript, JavaScript イベント

JavaScriptでマウスホイールの操作情報を取得してイベントを実装する方法です。 マウスホイールの操作情報を取得する JavaScriptでマウスホイールの操作・アクションを取得するには「window.onmousewheel」を利用し ...

2020-01-18JavaScript ファイル操作, JavaScript

JavaScript内でXMLHttpRequest()を使って別のjsファイルを読み込んで別ファイルのJavaScript関数を実行する方法になります。 JavaScript内で別のJavaScriptファイルを読み込むサンプルコード 別 ...

2020-01-18エックスサーバー

昨年11月7日からエックスサーバーでads.txtの設置・編集機能が実装されています。 主に、Googleアドセンスの利用でads.txtの設置を必要とするのですが、広告枠も得ていない有料レンタルサーバー側でこういった機能が追加されるのに少 ...

2020-01-18エックスサーバー

サーバーからサイトやファイルが消えてしまった場合や、過去の状態に戻したい場合に活用できるエックスサーバーのバックアップ機能。 エックスサーバーのサーバーコントロールパネルからバックアップデータを取得してサイトやファイルを復元する方法です。 ...

WordPress Gutenberg, WordPress

WordPress 5.3xあたりから、画像のメディアファイルへのリンクはどこへ行ってしまったの。 以前は画像ブロックの右メニューに表示サイズ指定と共にリンク先の指定(メディアファイルまたはファイルのあるページ)があったのですが気が付いたら ...

Atom

Atomで新規ファイル時やtxtファイルにて編集している際に、日本語入力時には赤い下線が表示されます。 これはAtomのコアパッケージ「spell-check」のスペルチェック機能が日本語に対応いない為で、日本語文のほぼ全てがスペルミスとし ...

Atom

ソースコードの量が増えてくると関数や変数の宣言場所へ簡単に移動できる機能が必要になってきます。 Atomのパッケージ「symbols-tree-view」は、関数や変数、クラスの宣言の一覧をリストビューで表示、クリックで該当する行へジャンプ ...

Atom

Atomのスクロールバーはデフォルトサイズの横幅が細すぎてマウスカーソルを合わせるのに掴みにくくてちょっと大変ですよね。 パッケージの「minimap」を使っているとビューがスクロールバーの代わりになって楽ですが、関数ビューなどビュー機能を ...

Atom

Atomは多くの機能、拡張機能があるコードエディタですが、ショートカットキーもまた便利なものが揃っています。 そのなかでも汎用的で使い勝手の良いAtomで使えるショートカットキーをまとめています。 コーディング CTRL + A全選択CTR ...

Atom

Atomのコードエディタはコアパッケージ「bracket-matcher」による自動補完機能(オートコンプリート)で、デフォルトでシングルクォーテーション・ダブルクォーテーションが入力時に2個打たれます。 これが、不慣れだと使いにくい、特に ...

2020-01-13Atom, エックスサーバー

コードエディタAtomのパッケージ「remote-ftp」を利用してエックスサーバーにSFTP接続する方法です。 FTPと違ってSFTP接続は工程が多くちょっと大変ですが、安心・安全な接続に期待できます。 remote-ftpのインストール ...

CSS, CSS テキスト

CSSのグラデーションを使って背景色とテキスト色を相互に入れ替えツートンカラーにするCSSサンプル集です。 疑似要素のcontent:attr()を使った方法もありますが、ここではlinear-gradient()やbackground-c ...

CSS, CSS アニメーション 基本

こちらはCSSアニメーションの一時停止と再生(animation-play-state)で指定可能な値と、実装する方法のまとめ、動作サンプル集になります。 animation-play-stateの設定方法 CSSアニメーションの再生状態を ...

CSS, CSS アニメーション 基本

こちらはCSSアニメーションの再生方向指定プロパティ(animation-direction)で指定可能な値と、比較用の動作サンプル集になります。 animation-directionの設定方法 CSSアニメーションの再生方向はanima ...

2020-01-09CSS, CSS アニメーション 基本

こちらはCSSアニメーションのイージングプロパティ(animation-timing-function)で指定可能な値と、比較用の動作サンプル集になります。 animation-timing-functionの設定方法 CSSアニメーション ...

2020-01-09CSS, CSS アニメーション 基本

animationプロパティを使ったCSSアニメーションは人気で様々な場所で利用されていますが、アニメーションの繰り返し設定や、繰り返し繰り返しではなく一回、アニメーションの終点で停止する設定の各動作パターンの紹介です。 animation ...