background-size css 背景画像のサイズ

スマホサイトなどレスポンシブサイトでよく使うのでメモです。

contain

縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する

cover

縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する

さくらレンタルサーバーの独自ドメインでサブドメインを追加してみた

サーバーコントロールパネルの管理画面にログインして新規ドメイン追加します。

サーバーコントロールパネルURL:https://secure.sakura.ad.jp/rscontrol/

  1. 左側のメニュー一覧から「ドメイン設定」→「ドメイン一覧」→「新しいドメインの追加」ボタンをクリックします。
  2. 「5.他社で取得したドメインを移管せずに使う」から「ドメインの追加へ進む」のリンクをクリックします。
  3. 「他社で取得された独自ドメインのサブドメインを追加」のテキストボックスにサブドメインを記入し「送信する」ボタンをクリックします。
  4. ドメイン追加の最終確認画面が出るので「送信する」ボタンをクリックします。
  5. 完了画面が出て完了です。

ちなみにこの後ドメイン一覧で追加されたことを確認して、サブドメインの詳細設定を変更しました^^

[エックスサーバー]500エラーで管理画面にもログイン出来ない時の対処

基本的にwordpressで500エラーが起こったときは管理画面に入ってプラグインを無効化して一つ一つ有効化して様子みたりするのですが、今回は管理画面もログイン出来ない全体的な500エラーでした。

もしかして.htaccessが影響しているのかも?と思って確認してみても違う様子・・・。

こんな時こそサーバー側で取ってあるエラーログで原因を確認してみました。

管理画面にログインして該当サイトのTOP→エラーログへ。

エラーログをダウンロードします。

中身を見てみると直近の日時に次のような文章が。

[Sat May 26 22:41:48 2018] [warn] [client 66.249.79.81] mod_fcgid: stderr: PHP Parse error: syntax error, unexpected T_FUNCTION in /home/サイトフォルダ名/サイト名/public_html/cms/wp-content/plugins/wordpress-popular-posts/includes/class-wordpress-popular-posts-rest-controller.php on line 374

これは「WordPress Popular Posts」のプラグインに文章エラーが出てることを指しているので、FFFTPで該当プラグインのフォルダ名を変えて停止させました。

結果、再度サイトを更新してみるとピタッと500エラーが止まり、管理画面にログイン出来ました。
サーバーのエラーログのチェックが原因究明への近道でした。

スマホでサイトを表示したら背景が切れていた時のCSS対処

PCサイトをスマホで見てみた時に背景が見切れてる時があります。
そのときの対処方法を書きたいと思います。

CSSで一文追加するだけ!

そのサイトで一番長いwidthサイズを確認し、そのサイズをbodyタグにmin-widthに書き込めばOK。簡単でした。

body {
font-family: “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, Meiryo, “メイリオ”, “MS Pゴシック”, Verdana, Geneva, Arial, Helvetica;
font-size: 92%;
line-height:150%;
margin:0;
padding:0;
color:#111;
min-width:1061px;
}

[CSS]tableの装飾簡単コピペソース

コピペするだけでtableの装飾が出来るように置いておきます。
th部分だけ背景色がグレーです。

 

.table01 {
border-collapse: collapse;
margin-bottom:20px;
width:100%;
}
.table01 th,.table01 td {
padding: 10px;
border: 1px solid #ccc;
}
.table01 th {
font-weight: bold;
background:#ecebea;
}

コピペで簡単common.cssで使うmargin,padding関連

よくcommon.cssで使うmarginとpaddingのCSS箇所です。

 

/* margin-bottom */
.mb10 {margin-bottom: 10px;}
.mb15 {margin-bottom: 15px;}
.mb20 {margin-bottom: 20px;}
.mb25 {margin-bottom: 25px;}
.mb30 {margin-bottom: 30px;}
.mb35 {margin-bottom: 35px;}
.mb40 {margin-bottom: 40px;}
.mb45 {margin-bottom: 45px;}
.mb50 {margin-bottom: 50px;}

/* padding-bottom */
.pb10 {padding-bottom: 10px;}
.pb15 {padding-bottom: 15px;}
.pb20 {padding-bottom: 20px;}
.pb25 {padding-bottom: 25px;}
.pb30 {padding-bottom: 30px;}
.pb35 {padding-bottom: 35px;}
.pb40 {padding-bottom: 40px;}
.pb45 {padding-bottom: 45px;}
.pb50 {padding-bottom: 50px;}

text-decoration:underlineとborder-bottom下線はどっちがいいの?

CSSで装飾するときに同じ効果を表示できるタグがあるのですがどっちがいいのかという話。

調べてみたところ「text-decoration:underlineがいい」ということが分かりました。

理由はfontの種類(主にメイリオの場合)によってborder-bottomは変な余白が出てしまうためということでした。

下線に関してはtext-decoration:underlineは万能!ということで!

[CSS]リストに矢印装飾を:before要素CSSだけで表現

HTML

<ul class=”arrow”>
<li><a href=”#”>事務所のご案内</a></li>
<li><a href=”#”>行政書士プロフィールはこちら</a></li>
</ul>

CSS

.arrow li {
position: relative;
display: inline-block;
padding-left: 12px;
}
.arrow li:before {
content: ”;
width: 0;
height: 0;
border: solid 4px transparent;
border-left: solid 5px #014eb4;
position: absolute;
top: 50%;
left: 0;
margin-top: -4px;
}