便利帳

自分用備忘録。誰かの役に立てたら幸いです。

CSS:三角形を作る

CSSを使って三角形を作る方法をまとめます。

<p class="triangle "></p>

HTMLで三角形を設置したい場所に上記のように記載します。

.triangle {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #F08080;

CSSで上記のようにすれば左向きの三角形ができます。

文頭の見出しなどに使いたい場合は、

    display: inline-block;

を追加すれば横並びになります。

現在5pxと記載している部分で三角形の大きさが、
一番下のカラーコードの部分で三角形の色が指定できます。

CSS:リンクの範囲を広げる

バナーなどをCSSで作成した時、aタグのクリックの範囲を広げる方法です。


通常

<ul>
      <li class="nav-item><a href="#">リスト</a></li>
      <li class="nav-item><a href="#">リスト</a></li>
      <li class="nav-item><a href="#">リスト</a></li>
      <li class="nav-item><a href="#">リスト</a></li>
</ul>
.nav-item {
      display:inline-block;
}

.nav-item a {
      text-decoration: none;
      color: #000;
}

上記のようなリストを作成したとします。


これを

<ul>
      <li class="nav-item><a href="#">リスト</a></li>
      <li class="nav-item><a href="#">リスト</a></li>
      <li class="nav-item><a href="#">リスト</a></li>
      <li class="nav-item><a href="#">リスト</a></li>
</ul>
.nav-item {
      display:inline-block;
}

.nav-item a {
      display: block;  //これがポイント
      width: 100px; //クリックしたい大きさ
      height: 50px; //クリックしたい大きさ
      text-decoration: none;
      color: #000;
}

上記のようにdisplay: blockにして任意の大きさに設定するとできます。

Basic認証の仕方:特定のページのみ

Basic認証をかけたい時に、ディレクトリ全部ではなく特定のページのみに設定したい時があります。

その際の、「.htaccess」の記載の仕方です。

基本は下記をご参照ください。

kana-webmanual.hatenablog.com


.htaccess」下記のように記載し、
[test-page.html]の部分に実際にアクセス制限をかけたいページのファイル名変えてアップロードすればできます。

 <Files ~ "^\.(htaccess|htpasswd)$">
 deny from all
 </Files>
 AuthUserFile /home/hoge/html/.htpasswd
 AuthGroupFile /dev/null
 AuthName "Please enter your ID and password"
 AuthType Basic
 order deny,allow
 <Files test-page.html>
 require valid-user
 </Files>


また複数の場合は下記の通りです。

 <Files ~ "^\.(htaccess|htpasswd)$">
 deny from all
 </Files>
 AuthUserFile /home/www/anothercast.com/public_html/sp/.htpasswd
 AuthGroupFile /dev/null
 AuthName "Please enter your ID and password"
 AuthType Basic
 order deny,allow
 <Files ~ ([test-page1.html]|[test-page2.html])>
 require valid-user
 </Files>

|で繋げばさらに増やせます。

Basic認証の仕方

作成中のサイトなど、パスワード保護をかけたい場合に
Basic認証」を用いてアクセス制限をかけます。

まず用意するファイルは
・「.htaccess
・「.htpasswd」
上記の二つです。

テキストファイルで作成することができます。
パソコンで作成した際に、拡張子に勝手に「.txt」とつく場合は、
サーバーにアップロード後、サーバー上で削除することができます。

大体のサイトは「.htaccess」の作成の仕方から紹介してありますが、
「.htpasswd」の方が簡単なので、こちらから説明します。

ここここを用いて
暗号化パスワードを生成します。

例えば、

ID:test PASS:test

を暗号化すると。

test:lFVYVlBZrn1bI

上のものが表示されます。
それをそのままコピーして、テキスト(.htpasswdファイル)に貼り付けるだけ

これで完成です。


次に「.htaccess」です。

こちらは

AuthUserfile /フルパス/.htpasswd
AuthGroupfile /dev/null
AuthName "Please enter your ID and password"
AuthType Basic
require valid-user

上記のように入力し、赤字の部分を「.htpasswd」を実際に設置する場所のフルパスを入力して完成です。


この2つのファイルができたら、アクセス制限をかけたいディレクトリが
ある(例えばindex.htmlがある階層の一つ上など)階層にアップロード
※ファイルがアップロードされた以下の階層全てがアクセス制限の対象になります。

これで完了です。

CSS3:クロスブラウザプロパティ

クロスブラウザプロパティの一覧です。

 -ms-  ……  Internet Explorer
 -webkit-  ……  Google ChromeSafari
 -moz-  ……  Firefox
 -o-  ……  FirOperafox

WordPress:TOPページ以外表示されない

Wordpressのサイトアドレスを変更した時に、
(例えば http://***/wp → http://***/ へ変更)
TOPページ以外のページが404エラーになってしまうケースがあります。

これは、Wordpressが生成する「.htaccess」の中身が適切でないために起こるようです。
きちんと表示させるには、ドメイン直下の「.htaccess」を下記のように追記します。

# BEGIN WordPress

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^.*$ ./index.php [L]


# END WordPress


稀に上記の対応をしても表示されないことがあります。
その場合は『/etc/httpd/conf/httpd.conf』のファイルの下記部分を確認してください。

    Options Indexes FollowSymLinks
    AllowOverride None
    Order allow,deny
    Allow from all

上から2行目が『AllowOverride None』になっているので、
『AllowOverride All』に変更してください。

すると今度はきちんと表示されると思います。

MySQL:Adminerの使い方

MySQLの中身を確認したい時、テーブルなどを作成したい時に
活用できるツールです。


[公式サイト]
www.adminer.org


使い方は非常に簡単です。
公式サイトより最新ソフトをダウンロードして、それをそのまま自分のサーバーにアップロードするだけです。

アップロードした後に、http://***/adminer.phpへアクセス。

http://***/の部分はアップロードした階層のURLです。
※adminer.phpの部分はダウンロードファイル名です。

すると
ホスト名、データベース名やパスワードを入力する画面が出てきますので
そこに必要情報を記載してログインすればもう使用ができます。


レンタルサーバーから触ることもできますが、こちらから操作する方が圧倒的に軽いです。
日本語にも対応しています。