attention admin about comments trackbacks you may also like

【ブログ】記事装飾パーツまとめ

2020年04月08日
FC2ブログ
0
FC2ブログ ブログカスタマイズ 記事装飾

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

 

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

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

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

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

    <h2 class="under-h">【H2タグ・見出し】アンダーh</h2>
  • 【H2タグ・見出し】ベース・ヘッドライン

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

    <h2 class="pale">【H2タグ・見出し】ペイル</h2>
    
  • 【H2タグ・見出し】手書き風

    <h2 class="freehand">【H2タグ・見出し】手書き風</h2>
    <div class="freehand">【H2タグ・見出し】手書き風</div>
  • 【H2タグ・見出し】ドッグイヤー

    <h2 class="dogear">【H2タグ・見出し】ドッグイヤー</h2>
    <div class="dogear">【H2タグ・見出し】ドッグイヤー</div>
  • 【H2タグ・見出し】カール

    <h2 class="curl">【H2タグ・見出し】カール</h2>
    <div class="curl">【H2タグ・見出し】カール</div>
  • 【H2タグ・見出し】ボーダーレフト

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

    <h2>【H2タグ・見出し】シンプル</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="代替テキスト">

 

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

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

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

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

 

         
【四日坊主 / Yokkabose】
Author: 【四日坊主 / Yokkabose】

シンプルに生きて生きたいのに、なぜか面倒臭いことに、、。日本が好きなのに、オーストラリア在住。

        

コメント(0)

There are no comments yet.