WordPressを開設して、デザインカスタマイズをやるようになり、CSSのコピペだけでできる調整をいろいろやりましたので、共有したいと思います。基本的にSANGO(有料WordPressテンプレート)のカスタマイズです。
コピペの詳細は随時更新します。
目次
コピー&ペーストする場所

SANGOをインストールした状態で
管理画面>外観>カスタマイズ>追加CSS
にコピー&ペーストを行います。
「SHARE」ボタンを「共有する」ボタンに文字変更

CSS
.fab-btn i:after{content:"共有する"}
PCヘッダーに検索ボタンを追加(スマホと同じ動作)
-1024x587.png)
CSS
@media (min-width:768px){#inner-header{position:relative}.desktop-nav{margin-right:60px}.header-search__open{display:inherit;cursor:pointer}}
現在表示されている記事のカテゴリに下線を引く

CSS
body.home .desktop-nav li.menu-item-home:after{transform:none}.desktop-nav .current-menu-item:after,.desktop-nav li.current-post-ancestor:after{transform:none}.mobile-nav li.current-post-ancestor{border-bottom-color:#FFF;border-bottom-style:solid;opacity:1;border-bottom-width:2px}
スマホ時に更新時間非表示
CSS
@media (max-width:767.98px){.updated.entry-time{display:none}}
スマホ時のメインナビアニメーション削除
CSS
.mobile-nav ul{animation:none}
PC時追従ヘッダー
CSS
@media (min-width:768px){#container{padding-top:62px}.header{position:fixed;left:0;top:0;width:100%}.logged-in .header{top:32px}}
バグ?NOT FOUNDページの幅調整
CSS
@media (min-width:1030px){.notfound{margin-right:6%}}
ロゴの後ろに任意の文字を追加
CSS
@media (min-width:768px) and (min-width:855px){#logo:after{content:"なんでそれ買ったの?";position:relative;left:5px;top:-4px;font-size:14px;color:rgba(255,255,255,0.6)}}
※コピペコードは「なんでそれ買ったの?」を任意の文字に変えて使用してください。
PC時も詳細ページアイキャッチを横幅いっぱいに変更
CSS
@media (min-width:1030px){#entry .post-thumbnail{margin-left:-40px;margin-right:-40px}}@media (max-width:1029px) and (min-width:768px){#entry .post-thumbnail{margin-left:-25px;margin-right:-25px}}
この他にも追加があれば随時更新していきます。
WordPressカスタマイズは面白い。
いちばんやさしいWordPressの教本 人気講師が教える本格Webサイトの作り方 第2版 WordPress 4.x対応 「いちばんやさしい教本」シリーズ
posted with amazlet at 20.01.26
インプレス (2014-12-02)
売り上げランキング: 116,204
売り上げランキング: 116,204
コメントを残す