MoneyReportマネーにまつわる報道を取り上げ、自分の切り口で切り取り、噛み砕いてお伝えします。先週の金曜日から作り始めた新WebサービスMVNO価格一覧表がようやく形になってきました。昨日でデータ容量別に絞り込める様になりました(^-^)vここまでの足跡は下記リンク先に。test05ただ主立った機能は機能までで組み切ったので、本日6日目は追加のサブ機能を実装したいと思います。サブ機能MVNOの価格一覧表だけだと「安いMVNOは分かった。実際どうなの?」という部分が見えてきません。MVNOの使い勝手や、色々な情報を補完してあげる必要があります。そこでMVNO関連記事を表示します!人の記事を紹介するのは、本筋ではないのできちんと自分の言葉で説明した記事を表示したいと思います。私のこのブログの記事でMVNOの記事を多数書いているので、その記事へのリンクを付ける感じになります。関連記事を表示するための作業としては下記。ブログ記事引用TABLE作成INSERT文を作成(ブログ記事よりタイトルやURLを取得)PHPでコードを追加し、TABLEからSELECT文でデータを取得Bootstrapの基本グリッド列を利用してブログ記事を表示と言った感じになります(^-^)v表示周りはBootstrapフレームワークを使っています。「基本グリッド列」は下記の様なコードで実現しています。</div></div>グリッド列を内包して使っています。グリッド列は横幅を12分割していて、各列の横幅を数値で指定します。解説すると下記の様な感じ。←8で書いてあると、1行の三分の二を使う</div></div>これだけで、きれいにレスポンシブデザインとして機能します。関連記事表示と言うわけで、本日実装したMVNO関連記事表示を実際に見てみましょう(^-^)v本日の成果物は下記リンク。test06MVNO価格比較一覧表の下部に「MVNO関連記事」を表示する様にしました!最大9記事まで表示!関連記事は毎回ランダムに表示される様にしました(^-^)v上の画像と表示されている記事が違いますよね?また、個別のMVNO事業者を選択した場合にはそのMVNOに関連した記事のみ表示されます!タブレットだとこんな感じ。画像が少し小さくなります。スマホだとこんな感じ。スマホだと画像は邪魔だったので表示しない様にしました!でもこんな「スマホのみ非表示」なんていう指定もBootstrapを使うと簡単♪imgタグのクラスに「class="hidden-xs"」と指定するだけでスマホのみ非表示に出来ます!もちろん、タブレットのみ非表示とか、スマホのみ表示とかも簡単に指定出来ます。いやー、Bootstrapフレームワーク便利ですねぇ(^-^)v作り込みはここまでで一旦終わりにしたいと思います。16:36MVNO価格一覧に「関連記事」を表示可能に!TweetスポンサーリンクなんとFXが無料で出来る!XM.COMに口座を開設するだけで3,000円の投資資金がもらえ、入金ボーナスは最大50万円!お得にFXを始めるチャンスです。Check!国内MT4業者で選ぶなら外為ファイネストが最強!世界最狭水準の低スプレッドでFXトレード可能です。マネー報道の記事よく読まれている人気記事1千NZドルで5年間スワップ金利を貯めてみた顛末。Webサービス機能追加。はてなブログProマネー関連記事を書いています。新着エントリーはてなブログをはじめよう!MoneyReportさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。