スナックelve 本店

バツイチ40代女の日記です

トップ > メモ > 増田っぽいカスタマイズ

増田っぽいカスタマイズ

メモ

個人的な好みで2カラムにしてる。あと、フロート使ってる。なんかダサいらしいが(ﾟεﾟ)ｷﾆｼﾅｲ!!

すぺしゃるさんくす

例によって例のごとく阿豆らいち (id:AzuLitchi)さんに聞きまくった。
ら「( ﾟ∀ﾟ)･∵. ｸﾞﾊｯ!!　コードが見にくい！！　このコードどこから持ってきたんすか！？」
え「私 が 書 き ま し た」
ら「・・・」
みたいな感じで楽しかったです。うん、インデントすら滅茶苦茶ですまんかったねｗ

実際の見た目は
グーグルに怒られる系の記事 by elve
を参照ください。

突っ込み歓迎。

css

デザイン→カスタマイズ（真ん中）→{} デザインCSSに以下を設定

/*  Responsive: yes*/
    :root{
        --theme-color: #5279e7;  
    }
    /*はてなブログのヘッダ*/
    div#globalheader-container{
        color: #003CAD;
        background: #fff;
        font-weight: bold;
        border-bottom: 25px solid var(--theme-color);
    }
    /*本体・見出し系*/
    body{
        font-family: -apple-system-font, Helvetica, Arial, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, sans-serif;
        color: black;
        background-color: #fff;
        margin: 0px;
        padding: 0px
    }
    h1{
        text-align: left;
        font-size: 120%;
        font-weight: bold;
        border-bottom: 1px dotted #adb2ff;
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 4px 4px 4px 4px
    }
        h1 a { 
        text-decoration: none; 
        color: #000;
    }
    h2{
        color: #fff;
        font-size: 100%;
        background-color: var(--theme-color);
        padding: 3px 0px 2px 10px;
        margin: 5px 0 0 0;
        width: auto;
    }
    h2 a{
        color: #fff
    }
    h3{
        font-size: 120%;
        font-weight: bold
    }
    h3 span.timestamp{
        font-weight: normal;
        font-size: 80%
    }
    h3 a.edit{
        margin-left: 0.5em
    }
    h4{
        font-size: 100%;
        font-weight: bold;
        margin: 0.6em 10% 0 0.4em;
        border-left: 5px solid var(--theme-color);
        border-bottom: 1px solid var(--theme-color);
        padding: 0px 0.5em 0.1em 0.5em
    }
    h5{
        font-size: 100%;
        margin: 0.5em 0 0 0.7em
    }
    /*検索窓*/
    input[type="text"]{
        height: 20px
    }
    /*ブログの説明*/
    #blog-description{
        background-color: #fff;
        color: #000;
        margin: 0;
        padding: 0 0 0 4px;
        font-weight: normal;
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        text-align: left;
    }
    /*日付*/
    div.date{
        font-size: 100%;
        font-weight: bold;
        background-color: var(--theme-color);
        padding: 0px 0px 2px 10px;
        margin: 0px 0 0 0;
        width: auto;
        line-height: 25px;
    }
    div.date a{
        color: #fff;
        font-size: 100%;
        font-style: normal;
        margin-left: 2px;
        margin-right: 2px;
    }
    /*記事全体*/
    article.entry{
        margin-top: 0px;
        margin-bottom: 0px;
        padding: 0px 10px 3px 10px;
        line-height: 1.5;
        width: auto;
    }
    /*記事のタイトル*/
    h1.entry-title
    {
        font-size: 120%;
        line-height: 150%;
        font-weight: bold;
        margin: 0.5em 0 1em 0;
    }
    h1.entry-title: before{
        content: '■';
        font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, sans-serif;
        color: var(--theme-color);
        margin-right: 5px;
        font-size: 120%;
        margin: 0.8em 0 1em 0;
        line-height: 150%;
        font-weight: bold;
    }
    /*インライン要素系*/
    em{
        font-style: italic
    }
    strong{
        font-weight: bold
    }
    pre{
        background-color: #e7ebff;
        padding: 8px
    }
    dl{
        margin-left: 2em
    }
    dt{
        font-weight: bold;
        margin-bottom: 0.2em
    }
    dd{
        margin-left: 1em;
        margin-bottom: 0.5em
    }
    /*引用*/
    blockquote{
        color: #333333;
        background-color: #fff;
        border: var(--theme-color) 1px solid;
        margin: 1% 2%;
        padding-top: 8px;
        padding-right: 8px;
        padding-bottom: 8px;
        padding-left: 8px
    }
    /*テーブル*/
    table{
        margin: 10px
    }
    table tr th{
        font-size: 90%;
        padding: 3px;
        background: #EEE;
        border-bottom: 1px solid gray
    }
    table tr td{
        font-size: 90%;
        padding: 3px;
        border-bottom: 1px dashed gray
    }
    /*はてなキーワード*/
    a.keyword{
        color: black;
        text-decoration: none;
        border-bottom: 1px solid #d0d0d0
    }
    a.okeyword{
        color: black;
        text-decoration: none;
        border-bottom: 1px dashed #d0d0d0
    }
    /*はてなフォトライフ*/
    img.hatena-fotolife{
        border: 1px solid #606060
    }
    /*記事ブロック*/
    div.entry-inner{
        border: var(--theme-color) 1px solid;
        margin-bottom: 1em;
    }
    div.entry-content{
        font-size: 90%;
        margin-top: 0px;
        margin-bottom: 0px;
        padding: 3px 10px 3px 10px;
        line-height: 1.5;
        width: auto;
        _width: 100%
    }
    /*段落*/
    p{
        line-height: 165%;
        padding-top: 0.2%;
        padding-bottom: 0.2%;
        text-indent: 0em
    }
    /*構造*/
    /*-- wrapper --*/
    div#container {
        width: 90%;
        margin: auto;
    }
    /*-- clearfix -- */
    div#containerr: after{
        content: '';
        display: block;
        clear: both;
    }
    /*-- main --*/
    div#wrapper {
        width: 100%;
        float: left;
        min-width: 200px;
    }
    div#main {
        margin-right: 200px;
    }
        /*-- sub --*/
    #box2 {
        width: 200px;
        float: right;
        margin-left: -200px;
    }
    /* スマホ　1200px以下 */
    @media only screen and (max-width: 1200px) {
        div#wrapper{
            float: none;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 30px;
        }
        div#main {
            margin-right: auto;
        }
        #box2 {
            /*　floatを解除 */
            float: none;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
        }
    }
    /*サイドバー*/
    div.hatena-module-title{
        color: #fff;
        font-size: 100%;
        margin-left: 2px;
        margin-right: 2px;
        font-weight: bold;
        background-color: var(--theme-color);
        padding: 0px 0px 2px 10px;
        width: auto;
        line-height: 25px;
        margin: 1em 0 0.3em 0;
        text-align: left;
    }
    div.hatena-module-title a{
        color: #fff;
    }
    .hatena-module-body{
        text-align: left;
        padding: 3px 10px 3px 10px;
    }
    div.hatena-module-body dl{
        display: block;
        font-size: 80%;
        margin: 0;
        padding: 0
    }
    div.hatena-module-body dd{
        margin-left: 0;
        margin-bottom: 0.2em
    }
    div.hatena-module-body ul{
        display: block;
        font-size: 80%;
        list-style-type: none;
        margin: 0;
        padding: 0
    }
    /*記事フッター*/
    div#bottom-editarea{
        width: 100%;
        clear: both;
        color: #666;
        font-size: 80%;
        text-align: center;
        padding: 20px 0;   
    }
    div.hatena-star-container{
        text-align: right;
        padding: 3px 10px 3px 10px;
        float: left;
    }
    p.entry-footer-section{
        text-align: right;
        padding: 3px 10px 3px 10px;
        float: right;
    }
    div.social-buttons{
        text-align: right;
        padding: 3px 10px 3px 10px;
    }
    /*コメント*/
    div.comment-box{
        font-size: 90%;
        line-height: 1.5;
        text-align: right;
    }
    div.comment-box a{
        margin-bottom: 1em;
        padding: 3px 10px 3px 10px;
        font-size: 90%;
        color: blue;
    }
    div.comment-box ul{
        border-bottom: var(--theme-color) 1px solid;
        border-top: var(--theme-color) 1px solid;
        background-color: #edf1fd;
        padding: 5px;
        margin: 0;
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 40px;
        text-align: left; 
    }
    div.comment-box ul{
        list-style-position: inside;
    }
    div.comment-box li{
        list-style-position: outside;
        list-style-type: disc;
    }
    div.comment-content p{
        background: #fff;
        width: 80%;
        margin: 3px auto 8px 0;
        padding: 1px 6px;
    }
    /*フッター*/
    #footer{
        text-align: center;
    }
    /*次のページへ、とか*/
    div.pager{
        margin-top: 0.2em;
        margin-bottom: 0.5em;
        clear: both;
        text-align: left;
        font-size: 90%;
        line-height: 150%;
        padding: 3px 10px 3px 10px;
    }
    .pager-prev::after{
        content: "|";
    }
    /*モバイルでの設定*/
    @media screen and (max-width: 1200px){
        a.keyword{
            border-bottom: none
        }
        h1#title{
            font-size: 120%;
            text-align: center;
            padding: 0.8em 0 0.4em;
            margin-bottom: 0;
            margin-top: 0
        }
        h2#blog-description{
            font-size: 100%;
            text-align: center;
        }
        h1{
            font-size: 120%;
        }
        h2{
            font-size: 90%;
            margin: 0.4em 0 0.8em 0;
            font-size: 100%;
            text-align: center;
        }
        div.date{
            font-size: 120%;
        }
        h3 {
            font-size: 115%;
            line-height: 155%;
        }
        div.entry-content{
            margin: 1.2em 0;
            font-size: 100%;
            line-height: 1.65;
        }
    }

jquery？

同じく、デザイン→カスタマイズ（真ん中）→フッタに設定

/*先頭に戻るボタン*/
<div style="text-align: right;"><a href='#header-container' style="margin: 2em auto; padding: 10px; width: 80%; border: 1px solid #ccc; box-shadow: 2px 2px 2px #999;">↑Top</a></div>

/*jquery処理*/
<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>
<script type="text/javascript">
/*トップページだったらタイトルにRSS追加*/
var myURL =$(location).attr('host');
var rssURL = $(location).attr('protocol') +'//'+myURL+"/rss";
var TopUrl = $(location).attr('protocol') +'//'+ $(location).attr('host')+'/';
var myUrl = location.href;
if(myUrl==TopUrl || myUrl==TopUrl+'preview/index_design'){
    // URLがトップページのとき実行するコード
    tmp = $('span.pager-next a').text();
	 $('span.pager-next a').text(tmp+">");

	$("h1#title").append(" <a href='"+rssURL+"'><img src='https://anond.hatelabo.jp/images/rss.gif'></a>");
}
/*次の記事へのリンクを記事上部にコピー*/
$('header#blog-title').after( $('div.pager').clone());    
</script>

注意

  • 1200px以下で1カラムになります
  • rssの画像は増田のところから直リンしてるので怒られるかもしれない