【はてなブログPro】スマホ版のカスタマイズ【コピペ用】

まいど！

はてなブログPro後に行ったスマホ用のカスタマイズを自分が忘れない為に書いていきます

スマホ版のカスタマイズ 

不要な要素を削除

最上部のはてなアイコンとログインのリンク

<style type="text/css">

#globalheader-container {
display: none;
}

</style>

タイトル下にコピペ

最上部の余白調整

<style type="text/css">

#container{

padding-top: 0px;

</style>

タイトル下ににコピペ

ブログの説明

<style type="text/css">

#blog-description {
display: none;
}

</style>

タイトル下にコピペ

 

記事下のIDと署名

<style type="text/css">

.entry-footer-section {
display: none;
}

</style>

スマホのフッタにコピペ

 

検索モジュール

<style type="text/css">

.search-box {
display: none;
}

</style>

スマホのフッタにコピペ

 

「記事を書く」と「記事の管理の」リンク

<style type="text/css">

.footer-action-wrapper {
display: none;
}

</style>

スマホのフッタにコピペ

 

はてな関連のリンク

<style type="text/css">

.touch-item-list {
display: none;
}

</style>

スマホのフッタにコピペ

 

最下部の「ダッシュボード」「PC版」のリンク

<style type="text/css">

#footer-menu {
display: none;
}

</style>

スマホのフッタにコピペ

記事関連のカスタマイズ

文字の大きさ

<style type="text/css">

.entry-content {
 font-size:ここに数値px;
}

</style>

記事上にコピペ

記事見出しの色付け

<style type="text/css">

.date{

     color: #f8fafc; /*日付の文字色*/

     background: #2b95ff;/*日付の背景色*/

     padding: 0px 10px;/*日付の文字まわりのスペース*/

     }

</style>

記事上にコピペ

見出しの変更

大見出し

<style type="text/css">

.entry-content h3{
    color: #fff;
    padding: 15px 10px;
    background: #373F51;
}

</style>

中見出し 

<style type="text/css">
.entry-content h4{
    color: #444444;
    background: #f3f3f3;
    padding: 10px 15px;
    border-left: 10px solid #373F51;
    }
</style>

小見出し

<style type="text/css">

.entry-content h5{
    color: #444;
    padding: 5px 15px;
    border-bottom: 2px solid #373F51;
}

</style>

 記事上ににコピペ

引用のカスタマイズ

<style type="text/css">

/* 引用のデザイン1 */.entry-content blockquote {
    padding: 10px 30px;
    background: rgba(245,245,245,0.8);
    color: #222;
    position: relative;
    border: solid 1px #fff;
    margin: 0.8em 0;
}/* 引用のデザイン2 */.entry-content blockquote:before {
    color: rgba(200, 200, 200, 1);
    content: "“";
    font-family: serif;
    font-size: 200%;
    left: 0;
    line-height: 1em;
    position: absolute;
    top: 0;
}/* 引用のデザイン3 */.entry-content blockquote:after {
    content: "”";
    font-family: serif;
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 200%;
    color: rgba(200,200,200,1);
    line-height: 0;
}
</style>

↑こんな感じになります

ページャ下にコピペ

まとめ

自分が忘れない為に書きましたが、今後やる人に少しでも参考になれば幸いです