サイト作成

WordPressで作成したサイトをスマホでも使いやすくしてみます。

こんばんは、夜な夜なページ更新に悪戦苦闘しています。

今回は、スマートフォンのページを見やすく、使いやすくするのとページを見に来てくれた方に、よりわかりやすく記事を読んで頂くよう工夫をしていきます。

先ずは「スマホボタン」を設定していきます。

スマートフォンのサイト上にメニューのアイコンが現れタップをすると「ホーム」や「サイトマップ」などのメニューが表示されます。

スマホボタンメニュー①スマホボタンメニュー

メニューアイコンから色々なページに飛べるようになるので記事の途中から他のページに飛ぶときにも便利になります。

〇外観→メニュー→新しいメニューの作成→メニュー名(任意の名称。スマホボタンメニューにしました。)→表示させたいページを選択します。「ホーム」「サイトマップ」「問い合わせ」としました。

スマホボタンメニューの設定スマホボタンメニューの設定

同時にアイコンも設定します。「JIN」をテーマとして使用しているためWordpressのメニュー覧に「JINアイコン一覧」がありますのでクリックすると別タグでページが開きます。

アイコンリストアイコンリスト

新しいメニューの作成画面の上部の「表示オプション」を開いて「詳細メニュー設定を表示」の「説明」にチェックを入れます。

表示オプション表示オプション

すると選択した項目の右の矢印をクリックすると「追加オプション」が表示されその中の「説明」の欄に先ほど別タグで開いた「JINアイコン一覧」から好みのアイコンを探し真ん中のコードを「説明」の欄に貼り付けます。

メニュー設定の「スマホボタンメニュー」にチェックを入れて終了です。

設定完了設定完了

これでスマートフォンでサイトを開いたときにメニュー画面が表示されました。見た目が良いです。

アイコン設定のしかたを覚えたため、他のメニューの「グローバルナビゲーション」にもアイコンを設定していきます。

PCサイトのヘッダー部分に表示されるメニューです。同じように進めていきます。

次に、投稿記事に内部リンクを貼っていきます。

内部リンク内部リンク

こちらはテーマが「JIN」なのでか簡単でした。

〇内部リンクを貼りたい投稿記事の編集を選択→記事の終わりに一行改行を挟んでリンク先のURLをコピーして貼り付けます。改行を挟まないとおかしな場所に表示されてしまいます。

内部リンク設定内部リンク設定

記事を読み終わった最後に「あわせて読みたい」と表示されます。

これで、記事と記事の繋がりでき、より読みやすくなります。

また、各記事の「タグ」も設定していきます。

〇投稿→タグ→新規タグを追加でタグの名前とスラッグを設定します→「新規タグを追加」をクリックで新規タグが作成できました。

〇投稿の編集ページの右側の「タグ」の欄でタグを選択しページ表示させます。

これで記事の最後にタグ表示されます。クリックすると同じタグが貼られている記事が一覧で表示されます。

色々と設定を行いました。

だいぶ慣れてきたのかこれだけの作業を約1時間くらいで終了できました。

少しサイトが見やすくなったと思います。

これからもコツコツと見栄えが良く、見やすいサイトを目指し更新していきます。

 

WordPressで作成したサイトのプロフィールページを作成しました。自分のプロフィールを何とか作成、表示設定をしました。...