ワードプレスで初めてのホムペ作り

ワードプレスで初めてのホムペ作り

初心者です。このブログは備忘録なので、たまにしか開かないので、コメントも気づかないかもです。

Amebaでブログを始めよう!

重要★ハマったので★


困ったこと:TOPページの「ブログ一覧(htp://○○/blog)」がからっぽ!


結論:原因は「管理画面>投稿>カテゴリー」にデフォルトであった「未分類」
をいじったからだった!


前提条件
「管理画面>設定>パーマリンク設定」
カスタム構造で /%category%/%postname%/

解消方法(設定)


「管理画面>投稿>カテゴリー」
名前(未分類でもブログでも可)

スラッグ(blog)

親(なし)で保存。
注目してほしいのが、カテゴリー一覧でこのスラッグ「blog」だけはチェックを入れる□がない。
削除もできない。(デフォルトの名前(未分類)スラッグ(blog)を名前(その他)スラッグ(no-category)に変えてしまったがめに、今回ハマったんだけど。)

つまりこれがキーワードとなるってこと!



「管理画面>設定>投稿設定」
・整形は無視(私は2項目ともチェック入れない)
・投稿用カテゴリーの初期設定…1で作った<ブログ>を選択。
・デフォルトの投稿フォーマット(標準)←よくわからんけどとりあえず。
・以下のメールでの投稿はここでは関係ないので無視。



「管理画面>投稿>新規追加」
「タイトル」に(love)と「本文」に(テストです)だけ入れて「公開」
(「パーマリンク」「カテゴリー」は無視。)
するとパーマリンクが http://○○/blog/love/  になってる事を確認
(ここ超重要!今回の原因はここが http://○○/love/ または http://○○/ 別のカテゴリー/love/)
になっていたことが原因だった!!

すなわち、パン屑リストも「HOME >ブログ」になってるはずだ。(重要)



必要に応じてカテゴリー分類を設定する。
「管理画面>投稿>カテゴリー>新規追加」
名前(旅行)スラッグ(ryokou)親(なし)に設定。
※ もし「カテゴリー>旅行>パリ」にしたいのなら名前(旅行)スラッグ(pari)親(ryokou)に設定。



投稿は「管理画面>投稿>新規追加」
タイトル
本文
カテゴリー(1つ選択でOKです。「ブログ」と「ryokou」の両方選択しなきゃいけないわけではありません。今後このカテゴリー欄の「ブログ」は無視で構いません。入れたければ折れてもいいけど違う設定になる。)

___


追記:以下の訂正

カテゴリー設定は名前(旅行)スラッグ(ryokou)親(なし)で大丈夫でした。


さて。ここで問題になるのが「カテゴリーがブログだけじゃ嫌!」ということ。
例えば「自己紹介」「買ったもの」「旅行」とカテゴリー分類したいとする。
つまり3の記事を「旅行」に分類したいとする。
正解 
http://○○/blog/ryokou/love/
不正解(エラーが起こる) http://○○/ryokou/love/
となるようにする。そのためには
(管理画面>投稿>カテゴリー>新規追加 or カテゴリーの編集)
名前(旅行)スラッグ(ryokou)親(ブログ)に設定する!!!


★バナーの貼りかた★


用意するものは2つ

・画像のURL

・飛ばしたいリンク先のURL

<画像のURL>

1 バナー画像をライブラリにアップする。

2 ライブラリ一覧の、そのアップした画像をクリックすると

こんなのが出てくる。

http://○○○/wp-content/uploads/2016/03/(画像の名前).jpg

これをどっかにメモ書きしておく。

パーマリンクじゃなく、ファイルのURLのほう。


※ついでにここで代替テキストに文字も入れたらSEO効果アップ


<リンク先>

コピーしておく

設定


外観>ウィジェット>サイドバー(共通・上)に「テキスト」を入れる
テキストタブを広げ
<a href="http://・・・・・"><img src="http://・・・・・.jpg"></a><br>
 ↑

つまり<a href="(リンク先)"><img src="http://(ライブラリに登録した画像)"></a><br>
と入れる


<a href="(リンク先)"><img src="(画像)"></a><br>
<br>
<a href=""><img src=""></a><br>
<br>
<a href=""><img src=""></a><br>
<br>
<a href=""><img src=""></a><br>
<br>
<a href=""><img src=""></a><br>
<br>
<a href=""><img src=""></a><br>
<br>



<br>の連続はよくないというが、なぜかpタグでできなかった・・・

/* グローバルナビゲーションメニューを固定する */
#gMenu {
border: none !important;
position: fixed !important;
z-index: 999 !important;
top: 0 !important;
}


必ずサクラテキストエディタ使用。
だめなのが「メモ帳」。

改行が勝手に入るし。


body内に上記を記述するとグローバルナビが固定する。
必要に応じて、メニュー画面からホーム(HOME)のアルファベット削除する。
サイトトップに説明文字が表示されていたが上から重なって見えなくなる。
各ブラウザで仕上がりを確認すること。

1 WP-Table Reloadedインストールして有効にする。


2 管理画面>ツール>WP-Table Reloaded>新しいテーブルを追加する


3 作ったら保存して、テーブル一覧ページに行くと「ショートコード」があるのでコピーする。

[table id=1 /]みたいの。これを固定ページはるだけ!!


※注意

・編集の「JavaScript ライブラリを使用する」にチェック不要。


リンクや画像の挿入もOKだけどレスポンシブの時にどうなるやら。




____________________________





▼カスタム!!「背景色」と「文字色」の変更方法

管理画面>ツール>WP-Table Reloaded>>プラグインオプション

例…上から6行目の左から2列目のセル「背景色を青緑」、「テキストを白」にしたい

.wp-table-reloaded-id-1 .row-6 .column-2 {
background-color: #008b8b;
color:#fff;
}

・.wp-table-reloaded-id-「1」の「1」はショートコードを見て、どのテーブルをカスタムしたいのかをここに入れる
・rowは上から何行目
・columnは左から何番目

例…上から5行目の左から2列目のセル「背景色を青緑」にしたい

.wp-table-reloaded-id-1 .row-5 .column-2 {
background-color: #008b8b;
}

例…上から2行目の左から3列目のセル「テキストをオレンジ」にしたい

.wp-table-reloaded-id-1 .row-2 .column-3 {
color:#ff7f50;
}

質問同士の幅が狭まらない。
設定で買えたら崩れた。
そこさえ気にならなければシンプルでいい

Ultimate FAQにしてみる



使い方

管理画面、左の下部に「レスポンシブFAQ」に設定あり。
ここで色と文字の設定ができる

▼設定画面
カテゴリ/メイン タイトルフォント サイズ   …デフォルトは18
質問テキスト
質問背景

質問のテキストサイズ 
質問見出しタイプ選択します。 h3、h2が好みかな
答えテキスト
答え背景

答えテキスト サイズ
2 よくある質問ギャップ  ??



▼その下の、翻訳
固定ページに以下をはる。(コンタクトフォームとかと同じ。)

「よくある質問リスト」表示するには、固定ページ [hrf_faqs] ショート コードを貼る

「特定のカテゴリのよくある質問」だけを表示したい場合は、
[hrf_faqs カテゴリ '未分類' =] 特定カテゴリよくある質問表示するページ/ポストショート

「複数カテゴリよくある質問」として表示したい場合は、
[hrf_faqs category='uncategorized']を貼る。

タイトル/見出しカテゴリよくある質問」表示する場合は
[hrf_faqs category='uncategorized,wordpress,plugins' title='My Awesome Title'] を貼る。



▼では、質問、と答え、を書いていこう。
「FAQs」 Q&A一覧。
「Add FAQ」 新規作成
「カテゴリー」 最初に設定しよう。スラッグは必ずアルファベットで。URLで表示される部分。


▼固定ページ「よくある質問」など作る。

表題「1、書籍に関する質問」
・本はいくら?(カテゴリー book)
・本はどこで売ってる?(カテゴリー book)

表題「2、僕に関する質問」
・作者は何歳?(カテゴリー me)
・作者の趣味は?(カテゴリー me)

表題「3、子犬のラッキーについての質問」
・ラッキーは犬種は?(カテゴリー dog)
と分けたいとする。

まず「1、書籍に関する質問」と固定ページ書く。
その下に
[hrf_faqs category='(book=カテゴリー設定画面で決めたスラッグ)']
と貼る。
次に「2、僕に関する質問」と見出しタグでも使って書く。画像でもいい。
その下に
[hrf_faqs category='(me=カテゴリー設定画面で決めたスラッグ)']
と貼る。
画像の名称(img0001/jpg)ではなく(cat-marry-eyes.jpg)と名称だけでなんの画像か想像つくようにする
JPEG jpegtran jpegoptimで画像圧縮

見出しタグ SEO


・見出しタグの順番を守ること
・見出しタグは見た目のためではなく、あくまでも検索エンジンに示すため。
・せいぜいh6まで

・大見出しであるh1(見出し1)は1ページに一つしか使ってはいけません。


大抵ブログなどでは記事タイトルがh1になるように設定されているので、

本文で使えるのは h2(見出し2)か h3(見出し3)以降と言う事になります。

(byビズベクトル)


※BizVektorでは h2やh3タグにそれぞれ予めデザインが指定されています。
※BizVektorの適応デザインにより、表示デザインは変わります。