サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
インタビュー
since-inc.jp
行（横軸）を固定してスクロールする 縦にスクロールしてください。 上部の「見出し」だけ固定され、他の要素だけスクロールしていることが確認できます。 ↓ HTMLコード <table> <tr> <th class="fixed01">見出し</th> <th class="fixed01">見出し</th> <th class="fixed01">見出し</th> </tr> <tr> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> </table>
そんなことはさておき、今回はWordPressでホームページを作っていると必ず出てくるページネーションの仕組みとコードを紹介します。 それではどうぞ！ ページネーションとは 上記の画像にある「1 2 3 次の10件」の部分をページネーションと呼んでいます、ページングとも呼ぶみたいですがどちらもほぼ同じ意味です。 WordPressでは記事一覧ページなどで、次の記事やもっと古い（または新しい）記事を表示する際に使います。 ブログがあるホームページでは必ずと言っていいほど見ることができます。 ページネーションを理解しようWordPressでページネーションを実装するには大きく分けて2つの方法があります。 プラグインを使う自分でPHPを書くプラグインはとても簡単なので今回は紹介しません。 自分でPHPを書いて実装する方法を紹介します。 これが完成形完成形のコードがこちら functions.ph
WordPressで投稿記事を並べるときに、最新の記事数件に【NEW!】といったマークなりテキストを付けたいときがあります。 こうして目立つようにしておくと、新着記事に注目が集まって便利ですよね。 今回はそんなときに役立つコードをご紹介します。 「◯日以内に更新された記事にはNEWマークをつけたい」という場合「今日からさかのぼって1週間以内に更新された記事は新着記事として扱いたい」とかそんな時には、WordPressの記事ループ内にこちらのコードを使うと良いです。
ブログの読者に対して、今読んでもらっているページの関連記事を記事下などに表示させたいときがあります。 今回はWordPressで、読んでいる記事と同じカテゴリーの記事を何件か取得して表示するときに使えるコードを紹介します。 関連記事として記事を並べるときなどに役立ちます。 <?php // 同じカテゴリから記事を10件呼び出す $categories = get_the_category($post->ID); $category_ID = array(); foreach($categories as $category): array_push( $category_ID, $category -> cat_ID); endforeach ; $args = array( // 今読んでいる記事を除く 'post__not_in' => array($post -> ID), 'pos
お問い合わせフォームなどで、選択されているラジオボタンによって表示される要素の出し分けを行いたいときがあります。 そんなときにjQueryでチェックされたラジオボタンを判別できると便利です。今回はそんなコードをまとめておきます。 まず、このようなHTMLがあったとします。 <ul> <li><input type="radio" name="btn" id="a" checked="checked">このボタンをクリックするとAAAが表示されます。</li> <li><input type="radio" name="btn" id="b">このボタンをクリックするとBBBが表示されます。</li> </ul> <div class="text text01">AAA</div> <div class="text text02">BBB</div>
こんにちは！福岡のホームページ制作、シンス株式会社の越水です。 YouTubeの再生リストは自動的に動画を連続再生してくれるので便利ですよね。 気に入った動画は共有ボタンから気軽に友達にシェアすることも出来ます。 しかし、ふと「再生リストのシェアって出来ないのかな？」と疑問に思ったところなかなかその機能が見つかりません。 YouTubeには再生リストの共有機能がない？今まで気がつかなかったのですが、どうやらYouTubeのWebサイトには再生リストを共有するためのボタンなどは用意されてないみたいですね。 公式のヘルプページにも次のように書いてあります。 現在、現行のデスクトップ デザインで再生リストを共有することはできません。 以前のデスクトップ デザインに戻すには、アカウント アイコンに移動し、[以前の YouTube に戻す] をクリックしてください。 しかし今回、クライアントさんがY
こんにちは、ちゃんけいです。 Webサイトのローディング画面は、ユーザーにページ読み込みが行われていることを伝えやすく、表示までのストレス軽減に役立つのでおすすめです。 今回はCSSアニメーションを利用した簡単なローディング画面を紹介したいと思います。 まずは完成イメージをご確認ください。こんなローディング画面をつくります。 See the Pen CSS Loading by Chankei (@Chankei) on CodePen.
WordPressで制作したWebサイトはコンテンツの更新が簡単なので、まじめに更新を重ねていけばすぐに100本、200本の記事数を作ることができます。 コンテンツの数が増えてきたとき、サイト上にあると便利なのが検索フォームです。 検索フォームがあればサイト内のコンテンツをキーワード入力で探すことができるので、何ページもアーカイブを辿っていく手間が省けてユーザーにもやさしいホームページになります。 get_search_formで検索フォームを設置WordPressには検索フォームを設置するためのget_search_formという便利な関数があります。 テンプレートの好きな箇所に以下の1行を書き加えれば、その場所に検索フォームが表示されるようになります。
こんにちは、福岡のホームページ制作シンス株式会社の越水です。 クリックすると音が鳴るボタンは「ちゃんとクリックした」というユーザーの認知を助けます。 今回はHTML5のaudioタグを使って、音が出るボタンの作成方法をご紹介します。 音が出るボタンはFlashじゃなくても実現できる。こうした音が出る表現は一昔前はFlashサイトなどでよく見られたのですが、HTML5のaudioタグでも同様の表現が可能です。 まずは音源ファイルを用意する。取り急ぎ必要になるのはボタンをクリックした時に出る音源ファイルです。 フリーの音源素材サイトなどがあるので好みの音源（SE）を探してみましょう。 いくつかSEがダウンロードできるサイトをピックアップしてみましたが、他にも色々あると思うので検索してみてください。 タグ検索: 効果音 – ニコニ･コモンズfreeSFX.co.ukInterface Sound
WordPressでカテゴリーの一覧リストを表示させたいとき、wp_list_categoriesという便利なテンプレートタグがあります。 テンプレートタグ/wp list categories ただ、出力されるのはこのタグの仕様で決まったHTMLになるので、もっと自由にHTMLを変えたいという場合には自分でPHPを書く必要があります。 例えば、リストのなかにFont AwesomeのようなWebフォントを挿入したいときなんかは、自由度の高いHTMLで動的にリストを作ってくれるのは助かります。 今回はそんなときに使えるコードをご紹介します。 <ul class="category-list"> <?php $args = array( 'orderby' => 'name' ); $categories = get_categories( $args ); foreach ( $categ
WordPressで記事のアイキャッチ画像を指定していなくても、記事内の最初の画像を勝手に取得してアイキャッチ代わりに使ってくれたら便利ですよね。 今回はそんな便利なカスタマイズに役立つコードをご紹介します。 まず記事内の一番目にある画像を取得するアイキャッチ代わりとなる記事内の最初の画像を取得するために、WordPressテーマにあるfunctions.phpに次のコードを書き加えてください。 function catch_that_image() { global $post, $posts; $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); $first_
Webサイトをつくる時、簡単なニュースの更新だけのためにCMSを組み込むのはちょっと大げさだな〜と感じることはないでしょうか？ 今回はそんなときに役立つjquery.csv.jsを紹介いたします。 これを使えばjQueryでCSVデータを分解し取り扱うことが可能になり、ニュース一覧のような繰り返し要素をCSVデータをもとに作りたいときに便利です。 jquery.csv.jsを使ってみようそれでは早速必要なjsファイルをダウンロード、といきたいところですがどうやら配布元のページが見られなくなっているようなので今回はこちらのページにあるサンプルから使用させていただきました。 <script type="text/javascript" src="jquery.csv.js"></script> <script type="text/javascript" src="sample.js"></s
WordPressで投稿記事を表示させる時にカテゴリーごとに異なるクラスをつけて、それぞれにCSSを適用したい、なんてことよくありますよね。 今回はWordPressで記事が属するカテゴリーのスラッグを取得して、そのままクラス名としてHTMLに出力する方法についてまとめました。 記事のカテゴリー情報を取得するまずは記事がどのカテゴリーに属しているのかという情報を取得することです。 WordPressではget_the_category()というテンプレートタグを使えばカテゴリー情報を得ることができます。 記事を表示するループのなかに次のように書きます。 <?php // 記事のカテゴリー情報を取得する $cat = get_the_category(); // 取得した配列から必要な情報を変数に入れる $cat_name = $cat[0]->cat_name; // カテゴリー名 $ca
Webサイトのフォーム入力をするとき、郵便番号だけ入れてボタンを押せば該当する住所を表示してくれるやつがあるととっても便利ですよね。 そんな便利なやつを実現してくれるjQueryプラグインを紹介いたします。 jquery.jpostal.jsを使ってフォームのユーザビリティを上げよう！jquery.jpostal.jsファイルはこちらのページからダウンロードできます。 開発者さんのサイトでもソースを公開しているそうなので、そちらにファイルを読み込んでもいいよ！ということが書かれていてとっても親切ですね。 そんなわけでまずは使用するjsファイルを読み込みましょう。事前にjQuery自体を読み込んでおくのも忘れずに。
炭水化物控えめモードの越水です。 先日、Web業界の有名企業、株式会社ベイジの枌谷さんが福岡でセミナーをやるということで参加してきました！ 本当に参加して良かった！中身が濃くてめちゃくちゃ勉強になりました。 興奮冷めやらぬままレポートスタートでございます。 消費者動向や市場の変化から注目されるUX（ユーザー体験）セミナーのテーマは「Web制作におけるUXの実践」。 UXはユーザー体験とも呼ばれます。 ユーザーが商品やサービスを認知する前から、利用終了までに発生する体験すべてのことを指します。 どうしてこのUXが大事かというと、市場環境の変化によって、今はしっかりとしたユーザーの理解なくしては商品が売れなくなってきているからです。 だからユーザー体験と照らしあわせ、よくよくビジネスの戦略を練り、そのなかで「Webサイトはどうあるべきなのか？」をよく考えていかないといけません。 今回は、そんな
Web制作をしていて特定のページのときだけアニメーションを加えたり、要素を追加したりしたい時があります。 いろいろと解決法はあると思いますが、今回はURLに特定の文字列が含まれているかいないかを調べ、その文字列がURLに含まれていた場合は他のページと異なった処理を行うjQueryをとある案件で使ったのでまとめます。 jQueryのコードは下記の通り。
こんにちは、福岡のホームページ制作シンス株式会社の越水です。 WordPressで制作したホームページのブログ記事に、前後のページへのリンクを設置する方法を紹介します。 前の記事や次の記事へのリンクを設置することで、Webサイトの訪問者に別ページも見てもらうきっかけを与えることができ、直帰率の低下にも繋がります。 今読んでいる記事の前後ページへのリンクはWordPressが勝手に生成してくれる！WordPressならば便利なテンプレートタグが用意されているので前後の記事へのリンクを作る場合も簡単です。 テンプレートタグprevious_post_linkとnext_post_linkを使う前の記事へのリンクを作るときはprevious_post_link、次の記事へのリンクを作りたい場合はnext_post_linkというテンプレートタグを使うことで、簡単にリンクの設置ができます。 Wor
採用応募数を増やしたい！採用サイトに用意すべきコンテンツを解説します 2023.05.17Webマーケティング
スマートフォンやタブレットでウェブサイトを見ている時、ボタンにタップすると通話発信ができるようにするための <a href=”tel:”>というリンク設定があります。 モバイルデバイスでの表示のときは便利なのですが、PC表示のときにこのリンクを動作させたくないというケースに多々出くわします。 そんな時はCSSのpointer-eventsを利用するとクリック・タッチイベントを無効化してくれるので、PC用のCSSに書いてあげると便利です。
こんにちは、福岡のホームページ制作シンス株式会社の越水です。 ホームページ制作をしていると「Instagramの特定のハッシュタグで投稿されている画像を一覧表示したい」という場面があります。 今回はInstagramからリリースされているAPIとjQueryプラグインを使って、ホームページ上にInstagramの画像フィードを表示させる方法を紹介します。 好みのハッシュタグの画像を並べるのに便利なInstafeed.jsInstagramに投稿されている画像フィードを取得するために今回はInstafeed.jsというjQueryプラグインを利用します。 まずはInstagram APIの取得準備をする。そのための下準備として、InstagramのAPIを取得するためのアプリケーション登録をします。 アプリケーション登録といってもそれほど難しいことはしません。 まずはInstagram De
ホーム ＞ ブログ ＞ ドラッグアンドドロップで記事順序の入れ替えができるWordPressプラグインIntuitive Custom Post Order（カスタム投稿タイプの記事にも対応） ドラッグアンドドロップで記事順序の入れ替えができるWordPressプラグインIntuitive Custom Post Order（カスタム投稿タイプの記事にも対応） あまり多いケースではないですが、WordPressの投稿記事の表示順を変えたいという場合に役立つプラグインをご紹介します。 WordPressで投稿した記事は基本的には公開日の順番で表示されるようになっています。 テーマファイルを触れば表示順を変更することも可能なのですが、実際は「Web制作に詳しくない担当者さんでも簡単に作業できるようにしたい」という場合がほとんどかと思います。 そうなると通常は上に表示させたい記事の公開日時を、編
WordPressサイトを制作している時に「このカテゴリーの一覧ページではボタンを表示させたい」とか「あのカテゴリーの記事ページだけこのテキストを表示させたい」とか、特定のカテゴリーに応じて変化を加えたいことってありますよね。 今回はそんな時に確認してほしいカテゴリーによる条件分岐の書き方をまとめました。 カテゴリーの記事一覧ページでよく使うis_categoryの条件分岐記事一覧を表示させるためにループをさせている箇所や、アーカイブページでは条件分岐のためにis_categoryというタグを利用することが多いです。 実際の書き方を見て行きましょう。 指定箇所がカテゴリーの記事一覧だった場合に条件分岐させる
CMSを組み込んだホームページの制作をしているときによくある、要素が横並びのレイアウト。 コーディング前のデザインだと綺麗に整列してるけど、実際にコーディングしてみると要素内テキストの長さの可変が前提になってない…。なんてこと、よくありますよね。 そんなとき、同じ段に横並びする要素の高さを揃えるのに便利なjQueryプラグインがjquery.matchHeight.jsです。 CSS3のFlexboxでも対応できますが、jQueryのほうが慣れてるし。。という方にはおすすめです。 実際の動きはデモサイトを見てもらえればわかりますが、要素内テキストの行数が異なっていても、横並びの要素同士ならうまい具合に高さを一緒にしてくれます。 実際に使ってみよう使い方はとっても簡単です。 jquery.matchHeight.jsのGithubページからダウンロードしたプラグインファイルを読み込んでjQu
ホーム ＞ ブログ ＞ Webマーケター必読の「沈黙のWebライティング」著者、ウェブライダー松尾さんのセミナーに参加してきました！ #cssnite こんにちは！シンス株式会社の越水です。 突然ですがあなたはブログで記事を書いても書いてもアクセスが集まらずに「心が折れそう…。」と感じた経験はないですか？ 私もブログを読んでくれている人にとって魅力的な文章の書き方がわからず、「時間と労力ばかりかけて結果がでない…。」という経験がたくさんありました。 でも、実は、自分のサイトを見にきているユーザーの目的と感情を想像して、その目的達成を手助けするために「どんな内容で文章を書けば良いか？」を意識するようになったことで解決したんです。 そして、その解決のきっかけとなったのが「沈黙のWebライティング」でした。 [amazonjs asin=”4844366238″ locale=”JP” titl
WordPressで記事の新規投稿や編集を行うときに使用する編集画面。 記事本文を入力する部分はビジュアルモードとテキストモードの切り替えが可能で便利です。 ただビジュアルモードのデフォルトスタイルは、実際にホームページ上で表示される見た目と異なったりしますよね。 うーん、いまいちサイト表示と違うんだよなぁ… 今回はWordPressの記事編集時の画面をサイト表示と同じように変更するカスタマイズ方法をご紹介します。 ビジュアルエディタ用のスタイルシートを用意しようまずはビジュアルエディタで入力したコンテンツに適用するスタイルシートを準備します。 テーマフォルダ直下にeditor-style.cssというファイルを用意して、投稿するコンテンツに反映されるCSSをコピーします。 この時の注意点として、余計なclassなどはそのままコピーしてこないようにしましょう。 例えば、サイトで記事を表示す
ホーム ＞ ブログ ＞ 【WordPress】クリック１つでカスタムフィールドのグループを増やせるSmart Custom Fieldsの繰り返し機能がすごく便利 カスタムフィールドの作成がお手軽簡単にできるプラグイン「Smart Custom Fields」 こんにちは！福岡でホームページ制作を行なうシンス株式会社の越水です。 ホームページ制作でWordPressを利用する時、案件によっては投稿時にお客さんがちょっとした情報を入力しやすいようにカスタムフィールドを作ってあげることってありますよね。 今回はカスタムフィールド周りを自由に設定したいときに役立つWordPressプラグイン、Smart Custom Fieldsをご紹介します。 カスタムフィールドを作るプラグインでいうと、Advanced Custom FieldsやCustom Field Templateがよく知られるもの
ホームページ制作会社 シンス納得いくまで とことんお付き合い制作実績は500件以上。 親身なヒアリングを通して 納得度の高いご提案を。 「WEBの知識がない」という方も ご安心ください。 丁寧でわかりやすい説明をお約束します。
こんにちは、福岡のホームページ制作シンス株式会社の越水です。 ブログやメディアタイプのホームページを制作する時に欠かせないのがアイキャッチ画像の設定です。 WordPressではアイキャッチ画像を表示させるための機能を備えており、やり方さえ覚えれば簡単にアイキャッチ画像で記事を目立たせることができます。 今回はWordPressでアイキャッチ画像を使うためのコーディングをまとめました。
こんにちは！福岡でホームページ制作を行なうシンス株式会社の越水です。 使うたびに何度もググってるのでメモしておきます。 WordPressではthe_excerptというテンプレートタグを使用すると記事の抜粋文が表示できるようになります。 「抜粋文」というのはトップページなどによくある、記事一覧で各記事の最初の〇〇文字を表示したりするアレです。 使い方を覚えればthe_excerptで出力する文字数を設定したり、末尾の文言を変更したり記事リンクを設置したりできます。 the_excerptの使い方 まず日本語環境のWordPressは英語と違って半角全角があるので、日本語版WordPressに含まれているWP Multibyte Patchプラグインの有効化を忘れないでおきましょう。 有効化すれば次のタグが記述された箇所に記事冒頭からの抜粋文が表示されます。文字数はデフォルトで110文字で
次のページ
このページを最初にブックマークしてみませんか？
『福岡のホームページ制作会社 | シンス株式会社』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く