WordPress(ワードプレス)をサイト風のデザインレイアウトにする

2018-03-04

実際にWordPress(ワードプレス)で運用しているともっと個性を出したいと感じてきます。

僕はルクセリタスを使用してますが、よりサイト風のデザインにしたい場合は別のテーマに変えることも検討が必要です。

“○○情報マガジン” みたいな企業が運営しているサイトってカッコイイですよね!

今回は実際に別のテーマでサイト風デザインにする方法をご紹介します。

(もちろん無料で)

 

 

サイト風のワードプレステーマ

LION MEDIAというワードプレステーマです。

名前だけは聞いたことがある人も多いかもしれませんが、ここはブログ用テーマとメディア用テーマを用意してます。

このメディア用テーマを使うとどこがどうサイト風になるかと言うと以下の様になります。

 

  • トップ画像下に固定で3記事表示
  • 各カテゴリ毎の新着記事
  • プラグインなしでランキング表示
  • カテゴリ毎にテーマカラーを設定
  • カテゴリへアクセスするとピックアップ記事を表示

 

他にも色々できますが、こういった機能をブログでやろうとするとプログラミングの知識が必要だったりするので、わからない人にとっては有料のテーマを買うしかありませんでした。

でも上記のことは全て無料で行えます。

デモサイトがあるので動作を見てみると実感できるでしょう。

(見なくても記事の後半で画像付きで説明します)

LION MEDIAデモサイトへ

 

プラグインなしで実現できるLION MEDIAの機能・特徴

分からない単語もあるかと思いますが、すべてを知らなくても大丈夫です。

ようは至れり尽くせりということです!笑

ワードプレスで運用していると色んな機能が欲しくなります。

その際、プラグインを追加していくことになりますが、プラグインだとコードが汚くて問題があり、そこに気付ける人はプログラミングの知識がある人だけです。

そういった機能を最初から含んでくれているのがLION MEDIAです!

 

  • NO JavaScript(CSSの非同期読み込み機能と、ヘッダーのメニュー切り替えのみにJavaScript使用)
  • W3Cの規格に基づくマークアップでエラーなし
  • モダンブラウザに最適化のため、IEは非対応(11は表示されると思う)
  • 管理画面の投稿・固定ページのビジュアルエディタは、実際に表示されるデザインとほぼ同じ
  • 管理画面の投稿一覧に、IDと閲覧数、サムネイル画像を表示
  • 管理画面の投稿一覧は、閲覧数で並び替え可能
  • 管理画面からテーマの更新が可能
  • 簡易お問い合わせページが標準で備わっている
  • 固定ページを利用してランキングページを作成可能
  • パンくずリストと投稿記事は構造化データを用いたマークアップ済み(schema.org)
  • 記事上、記事下用のウィジェットエリアがある
  • フッターは、左、中央、右の3か所にウィジェットエリアがある
  • TOPページ用のウィジェットエリアがある
  • サイドバー固定表示用ウィジェットエリアがある(スクロールに追尾)
  • 広告用ウィジェットアイテムがある
  • 人気記事用ウィジェットアイテムがある(表示件数自由)
  • 画像付き最新記事ウィジェット搭載(通常の新着機能ウィジェットをカスタマイズ)
  • 必要十分な細かなSEO対策が施せる(ページ単位でdescriptionやmeta robotの設定が可能)
  • CSS非同期読み込みが選択可能(レンダリング速度が速くなる)
  • OGPの設定もカスタマイズが可能
  • 検索対象を「投稿・固定ページ」「投稿ページのみ」「固定ページのみ」と切り替えられる
  • アーカイブページに利用される投稿の抜粋文字数を指定可能(抜粋表示は<!–more–>が優先)
  • レイアウトを1カラム2カラムと選択可能(アーカイブ・投稿・固定ページすべて設定可能)
  • カテゴリアーカイブページにカテゴリの説明文章を表示可能
  • ロゴを設定可能(ロゴが無い場合は【設定】→【一般】の「サイトのタイトル」を表示)
  • ヘッダーに注目検索キーワードを設定可能
  • トップページにピックアップ記事を設定可能(3件表示)
  • トップページにランキングボックスを表示可能
  • トップページに全カテゴリの新着(1件)表示ボックスを表示可能
  • 投稿者のプロフィールを簡単にカスタマイズ可能
  • copyrightを自由に書き換え可能
  • copyright下のリンクや文字列を非表示にできる
  • AMP対応(通常ページとデザインがほぼ同じ)
  • AMPページがGoogleの検索結果でカード表示された時用のロゴ画像を設定できる
  • AMPページでも記事上と記事下に広告が設置可能
  • AMPページ用にTwitter、Instagram、YouTubeの埋め込みが自動で変換される
  • 投稿ページの投稿者情報の表示/非表示の選択が可能
  • 投稿ページの同一カテゴリ新着6件の表示/非表示の選択が可能
  • 投稿ページの目次の表示/非表示の選択が可能(目次は専用のショートコードで表示場所を自由に変更可能)
  • 投稿ページの関連記事の表示/非表示の選択が可能(表示数も1から10で選択可能)
  • 投稿ページのシェアボタンの表示/非表示の選択が可能(シェアボタンもJS不使用で軽量)
  • 投稿ページのシェアボタンの表示項目が6つある(Facebook、Twitter、Google+、はてぶ、Pocket、LINE)
  • Google AnalyticsはトラッキングIDだけあれば設定完了
  • AMPページ用のGoogle AnalyticsのトラッキングIDも登録可能
  • Google Search Consoleも認証IDだけで設置可能
  • 2パターンあるベースデザインはすべてハイクオリティ
  • 無限に選べるテーマカラーと、様々なカスタマイズを駆使すればオリジナリティを表現可能
  • 【追加】Ver.1.1.0から記事アーカイブに表示するタグ数を制御できる機能を追加
  • 【追加】Ver.1.1.0からダブルレクタングル広告を簡単に表示できる機能を追加
  • 【追加】Ver.1.2.0から</head>と</body>タグの直上に自由にタグを記述できる自由入力エリアを追加
  • 【追加】Ver.2.0.0からHeader最上部にお知らせを表示する機能を追加
  • 【追加】Ver.2.0.0から投稿日の表示/非表示機能追加
  • 【追加】Ver.2.0.0から記事の終わり部分にCTAエリア追加
  • 【追加】Ver.2.0.0からインフィード広告登録枠を追加
  • 【追加】Ver.2.0.0から記事中にアドセンス等の広告を挿入するショートコード追加

 

AMP対応

僕はルクセリタスというワードプレステーマを使用してますが、理由は早くてシンプルなレイアウト(カスタマイズは自分で)だからです。

そしてAMP対応がされているからです。

・AMPで早くなる?

モバイル端末で表示速度が爆発的に早くなります。

ニュースサイトはよくAMP化されていて、押した瞬間にページが表示されるので以前に自分が訪れたかな?と思わせるくらい早くて驚きます。

 

・AMPとは?

GoogleとTwitterで共同開発されている、モバイル端末用での表示速度改善プロジェクトです。

仕組みとしてはGoogleとTwitterでお互いに事前にページをキャッシュしておこうということです。

これがなければいちいちURLからファイル等を全て一つ一つ読み込まなければなりません。

SEOには関係ないとGoogleが言ってますが将来的にはどう考えても必須です。

このLION MEDIAも早くてAMP対応がされています!

AMP対応しようとするとどうしてもプラグインが必要になってきますが、これもコードが汚いなどの色んな問題が出てきてしまいます。

そしてワードプレステーマとの相性もあるので問題が起きた時に以下の様に

「これはテーマの問題?」

「プラグインの問題?」

となってきてしまい問題の切り分けが出来ません。

そのためワードプレステーマに最初からAMP対応がされている方がメリットがあります。

しかも何か問題が起きた時にLION MEDIAの公式サイトの記事にコメントすると回答してもらえます。

これはルクセリタスでも同様です。

こういった迅速な対応をしてもらえるというのはプラグインではありえません。

僕のようにワードプレステーマを無料で使う人にとっては、開発元の誠意ある態度に感動します!笑

 

どのようにサイト風になるか

最初に上げた特徴を見ていきましょう。

 

トップ画像下に固定で3記事表示

※拡大できます

デモサイトを確認いただくと上の画像になります。

この画像のメニュー下に3つの記事が表示されていることに気付きます。

これをプラグインなしで実現しています。

 

各カテゴリ毎の新着記事

※拡大できます

デモサイトのトップ画面中盤に各カテゴリーごとの記事が表示されています。

これって地味に欲しい機能ですよね?

サイト内の新着記事だけではなくて、色んなカテゴリーの記事を読んでもらいたいですよね?

これをプラグインなしで実現できるのが凄いです!

 

プラグインなしでランキング表示

※拡大できます

こちらもデモサイトトップ画面になりますが、下の方にスクロールするとランキングが表示されています。

これをプラグインなしで実現できているのが凄いですね!

しかも無駄に下に長くなっているものではなく、横に表示されているのもポイントです。

 

カテゴリへアクセスするとピックアップ記事を表示

※拡大できます

上の画像はトップ画面から「プラグイン不要」というカテゴリーにアクセスすると表示されます。

カテゴリー名の右側にピックアップ記事が表示されています。

こういった演出がブログとは逸脱していると思いますね!

そして気付いた方もいるかもしれませんがカテゴリー説明の背景がピンクになっています。

これは各カテゴリーごとにテーマカラーを決めることが出来るんです!

 

まとめ

色んなWordPress(ワードプレス)のテーマがありますが、出来る限り無料で使いたいところです。

そんななか僕がオススメしたいのは個性を演出できるテーマです。

「他の人と違ったブログにしたい!」

と思う人は多いでしょう。

僕はこのブログはルクセリタスを使い、別のサイトでこのLION MEDIAを使用してます。

どちらも素晴らしい機能が揃っています。

きっと貴方の個性を演出してくれるでしょう。

 

“○○情報マガジン” みたいな企業が運営しているサイトってカッコイイですよね!笑

こんにちは~ 楽しく生きようぜ を運営してる アキクボ です!

『成功とは、成功する自分になること
成功する自分になって初めて受け取れるもの』

僕はこの言葉が大好きです。
あなたは心に燃えるものはありますか?僕にはあります。
僕のマインドは燃えてます笑

副業を 笑顔で 楽しく
~ブログでアフィリエイトして楽しく生きよう~

今の収入より1万円でも多く自動的にお金を稼ぐ。これが実現できる時代になったのは素晴らしいことです。
会社で1万円昇級しようとしたら何年かかるかわかりません。

僕は最初独学でブログを始めたら稼げませんでした。
半年くらいしてようやく気付いて『ブログの始め方』をキチンと学んだら稼げるようになりました。
字のごとく相手の心を考えることが『想い』でありマーケティングであり人助けになります。
どうせ稼ぐなら人助けをしましょう〜

僕はけっこう有料・無料セミナーに行きます。
本や動画や音声で学ぶことも多いです。
ここで1番大切なのはインプットしたことをアウトプットすることでした。
このブログでひたすら記事にしていきます。
初心者の方は僕がアウトプットした記事を読めば効率的に実践できる!、、ように、わかりやすく 楽しく 伝えたいです。

そして自分の手でお金を稼ぐ!という感動を体験してほしいという想いでこのブログを作りました。

知識0の副業初心者の方でも、月1万円を突破して、楽しく稼げるブログにします!

僕のProfileについては コチラ

にほんブログ村 小遣いブログ サラリーマンのお小遣い稼ぎへ
↑ ランキングに参加しています ↑
応援クリックしてくれると励みになります

2018-03-04サイト運営AMP, wordpress

Posted by アキクボ