はてブする困ったぶろぐ(komatta-blog)ライターのITOKENこと(@itoken456)です。この記事であなたの「困った」が解決されたなら「いいね!」お願いします!本当はあんまり書きたくないのだけど、当ブログ「困ったブログ」でのカスタマイズやノウハウ、プラグイン運営法などを一挙公開しちゃいます。ほとんど他力本願です。分岐タグをつかってデバイスごとに広告表示を設定Stinger5カスタマイズwordpressのテーマは「STINGER5」を使用させて頂いてます。以前記事でもちょっと書きましたので一応紹介はしておきますが、かなり変更を加えておりますので一応参考までに。STINGER5はかなり多くのブロガーさんが使われているので、まずパッと見の印象をなるべくstinger5のデフォルトデザインっぽく見えないようにしているつもりです。スポンサーリンクSNSボタンを一新こんな感じです。統一感があってデザインも素敵。スマホ表示でも手を加える必要なし。完全にキャリコ氏のコードをパク参考にしました。凄く分かりやすいので下記ページをご覧ください。ボタンをトップページにも設置する方法TOPページのSNSボタンは削除しました。記事冒頭のデザインを変更パソコンから見た記事TOPは現在こんな感じです。パンくずリストは個人的に必要性を感じなかったので削除しました。ツイッター・feedly・はてブのカウント数だけ表示させています。Cache」というプラグインを使用しています。「あとで読む」・「RSS購読する」・「はてブする」はまんまリンクを張っただけです。スマホ表示でひと工夫スマホ表示にした場合はこう表示されます。SNSのカウント数はそのままで、ツイッター・feedly・はてブを「LINEへ送る」に切り替えています。スマホの場合、はてブやfeedlyよりもLINEを使っている人のが断然多いだろうという判断のもとです。PCスマホでの表示の切り替えは条件分岐タグwp_is_mobile()を使っています。SNSの数を表示させます。?>ツイッター・feedly・はてブリンクなど。?>アイコンや色の設定SNSのアイコンは「アイコンフォント」を使用しています。Stinger5は基本設定がデフォなのでコードを取得すればすぐに使えます。Font-AwesomeSNSアイコンのカラーコードはこちらを参考にしました。一覧あとナビゲーションメニューにもアイコンを入れるだけでサイトっぽさが増しますよ。見た目もぱっと目を引くデザイン・配色の方が良いです。私はサイトデザインするだけのスキルがないので、配色だけでサイトのイメージを作り上げています。いってもやってることは下記のサイトで提案されたカラーパターンをそのまま当てはめているだけなんですが。http://coolors.co/「Coolors」は次々とセンスある配色パターンを提案してくれるサイトです。スペースキーを押すと、いい感じの配色パターンを次々と生成してくれます。気に入った色は固定しておくとさらにそれに合った色を探してくれるので便利。スペースキーで次々と配色パターンが更新されます。STINGER5フッターを3段にフッターエリアを3段にしました。参考:【Stinger5カスタマイズ】レスポンシブデザインに合せた変更にチャレンジ!フッターカスタマイズのついでにね。border-radiusでサイト全体を柔らかい印象にcssでできる限り四角の角を丸くしています。◎px;角がない方がサイト全体がPOPな印象になります。次はプラグインに関するカスタマイズです。Posts」のプラグインをそのまま使用している方が多いかと思いますが、カスタマイズを楽にするために敢えて「テンプレートタグ」を使います。テンプレートタグは「wpp_get_mostpopular();」。Widget」というウィジェット内でPHPコードが使用できるプラグインを使っています。posts」のテンプレートタグを使ってトップページに人気記事表示&thumbnail_width=270&thumbnail_height=150に設定するとこのブログと同じサムネイルの大きさになります。大きい画像の方が目を引きますよね。Widgets」でTOPページと記事ページの表示を分岐TOPページと記事ページのランキング条件を変えています。TOPページが「今週のランキング」。記事ページ(TOPページ以外全て)が「今日のランキング」です。Widgets」というプラグインを使用しています。インストールすると各ウィジェットを各ページごとに表示・非表示するか選択できるようになります。して期間別のランキングを分岐表示されることでリアルタイムの人気記事と週単位で人気のある記事を表示できるようになります。これで少しでも多くの記事をアピールできます。CSSでナンバーを左上に表示させる。ナンバリングをしてみたのですが、オンマウスすると画像でナンバーが隠れてしまいます。わかる方は修正してお使いください。4px;}サムネイルに白枠を付けるサムネイルに白枠を追加しております。wordpress-popular-posts/style/wpp.cssのサムネイルをちょっと修正。サイドバーの背景をグレーにしていますので写真と背景の間にワンクッションできます。5px;}上記のように書き換えてみてください。私は本文中の広告は下記のように貼っています。ブログ本文中で468×60というサイズの広告を出している場合。パソコンで閲覧する人にとっては問題ありませんが、もしスマホで閲覧した場合、モバイル表示では幅468は画面で収まらないので飛び出してしまいます。逆にモバイルでは250×250を本文中に表示させたくても、パソコンで見るとサイズ的にインパクトに欠け、もっと大きなサイズの広告を出した方が目を引くかもしれません。分岐タグをつかってデバイスごとに広告表示を設定そこで先にも出てきた条件分岐タグwp_is_mobile()を使っています。毎回長々とコードを貼るわけにもいきませんのでそれらをショートコードにしちゃいます。'KOUKOKU_shortcode');これで[KOUKOKU]というショートコードを貼ればデバイスごとに広告を分岐できます。私はここで[KOUKOKU-A]、[KOUKOKU-B]というように分け、さらにアドセンスコードもそれぞれ作成すれば個別の広告のデータを取ることが可能です。モバイルだとSTINGERがショートコードを読み込まない。私のサイトでは、広告バナーのコードを張る際は、ショートコードを用いていますが、WPtouchで最適化したサイトをモバイルで見るとこうなっていました。本来この部分にアドセンスがショートコードによって表示されるわけですが、反映されていません。ショートコードを読み込ませる独自プラグインを作るWordPressをインストールしているサーバー上の「wp-content/plugins」というフォルダ下に、WPtouchを読み込ませるプラグインのディレクトリを作成します。(※この内容は別ブログで書いていた内容になりますのでWPtouchにショートコードを読み込ませるという内容になっていますが、やってることは同じです。)ディレクトリ名は何でもOK。私は「WPtouch-shortcode」としました。今度はテキストエディターを立ち上げ、以下のコードをコピーしてください。各項目を適当に入力してください。適当*/?>さらにその続きで先のショートコードを記載します。上記のコードを先ほどのプラグイン情報の下に入れてください。この時必ず直下に記載してください。プラグインの場合はPHPの制御コード下に余計な空白文字や改行コードを入れると、それだけでエラーになるのだそうです。これで完成ですので、ファイルを保存し、ファイル名を「●●●(何でもいい).php」とします。このPHPファイルを先ほど作ったディレクトリの中にアップロードします。参考:WordPressのショートコードをスマホでもPCと同じように表示させる方法これでプラグイン一覧に自分が登録したプラグイン情報で表示されればひとまず完成です。プラグインを有効化するのをお忘れなく。レスポンシブ広告使えば済む話なんですけどね。私はこの方法でやってるので一応載せときます。カスタマイズこの記事がお役に立ちましたらポチポチして頂けると嬉しいですフォローしていただけると新着記事が届きます。...岐阜県中津川の有名店栗きんとんを食べ比べしてみたグルメ中津川で各社メーカーの栗きんとんを一個ずつ買ってきました。通過するといよいよ面談を迎えます。...リーダーズカードの還元率改悪決定!次の乗換先はリクルートカードプラスな理由クレジットカードリーダーズカードのポイント付与基準の改悪が発表されました。「ボスマネジメント」という言葉をご存知でしょうか。日々の事でふっと悩んだ時・迷った時にあなたのお力になれるかもしれないブログです。月間24万PV超達成。