カウンセラーのための 「あなたに相談したい！」と言われる、集客／顧客獲得型ホームページの作り方

【趣旨】 WordPress（に限ったことではありませんが）のカスタムフィールドなどの出力で な出力を、PHPの「preg_replace」を使用して という素敵な見た目に変更します。 （フィルターフックは使用しませんので、functions.phpは編集不要です。） 【コード的には】 Before <p>本日は晴天なりテキストテキストテキストテキストテキスト...</p> <p>二段落目テキストテキストテキストテキストテキストテキストテキスト...</p> After <p><span class='mydeco'>本</span>日は晴天なりテキストテキストテキストテキストテキスト...</p> <p>二段落目テキストテキストテキストテキストテキストテキストテキスト...</p> CSS .mydeco { color: #fff; background: #c6506d; margin: 6px 5px 0 0; padding: 17px 12px 12px; text-align: center; float: left; font-size: 44px; font-weight: 400; line-height: 30px; } （CSSはあらかじめ用意しておきます。） 【方法】 テンプレートの当該カスタムフィールドの出力が <?php the_field('cf_mytxt',$post->ID); ?> だとして、出力箇所を以下のように変更します。 （※プラグイン「 Advanced Custom Fields 」での出力方法です。 　標準では post_custom('cf_mytxt')のように取得します。） <?php $string = get_field('cf_mytxt',$post->ID); //（１） $pattern = "/^<p>(.)(.+)$/mu"; //（２） $replac...

【About】 CSS3で採用された「background-size」ですが、「cover」は画像の縦横比を維持したまま、背景領域を完全に覆うよう背景画像を配置（大概は縦か横が切り取られる）してくれるとても素晴らしいスタイルです。 ところが残念なことにIE8では対応していません。 しかしこんな便利なスタイルをたかがIE8のためにゆずるわけには行きません。 デキる子にはベストエフォートを、デキない子には苦労をしてがんばってもらう。（ポリフィルというやつ） その方法を以下に提案します。 【方針】 モダンブラウザでは当然CSS3の「ackground-size:cover;」を指定。 IE8では、JavaScriptで幅に応じたそれぞれの背景画像を動的に変更する。 （IE8用に複数の背景画像を用意する必要があります。） 【HTML】 <!--ヘッダーあたりで--> <script src="/path/to/jRespond.js"></script>・・・※ ・・・ <div id="myArea"></div>・・・ここに背景画像を表示 ・・・ ※　jRespond.js（IE8用に設置） ブレイクポイントを指定して、ブレイクポイント毎の動作を指定できるすぐれもの https://github.com/ten1seven/jRespond 【CSS】（モダンブラウザはこれで表示） #myArea {     background: url(/path/to/image/back.jpg) no-repeat center top;     background-size: cover;     ・・・ } ・・・ @media (min-width: 1200px) {   #myArea {       height:500px;   } } @media (min-width: 992px) and (max-width: 1199px) {   #myArea {     ...