オンライン上で「ボタン・吹き出し・グラデーション」など4項目のWEBサイト作成に役立つツールが利用できるサイトです。
登録不要で無料で使えるツール集です。
サイト：【コピペで簡単！】CSSボタンジェネレーター (web-alpha.info)
使い方は、
カテゴリから「ボタン・吹き出し・グラデーション」のいずれかを選びます。
次に、ステップに沿って項目をカスタマイズしてきます。
最後に、HTMLとCSSのコードをコピペして貼り付けるだけです。
オンライン上でボタンなどのコードを自動で生成できるサイトです。
約4項目のWEBで役立つツールが利用できます。
HTMLとCSSのみで「見出しタグ・ボタン・レーダーチャート・検索フォーム・トグル・タイムライン・棒グラフ」など全222項目の種類のテンプレートがAI自動で作成できるジェネレーターサイトです。
登録不要で無料で使えるツール集です。
サイト：CSS Stock
使い方は以下。
作りたい項目とパーツを選択して、進めていくだけです。
例えば、「Q＆A」が簡単に作れることのパーツで説明します。
枠線の色や文字色、形状を決めて次へ進みます。
すると、HTMLとCSSの知識は不要でコードが自動生成されます。
あとは、これをコピーしてサイトに貼り付けるだけです。
オンライン上でHTMLとCSSの知識不要で様々なデザインやパーツが自動生成できるサイトです。
全222項目のパーツから選べます。
ホームページや無料ブログでパンくずリストを表示する方法をご紹介します。
パンくずリストとは、WEBサイトの記事ページによくある現在の位置を見える化したものです。
【パンくずリストの例】
トップ ＞ カテゴリ１ ＞ 記事タイトル訪問者が「自分のいる階層を知りたい時、一つ前のカテゴリへ戻りたい時」に便利にすることができます。
ホームページやブログを作っているなら必須なタグです。
パンくずリストは、HTMLとCSSを追加することで作成できます。
以下にライブドアブログ用に作成したパンくずリストのコードを載せます。
（ライブドアブログはPCページのみしか対応していません。）
以下のコードを「個別記事ページ」の「<body>〜</body>」へ追加して下さい。
<!--パンくずリストここから-->
<ul id="BreadCrumbs">
<li><a href="<$BlogUrl$>">トップ</a> ＞ </li>
<li><IfArticleCategory1><a href="<$ArticleCategory1Url$>"><$ArticleCategory1$></a></IfArticleCategory1><IfArticleCategory2>（<a href="<$ArticleCategory2Url$>"><$ArticleCategory2$></a>）</IfArticleCategory2> ＞ </li>
<li><$ArticleTitle ESCAPE$></li>
</ul>
<!--パンくずリストここまで-->
ライブドアブログの場合は選択したテンプレートによって追加位置が異なります。
おかしなところに表示されるようならその都度、追加位置を変えてみて下さい。
独自タグについて調べたい方はこちらで確認して下さい
ライブドアブログの独自タグ：独自タグ一覧（変数） – ライブドアブログのヘルプ（PC向け） (blogpark.jp)
もし出来ない人は以下を参考にしてみて下さい。
【CSS】
以下のコードをCSSの一番下に追加して下さい。
#BreadCrumbs {
margin: 4px;
padding: 4px;
text-align: left;
}
#BreadCrumbs li {
display:inline;
line-height:100%;
list-style-type:none;
}
他の自作ホームページやライブドアブログ以外のブログを使っている方は、以下のコードを参考にして追加してみて下さい。無料ブログ（ライブドアブログ 、FC2ブログ等）の場合は「独自・変数タグ」が使えるのでそれぞれ修正できると思います。
ライブドアブログの独自タグ：独自タグ一覧（変数） – ライブドアブログのヘルプ（PC向け） (blogpark.jp)
FC2ブログの変数タグ：テンプレート用 変数一覧 | マニュアル | FC2ブログヘルプ
【HTML】
<!--パンくずリストここから-->
<ul id="BreadCrumbs">
<li><a href="（トップページのURL）">トップページ</a> ＞ </li>
<li><a href="（カテゴリのURL）"></a> ＞ </li>
<li>（記事ページのタイトル）</li>
</ul>
<!--パンくずリストここまで-->
【CSS】
#BreadCrumbs {
margin: 4px;
padding: 4px;
text-align: left;
}
#BreadCrumbs li {
display:inline;
line-height:100%;
list-style-type:none;
}
最近のコメント