NEXTはみ出し者が、ヒーローになる物語。5件のコメントyonaminetakayukiバズ部が無料提供しているWordPressテンプレート「Xeory」が非常に熱い。有料のテンプレートよりも使いやすいのではないだろうか。私も当ブログではXeoryをオススメしている。初心者にも安心の仕様になっているのでこちらも自信を持って推奨できる。私が行ったXeoryのカスタマイズをシェアしようと思う。CSSなどを編集するので、バックアップを取りながらぜひ試してみて欲しい。ファーストビューを改善する!まずは下記の画像を見て欲しい。これは私のブログの記事だ。肝心の記事コンテンツ部分が十分に見えない。読者は記事を読んでくれる可能性が高まるはずだ。ここで私が見なおそうと考えたのが以下の4点。一個一個実践してみよう。ヘッダーメニューを外してサイト下に配置まず、私はこのブログのヘッダーメニューが効果的ではないと考えた。別にヘッダーメニューをここに置く必然性は必ずしも無いと判断した。それよりもファーストビューでなるべく多くの文章を読ませたほうが効果的なはず。そこで、ヘッダーメニューをブログ上部から外し、フッター部分に配置するようにカスタマイズ。ダッシュボード管理画面(の左サイドメニュー)>外観>カスタマイズ開くと以下のような画面が開くので「ナビゲーション」を展開してグローバルナビの部分を変更しよう。するとブログ記事は下図のようになった。先ほどよりもブログ記事が多く見えるようになった。パンくずリストを記事下に配置ブログ上にある上図・下記のようなものをパンくずリストという。映画「ビリギャル」は単なる逆転合格の話じゃなかった件これはGoogleのクローラーが、サイトの構成を理解しやすくするためのものだ。これがあることによってサイトの階層構造が分かりやすくなる。ここが重要なのだが、パンくずリストはあくまでクローラーのためにあるものであって、人間のためでは無いということ。私達人間がサイトを見る時に、パンくずリストはさほど役に立っていないのだ。見る人もいるだろうが、よほど大きなサイトだったり、ブログに詳しい人でない限りは、パンくずリストはそこまで重要なものではない。思い切って記事下に配置してみよう。(single.php)」だ。ダッシュボード管理画面(の左サイドメニュー)>外観>テーマ編集>単一記事の投稿(single/php)開くと下記のようなソースがあるはずだ。?>をカットまたはコピーした上で削除しよう。次に同じphpソースの少し下をスクロールし、45行目〜57行目のあたり。class="post-footer-list">この間に貼る。</footer>すると下図のように、ブログ個別記事からパンくずリストが消え、ソーシャルブックマークボタンの下に配置されるようになった。これで更にファーストビューが改善され多くの文章を読めるようになった。スマホではまだまだダメ・・・さて、PCではかなりファーストビューが改善されたが、スマホで見るとどうだろうか。私のiPhone5Sでブログ記事を見てみた。図のようにファーストビューで文章が表示されない。タイトル文字とソーシャルブックマークがかなり幅を取っているのが分かる。ソーシャルボタンはシェアされた時に「記事の信頼性」を高める事に貢献はするだろうが、まずは読まれないと話にならない...。いうことでソーシャルボタンは記事下のみに配置し、記事上は消す事にする。先ほど同じように、single.phpのソースコードを開こう。ダッシュボード管理画面(の左サイドメニュー)>外観>テーマ編集>単一記事の投稿(single/php)25行目〜33行目。bzb_social_buttons();?>これを削除する。すると下図のようにブログ記事上部からソーシャルボタンが消え、さらにファーストビューが改善された。スマホでも見てみると・・・ソーシャルボタンは消えたが、その部分が空白になっただけでファーストビューはあまり変わらない。ここで新たな課題が出てきた。スマホ画面でのブログタイトル文字が大きすぎるということだ。PCならともかく、スマホの場合はタイトル記事は大きくなくてもいいはず。いうことでスマホでのファーストビュー最適化をしていこう。スマホの個別記事タイトルの文字サイズを小さくするスマホ表示だとタイトル文字がやたら大きいのでfont-sizeを修正して小さくしてみよう。base.cssを開いて、ソースの最下部に以下のコードを追加する。16px;}}ファイルの一番下が分かりやすいのでここにコピペしよう。すると下図のようにスマホで見た時の記事タイトルの文字サイズが小さくなった。スマホ表示時のタイトル下の余白を狭める今度は、上図の空白部分をなくしてアイキャッチ画像が大きく見えるようにしよう。先ほどと同じようにbase.css最下部に下記のコードを追加しよう。64px;}}※先ほどのコードの延長。加えて、style.cssの最下部にも以下のコードを追加しよう。!important;}}下図のように記事タイトルの周りの余白がキュッと絞られるようになった。今回はこれくらいのカスタムで良しとしておく。スマホのファーストビューカスタムCSSまとめここにスマホでのファーストビューをカスタマイズした追加CSSを貼っておく。そのままコピペして貼り付けてみよう。!important;}}iPhone5Sのサイズでギリギリ文章が見えるかどうかくらいまでファーストビューを改善することが出来た。階層を表示と設定すると、デザインが少し格好悪いものになってしまうということだ。細かい所なので放置してもいいのだが、ブログの見栄えを良くしたい私としてはぜひ修正したい所。今回はカテゴリーウィジェットのデザイン修正方法を解説する。CSSを編集し投稿数を右側に配置このように、カテゴリーの投稿数が下に来てしまい少し格好が悪い。この投稿数をカテゴリー名の右側に配置するようにカスタムしてみよう。style.cssの3286-3292行目に黄色背景のソースを入れるだけだ。}するとカテゴリー部分が下図のようになった。小カテゴリーが見づらいデザインを修正しかし、これだと小カテゴリーの階層構造が分かりにくい。本ブログのカテゴリーの階層構造はオススメディアおすすめアニメおすすめ映画おすすめ本おすすめ漫画このようになっているが、ブログ表示では階層構造が分かりにくいので修正してみる。base.cssの最下部に下記のソースを追加しよう。!important;}すると下図のように小カテゴリーが右に寄って階層構造がわかりやすくなった。Xeoryのカテゴリーウィジェットのデザインが頗る微妙だったので、これを参考にカスタマイズしてみて欲しい。そのためかこのサイトを開いたときに下に少しスクロールする必要があったんですよね。ここの部分を改善するためにカスタマイズに手を加えました。}を追記しましたが数字は以前の位置のままです。Base】カスタマイズ、営業職は直帰率が気になります。少々気合で乗り切ました。コメントをキャンセルメールアドレスが公開されることはありません。Capital」に登壇します。