アフィリエイターの間では言わずと知れた人気WordPressテーマ「AFFINGER4」 AFFINGER4で特に便利な機能といえば「ランキング表示機能」ですよね。 こちらがAFFINGER4のランキング表示です。 参考アフィリエイトならAFFINGER（アフィンガー） HTMLとCSSで直接再現すると、記事がコードだらけで汚くなるし編集するにも大変です。 そこで今回は、カスタムフィールドを使ってのランキング表示機能を実装してみました。 カスタムフィールドを使うことで、あらかじめデザインを設定したファイルに値を挿入するだけなので、編集がとても楽になります。 最終完成イメージ カスタマイズ完成イメージです。 このランキングは直接コードを書いているわけではなく、カスタムフィールドに入力した値を下記のようなショートコードで呼び出しています。 [myphp file='cf-ranking'] カ

WING（アフィンガー5）で「オプションカラー」の色を変更する方法をご紹介します。 具体的には WING（アフィンガー5） の、記事内のWebアイコン、数字リストのカラー、チェックリストのカラー、ブログカード、table（表）全体のカラー、RSS（購読する）ボタン、SNSボタン、お知らせ、おすすめ記事、こんな方におすすめ、フリーボックスウィジェット、メモボックス、スライドボックス、ウィジェット問合せフォームボタン、オリジナルウィジェットボタン、会話風ふきだしのカラー、目次プラグイン（TOC+）のカラー、コンタクトフォーム7送信ボタン、サイト管理者紹介、サムネイル画像、TOPに戻るボタン、などのオプション全般の色変更が可能です。 外観カスタマイズへ進む WordPress管理画面⇒外観⇒カスタマイズ⇒オプションカラー　と進みます。 記事内のWebアイコン 記事内の　スタイル⇒アイコン　から表

あか子です。 当ブログで使っているWordPressテーマは「Luxeritas」です。 シンプルでキレイにまとまっていて、とても気に入っているのですが、1つだけ気になることがありました。 それはスマホで見たときのメニューが目立たないこと。 そこで、アフィンガーのようなミドルメニューをLuxeritasで表示させるようにカスタマイズしました。（ヘッダー型メニューとでもいうのでしょうか） 完成形はこのようなものです。

これまでは、僕はアフィリエイトサイトのWordpressテーマは全てStinger、Affingerで作ってきたのですが、このサイトのトップドメインは見ての通り、Luxeritas（ルクセリタス）で作っています。 このテーマかなり扱いやすいです。テーマとして使ってみた上で、その魅力をアフィリエイター目線で紹介したいと思います。 使おうとしたきっかけはカードデザイン 僕の運営している別サイト「オウチデザイン」を見ていただくと分かりますが、カードデザインになっています。Wordpressテーマでカード型ができるものは、無料では意外と少ないですよね。 有料テーマだと、Coco Luce（ココルーチェ）、Affingerの子テーマで「JET」や「CARDs」がそれに当たります。無料だと「マテリアル」がカードに近いデザインですね。 今回は、トップドメインを女性向けのサイトとして作りたかったため、立体

まずは、スタイルシート（.cssで終わるファイル）にこちらのコードをコピペします。 /*-------------------- オリジナルのフレーム --------------------*/ .frame { width: 80%; margin: 30px auto 20px; padding: 30px 20px 0; border: 3px solid #aaa; position: relative; border-radius: 3px; background-color: #fff; } .frame-title { position: absolute; top: -13px; left: 20px; padding: 0 5px; background-color: #fff; } .frame-title .fa { margin-right: 5px; } .ca

角の丸い「タブ」をHTMLとCSSで作る方法左上と右上の角を丸くして「タブ」に見えるデザインをHTMLとCSS(スタイルシート)で作成する方法を解説。リンクに長方形の枠を加えて上側の角を丸くすると「タブ」らしく見え、視覚的に分かりやすいナビゲーション機能が作れます。文字はテキスト・配色はCSSで記述するため、ソースをコピーするだけでいくつでも並べられ、修正も簡単です。

この記事は2017年3月14日に更新しました。 情報が古くなっている可能性があるのでご注意ください。 この記事の読了時間は約4分です。 リストタグをブログでよく使います。文字装飾をしていても文章だらけだとパッと視認して内容が入ってこないので、要点の整理などで使っています。 リストタグはwordpressの標準レイアウトで入力してきたんですが、「もうちょっと見やすいリストデザインにしたいな」と思って、コピペで完結するCSSをサルワカさんからお借りして適用させてみました。 そこで問題となったのがulタグです。 ulタグにCSSを適用させてしまうと、メニューバーや人気ランキング記事などulタグを使って組み立てているコンテンツが全てそのCSSが適用されてしまい、とんでもないことになってしまいます。 既存のコンテンツulタグはそのままで、記事内のulタグのみCSSを適用させることができるような方法を

最近、フォーラムで、Wordpressテーマのカスタマイズに関する質問をいただくことがあります。 それで、気づいたのですが、Wordpressを始めたばかりの方は、カスタマイズする箇所を膨大な量のCSSファイルの中から探して編集している方が結構おられるようです。というか僕も、始めたばかりの頃はそうしていました。 僕は、比較的CSSをいじるのが好きな方ですが、今その方法でカスタマイズするとなると、面倒くさすぎて嫌になってしまうと思います。けれど、そのようなことをしなくても、最近のブラウザには、適切なCSS編集箇所を手軽に探し出して、テスト動作させられる環境が整っています。 Chromeの場合だと、デベロッパーツールというのですが、これを使うと結構簡単にスタイルシートのカスタマイズを行うことができます。 今回は、Wordpressを使い始めたばかりの方向けに、「とりあえずこのようにすれば大抵の

こんにちは、和波です。 最近またWordPressのカスタマイズにハマっていまして、まだ手付かずだったスマホ向けのデザイン改良をしてみました。 結果から言うと、PC、スマホそれぞれこんな感じのデザインにまとまりました。 PC スマホ ……うん、とても見やすいですね！ スマホの直帰率が高い……デザイン変更してみよう！ このブログはPCとスマホのお客さんが半々くらいなのですが、直帰率はPC76%、スマホ85%と10%近い差が出てしまっています。 考えられる一つの原因としては、ブログは基本PCで書いているため、「スマホから見るとどうなるか？」をあまり真剣にチェックして来なかったことです。 問題点は以下でした。 PCで便利に使えるサイドバーがスマホだとだいぶ下の方に行ってしまう（カテゴリが中々出て来ない） Simplicity標準のメニューは右上に小さく折りたたまれてしまい、分かりにくい（PCのメ

wordpressでGooglePlayとAppStoreのアプリのダウンロードバナーを簡単に作成し、そして綺麗に並べる方法をご紹介します。 具体的には、 の表示を実現する方法です。 みなさんこれをやるの結構苦労していませんか？ 私はしました。2時間くらい悩みました。 ですが、この記事ではブログに詳しくない人でも簡単にできるように、コピペでできるようにしてあるので初心者の方も安心してください。

以下は、CSSでタブ表示を行って、コンテンツの”表示/非表示”エリアを入替える方法です。 タブ機能のHTML タブのHTMLとなるコードはこちら。 <div class="tabs"> <input id="tab-1" type="radio" name="tab-radio" checked> <label class="tab-label" for="tab-1">ページ1</label> <input id="tab-2" type="radio" name="tab-radio"> <label class="tab-label" for="tab-2">ページ2</label> <input id="tab-3" type="radio" name="tab-radio"> <label class="tab-label" for="tab-3">ページ3</label> <i

ウェブフォントにハマりすぎて、かなり泥沼化していたのですが…。この度ようやく1つのゴールに辿り着くことができました。 その結果が「Noto Sans CJK JP」の採用です。 しかしこのフォント、Webフォントとして使用するには些かサイズが大きすぎるのが問題。そのまま使ってはページの読込速度に大きく影響してしまいます。 そこで必要なのが、フォントの軽量化。具体的にはこれを「サブセット化」と言います。 Noto Sans とは？ 最初にちょっと「Noto Sans」というフォントについてご紹介しましょうか。 これは、 Google が、Adobe と共同開発した無料かつオープンソースのフォントファミリーNoto Sans CJK をリリースしました。 via: Google、オープンソースの日中韓フォントNoto Sans CJK を無料配信。Adobe と共同開発 - Engadget

こんにちは、UXデザイン室の松山です。 最近、クジラのトイレマットを衝動買いしました。 前回のTips*Blogでは「マウスホバーでアコーディオンさせた要素の中で動画を再生する方法」を説明しました。 今回は、アニメーションではなくレスポンシブサイトで使えるビギナー向けの簡単なCSSテクニックを紹介します。レスポンシブって何？という方は、UXデザイン室の石川室長が書いた大人気の過去記事「レスポンシブwebデザインとは？」をご覧ください。 レスポンシブサイトを構築する際に、デザイナーさんからあがってきたデザインを見てどのようにコーディングするか悩む事も多いかと思います。そんな時に知っていると便利なCSSテクニックを紹介します。 今回は下記のような黒板のデザインを実際にレスポンシブでコーディングしてみました。 ちなみにこちらのGIFアニメは、Chrome拡張機能Animated Gif Capt

色白おばけ (id:lightgauge) さんのブログ記事で使われていた”黒板風囲み枠”にインスパイア（笑）され、私も黒板風囲み枠のCSSを作ってみました。 はてなブログで独自のWEBフォントを利用する方法 - 攻めは飛車角銀桂守りは金銀三枚 CSSは参考せず自分で組みました。borderで太枠囲んでるだけですけど。 HTML&CSS HTML&CSS ポイント 黒板風囲み枠CSSです。 はてなブログで使うには、ダッシュボード→デザイン→カスタマイズ→デザインCSSに以下のコードを貼り付けて下さい。 @font-face { font-family: 'HuiFontP109'; src:url('/fonts/public/HuiFont/HuiFontP109.eot'); src:url('/fonts/public/HuiFont/HuiFontP109.eot?#iefix')

こんな感じでリンクをボタン化できます。一応前提でWordPress。でも全部ではないですが、ほとんどの無料ブログでも多分できるかなと思います。 スタイルシートでボタン作成 まずはスタイルシート（CSS）へ次の記述を追加します。スタイルシートは下に書いた物が優先的に反映されますので、一番下に追加でOKです。 背景色や文字の色、太さなどちょっとした事でクリック率も違ってくるのでカラーや文字色、文字の大きさなどはお好みで変更してみて下さい。 ボタン単品（１つだけのやつ） /* 赤ボタン単一 */ .red-btn { font-size:16px; margin-left: auto; margin-right: auto; display: block; width: 300px; margin-bottom: 1em; } .red-btn a { display: block; posit