5minスポンサーリンクSHAREツイートシェアはてブLINEPocketツイートシェアはてブLINEPocketどうも、トッド(Todd)(@ThreeFrogblog)です。MEDIA』でも取り入れてみようと思い実装してみました。今回の内容は、WordPressのウィジェットにあるHTMLカスタマイズを使用してTOPページに▲ヘッダーインフォメーションを実装する方法になります。MEMOなお、以下で紹介するソースコードをコピペ実装することで100%、上記完成図のようになるとは限りません。文字数などに加えて表示する端末等を考慮した調整を行ってください。ウィジェットにあるTOPページ上部エリアにカスタムHTMLを取り入れ、ソースコードを記述しようまずは、WordPress管理画面から、「外観」→「ウィジェット」へ進み【TOPページ上部エリア】に【カスタムHTML】を入れます。こんな風に・・・▼そしたら以下のソースコードを【カスタムHTML】内に記述してください。fa-user-circle"></i>ボタン名</a></div>背景に表示する画像のサイズは横765×縦419pxで作成しています。Awesome導入でアイコン表示する方法CSSでカスタムHTMLに記述したソースコードをドレスアップこの状態でサイトのプレビューを見ると酷い状態になっているのでCSSで調整していきます。375px){/*下記コード*/}+αで書き足してください。.faの部分を消してください。pの部分にGoogleフォントを使用することでガラッとテキストの印象を変えることもできるのでオススメです。Japaneseをページタイトルと見出しに実装あとがき以上の工程で完了です。MEDIA」ならいい感じに仕上がるでしょう。カスタマイズの参考になればと、思います。レイアウトに関して崩れているところがある場合は数字の部分を触るなりして微調整してみてください。最後まで読んでいただき有難うございました。】ブログ見出しCSSデザインカタログこの記事を書いた人トッド(Todd)「ポケサイズム」で気づきを築くをテーマに好きなコト・興味関心に惹かれたテーマに沿った事を書いています。コメントをキャンセルメールアドレスが公開されることはありません。独立したURLでアパレルオンラインストアが持てる【paintory】にてブランド作りました。