• 新着記事、人気記事でサムネイル無を表示するCSS

    目的 muragonのカスタマイズ。 サイドバーの新着記事、人気記事で「サムネイル無し画像」を表示する。 タイトルを3行表示し、Chrome、Safariのみ三点リーダ表示する。 CSS /* サムネイル無し画像を背景画像として表示 */ .aside-module[data-part-type="recent"] .thumbnail-group, .aside-module[data-par

  • 公告ロード中のアニメーションを追加するCSS

    目的 muragonのカスタマイズ。 記事下の公告が表示されるまでの間、ロード中アニメーション(アニメーションGIF)を表示する。 公告を中央寄せする。 CSS .footer-adarea { background : url(アニメーションGIF画像URL) no-repeat center; } /* 公告中央寄せ */ .footer-adarea > div {

  • 見出しに章番号を追加するCSS

    目的 muragonのカスタマイズ。 counter()関数を用い見出しをカウントし、章番号を追加する。 CSS .entry-body { counter-reset : num2; } .entry-body h2 { counter-reset : num3; } .entry-body h2:before { counter-increment :

  • リストマーカーを画像、絵文字に変更するCSS

    目的 muragonのカスタマイズ。 リストマーカーを画像、絵文字に変更する。 CSS .entry-body ul { list-style-image : url("画像URL"); } 本コードは、Fontawesomeを使用。 @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-aweso

  • モーダルウィンドウを表示するCSS

    目的 muragonのカスタマイズ。 リンクをクリックすると子ウィンドウを表示する。 CSS /* 親ウィンドウ */ #modal { display : none; position : fixed; top : 0; left : 0; width

  • スライドメニューを追加するCSS

    目的 muragonのカスタマイズ。 ボタンをクリックすると、画面左→右にスライドし表示されるメニューを追加する。 CSS 本コードは、Fontawesomeを使用。 @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); /* チェックボタン */ #menu-switch

  • メニューバーを追加するCSS

    目的 muragonのカスタマイズ。 <header>下にメニューバーを追加する。 親メニューにhoverした際、子メニューをプルダウン表示可。 CSS .nav-wrap{ width : 970px; margin : 0 auto } .nav-wrap ul { padding : 0; } .nav

  • 記事リストでサムネイル無を表示するCSS

    目的 muragonのカスタマイズ。 記事リストでサムネイル無しの時、「サムネイル無し画像」を表示する。 また、投稿記事は、先頭から最大200文字表示するが、3行のみ表示させ、記事リストの高さを揃える。 この時、Chrome、Safariのみ三点リーダ表示する。 CSS /* サムネイル無し画像を背景画像として表示 */ .unit-contents-inner { position

  • EGO DANCE

    見出し2a-1 見出し3a-11 見出し3a-12 見出し2a-2 見出し3a-21 見出し3a-22 塞いだ口より街を行け 足速に鼓動滲ませて 太古の血より熱く燃え 使い古しの声にうなされ 祖国の魔術 銃を握らす THE END OF CENTURY BOY CENTURY BOY 幻想に叫ぶ世界迎え 薔薇の花より赤く燃え 乱れる髪に野生を宿し 君の瞼に空が落ちてく THE END OF CEN

  • メルヘンダイバー

    愛した時に見つけたものは 素直な気持ちなのさ それは虹を見て立ち止まる事 夏を待つゆうぐれ ほんの前の事 ずっと先の午後 今日もつづいてく道の上で 僕等はこころを震わせて 暗い夜空を 嘘や真実や愛や夢で 時の流れを泳いでく 上手くゆかなくて 泣いてる君に 強い言葉を投げた それは不器用な キモチだけだし その手に触れてよう 愛し合うために 生きているのかな 君の姿だけさがし続けて 僕等はこころで

  • ページ中の画像とは別の画像をアイキャッチ画像とする

    目的 ページ中の画像とは別の画像を、アイキャッチ画像とする。 HTML 記事の1番目に画像を追加し、display:noneで非表示とする。 <p style="display:none"><img src="//public.muragon.com/00000000/11111111.png?dummy=9999999999999" width="400" height="400"></p> [