Category

HTML・CSS

記事一覧などで使える画像の中央表示あれこれ

By | HTML・CSS

画像付きの記事一覧などを表示する際、画像のサイズが統一されていればそのサイズで調整しておけないいのですが、記事などはお客様が更新されることが多いので、サイズが同じになるとも限りません。画像の統一をお願いするにも画像加工ができない方もいますし、度々画像を加工するのは面倒です。

そこでCSSを使ってどのサイズの画像でもうまく表示できるように調整します。今回は画像の縦横の比率を保ちつつ画像を中央に表示する方法をいくつかご紹介します。

一番よくやるのがこれです。

See the Pen 画像中央表示 by irodory (@irodory) on CodePen.

もっと簡単にやる場合は、背景画像として設定する方法もあります。
See the Pen 画像中央表示(背景) by irodory (@irodory) on CodePen.

WordPressなどで、画像ファイルをそれぞれ設定したい時には、div要素にstyleで画像設定しこの画像部分をCMSの関数で挿入するようにします。

<div class="col-img" style="background-image: url(https://picsum.photos/640/320) ;">
</div>

ただ、背景画像は印刷するにはプリントの設定が必要の場合があるので、注意が必要です。
最後に「object-fit」プロパティーを使う方法。

See the Pen 画像中央表示(object-fit) by irodory (@irodory) on CodePen.

簡単ですね。「object-position: 横の位置 縦の位置;」で位置の調整も可能です。ただこれIE、Edgeの少し前のものには対応していません・・・。
ただjavascriptなどで対応する方法もあります。今後は、この設定が主流になりそうですがもうしばらくは一番上の方法が良いように思います。

サーバーのphp情報を確認し必要に応じて変更する

By | その他, ホームページ制作

サーバーからサーバーへサイト移行する際に、よくアップロードサイズ制限に引っかかりデータを復元できない時があります。 たいたい2Mくらいで制限がかかっており、サイトで記事や画像を投稿する場合には特に問題はないのですが、サイトのバックアップデータは10M以上になることもあります。大抵はPHPの設定を変更し制限の上限を一時的に上げ対応します。

まず、最初に現在のPHPの設定がどのようになっているかPHP情報を取得します。取得するためには「phpinfo.php」など適当な名前のPHPファイルを作成し、以下のスクリプトを1行記載し保存。わかりやすいようにサイトの一番上にFTPソフトでアップロードします。

<?php phpinfo();?>

ブラウザーでファイルにアクセスします。サイトの一番上にアップロードされていれば「http://サイト名/phphinfo.php」または「https://サイト名/phphinfo.php」にアクセスすると以下のような画面が表示されると思います。

「post_max_size」「upload_max_filesize」の値がアップロードに関する値なのでここの値を変更します。 方法は、サーバーの仕様によって設定方法が異なることがあるので、詳しくはお使いのサーバー仕様を確認してください。 よくある方法は、「PHP.ini」というファイルを作成し、以下の内容を記入し保存します。

post_max_size = 15M
upload_max_filesize = 15M

ここではそれぞれ、上限を15Mに設定してます。この15Mの値を必要に応じ変更してください。保存した「PHP.ini」をFTPソフトを使ってアップロードします。「PHP.ini」が置かれたところ以下に設定内容が反映されるので、これもサイトの一番上におきます。

先ほどの「phphinfo.php」をブラウザーでもう一度開き、値が変更されていることを確認します。変更されていいれば成功です。データの復元などの作業が済んだら、「phphinfo.php」「PHP.ini」共に必要ないので削除してください。

英単語の簡単な入力方法

By | その他

サイト制作時にページ名やHTML内のclassやid名にその箇所に関連する英単語をつけるのですが、昔から英語が苦手なのでよくスペルをMacOS標準で付いてる辞書やgoogle翻訳サイトなどのお世話になっています。

度々調べるのでそれだけ無駄な時間を過ごしていたのですが、簡単に英単語を入力する方法がありました。
入力したい英単語を読みを入力するだけ!スペースキーで変換項目を見ていくと英単語が変換項目にあるので選ぶだけです。

ブラウザー 変換候補を見ていくと・・・browser
リクルート 変換候補を見ていくと・・・recruit
ポジション 変換候補を見ていくと・・・position
ホームページ 変換候補を見ていくと・・・home page

おー!楽だ!!これで調べなくて済む!

前から、マックなどでMacintoshが変換候補に出てるのは知っていましたが、スペルが出るようになっているのは知りませんでした。いつから出来るようになったんだろ?これで少しは作業が楽になりそうです。