2017年2月9日のブックマーク (4件)

  • 【WordPressでCSSが効かない場合の対処法】 - Webサイト専門プログラマの言いたい放題

    ワードプレスだとCSSが効かないことがある 「静的なHTMLサイトの場合は問題なくCSS(スタイルシート)が書けるのに、ワードプレスだとCSSが効かないことがある 。いったい何故?」という体験をしたことはありませんか? なぜワードプレスでCSSが効かないことがあるの? 結論から言いますと、「他のCSSのほうが優先順位が高いから」です。 ワードプレスで作ったページをブラウザで開いて、ソースの内を見てみると、多くの場合次のようになっています。 <head> ・・・ <link rel="stylesheet" src="●●●/テーマ名/style.css" /> ・・・(1) <link rel="stylesheet" src="別のCSS" /> ・・・(2) <link rel="stylesheet" src="別のCSS" /> <link rel="stylesheet" src

    【WordPressでCSSが効かない場合の対処法】 - Webサイト専門プログラマの言いたい放題
    hujuu
    hujuu 2017/02/09
  • AtomからFTP接続する: Remote-FTPパッケージ - SMART 開発者のためのウェブマガジン

    Remote-FTPパッケージのインストール Remote-FTPパッケージ は Atom から直接 FTP 接続してファイルをアップロードしたり、ダウンロードするための機能を提供します。 まずは環境設定画面([Ctrl] + [,])から Remote-FTP を検索し、検索結果に表示された Remote-FTP パッケージをインストールしてください。 Remote-FTPパッケージの設定 次に接続の設定を行います。 接続の設定は1接続のみなので、複数のサーバを切り替えて使いたい場合は切り替えるたびに設定を書き換える必要があります。 接続の設定はAtomのメニューから[パッケージ]-[Remote-FTP]-[Create SFTP config file]を選択します。 FTP接続の場合は[Create FTP config file]の方を選択します。 メニューを選択するとデフォルト

    AtomからFTP接続する: Remote-FTPパッケージ - SMART 開発者のためのウェブマガジン
    hujuu
    hujuu 2017/02/09
  • Password Protected: サイト全体にパスワード認証を設定できるWordPressプラグイン

    Password Protectedは、サイト全体にパスワード認証による閲覧制限を設定できるWordPressプラグインです。 WordPressで構築したブログ・Webサイト全体に簡易的なパスワード認証による閲覧制限をかけることができます。パスワードを入力して認証したユーザーだけがブログ・Webサイトを閲覧できるようになります。 このプラグインは制作途中のWebサイトやテストサーバーなど、Webサイトを自分以外に見せたくない場合に利用します。手動でBASIC認証を設定する手間も省けます。 WordPressでブログ・Webサイトを制作する際に役立つプラグインなので活用しましょう。 はじめに このプラグインが優れていること WordPressで構築したブログ・Webサイト全体にパスワード認証による閲覧制限を設定できる。 パスワードはプラグインの管理画面で登録・変更できる。 管理者ユーザーや

    Password Protected: サイト全体にパスワード認証を設定できるWordPressプラグイン
    hujuu
    hujuu 2017/02/09
  • テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15 - NxWorld

    文章内のテキストリンクやテキストのみで実装しているようなナビゲーションリンクなどで使えそうなホバーエフェクト・デザインのサンプルです。 文字数が変化したり改行が頻繁に入るような場所などでは正直使い辛くて利用できる場面が限られてしまうものも多いのですが、シンプルなHTMLCSSで様々な見せ方ができます。 サンプルの中で特にdisplay: inline-block;を記述しているタイプのものが意図しない箇所で改行されたり、逆にされなかったりということがあるので注意して下さい。 実際にどのような動きになってしまうのかはブラウザを縮めて確認してもらったり、または自身で環境を用意して実装・確認をしてもらうとよりわかりやすいと思います。 ここで紹介するエフェクトは、基的に<a href="#">リンク</a>のようなHTMLに対して実装したものになります。 また、サンプルコードに含まれていません

    テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15 - NxWorld
    hujuu
    hujuu 2017/02/09
    “a { position: relative; display: inline-block; transition: .3s; } a::after { position: absolute; bottom: .3em; left: 0; content: ''; width: 100%; height: 1px; background-color: #2ecc71; opacity: 0; transition: .3s; } a:hover::after { bottom: 0; opacity: 1; }”