ブログのホームをデザインするにあたって、プロフィール欄の下にこんなメニューが欲しくなりました。(今回の完成品です)

 

f:id:michinoins:20181001134358p:plain

WordPressのデフォルトでついている「カテゴリー」や「人気記事」のウィジェットがありましたが

せっかくならカラフルに見やすいものを表示したいと思ってやってみました。

 

スマホのレスポンシブ画面ではドロワーに入れ込んでみました。

こんな感じ↓

ということで、html,cssを用いて簡単なメニューを作ったのでよかったら参考にしてみて下さい。

 

僕がメニューを追加したのは、【メインサイドバー】と【ドロワーメニュー】です。
外観->ウィジェットから見つけられます。
【メニュー】というタグはないのでカスタムHTMLに書き込むといいでしょう。

 

編集する前の注意点!

バックアップを取る!!

 

 

【htmlコード】

 

【1~7行目】
アマゾンの欲しいものリスト用ボタンです。
自分の欲しいものリストのurlを入れてください。

【14~21行目】
プロフィールに関するあれこれ。

同様にして雑記、ブログ運営、など自分の追加したいメニューの名前とurlを追加します。

また、アイコンを利用するためにはFontAwesomeが必要なのでそちらの使用準備もしてください。
サルワカさんのサイトがとても分かりやすいですね!

そうしたら、以下のcssを外観->cssの編集で追加します。

【cssコード】

 

【5~10行目】
各ボックスの共通の性質を決めています。
【11行目~】
各ボックスの色を決めています。

ちょっと今気づいたのですが、"opacity"を.boxesの中に入れてもできそうですね。
お好みで変えてみてください。

 

とまぁ、htmlやcssのデザインなら僕のような初心者でも簡単にとっつくことができます。

一冊くらい何か参考書を持っておくと今後デザインをしたくなった時にすぐに引けて良いと思います。

 

でも、本は高いんだよな~...

それならProgateがおすすめ!

本で学習するのが苦手という人はProgateというプログラミング学習サービスがあるので、それがおすすめです!

 

今回の記事で紹介したhtml,cssをコピペすれば掲載した画像のようになると思いますが、

色を変えたり、配置を変えてみたりする自分なりにアレンジできて楽しいですよ!

 



人気記事セレクション

1. 2回目のTOEICで880点取れたので勉強法や使った参考書をうんぬんかんぬん
2. 大谷翔平選手と茂野五郎ってどっちが強い?? 経歴を比べてみた
3. 腰への負担が少ない座椅子を発見した!これでブログ作業もプログラミングも順調に...
4. 4ヶ月のアパレルバイトで身についたこと
5. 【大学編入】編入学でかかった費用まとめ...機会損失含めたら50万超える...??

 

おすすめの記事
SponsoredLink