ブログ・SNS・Webのあれこれ

【ブログ】記事装飾パーツまとめ
【四日坊主 / Yokkabose】
2020/04/08
0
HTMLCSSブログ記事装飾FC2ブログソースコードプログラム

このページではこのブログ＝「FC2ブログサービス」を通して「Akiraさんのテンプレート」を使っている場合の記事装飾ツールをまとめています。"ユーザー辞書の機能"を使ってコードを登録してはいるのですが私自身が目視しないと使いこなせていないのでこのページにまとめています。一部「Akiraさん」とは関係のないコードもあります。私はコードなど素人ですので間違った記載があるかもしれませんがこのブログで使っている物です。

 

カラフルな光が映った画像

【記事装飾パーツ】H２タグ / 見出し

  • 【H２タグ・見出し】ボーダーボトム

    <h2 style="border-bottom: 5px solid red; padding: .5em;">【H２タグ・見出し】ボーダーボトム</h2>

  • 【H２タグ・見出し】アンダーh

    <h2 class="under-h">【H２タグ・見出し】アンダーh</h2>

  • 【H２タグ・見出し】ベース・ヘッドライン

    <h2 class="base-headline">【H２タグ・見出し】ベース・ヘッドライン</h2>

  • 【H２タグ・見出し】ペイル

    <h2 class="pale">【H２タグ・見出し】ペイル</h2>

  • 【H２タグ・見出し】手書き風

    <h2 class="freehand">【H２タグ・見出し】手書き風</h2>
    <div class="freehand">【H２タグ・見出し】手書き風</div>

  • 【H２タグ・見出し】ドッグイヤー

    <h2 class="dogear">【H２タグ・見出し】ドッグイヤー</h2>
    <div class="dogear">【H２タグ・見出し】ドッグイヤー</div>

  • 【H２タグ・見出し】カール

    <h2 class="curl">【H２タグ・見出し】カール</h2>
    <div class="curl">【H２タグ・見出し】カール</div>

  • 【H２タグ・見出し】ボーダーレフト

    <h2 style="border-left: 5px solid Yellow; padding: .5em;">【H２タグ・見出し】ボーダーレフト</h2>

  • 【H２タグ・見出し】シンプル

    <h2>【H２タグ・見出し】シンプル</h2>

 

【記事装飾パーツ】ボックス

  • 【ボックス-01】アテンション

    <p class="attention">【ボックス-01】アテンション<p>

  • 【ボックス-02】ヒント

    <p class="hint">【ボックス-02】ヒント<p>

  • 【ボックス-03】プレーン

    <div style="margin-top: 30px; background: rgb(240,240,240); color: rgb(51,51,51); padding: 1em;">【ボックス-03】プレーン</div>

 

【記事装飾パーツ】バッジ

  • 【バッジ−01】※例）注意などに利用 
    <span style="display: inline-block; background: red; color: rgb(240,204,240); padding: .2em .8em; border-radius: 3px;">【バッジ−01】</span>

 

【記事装飾パーツ】コード・タグの表示

HTML特殊文字変換ツール 
  • すぐ下のコードを使うと横幅いっぱいの枠が表示されます。
    <pre>　</pre>
  • すぐ下のコードを使うと文字数合わせた横幅の枠が表示されます。 
    <span class="prettyprint">　</span>
  • すぐ下のコードを使うと横幅いっぱいの枠が表示されます。
    <pre class="prettyprint2">  </pre>

 

【記事装飾パーツ】アコーデオン

  • アイウエオカキクケコさしすせそ

     

      
<details class="acmenu">
<summary class="actitle" aria-expanded="false">ここを押して開く（適当な文字を入れる）</summary>
<div class="acmenu-inner">
<p>アイウエオカキクケコさしすせそ</p>
</div>
</details>

    •  

  • <!-- 折りたたみ -->
<div onclick="obj=document.getElementById('英単語').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;"><font size="5"><u>英単語</u></font></a>
</div>
<!--// 折りたたみ -->
<!-- 折りたたまれ -->
<div id="英単語" style="display:none;clear:both;">
<p>（例）ここに英単語の意味、文章などを記入する。</p>
</div>
<!--// 折りたたまれ -->

 

【記事装飾パーツ】目次機能など

【目次機能について】
現在このブログは「Akiraさん」のテンプレートを使わせていただいている。
このテンプレートは目次機能がデフォルトでついていたが、他のテンプレートはついていなものもあるようだ。その場合は以前「Akiraさん」にコメント欄で質問した際に教えてもらった説明が「アキラさんの"Halo"のテンプレートのページのコメント欄にあるので以下にリンクを貼っておく。（備忘録）
リンク先のサイトページのだいぶ下の方にあるコメント欄の「目次機能について」の質問内容を確認してください。

見出し目次を生成するTOCスクリプト
目次へ戻る↑
<div class="back-toc" style="font-weight: bold;"><a href="#toc">目次へ戻る&uarr;</a></div>

【Lazyloading の画像表示】

<img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="画像アドレス" alt="代替テキスト">

 

【記事装飾パーツ】テーブル作成ツール

以下のサイトでテーブル用のタグが簡単に作れます。設定がいろいろできます。

エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)

エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)

※1　左上端のセル（ExcelでいうA1）は「空白セルを出力しない」にチェックがはいっていても出力されます。
　　　また、空白セルを出力しないにチェックが入っている場合、左端、上端のセルを自動的に結合します。
※2　左セルと結合するにチェックをいれている場合に上セルと結合したいセルがあれば、そのセルの中身を [:joinTop:] にしておけば
　　　左じゃなくて上のセルと結合します。上セルと結合する設定のときは [:joinLeft:] で左セルと結合します。

http://styleme.jp/tool/xls2html/#close

 

Web便利ツール/テーブルタグ作成ツール - TAG index

テーブルタグ生成ツール。表を簡単に作成することができます。テーブルの表示を実際に確認しながら、各種設定を行うことができます。設定を完了したコードはテキストエリアに表示されるので、それをコピーしてお使いください。

Web便利ツール/テーブルタグ作成ツール - TAG index

 

関連記事
 0

COMMENTS

ブログ・SNS・Webのあれこれ