全記事一覧はこちら

CSSを知らないブロガーが作る回遊性の高いブログデザイン

ブログデザイン CSS不要の回遊性の高いデザイン

 ブログの回遊性を高めるのに苦労していませんか?

 

 ワードプレスではHTMLやCSSを変更する事で様々なデザインを自由に変更する事が可能です。

 

 とはいえ、初心者(ヨムオ)にはハードルが高い…

 

 というわけでCSSをいじらずに回遊性の高いブログデザインができる方法をシェアします。

https://yomuotoko2.me/wp-content/uploads/2019/06/memoruhiyoko-コピー.png
ヨムオ

どうもです。

久々のヨムオ日記ですね。

今回は↓↓のようなことをしたので記事を書きました。

MEMO

初心者でも簡単に回遊性の高いブログデザインを作る方法をシェアします。

これから家づくりブログを始めたい方にオススメの記事です。

ヨムオの日記はこちら

〇前の日記

ブログ 日記 家づくりブログとSNSの連携はどの程度有益なのか?

〇次の日記

CSS不要の回遊性の高いブログデザイン

トップページにこんな感じで視覚に訴えるデザインを入れることができます。

ブログデザイン CSS不要の回遊性の高いデザイン

これを通常のやり方でやるにはCSSを書き換えます。

CSSの書き換えは、例えるなら家の間取り図です。

間取り図って、ソフトを使えば半自動でできますが、イチから全部製図していくとなると専門知識が不可欠ですね。

もちろん、クオリティとしてはCSSを書き換えた方が最終的な技術も身につきます。

ブログを仕事にするなら覚えるべき作業です。

とはいえ、初心者にはやはり敷居が高いもの。

勉強時間がとれるまでは、この記事で紹介するような方法を試してみてはどうでしょうか??

やる事の流れはこんな感じ

イメージ画像を作る

※イメージ画像の作り方詳細は、この記事では省略します。

  1. リンクテーマに合う画像を選ぶ。
  2. CANVAFOTOJETなどのテンプレートにはめこむ。
  3. ワードプレスのメディアに登録する。
投稿で新規記事を開き作りたいデザインを書きだす
  1. ビジュアルエディターにする
  2. 画像を貼る
  3. 画像にリンクを貼る
  4. 完成したらコードエディターに切り替える
別ウインドウでウィジェットを開く
  1. テキストウィジェットを貼りたい場所に置く
  2. ウィジェットにコードエディター内の全文をコピペ

画像付きで詳しく解説します

新規記事を開く

まずは上記の流れ、イメージ画像の作成はおわりましたか?

とりあえず何でもよいので画像を用意してみましょう。

新規記事を開いてみてください。

この新規記事に作りたいブログデザインをそのまま作っていきます。

さきほど開いた画像を出してみてください。

画像を貼る

ブログデザイン CSS不要の回遊性の高いデザイン
ブログデザイン CSS不要の回遊性の高いデザイン
ブログデザイン CSS不要の回遊性の高いデザイン

通常の記事作成時の画像挿入と同じです。

大丈夫でしょうか。

画像にリンクを貼る

次に、画像にリンクURLを貼りましょう。

リンク先はカテゴリーでもタグでも大丈夫。

読者様に見てほしい記事の一覧を固定ページで作成しても良いです。

参考例では“web内覧会”というカテゴリーのURLを貼ります。

ビジュアルエディターからコードエディターに変える

記事編集画面の右上にある“縦に3つの点が並んだ”メニューボタンを押すと…

ビジュアルエディターに☑が入っていますね。

これをコードエディターに切り替えます。

こんな感じで、さきほどまでのイメージ画像で作っていたものが全てコードに変換されます。

ここまで来たらほぼほぼ完成です。

おめでとうございます。

別ウインドウでウィジェットを開く

今度は別ウインドウで外観⇒ウィジェットを開いてください。

表示したいページの場所を開いて、『テキスト』ウィジェットを貼ります。

その『テキスト』ウィジェットに、さきほどのコードをそのままコピペします。

テキストウィジェットにコードエディターのコードをコピペ

https://yomuotoko2.me/wp-content/uploads/2019/06/memoruhiyoko-コピー-2.png
ヨムオ

お疲れさまでした。

サイトを開いてみてください。

参考までにCSSの書き方がこちら

覚えるべきルールが多いですね。

やはり、記事を書きながらCSSの勉強は結構ツライと思います。

この方法なら、やる事はいつもの記事作成なので負担は少ないはず。

CSSは複数サイトを運営するくらいの強ブロガーになってからでも遅くはないのでは?と思います。

それでは、また。