やがて煙になる日まで

人の死亡率は100%

muragon用改造スキンCSS配布~何かの回路風ヘッダー(リストアイコンつき)~

さて、殺風景なmuragonブログのために、コピペで一発改造のできるテンプレを配布します。
第七十五弾は、何かの回路風ヘッダー。

続きを読む≫
広告を非表示にする

muragon用改造スキンCSS配布~シャープな女子力ヘッダー~

さて、殺風景なmuragonブログのために、コピペで一発改造のできるテンプレを配布します。
第七十四弾は、シャープな女子力ヘッダー。

続きを読む≫
広告を非表示にする

ガラケーユーザーの「公共インフラ」と化していたアメーバなう

前から言っているように、「アメーバなう」というつぶやき機能は、ほぼ8年間運営をしたのち、11月6日をもって、提供終了が発表されている。

続きを読む≫
広告を非表示にする

muragonが「ブログ説明文」を大幅に縮小+「エンジニアブログ」を開設

muragonで、急な仕様変更が。

続きを読む≫
広告を非表示にする

【別バージョン追加】muragon用改造スキンCSS配布~おしゃれな雑貨屋さん風ヘッダー~

さて、殺風景なmuragonブログのために、コピペで一発改造のできるテンプレを配布します。
第七十三弾は、おしゃれな雑貨屋さん風ヘッダー。

続きを読む≫
広告を非表示にする

muragon用改造スキンCSS配布~レトロ映画風ヘッダー~

さて、殺風景なmuragonブログのために、コピペで一発改造のできるテンプレを配布します。
第七十二弾は、レトロ映画風ヘッダー。

続きを読む≫
広告を非表示にする

muragon用改造スキンCSS配布~水彩風お花ヘッダー~

さて、殺風景なmuragonブログのために、コピペで一発改造のできるテンプレを配布します。
第七十一弾は、水彩風お花ヘッダー。

続きを読む≫

導入方法

  • デザインはデフォルトのスタンダードにしておく。
  • ヘッダーの簡易カスタムをしてある場合は、取り消すこと。
  • 以下の画像URLを、ブラウザのURLウィンドウに入れて表示させ、画像を自分のPCにダウンロードしたのち、Muragonにアップロードする。

    https://cdn-ak.f.st-hatena.com/images/fotolife/M/Michiko_70554148/20171017/20171017175256.png

    この画像は、自由に使えるパブリックドメイン画像を、当方でリサイズ・トリミングをしたものだが、直リンクはせず、一度自分のMuragon画像フォルダにアップロードしてから使うこと。
    もともとの画像の配布場所のURLは↓
  • 画像をmuragonにアップロードしたら、いったん記事に貼りつけてみて、以下の要領で、画像のURLを取得する(?以降の余計な文字列は削除すること)。

    f:id:Michiko_70554148:20170516022942p:plain

    もちろん、この作業の記事はボツにしておけばよい。
  • 画像のURLを、以下のコードの青字の部分に差し替える。
    /*------水彩風お花ヘッダー------*/
    /*muragon規定ヘッダー*/
    #global-header{background:#d96995;border:none;}
    /*ヘッダー部分*/
    .blog-header-inner{background:url(画像のURL) no-repeat center center;height:350px;max-height:350px;overflow:hidden;padding:60px 380px 60px 300px;}
    .blog-title{font-size:24px;margin: 0 0 10px 0;}
    .blog-root-link{color:#888;font-family:'HGS創英角ポップ体';font-weight:normal;transition:0.5s;}
    .blog-root-link:visited{color:#888;}
    .blog-root-link:hover{color:#ccc;text-decoration:none;transition:0.5s;}
    .blog-description{font-weight:normal;margin:0 30px 0 0;}
    /*------水彩風お花ヘッダー↑------*/
  • コードをCSSに貼りつけ、保存する。

    f:id:Michiko_70554148:20170516023611p:plain

  • 終わり。

注意:補足

  • このデザインは、ブログタイトルやブログ説明文が長い場合には、向いていません。
  • ブログタイトルの文字数によっては、もっと文字のサイズを大きくしても大丈夫ですから、その場合には、フォントサイズを大きくしてみてください。
    やりかた↓
    コードの中の.blog-titlefont-size:24px;の「24」を、もっと大きくしてみる

水彩風お花ヘッダー



広告を非表示にする

muragon用改造スキンCSS配布~ジオメトリーヘッダー(リストアイコンつき)~

さて、殺風景なmuragonブログのために、コピペで一発改造のできるテンプレを配布します。
第七十弾は、ジオメトリーヘッダー。

続きを読む≫

導入方法

  • デザインはデフォルトのスタンダードにしておく。
  • ヘッダーの簡易カスタムをしてある場合は、取り消すこと。
  • 以下の画像URLを、ブラウザのURLウィンドウに入れて表示させ、画像を自分のPCにダウンロードしたのち、Muragonにアップロードする。

    https://cdn-ak.f.st-hatena.com/images/fotolife/M/Michiko_70554148/20171017/20171017000207.png

    この画像は、自由に使えるパブリックドメイン画像を、当方でリサイズ・加工したものだが、直リンクはせず、一度自分のMuragon画像フォルダにアップロードしてから使うこと。
    もともとの画像の配布場所のURLは↓
  • 画像をmuragonにアップロードしたら、いったん記事に貼りつけてみて、以下の要領で、画像のURLを取得する(?以降の余計な文字列は削除すること)。

    f:id:Michiko_70554148:20170516022942p:plain

    もちろん、この作業の記事はボツにしておけばよい。
  • 画像のURLを、以下のコードの青字の部分(3ケ所)に差し替える。
    3ケ所なので、忘れないように。
    /*------ジオメトリーヘッダー------*/
    /*muragon規定のglobalヘッダー*/
    #global-header{height:30px;background:#77c1a7;border:none;box-sizing:border-box;border-bottom:solid 15px #a87db7;}
    /*ヘッダー部分*/
    .blog-header-inner{background:url(画像のURL) no-repeat right top #77c1a7;height:300px;min-height:300px;max-height:300px;overflow:hidden;padding:30px 565px 30px 30px;margin:20px auto 30px auto;}
    .blog-root-link{font-size:30px;color:#fff;transition:0.5s;}
    .blog-root-link:visited{color:#fff;}
    .blog-root-link:hover{color:#ddd;text-decoration:none;transition:0.5s;}
    .blog-description{color:#fff;font-weight:normal;}
    /*記事アイコン*/
    article.entry-contents .entry-title{padding:3px 0 3px 40px;background:url(画像のURL) no-repeat left center;background-size:30px 30px;}
    /*サイドバーアイコン*/
    .aside-module-title{padding:3px 0 3px 30px;background:url(画像のURL) no-repeat left center;background-size:20px 20px;}
    /*------ジオメトリーヘッダー↑------*/
  • コードをCSSに貼りつけ、保存する。

    f:id:Michiko_70554148:20170516023611p:plain

  • 終わり。

ジオメトリーヘッダー



広告を非表示にする

割り切れないmuragonのnice!機能

muragonのnice!機能とか。

続きを読む≫
広告を非表示にする

muragon用改造スキンCSS配布~さわやかブルーローズ~

さて、殺風景なmuragonブログのために、コピペで一発改造のできるテンプレを配布します。
第六十九弾は、さわやかブルーローズ。

続きを読む≫

導入方法

  • デザインはデフォルトのスタンダードにしておく。
  • ヘッダーや背景の簡易カスタムをしてある場合は、取り消すこと。
  • 以下の画像URLを、ブラウザのURLウィンドウに入れて表示させ、画像を自分のPCにダウンロードしたのち、Muragonにアップロードする。

    https://cdn.pixabay.com/photo/2017/02/10/07/43/gardenia-2054594_960_720.png

    この画像は、自由に使えるパブリックドメイン画像だが、直リンクはせず、一度自分のMuragon画像フォルダにアップロードしてから使うこと。
    もともとの画像の配布場所のURLは↓
  • 画像をmuragonにアップロードしたら、いったん記事に貼りつけてみて、以下の要領で、画像のURLを取得する(?以降の余計な文字列は削除すること)。

    f:id:Michiko_70554148:20170516022942p:plain

    もちろん、この作業の記事はボツにしておけばよい。
  • 画像のURLを、以下のコードの青字の部分(2ケ所)に差し替える。
    2ケ所なので、忘れないように。
    /*------さわやかブルーローズ↓------*/
    /*body背景*/
    body{background:url(画像のURL) center -20px fixed;}
    /*全体幅*/
    #container-wrapper{background:rgba(255,255,255,0.4);padding:0 0 70px 0;}
    .container-inner{width:970px;margin:100px auto 0 auto;display:block;padding:20px;background:#fff;overflow:hidden;border:solid 5px #84c5d4;box-sizing:border-box;box-shadow:0 0 0 5px #fff;}
    /*muragon規定のglobalヘッダー*/
    #global-header{background:#58a2b3;border:none;box-shadow:0 3px 3px rgba(0,0,0,0.4);}
    /*ヘッダー部分*/
    .blog-header-inner{margin:0 auto 30px auto;background:none;}
    .blog-root-link{color:#444;transition:0.5s;display:block;}
    .blog-root-link:visited{color:#444;}
    .blog-root-link:hover{text-decoration:none;color:#ccc;transition:0.5s;}
    /*コンテンツ部分*/
    .contents{width:auto;}
    .main{width:640px;background:none;}
    .entry-title{border-bottom:solid 3px #84c5d4;}
    /*コメント*/
    .modal-link-login,.write-comment-modal{background:none;}
    /*ページャー*/
    .entry-pagination .prev{font-size:15px;margin: 0.2em 10px 0.2em 0;color:inherit;}
    /*サイドバー*/
    .sub{width:280px;background:none;}
    /*サイドバータイトル部分*/
    .aside-module-title{position:relative;padding:10px 10px 10px 15px;color:#fff;background:url(画像のURL) no-repeat center center;background-size:300px 300px;text-shadow:1px 1px #777;}
    .aside-module-title:after{content:".";color:rgba(0,0,0,0);width:100%;height:100%;background:rgba(255,255,255,0.3);position:absolute;left:0;top:0;}
    /*フッター*/
    .blog-footer{background:none;}
    /*------さわやかブルーローズ↑------*/
  • コードをCSSに貼りつけ、保存する。

    f:id:Michiko_70554148:20170516023611p:plain

  • 終わり。

さわやかブルーローズ



広告を非表示にする

当方は、アフィリエイトブロガーではありません。
商業活動や、勧誘活動とは無関係の個人であって、純粋に個人の趣味でブログを運営しております。

≪前のページトップPresent English article is moved to another page of mine No risk, no say