画像などのファイル名を連番にリネーム

コーディングをする際、書き出した画像ファイルの名前を連番にicon_01.jpgなど指定することがあるかと思いますが。

イラストレータなどのアセットの書き出しや、スライスなどでいちいちファイル名を変更してなど、
ファイル数が多くなるほど大変になります。
また、ファイル名の変更があった時などに便利なファイル名のリネームを一括で行ってくれるソフトを紹介します。

お~瑠璃ね~む

連番や大文字から小文字、全角から半角拡張子だけでなく文字追加や文字削除など15種類のモードでファイル名の変換を行ってくれるソフトです。

■名前がバラバラのファイルを連番にする場合

変更ファイルのリストに連番にしたいファイル順に読み込み

連番(123)モードで接頭語を「~から始まる連番を」の前にあるテキストボックスに入力し実行を押すだけです。

ファイルのリネームは時間を取る作業ですので、ソフトを使って効率化したいですね

wordpress カスタム投稿のリストを連番で拾得

wordpress カスタム投稿のリストを条件分岐しながら、連番でリストに連番クラスをつける方法です。

上記はwhile文で、カスタム投稿のお知らせの画像が設定されているときとされていないときの条件分岐をしながら、投稿された記事を習得しています。

また、何も投稿がないときendwhile; elseで「現在記事がありません」と表示されるようになっています。

また上記は連番でリストにitem01,item02と名前がついていくのでお知らせ一覧の続きを見るボタンを3記事以上投稿されていた時に

上記で表示させることができます

CSSだけで吹き出しを作る

cssで吹き出しを作成すれば、テキスト量がどんなに増えてもレイアウトが崩れにくいという、メリットがあります。

要素にくっつけて別の形を表現することで吹き出しの作成がが可能です。

その場合三角形を:beforeや:afterといった擬似要素として配置します。

viewportの指定

古いサイトなどスマホ表示させるときにスマホサイトでも見えるようにということでvieportの指定を入れて

これで、一応はスマホでもなんとかpcサイトを見ることができる状態になります。

viewportの指定でできるものは

■device-widthで

初期値は980pxになり、viewportの横幅の指定になります。
指定出来る値は200px〜10000pxです。

■device-height

初期値は「横幅とのアスペスト比から計算される値」。
指定できる値は200px〜10000px,device-height。

:placeholder-shown

:placeholder-shown
テキストボックス、テキストエリアのように、プレイスホルダーを設定することができる要素です。
プレイスホルダーのテキストは HTMLでplaceholder属性で設定可能ですが、

HTML上だけでなくCSSの:placeholder-shown擬似クラスを使ってスタイルを充てることが可能です

この:placeholder-shownはインプット要素全体に対してcssが適用されます。
また、:を二つ重ねた::placeholder擬似要素は、プレイスホルダーテキストのみのcssが適用されます。

CSSだけでアスペクト比を固定

画像とテキストボックスを縦と横の比率をそろえたまま縮小したいなんて場面があります。

特に、画像と一緒に並べたテキストボックスと画像の縦幅が合わず、レイアウトが崩れたりなんかが、例として挙げられます。

ですが、画像と同じように、テキストボックスをCSSだけでアスペクト比を固定したまま縮小する方法があります。

ポイントは「wrapper:before」の padding-topの%は画像の比率4:3の場合、
100% / 4 *3 = 75なので、padding-topの値は75%となっています。

CSSのinitial

cssのdisplayプロパティinitialは、
要素のプロパティに初期値を適用することができます。

例えば下記のコードの場合、.colorにcolor:#333を指定しても.colorの子要素pにcolor:initialを指定すれば色は初期値の色になります。

ですが、IE11はinitial未対応です。
コーディングをしていて、適用しているプロパティを初期化したいことは多いため、使用したい場面はありますが、

IE11はinitial未対応のため使用するのはあまりよくありません。

initialは適応されているプロパティを初期化するものなので、使用できないIEだとデザインが大きく崩れる原因となります。

※の文章を改行してもきれいに見せる

通常だとこれを表示した際、PC画面では問題なく表示されるのですが、
ブラウザ幅が狭くなり複数行表示になった場合、

※の下に文章が続き見た目がカッコ悪くなってしまいます。

これを防ぐには以下のcssを記載します。

※のしたは空白になりキレイになりました。

figure要素の使い方

figure要素で便利なのは、タイトルの付いたリストなどを作成するときに便利です。

ulのliにh3などの見出しを入れればいいだけですが、タイトルもリストの一部としてcssが利いてしまうのでイマイチです。

ulをfigureで囲めばfigcaptionでタイトルを設定すればキャプションがつけられるので便利です。

figure要素は挿絵や図、写真、などに注釈を付けるために利用されます。
簡単には、キャプションを付けたい場合、その要素を囲ってfigcaption使用すればいいだけです。

見出し付きのリストの場合など上記のように設定してあげれば見出し付きのリストができます。

WordPress プラグインでパスワード認証

WPサイトの制作で、制作中のサイトをテスト環境にアップしてお客様に確認していただく場面があると思います。

BASIC認証をかけてアクセス制限をかけることも可能ですが、
プラグインを使用することで、簡単にアクセス制限をかける方法があります。

そのプラグインは「Password Protected」です。

プラグインの新規追加から「Password Protected」で検索し検索結果で「Password Protected」が表示されたら、今すぐインストールを選択し、
有効化します。

管理画面のメニューの「設定」→「パスワード保護」を押すと、
設定画面が表示されるので、以下の設定を行います。

パスワード保護状況のチェックの「有効」をチェックします。

「新しいパスワード」
に設定したいパスワードを入力し、問題がなければ「更新」を押します。

wpだとプラグインでパスワード制限をかけることができるので、便利ですね。