✕
ブログデザイン１
コード
View
✕
blog１
コードをクリックすると選択されます。次にコピーして完了です。
<html><head> <title>タイトルを挿入</title> <link rel="stylesheet" type="text/css" href="https://umaidango.github.io/dic/main.css"> <link rel="stylesheet" type="text/css" href="https://umaidango.github.io/kabegami/modal.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""> <link href="https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap" rel="stylesheet"> <style>*{ border-radius: 10px; font-family: "M PLUS 1", sans-serif; font-optical-sizing: auto; font-style: normal; } .header {border-bottom: 1px #ddd solid;width: 100%;border-radius: 0px} a {text-decoration: none;} .logo { display: inline-block; } .logo:hover { background-color:#efefef7f; border-radius:10px; } .osu:active{ padding:14px; background:#dddddd3d; } .osu{ padding: 14px; } </style> </head> <body> <header class="header"> <a style="color:#000;" href="#"><div class="logo"><font style="font-size: 25px; vertical-align: 38%; /*! cursor: default; */ ">My Blog</font></div></a> <a href="#"><span class="osu" style="vertical-align:59%;color:#000;padding: 14px;">ホーム</span></a> </header> <div> <h3>テキストを挿入。</h3><div style="padding: 12px;border: 3px #ddd dotted;padding-left: 45px;padding-bottom: 33px;margin-bottom: 20px;margin-top: 20px;"> <h3>〇〇〇〇とは</h3> テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。 <br><br><!--画像を入れてください borderは消して大丈夫です。--> <img src="" style="border: 2px #eee solid;width: 64px;height: 64px;border-radius: 50%;vertical-align: 31%;"> <span style="font-size: 20px;vertical-align: 112%;margin-left: 25px;border: 2px #ddd solid;padding: 8px;border-radius: 18px;padding-top: 17px;padding-bottom: 18px;"> テキストを挿入。テキストを挿入。 </span> </div> <div style="padding: 12px;border: 3px #ddd dotted;padding-left: 45px;padding-bottom: 33px;margin-bottom: 20px;margin-top: 20px;"> <h3>記事</h3> <p><a style="text-decoration: underline;" href="#">テキストを挿入。テキストを挿入。</a></p> </div> </div> <footer style="color: #6c6c6c;">(c) 2024 名前 Design By U Web Styles</footer> <script> </script> </body></html>
✕
blog１
コードをクリックすると選択されます。次にコピーして完了です。
<html><head> <title>タイトルを挿入</title> <link rel="stylesheet" type="text/css" href="https://umaidango.github.io/kabegami/modal.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""> <link href="https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap" rel="stylesheet"> <style>*{ border-radius: 10px; font-family: "M PLUS 1", sans-serif; font-optical-sizing: auto; font-style: normal;} .header {border-bottom: 1px #ddd solid;width: 100%;border-radius: 0px} a {text-decoration: none;} .logo { display: inline-block; } .logo:hover { background-color:#efefef7f; border-radius:10px; } .osu:active{ padding:14px; background:#dddddd3d; } .osu{ padding: 14px; } </style> </head> <body> <header class="header"> <a style="color:#000;" href="#"><div class="logo"><font style="font-size: 25px; vertical-align: 38%; /*! cursor: default; */ ">My Blog</font></div></a> <a href="#"><span class="osu" style="vertical-align:59%;color:#000;cursor: url(https://umaidango.github.io/cur/%E7%8C%ABpoi.png), pointer;padding: 14px;">ホーム</span></a> </header> <div> <h3>ブログ</h3><div style="padding: 12px;border: 3px #ddd dotted;padding-left: 45px;padding-bottom: 33px;margin-bottom: 20px;margin-top: 20px;width: 85%;"> <h3>題名</h3>テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。テキストを挿入。 <br><!--画像を入れない方は消しても大丈夫です。borderも消しても大丈夫です。--> <img src="" style="width: 250px;height: 250px;border: 1px #ddd solid;margin: 20px;"> <!--日付を入れてね↓--> <p>yyyy/mm/dd 、投稿。</p> </div> </div> <footer style="color: #6c6c6c;">(c) 2024 名前 Design By U Web Styles</footer> <script> </script> </body></html>
✕
ブログページ１
コード
View
U Web Styles
ホーム
U Web Stylesとは
U Web Stylesとは
U Web Stylesはホームページサンプルを準備しています！！
U Web Styles