ブログの回遊性を高めるのに苦労していませんか？
ワードプレスではHTMLやCSSを変更する事で様々なデザインを自由に変更する事が可能です。
とはいえ、初心者（ヨムオ）にはハードルが高い…
というわけでCSSをいじらずに回遊性の高いブログデザインができる方法をシェアします。
どうもです。
久々のヨムオ日記ですね。
今回は↓↓のようなことをしたので記事を書きました。
初心者でも簡単に回遊性の高いブログデザインを作る方法をシェアします。
これから家づくりブログを始めたい方にオススメの記事です。
〇前の日記
ブログとSNSの連携はどの程度有益なのか？
〇次の日記
お品書き
CSS不要の回遊性の高いブログデザイン
トップページにこんな感じで視覚に訴えるデザインを入れることができます。
これを通常のやり方でやるにはCSSを書き換えます。
CSSの書き換えは、例えるなら家の間取り図です。
間取り図って、ソフトを使えば半自動でできますが、イチから全部製図していくとなると専門知識が不可欠ですね。
もちろん、クオリティとしてはCSSを書き換えた方が最終的な技術も身につきます。
ブログを仕事にするなら覚えるべき作業です。
とはいえ、初心者にはやはり敷居が高いもの。
勉強時間がとれるまでは、この記事で紹介するような方法を試してみてはどうでしょうか？？
- ビジュアルエディターにする
- 画像を貼る
- 画像にリンクを貼る
- 完成したらコードエディターに切り替える
- テキストウィジェットを貼りたい場所に置く
- ウィジェットにコードエディター内の全文をコピペ
まずは上記の流れ、イメージ画像の作成はおわりましたか？
とりあえず何でもよいので画像を用意してみましょう。
新規記事を開いてみてください。
この新規記事に作りたいブログデザインをそのまま作っていきます。
さきほど開いた画像を出してみてください。
通常の記事作成時の画像挿入と同じです。
大丈夫でしょうか。
次に、画像にリンクURLを貼りましょう。
リンク先はカテゴリーでもタグでも大丈夫。
読者様に見てほしい記事の一覧を固定ページで作成しても良いです。
参考例では“web内覧会”というカテゴリーのURLを貼ります。
記事編集画面の右上にある“縦に3つの点が並んだ”メニューボタンを押すと…
ビジュアルエディターに☑が入っていますね。
これをコードエディターに切り替えます。
こんな感じで、さきほどまでのイメージ画像で作っていたものが全てコードに変換されます。
ここまで来たらほぼほぼ完成です。
おめでとうございます。
今度は別ウインドウで外観⇒ウィジェットを開いてください。
表示したいページの場所を開いて、『テキスト』ウィジェットを貼ります。
その『テキスト』ウィジェットに、さきほどのコードをそのままコピペします。
お疲れさまでした。
サイトを開いてみてください。
参考までにCSSの書き方がこちら。
覚えるべきルールが多いですね。
やはり、記事を書きながらCSSの勉強は結構ツライと思います。
この方法なら、やる事はいつもの記事作成なので負担は少ないはず。
CSSは複数サイトを運営するくらいの強ブロガーになってからでも遅くはないのでは？と思います。
それでは、また。
【WEB内覧会系】
【家づくりのポイント】
【ハウスメーカー実例系】
