月: 2018年1月

スマホ対応でbackgroundを指定するとき高さがないと表示されません。

背景画像をサイズを可変させて表示したいだけなのですが、backgroundで指定した画像はheightがないと高さが0になって表示されません。
ですが、高さの指定をするとウィンドウサイズの拡大縮小時に余白や画像が見切れたりなどがおきます。

高さが与えられない場合、paddingで余白をあけます。
拡大縮小させるためにpadding-topかpadding-bottomを％指定で設定します。

%の計算方法は

高さ÷横×100=です。

WordPressに新着情報を取り入れる方法を説明します。

    post_date)); ?>
    

numberposts=3　記事数
category=5　カテゴリーナンバー

5のカテゴリーナンバーの記事から3つ表示させるというものです。

　・記事のタイトル
  記事本文の表示
　記事へのパーマリンク
　・・・　カテゴリー

使われているコードは上記のように、カテゴリー内のタイトルや本文、パーマリンクなどを収得して表示させるものです。

ウェブサイトのコーディングをしていると同じ種類の名前の画像ファイルなど、リネームしていくのが大変だと思いますが、
今回はweb制作で、役に立ちそうな、ファイル名一括変換ソフトを紹介して以降と思います。

お～瑠璃ね～む

ファイル名を変換したいファイルをそのままドラッグ＆ドロップで、実行ボタンを押すだけで変換してくれます。
また、誤ってファイル名を変換してしまったとしても、元に戻せる機能があるので便利です。

変換方法では詳細な設定も可能です。全角から半角へ変換するときには、変換対象の文字をカタカナ、英字、数字に絞って変換も可能です。

WordPressでサイトを制作する上で、特定のカテゴリーに対して違うレイアウトにしたりなど、色々あると思います。
スラッグを利用してCSSを適用すれば固定ページ作成の際に設定する
出し分け以外にも色々応用できます。

スラッグの取得

post_name; 
?>

上記では、h2のtittleのところにページのスラッグ名が出力され、親要素のclassにスラッグ名が付与されます。

親要素にwidthを指定してmargin:0 autoで中央寄せにした後、
子要素にposition:fixed、left:autoを指定するだけです。

■html

    

        
テキスト
    


■css
#box{
width:300px;
height:250px;
margin:0 auto;
padding:0;
}
 
#inner{
width:20px;
height:50px;
position:fixed;
left:auto;
top:0;
margin:0 0 0 900px;
padding:0;
}

グラデーションや影などCSS3だけで表現できるようになり、
画像のみで表現していたものを、簡単に設定することができるようになりました。

CSS3を使用すれば、誰でも簡単に高級感のある表現ができるようになります。

今回は、スタンプを押したような文字(レタープレス)をCSSで簡単に表現すり方法を紹介します。

レタープレスはtext-shadowを使用することで表現ができます。
text-shadowのカラーは白なので、背景が白だとうまく表現できません。黒に近い色であるとうまく表現されます。

text-shadow: 0 -1px 1px #888, 0 1px 1px #fff;
background-color:#555;
font-weight:bold;
color:#aaa;

横揺れは、スマホの画面幅より大きな要素がある場合発生します。
はみ出している要素の分だけ横にスクロールされます。

横揺れが原因で下にスクロールするのが難しくなって、離脱されてしまうことが多くなってしまうので、あまり良くありません

よくある原因としては、
表組みで使われる　tableタグ
googlemapやfacebookなどでも使われる iframeタグ
コードなどの記載で使われる preタグ

などですが、positionで指定ミスで検証ツールやandroidで見ていても横揺れは発生しないのに、iphoneのみ発生してしまう、厄介な現象もあるので、注意が必要です。

なので、対策としてコードなどの記載で使われる [pre]タグでは

.sample { overflow: auto; }

.sample { word-wrap: break-word; }

広告が原因で横揺れしているケースでは、
広告作成時に「レスポンシブ」を選択することが一番です。

今回は便利なcssのセレクタ指定方法を紹介します

#example>* {
 margin: 0 10px;
}

親に内包れる直下要素のみを対象に指定できます。
親要素であるexampleの直下の要素すべてにマージンが設定されます。

div[id^="sapmple"] { /* 属性 ^=" 文言"]で、【属性】が【文言】で始まる要素 */
 color: green;
}

p[class$="Txt"] { /*  属性$=" 文言"]で、【属性】が【文言】で終わる要素 */
 margin: 10px;
}

div[id*="Box"] { /* 属性*="文言 "]で、【属性】に【文言】を含む要素 */
 padding: 5px;
}

#sapmpleTxtBoxとセレクタ名を指定していたなら、上記の前方一致と後方一致、部分一致にあてはまります。

文字の色や背景色などに多く使うことが多いですが、

カラーコードでの指定

色指定を16進数指定する方法です。
現在主流といってもいいほど多く使われる指定方法です。

.example{
  background: #f0f;
}

カラーネームでの指定

.example{
  background: red;
}

カラーネームで、たくさんの種類の色を指定できます。
表示されない色などブラウザによっては存在することがあります。
カラーネーム

rgb、rgbaで指定

コチラでは文字の透明度はそのままに、背景の色を透過できたり便利な指定方法です。

.example{
   background: rgba(赤(0～255),緑の量(0～255),青の量(0～255) 0.8);
}

hsl、hslaで指定

色相 = Hueは、0～359の値で指定します。
これは、色相環の角度になります。

彩度 = Saturationです。
この値は、0%～100%で指定します。

輝度 = Luminance
この値も、0%～100%で指定します。

.example{
  background: hsl(0,100%,50%);
}
.example{
  background: hsla(180,100%,50%,0.5);
}

minmax()の値には、適用する要素の最小値と最大値を指定することができます。

minmax(min, max)

min, maxにはには、次の値を利用できます。

1,px単位
2,%単位
3,fr単位
4,auto
5,max-content
6,min-content

.example {
    display: grid;
    grid-template-columns: minmax(200px, 300px) 1fr 1fr;
}

ビューポートのサイズを変更すると、
最初の要素は100px〜200pxの間の幅になり、2番目と3番目の要素は残りの空きスペースを均等に占めるように横幅を可変させます。

IE, Edgeではベンダプレフィックス（-ms-）を加える必要がありますが、
minmax()はすべてのブラウザにサポートされています。