私が勇ブログでやっているトップページのレイアウトテクニック！SANGOでブログ
こんにちわ，Isamu（@yusukebe029）です。
ブログのトップページは自分のブログをアピールする上でめちゃくちゃ大事ですよね。
今回は、私のブログトップページのカスタマイズについてと、カスタマイズ時のノウハウを少しだけ教えたいと思います。
目次
WordPress （SANGO）のカスタマイズ方法
先ず、ブログのカスタマイズ方法について復習です。
通常、［外観］→［カスタマイズ］からブログのレイアウトを変更していきます。
一部、［SANGO設定］でも設定ができるので、この2箇所をうまく使ってブログをカスタマイズしましょう。
［SANGO設定］には広告コードの埋め込み、Google Analyticsコードの埋め込みなど、主にコード埋め込みの場所が用意されています。
他にも、SEO設定や高速化のための設定など、ブログのパフォーマンスを改善できるカスタマイズができるようになっています。
ヘッダーお知らせ欄
簡単な「一言」とそれにリンク先URLを付けて、速報のようなイメージで使っています。
例えば、記事をリライトした速報だったり、機材を購入・売却したときの報告で使っています。
下記から設定が可能です。
一言の文章と、リンク先URL（必須ではない）があれば簡単に実装できます。
実装するとこんな感じです。
ヘッダーアイキャッチ
ヘッダーアイキャッチは画像つきでコメント＋ボタン（リンク挿入可）を表示させることができます。
私はブログを名前非公開でやっていますので、身バレしない程度に写真撮っている姿を載せています。
右側の説明はこのブログのメインテーマについてですね。
私は画像のアスペクト比を調整し、横長の画像を挿入しています。
実際に実装してみるとこんな感じです。
ヘッダーアイキャッチとよんでいる機能は１つだけしか実装できませんでしたが、ヒーローブロックを応用することで、複数実装可能となりました。
「Wild Birds in Akita !!」がヒーローブロックで実装したヘッダーアイキャッチです。
メニュー編集
ブログの上（ヘッダー）と下（フッダー）にはメニューを配置できます。
［カスタマイズ］→［メニュー］から編集できます。
私は「固定ページ」でそれぞれ記事を作成して、それらをメニューに関連付けています。
プライバシーポリシーやお問い合わせページもWordPress機能とプラグインを使えば簡単に実装できますので、以下の記事を参照してください。
自分のブログにあったプライバシーポリシーを作成しよう！SANGOでブログ
SANGOテーマを使う私のおすすめプラグイン8選・SANGOでブログ
ボックスメニューの配置
トップページの下に「ボックスメニュー」と呼ばれるものを配置しています。
下の”カメラ別記事”と書かれいているカメラがたくさんついたボックスです。
ここでアイコンと文字、あとはリンク先を指定できるので、私はカメラごとに撮影した記事が閲覧できるように、タグで振り分けをしています。
タグを使ったブログ戦略については以下の記事を参考にしてください。
ブログ記事に付けるタグを厳選して訪問者の興味を引くべし！SANGOでブログ
コンテンツブロックの利用
SNAGO Gutenberg 1.37.0から利用可能になったブロック機能です。
SANGO ver.3からはGetenberg不要となったので、デフォルトで使用できます。
管理者画面から［コンテンツブロック］→［Add New］
で投稿記事を書くように編集画面が開きます。
あとはコンテンツブロックで使用する内容を編集して保存するだけです。
コンテンツブロックを使用する際は、［投稿］［固定ページ］［カスタマイズ］などからブロック挿入、ドロップダウンから挿入したいコンテンツブロック名を選択するだけでOKです。
コンテンツブロックについてはSANGO公式で丁寧に解説されています。
サイドメニューの作成
サイドメニューはPCだと右側に、タブレット・スマホ閲覧だと記事一覧の下にそれぞれ表示されます。
タブレット・スマホだと下に並ぶのであまり長くなると、スクロールが大変になるのでボリュームを調整して、あまり多くなりすぎないように注意しています。
プロフィール、Twitter画面埋め込み、人気記事、機材リスト、関連リンク、日本ブログ村リンクの順で配置しています。
どんな人物が、どんな機材で、どんな記事を書いて、どこと関連しているか、サイドメニューでは表記しています。
Twitter画面のブログへの埋め込み
サイドメニューでは、Twitterの画面をブログに埋め込んでいますが、意外と簡単に実装できます。
まずは自分のTwitterアカウントのURLを調べましょう。
アカウント名の英字を調べて上のテンプレに後付するだけでOKです。
そのURLをコピーしたら、以下のサイトにURLを入力します。
そうするとHTMLコードが発行されるので、［カスタムHTML］ブロックを使ってブログに配置します。
これだけでTwitter画面の埋め込みが完了です。
また、width（幅）とheight（高さ）に任意に指定できます。
ただ、ブログの幅をオーバーする値を入力すると、レイアウト崩れの原因になりますので、注意が必要です。
私はWidthはAutoにして自動で変更されるようにしています。
お手製フッダーメニューの作成
［カスタマイズ］→［ウィジェット］
フッダーウィジェット左・中・右から下のようなフッダーを自作しています。
こういったレイアウトが最近のトレンドらしいです。
このフッダーは上述したフッダーメニューの上に配置されるようになっています。
このレイアウトはSANGO Landの「フッダー」からも調達も可能なので、作成がめんどい方は先人の制作物を使わせてもらいましょう。
私はアレンジも加えたかったので、自作しています。
カスタマイズ更新失敗！返答の正しいJSONレスポンスではありません…
これまで紹介したカスタマイズにおいて、たまに［更新］をクリックしても下のように赤色の警告のような感じで「更新に失敗しました。返答の正しいJSONレスポンスではありません。」とリジェクトしてくる場合があります。
私の経験から
・Youtubeリンク埋め込み
・広告コードの埋め込み
など、外部リンクやコードの貼り付けを行う際など
に発生することが多いです。
この場合が発生した場合、以下の処置を講ずることでうまくカスタマイズ内容を更新できます。
※皆さんが契約しているレンタルサーバーによってどこにあるのか違うのであしからず
先ず、WordPress管理画面でなく、レンタルサーバーの設定ができる場所を開きます。
お名前.comだとレンタルサーバーのコントロールパネルというところです。
［コントロールパネル］に入ったら［セキュリティ］から［WAF］を選択します。
カスタマイズ更新前に、検知ログ管理のON（常時）を一時的にOFFにしましょう。
あとはWordPress管理画面に戻り、再度［更新］をクリックしてください。
これでOKです。
Isamu
どうやら自分でブログをカスタマイズするのですが、コードやら貼り付けているので不正アクセスだとWAFが誤認しているようです。
これをOFFしないと埋め込み系のカスタマイズはできないことが多いです。
最後に
この記事では、私のブログのカスタマイズについて解説しました。
トップページに重点を置き、昔からある方法と、最近導入されたコンテンツブロックなどを使った新しく便利な方法で、なるべく簡単にカスタマイズできると思います。
私はめんどくさがりなので、簡単に済ませていますが、SANGOはすごく細かいところまで作り込めるので、万人にうけるブログテーマだと認識しています。
また、カスタマイズ方法の参考として、SANGO Landでカスタマイズ内容が公開されています。
SANGO Landからテンプレを入手してもいいですし、自分で作り込むこともできるので、公式のサイトは重宝できます。
他にも、SANGOブログのカスタマイズに関する記事を書いていますので良かったら参考にしてください！
色がブログに与える印象について考えてみた！SANGOでブログ
わかりやすいカテゴリー管理してますか？SANGOでブログSANGOテーマを使う私のおすすめプラグイン8選・SANGOでブログ
WordPressテーマ”SANGO”の良さと使いやすさについて語る｜SANGOでブログ
ブログ記事の執筆戦略とSANGOカスタムブロックを使った記事執筆・SANGOでブログブログ記事に付けるタグを厳選して訪問者の興味を引くべし！SANGOでブログ
Isamu
7DMarkII Blog Canon EF100-400mm EF300mm EFマウント EOS RP FE70-200mm FE200-600mm GRIII K-S2 Luminar4 PENTAX RICOH SANGO Sigma150-600mm Sony TAMRON Tamron100-400mm WordPress α7II α7RIII アニマル コンデジ ダム ブログ レビュー 一眼レフ 三脚 函館 動画 北斗市 北海道 探鳥 望遠レンズ 格安SIM 桜 楽天モバイル 機材 渓流 秋田 紅葉 観光 野鳥 風景
