ワードプレスを使ってブログを作成してみたいと考えている人は多いかと思います。
多くのブロガーがワードプレスは簡単! SANGOは魅力的だと言っています。
でも私のような超初心者にとっては、簡単と言って紹介されたことでさえ、分からないョ!! ということになります(泣)
まずは、サルワカさんの記事に沿って、SANGOの魅力とインストールまでを見直してみます。
サルワカとは
「サルでも分かる」ようにWEBデザインやコーディングの解説を行ってくれているサイトです。でもそのサルワカさんの記事でさえ超初心者の私が読むと分からないことや分かり難いことがあります。
ワードプレスのテーマとは
ワードプレスはテーマを併用(インストール)することで、Webサイトのデザインやサイトの構成や骨組み、表示の機能などが提供されます。
『テーマ』は複数のファイルの集合体で、デザインなどの内容が一式セットになっています。テーマを変更すれば複雑な処理を行うことなく、Webサイトのデザインや構成、機能などを変えることができます。
SANGOとは
SANGOは、サルワカの人たちが作成したワードプレスのテーマです。
SANGOには、サルワカで紹介されたノウハウが使用されています。サルワカの記事がマニュアルとなって使い方を学ことができます。
SANGOを使うと独特の「居心地の良さ」を感じるようなデザインを持ったサイトが出来上がります。個性的ではあるのですが、逆にSANGOを使ったことが分かってしまうようなデザインです。
SANGOを使うと、どんなデザインや機能のサイトが作れるかを簡単に理解するには「for men」さんのブログに、SANGOで作成された100サイトを色別に紹介している記事 『配色の参考に!【カラー別】SANGO(テーマ)を使っているブログ・サイト』があります。
紹介されているサイトをみるだけでも、とても参考になります。
私もSANGOを2年以上使用していますが、SANGOの魅力を紹介するのは簡単ではありません。
サルワカさんの記事に、『WordPressテーマ「SANGO」30の魅力』というのがあります。
この魅力の中には超初心者では理解できないこともあります。内容をチェックしながら、魅力を確認していきたいと思います。
文中の〇の中の番号はサルカワさんの記事の中の魅力のNO.1~30です。
今回は、30の魅力を利用・設定方法で分類してみました。
1、SANGOを使用するだけで実現する機能
2、エディターから使用できる機能
3、ショートコードで実現する機能
4、カスタマイザーからの設定できるもの
5、ウィジットから設定できるもの
6、その他
SANGOを使用するだけで実現する機能
全ての機能やデザインはこの使い易い、分かり易い、シンプル、簡単、居心地がいいに繋がります。ここでは主に使われている技術の紹介です
①つい長居したくなる、居心地の良いデザイン
②100%レスポンシブ
⇒ レスポンシブ?と思った人も多いと思います。「レスポンシブ対応」とは、様々なデバイス(パソコン、スマートフォン、タブレット端末など)で最適化することができる対応のことです。
パソコンでブログを作成して公開して、スマホで確認してみると、あら不思議~ スマホでも美しい配置でみることができます!!
③マテリアルデザインを大部分に採用
⇒ マテリアルデザインは、Googleが推奨するデザイン手法のガイドラインです。デバイスが変わっても対応しやすいシンプルで直観的なデザインが特徴です。
⑤内部SEO対策施策済み
⇒ SEO(Search Engine Optimization:検索エンジン最適化)は検索で上位に表示させる施策の一つです。内部SEOは、サイトの内部構造や、htmlタグのソースなどを検索エンジン向に最適化する作業の事です。
SANGOで記事を作成すると自然とその内部SEO対策が実施されます。
エディターから使用できる機能
SANGOをインストールすると、エディターにも魅力的な機能が追加されます。
文章をシンプルで分かり易くするバリエーション
⇒ ⑦30種類以上の見出し、⑧30種類以上のボタン、⑨30種類以上のボックスデザイン、⑩20種類以上の箇条書きなど
㉗Q&A形式の見出しを簡単挿入(見出しでQ、Aを記載)
Qの入れ方?
スタイル⇒見出し から選択
ショートコードで実現する機能
⑪記事を華やかにするショートコード
ショートコードは、事前にfunctions.phpと呼ばれる場所にプログラムコードを記述しておくと、短いコードを記述することで、その動作を実現することができます。
短いコードの書き方は、サルカワの「SANGOのショートコード一覧」などの記事を参考して記載していくのがよいです。
㉒レビュー用ボックスを挿入可能
ショートコードにより、上のようなレビューボックスを作成することができます。
㉔手順を魅力的に見せるタイムライン
こんな感じの手順の記載が簡単にできます。
㉕クリックにより表示するアコーディオン機能
上記のようなBOXをクリックすると中身が表示されます!
カスタマイザーからの設定できるもの
カスタマイザーは、WordPressの管理画面を開き、サイドバーの外観 ⇒ カスタマイズから立上げられます。
カスタマイザーが立ち上がった画面です。変更した内容はリアルタイムで確認できます。
⑥自分好みのサイトカラーに HTMLやCSSの専門知識が無くとも、簡単にサイトカラーを変更できる
⇒ SANGOの特徴の一つを実現!!
⑫ヘッダーアイキャッチで大胆なトップページに
トップページのヘッダーに画像やテキスト、ボタンなどを配置することができます!
下の2分割の画像も表示可能です。
⑬押したくなるフォローボックス
SNSのフォローを促す上のようなフォローボックスが設定できます。
⑭記事下に関連記事が表示できる、⑮関連記事のデザインパターンは3種類以上
カテゴリーとタグから関連記事を表示することで、更なるアクセス数をゲット
⑯トップページにタブによりデザインを切替可能
トップページにタブ切換機能を設定しクリックによりトップページの内容が切り替わります。
⑳記事一覧レイアウトは2種類から選択可能
デフォルトでは四角形の記事レイアウト
四角形かカード型を選択できます!
㉑モバイル用フッター固定メニューを簡単に設置可能
㉓ヘッダー下にお知らせ欄を設置可能
ヘッダーの下の青い帯に文字を表示することができます。画面では写真の上にある青い帯に白い文字でお知らせが表示されています。
ウィジェットから設定できるもの
ウィジェットは、WordPressの管理画面を開き、サイドバーの外観 ⇒ ウィジェットから立上げられます。
ウィジェット画面です。
⑱おすすめ記事を記事下に簡単挿入
記事のIDを使っておすすめ記事を表示ができます。IDでの管理が必要になるので少し面戸臭いですが・・
⑲人気記事の表示
過去からの累計で人気記事を決めるているので、直近の人気記事はプラグインなどを利用が必要です。
㉖サイドバーや投稿ページにオリジナルメニューを設置可能
こんな感じのメニューがつくれます。なかなかオシャレです!
その他
④心地の良いアニメーション
⇒ アニメーションを作成の多くはJavascript使用していますが、多くの人が知っていいる言語のHTMLとCSSのみで実現しているとのことで・・
㉘人気の目次プラグイン「Table Of Contents Plus」のためのスタイルも予め用意
こんな感じのメニューがつくれます。このブログでは、SANGOのショートコードを使用してメニュー(ボックス)を作成しています。
㉚高速化への取り組み
サムネイル画像、コンテンツ内の画像の高速な表示を実現
テーマをインストールするには、WordPressの管理画面を開き、サイドバーの外観 ⇒ テーマをクリックします。
すると、現在WordPressに追加されているテーマが一覧で表示されます。
新しいテーマをインストールするために、ページの上の方にある[新規追加]をクリックします。
続いて[テーマのアップロード]をクリックします。
[ファイルを選択]をクリックし、使用したいテーマファイル(SANGO)を選択します。このときzipファイルは解凍せずにそのまま選択します。
SANGOの場合は子テーマも利用するので、同様の手順で子テーマをアップロードしましよう!!
上ののような表示が出たらインストールは完了です。テーマを使用するために[有効化]をクリックしましょう。有効化するのは子テーマだけでOKです。
これでインストール完了です!!
子テーマの重要性や役割はサルワカさんのこちらの記事を参照してください。「WordPressの子テーマとは?安全にカスタマイズを行う方法」
今回の記事は、サルワカさんの記事『WordPressテーマ「SANGO」30の魅力』を元に作成されています。
ワードプレスの選択に困ったときやSANGOの基本的な使い方を知りたいときに利用して貰えると嬉しいです。