サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
01earth.jp
一覧画面やトップページに表示する記事タイトルやお知らせテキストなど、レイアウトの都合上特定の文字数分だけ表示するようにレイアウトされたデザインのコーディングが必要なことがあると思います。 そういったときはjQueryで文字数を指定してカットする方法があります。今回は文字数制限と合わせて文末に”…”を追加し、視覚的に続きがあることがわかりやすい状態で実装する方法を紹介します。 jQueryの記述 文字数制限をしていない状態が下記です。liそれぞれに40文字づつテキストが入っています。 See the Pen mjjmrR by hoshu_t (@hoshu_t) on CodePen. ここに以下のjQueryを加え、20文字で文字数制限を行いました。 See the Pen YjjVGW by hoshu_t (@hoshu_t) on CodePen. 最初のcountで文字数を指定し
UIデザインツールのFigmaですが、SketchやInVisionに比べると知名度が低いですね。 しかしブラウザがあれば使用できるのは非常に便利で、SketchやInVisionにも劣らない機能と小規模での使用なら無料となかなか使い勝手が良いです。 Figma: the collaborative interface design tool 今回ご紹介するのはFigmaの便利機能「属性コピー」の方法です。 属性コピーてなに? という方もいらっしゃるかと思いますのでご説明を。 Photoshopをお使いの方ならお分かりになるかと思いますが、文字、線、図形などで設定している色、太さ、大きさ、ドロップシャドウなどの『属性(スタイル)設定だけ』をコピーし、他の文字、図形などに『全く同じ属性(スタイル)内容をコピーする』という機能です。 言葉で説明してもなかなか分かりにくいですよね。しかしやり方は
先日iPhoneXの発表がありましたね。僕が何より驚いたのはその解像度。2,436×1,125ピクセルです。これまでは高解像度スマートフォン向けに実際の2倍のサイズの画像を用いてコーディングをしてきましたが、このiPhoneXでも綺麗に画像を見せるには3倍のサイズが必要になります。 またPCでも4Kディスプレイやウルトラワイドディスプレイなど高解像度モニタが普及しつつあります。 それでは高解像モニタに合わせてWebサイトの構築でも高解像度の画像を使用していけばいいのでしょうか?それは間違いです。これをするとWebサイトの通信量は大幅に増加してしまいます。モニタサイズに合わせて最適な画像を読み込むことが重要になります。 今回はそういった時に使用するpicture要素とsrcset属性を紹介します。 picture要素 picture要素はブラウザサイズに合わせて一つのimgタグで複数の画像を
iOSではスクロールバーが表示されません。 通常のブラウジングでは無意識でWebサイトは縦にスクロールできるものだと思っているので通常は問題になることはないのですが、 ユーザーに明示的にスクロールできると認識させるときにこの仕様が障害になることがあります。 今回はiOSでもスクロールができるということをユーザーに認識させるために、 強制的にスクロールバーを表示させる方法を紹介します。 html <div class="scroll-wrap"> <table> <tr> <th>見出し</th> <td>テキストが入ります</td> <td>テキストが入ります</td> <td>テキストが入ります</td> <td>テキストが入ります</td> <td>テキストが入ります</td> </tr> <tr> <th>見出し</th> <td>テキストが入ります</td> <td>テキストが入り
WordPressは任意の記事にパスワード保護をかけることが可能で、保護した記事のタイトルには文頭に「保護中」と自動で追記されます。例えばこの表示を「会員限定記事」と編集したい場合、フィルターフックで編集することができます。今回はそのコードを紹介します。 「保護中」を任意のテキストに変更する フィルターフックはfunction.phpに追記することで機能します。下記は「保護中」を「会員限定記事」と変更する際のコードです。 function edit_protected_word () { return '会員限定記事:%s'; } add_filter('protected_title_format','edit_protected_word'); %sとはphpの型指定子です。引数の出力されるフォーマットを指定することができ、%sの場合は文字列として引数を扱うことを意味しています。 「保
Advanced Custom Fieldsで画像を扱うとき、画像の返り値にIDを設定した場合にaltを取得する方法です。 _wp_attachment_image_altを使う 返り値がIDの場合altを取得するには_wp_attachment_image_altを使います。具体的には以下の通り。 <?php $img_alt = get_post(get_field('img')); $alt = get_post_meta( $img_alt->ID, '_wp_attachment_image_alt', true ); ?> imgがフィールド名です。実例は以下のようになります。 <?php $img = get_field('img'); $images = wp_get_attachment_image_src($img, 'サイズ'); $img_alt = get_pos
以前「object-fitをつかって画像をボックスいっぱいに表示させる方法」でobject-fitを紹介いたしました。私も非常に便利でよく使っているプロパティーの一つです。 そして使えば使うほど、PC向けにもこのプロパティーは使用したくなります。 そこで問題になるのがInternet Explorer(以下IE)とEdgeです。 object-fit-imagesを使用して対応する 先述のブラウザはobject-fitに対応していません。そこで「object-fit-images」というライブラリを使用します。 まずは上記のページにアクセスして緑色の「Clone or download」ボタンを押してライブラリをダウンロードしてください。 HTML まずはjQueryの呼び出しの後に、ライブラリを呼び出します。 このライブラリは「dist」フォルダの中に格納されています。 <script
みなさんはCSSのサイズ指定をする時に、細かい計算をしてサイズ指定をしていますか? calc()は計算式を記述すればブラウザ側で計算して出力します。 しかもcalc()はIEを含むほとんどのメジャーブラウザに対応しているので、安心して使用できます。 また、計算は単位を揃える必要がなく、異なる単位間でも計算してくれるのでレスポンシブコーディングともとても相性がいいです。 それでは具体例を交えながら活用方法を紹介します。 calc()は加算、減算、乗算、除算を行うことができます calc()は下記のように四則演算を行うことが可能です。 //加算 .hoge{ width:calc(10px + 50px); } //減算 .hoge{ width:calc(100px - 50px); } //乗算 .hoge{ width:calc(100px * 50px); } //除算 .hoge{
flexboxやtableと同様に、マルチカラムレイアウトをすることができるdisplay要素grid。通常であればgridコンテナの中に多くのプロパティを記述する必要がありますが、それの便利な自動生成Webサービス「Griddy」を見つけましたので、今回はそれを紹介します。 便利なGriddy サンプルを見ながら生成できる Griddyはブラウザ上で生成結果を確認しながら作業できます。サイトを開くと4つのグリッドアイテムが表示されており、ページ左側の列からグリッドの数や段組、サイズなどを編集できます。 「Grid Template Columns」欄では1行に何個のグリッドを生成するかを編集でき、サイズの指定も行えます。サイズの単位はfr(比率)、 px、 %、 autoから選ぶことができます。 続く「Grid Template Rows」欄では1列に何個のグリッドを生成するかを編集でき
今回はCSSで背景画像のみをぼかす方法を紹介します。 ぼかすとなると「 filter: blur();」を使うことは簡単に想像できると思いますが、これが少し厄介なんですよね。背景だけには適応できず、内包している要素がすべてぼかされてしまいます。 そこで擬似要素を使用して実現します。 デモサイト html <div class="key" style="background-image:url(key.jpg)"> <p><img src="key.jpg" alt=""></p> </div> インラインで背景画像の指定 インラインで背景画像の指定をしているのはCMS等でアイキャッチ画像と共通の画像を背景画像に設定することを想定しています。 .key{ background: no-repeat center center; background-size: cover; padding:
EC-CUBE3.0.3のインストールが無事完了したため次にテンプレートの編集を行ってみたいと思います。 まず手始めにタイトル出力の調整を行う予定でしたが、EC-CUBE2系の知識ではファイルのありかすら分からないといった壁にいきなりぶち当たってしまいました。 今回はテンプレートファイルの場所や更新方法に関して分かったことを、忘備録を兼ねて記載いたします。 テンプレートファイルは3か所に存在 デフォルトテンプレートを使用する想定でテンプレートファイルのありかは以下の3か所 app/template/default/ src/Eccube/Resource/template/default/ app/plugin/[プラグイン名]/Resource/template/ このように3か所にテンプレートが格納されており1から順に該当テンプレートを読み込み、該当のテンプレートがあればそれを表示する
利益をあげる ホームページ制作を してみませんか? 管理画面から簡単操作で出来る楽々更新で インターネットに詳しくない経営者でも1年で利益アップを実現! WEBSITE DESIGN 活用できるホームページは 利益が上がる! 利益を上げるには売上アップかコストダウンしか方法はありません。 売上アップもコストダウンも可能なホームページを活用することで必ず利益は上がります。 「売上」ー「コスト」=「利益」です。 カタログとして活用し 営業コストの削減 ホームページを商談時のカタログとして活用すれば資料作成の手間も省くことができます。事例などをタイムリーに発信しておけば最新の事例を見ながらにして商談を円滑に行えることでしょう。
このページを最初にブックマークしてみませんか?
『利益を上げる大阪のホームページ制作会社|ゼロワンアース』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く