HTMLとCSS

CSSとHTMLでボタン・吹き出し・グラデーションが作れるサイト

オンライン上で「ボタン・吹き出し・グラデーション」など4項目のWEBサイト作成に役立つツールが利用できるサイトです。

登録不要で無料で使えるツール集です。

サイト:【コピペで簡単!】CSSボタンジェネレーター (web-alpha.info)

使い方は、

カテゴリから「ボタン・吹き出し・グラデーション」のいずれかを選びます。

次に、ステップに沿って項目をカスタマイズしてきます。

最後に、HTMLとCSSのコードをコピペして貼り付けるだけです。

引用・参考サイト

オンライン上でボタンなどのコードを自動で生成できるサイトです。

約4項目のWEBで役立つツールが利用できます。

HTML・CSSで作成できるテンプレートジェネレーターサイト

HTMLとCSSのみで「見出しタグ・ボタン・レーダーチャート・検索フォーム・トグル・タイムライン・棒グラフ」など全222項目の種類のテンプレートがAI自動で作成できるジェネレーターサイトです。

登録不要で無料で使えるツール集です。

サイト:CSS Stock

使い方は以下。

作りたい項目とパーツを選択して、進めていくだけです。

例えば、「Q&A」が簡単に作れることのパーツで説明します。

枠線の色や文字色、形状を決めて次へ進みます。

すると、HTMLとCSSの知識は不要でコードが自動生成されます。

あとは、これをコピーしてサイトに貼り付けるだけです。

引用・参考サイト

オンライン上でHTMLとCSSの知識不要で様々なデザインやパーツが自動生成できるサイトです。

全222項目のパーツから選べます。

ホームページのパンくずリストの作り方

ホームページや無料ブログでパンくずリストを表示する方法をご紹介します。

パンくずリストとは、WEBサイトの記事ページによくある現在の位置を見える化したものです。

パンくずリスト

パンくずリストの例

トップカテゴリ1記事タイトル

訪問者が「自分のいる階層を知りたい時、一つ前のカテゴリへ戻りたい時」に便利にすることができます。

ホームページやブログを作っているなら必須なタグです。

パンくずリストは、HTMLとCSSを追加することで作成できます。

以下にライブドアブログ用に作成したパンくずリストのコードを載せます。

(ライブドアブログはPCページのみしか対応していません。)

HTMLコード(ライブドアブログ向け)

以下のコードを「個別記事ページ」の「<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】

以下のコードをCSSの一番下に追加して下さい。

#BreadCrumbs {
 margin: 4px;
 padding: 4px;
 text-align: left;
}
#BreadCrumbs li {
display:inline;
line-height:100%;
list-style-type:none;
}

その他のWEBサイト向け

他の自作ホームページライブドアブログ以外のブログを使っている方は、以下のコードを参考にして追加してみて下さい。無料ブログ(ライブドアブログ 、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;
}