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

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

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

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

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

（もちろん無料で）

一番大事なのは情報設計です。サイト風のデザインレイアウトにするならちゃんと本で学んだ方がいいです。

オススメは情報サイトでオーソリティーを目指そう！という本とミニサイトをつくって設ける法　ほったらかしでも月10万円！です。

ブログをはじめるときは「コンセプト」が大事です！

https://web-ksf.com/before-you-begin

ブログのジャンル選びに悩む方はこちらを参考にしてください～

副業の勉強が「本業でも武器」になる「仕組み構築型の可能性」副業の時代が来ましたね。ネット上やSNSなどで副業の情報がたくさん出回り始めてますが、ほとんどが何かの作業に対する報酬という「時間の切り売り」ばかりです。これじゃあアルバイトをするのと変わらないですよね。...

2019年はブログのおかげで副業年収７ケタ突破!!

これからの働き方をして思った７つのこと僕は目の前のことに集中して働いてきました。それこそが仕事であり、「働く」ということだと思ったから。けど答えはわからなかったです。そりゃそうだ。自分でコントロールできない部分ばかり。だから決めたんです。...

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

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

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

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

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

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

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

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

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

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の公式サイトの記事にコメントすると回答してもらえます。

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

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

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