SEOに強い、アフィリエイトがしやすいということで人気のWordPressテーマ「STINGER3」を元に、よりアフィリエイトに特化したWordPressテーマ「AFFINGER」が先日公開されました。
「お金を稼ぐ」に特化したブログテーマ - AFFINGER(アフィンガー)
前からSTINGERいじってみたかったんですけど機会がなかったので、これはいい機会だと早速「AFFINGER」をダウンロードしてカスタマイズしてみました。
今までのSTINGERっぽいデザインにちょっと飽きている人やポップなデザインにしたいという方は是非ご利用下さい。
前提
極力、PHPやHTMLはいじらずにデザインをする方向だったのですが、厳しい箇所が何点かあったため泣く泣くPHPファイルも元の「AFFINGER」から修正をかけております。
よって今後新しいVerの「AFFINGER」がリリースされてもアップデートが難しくなる恐れがありますのでご了承下さい。
また、元のAFFINGERのヘッダー画像はCSSで非表示。記事単位でタイトル上に大きめのアイキャッチ画像が出力されるようになっております。AFFINGERにヘッダー画像を表示したい!という方は不向きなデザインになるかと思います。
DEMOページ
DEMOページは以下になります。PC、スマホともにデザインのカスタマイズをしております。
カスタマイズ方法
以下のファイルの変更及び追加をお願い致します。
custom.css(新規追加)
custom.cssというファイル名のcssファイルを作成し、FTP等でテーマファイル直下に置いて下さい。1000行以上ありますので、style.cssに書くよりもcustom.cssを新規作成したほうが良いかと思います。
/*テーマカラー 水色 #00C0E5 緑 #5BD99A 紫 #7658F8 黄色 #EAC14D 赤 #E6567A ピンク #CB70D7 ----------------------------------------------------*/ body { color: #454545; font-family: 'Trebuchet MS', 'Arial', 'Helvetica', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif !important; -webkit-font-smoothing: antialiased; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; } * { font-family: 'Trebuchet MS', 'Arial', 'Helvetica', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif } a { -webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; -moz-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; -o-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; -ms-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; } nav { background: #fff } time { font-family: 'Josefin Sans', sans-serif; font-weight: 600; } ::selection { background: #666; color: rgb(255, 255, 255); } header .sitename { padding: 10px 0px 0px; margin-bottom: 5px; line-height: 22px; } header .sitename a { font-family: 'Josefin Sans', sans-serif; color: #454545; } header .descr { line-height: 12px } #wrapper { max-width: 100%; background: transparent; } .sitename, .descr { -webkit-animation-fill-mode: both; -ms-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1s; -ms-animation-duration: 1s; animation-duration: 1s; -webkit-animation-name: fadeInDown; animation-name: fadeInDown; visibility: visible !important; } .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } /*rank.css ----------------------------------------------------*/ .rankh2 { position: relative; background: #EAC14D !important; color: #fff !important; font-size: 20px; line-height: 27px; margin-bottom: 10px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; border-radius: 3px; } .rankh2:before { content: none } .rankh2:after { content: none } .rankh3, .post .rankh3 { background-repeat: no-repeat; background-position: left center; padding-top: 0px !important; padding-right: 20px !important; padding-bottom: 10px !important; padding-left: 0px !important; background-image: none; margin-bottom: 10px; border-bottom-width: 2px; border-bottom-style: dotted; border-bottom-color: #EAC14D; font-size: 18px; color: #EAC14D; border-left: 0px; } .rankh3:before, .post .rankh3:before { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: "\f005"; margin-right: 5px; color: #EAC14D; } .rankstlink-l p a { display: block; width: auto; text-align: center; padding: 10px; background-color: #00C0E5; color: #FFF; text-decoration: none; margin-right: auto; margin-left: auto; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-top-left-radius: 3px; -moz-border-bottom-left-radius: 3px; border: 1px solid #00C0E5; font-weight: bold; } .rankstlink-l p a:hover { background-color: #fff; border: 1px solid #00C0E5; color: #00C0E5; } .rankstlink-r p a { display: block; width: auto; text-align: center; padding: 10px; background-color: #5BD99A; color: #FFF; text-decoration: none; margin-right: auto; margin-left: auto; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-top-right-radius: 3px; -moz-border-bottom-right-radius: 3px; border: 1px solid #5BD99A; font-weight: bold; } .rankstlink-r p a:hover { background-color: #fff; border: 1px solid #5BD99A; color: #5BD99A; font-weight: bold; } .rankst-wrap { background-color: #ffffff; padding: 0px; margin-bottom: 20px; } /*sidebar ----------------------------------------------------*/ .profile-icon { border-radius: 100%; width: 100px; height: auto; margin: 0 auto 10px; } #twitter-widget-0 { margin-left: auto; margin-right: auto; display: block; margin-bottom: 10px; } #twitter-widget-1 { margin-left: auto; margin-right: auto; display: block; margin-bottom: 10px; } #side aside h4 { font-size: 14px; font-weight: bold; line-height: 25px; margin: 0px; padding-top: 12px; padding-right: 10px; padding-bottom: 10px; padding-left: 15px; background-color: #eaeaea; font-family: 'Josefin Sans', sans-serif; box-shadow: 0 0px 3px #eeeeef; } #side aside #mybox ul { margin-bottom: 30px; background-color: #fff; } #side aside #mybox ul li ul { padding: 0px; box-shadow: 0 0px 3px #eeeeef; } .ad { padding-bottom: 30px } .ad .textwidget { width: 300px; margin-right: auto; margin-left: auto; } .rssbox { display: none } .rssbox a { padding: 15px 15px; margin-bottom: 30px; } #s { height: 45px; padding: 15px 65px 15px 15px; margin-bottom: 30px; box-shadow: 0 0px 3px #eeeeef; } #searchsubmit { top: 7px } #kanren { padding: 0px; background-color: #fff; margin-bottom: 30px; box-shadow: 0 0px 3px #eeeeef; } #kanren dt { float: left; width: 75px; } #kanren dt img { width: 75px; border-radius: 3px; } #kanren dd { padding-left: 90px } #kanren dd .smanone { display: none } #kanren dd h5 { font-size: 14px; font-weight: bold; padding: 0px; margin-bottom: 5px; margin-top: 5px; line-height: 20px; } #kanren dl { margin-bottom: 0px; padding-bottom: 15px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #eaeaea; padding: 15px; } #side aside ul li ul li { list-style-type: none; margin: 0px; padding: 15px; background-image: none; background-repeat: no-repeat; background-position: left middle; border-bottom: 1px solid #eee; } #side aside ul li ul li:last-child { border-bottom: none } #side aside ul li ul li:after { content: ""; display: block; clear: both; zoom: 1; } #side aside ul li ul li.cat-item { } #side aside ul li ul li.cat-item a { } .side-category-wrap .side-category { background-color: #454545; color: #fff; font-size: 12px; padding: 4px 5px 3px; text-align: center; display: initial; border-radius: 3px; position: absolute; top: 0; left: 0; } .side-category-wrap .life { background-color: #00C0E6 } .side-category-wrap .web { background-color: #5BD99A } .side-category-wrap .news { background-color: #7658F8 } .side-category-wrap .info { background-color: #EAC14D } .side-time-wrap .side-time { font-family: 'Josefin Sans', sans-serif; font-weight: 600; } .textwidget { padding: 15px } #contentInner main #kanren dl { padding: 15px 0 15px 0 } #scrollad ul { background-color: #fff } /*single ----------------------------------------------------*/ .post { overflow: inherit } div#breadcrumb { padding: 12px 15px 10px; margin: 0 0 0px; clear: both; background-color: #454545; color: #fff; } div#breadcrumb div { } #breadcrumb div a { color: #fff; text-decoration: none; } #contentInner .life { background-color: #00C0E6 } #contentInner .web { background-color: #5BD99A } #contentInner .news { background-color: #7658F8 } #contentInner .info { background-color: #EAC14D } #breadcrumb div a span { } #breadcrumb div a span:hover { } .blogbox { border-top-width: 0px; border-bottom-width: 0px; } .blogbox p { font-size: 14px } .single-eye { max-width: 730px } h2:before { content: none } h2:after { content: none } .post h2 { background: #ddd; color: #454545; margin: 0px 0 20px; font-size: 18px; padding: 10px 15px 10px; border-radius: 3px; } .post h3 { font-size: 16px; border-left: 3px solid #ddd; font-weight: bold; padding: 5px 10px 5px; border-bottom: 0px; } .post h4 { font-size: 16px; font-weight: bold; border-radius: none; background: none; padding: 0; } .post h4:before { content: '■' } body.archive h2 { background: #ddd; color: #454545; margin: 0px 0 10px; font-size: 18px; padding: 10px 25px 10px; border-radius: 3px; } .post blockquote { padding: 15px 15px; margin: 0 0 20px; border: 3px solid #eee; border-radius: 4px; position: relative; font-style: normal; font-size: 14px; color: #333; background: none; } .post blockquote:before { width: 28px; height: 28px; position: absolute; top: -15px; left: 7px; content: "\f10d"; font-size: 16px; font-family: FontAwesome; background: #ddd; border-radius: 100%; color: #fff; line-height: 28px; padding-left: 0px; text-align: center; } .post blockquote p:last-child, .post blockquote ul li:last-child, .post blockquote ol li:last-child { margin-bottom: 0px !important } .post ul { list-style-type: disc; padding-top: 0px; padding-right: 20px; padding-bottom: 0px; padding-left: 30px; margin-bottom: 20px; } .post ol { list-style-type: decimal; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 30px; margin-bottom: 20px; } .post table { border-top: 1px #ddd solid; border-right: 1px #ddd solid; margin-bottom: 20px; width: 100%; } table th { padding: 8px 10px; border-bottom-width: 1px; border-left-width: 1px; border-bottom-style: solid; border-left-style: solid; border-bottom-color: #ddd; border-left-color: #ddd; font-size: 14px; line-height: 18px; background: #eaeaea; } table tr td { padding: 8px 10px; border-bottom-width: 1px; border-left-width: 1px; border-bottom-style: solid; border-left-style: solid; border-bottom-color: #ddd; border-left-color: #ddd; font-size: 14px; line-height: 18px; background: #fff; } .post .sns-share { margin-bottom: 20px } .post .sns-share ul { list-style-type: none; margin: 0 0 20px 0; padding: 0; width: 100%; } .post .sns-share ul li { padding-left: 0px; padding-right: 0px; } .post .sns-share ul li a { color: #fff; font-family: 'Josefin Sans', sans-serif; letter-spacing: 1px; font-size: 16px; display: block; width: 33.333333%; text-align: center; padding-top: 12px; padding-bottom: 10px; font-weight: 700; font-style: italic; float: left; text-decoration: none; } .post .sns-share ul li a:hover { opacity: 0.6 } #socialarea_twitter { background: #fff; color: #00ACEE; border-radius: 3px; padding: 0px 5px 0px; font-size: 15px; display: inline; font-style: normal; } #socialarea_facebook { background: #fff; color: #3B5998; border-radius: 3px; padding: 0px 5px 0px; font-size: 15px; display: inline; font-style: normal; } #socialarea_hatebu { background: #fff; color: #008FDE; border-radius: 3px; padding: 0px 5px 0px; font-size: 15px; display: inline; font-style: normal; } .post .sns-share a.share_tw { background-color: #00ACEE; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .post .sns-share a.share_fb { background-color: #3B5998 } .post .sns-share a.share_bookmark { background-color: #008FDE; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .fa-hatena:before { content: "B!"; font-family: Verdana; font-weight: bold; } .rankst-cont p { font-size: 14px; line-height: 18px; } /*Archive ----------------------------------------------------*/ .blog_info .life { background-color: #00C0E6 } .blog_info .web { background-color: #5BD99A } .blog_info .news { background-color: #7658F8 } .blog_info .info { background-color: #EAC14D } .archive-category { color: #fff; font-size: 12px; padding: 4px 5px 3px; text-align: center; display: initial; border-radius: 3px; position: absolute; top: 0; left: 0; } .archive-category a { color: #fff; text-decoration: none; } .blog_info .archive-time { font-family: 'Josefin Sans', sans-serif; font-weight: 600; } #kanren dt { position: relative } /* footer ----------------------------------------------------*/ #page-top { position: fixed; z-index: 9999; bottom: 15px; right: 15px; font-size: 25px; } #page-top a { background: #665e53; text-decoration: none; color: #fff; padding: 24px; text-align: center; display: block; -moz-opacity: 0.3; opacity: 0.3; border-radius: 100%; width: 25px; height: 25px; line-height: 25px !important; vertical-align: middle; } footer { background: #252728; padding: 20px 0 0; } #footer h3 { font-size: 14px; margin-bottom: 10px; color: #dddddd; } #footer h3 { font-size: 14px; margin-bottom: 3px; color: #dddddd; } #footer .copy { color: #fff; background-color: #111; padding: 15px 0 15px; margin: 0; font-family: 'Josefin Sans', sans-serif; font-weight: 700; font-size: 15px; } /*1カラム化 ----------------------------------------------------*/ .colum1 #contentInner { max-width: 730px; margin-right: auto; margin-left: auto; float: inherit; } /*LP化 ----------------------------------------------------*/ .lp header, .lp #gazou, .lp #itiran, .lp #kanren, .lp #breadcrumb, .lp nav, .lp .blogbox, .lp .tagst, .lp .point, .lp .p-navi, .lp .pagination { display: none } .lp .entry-title { font-size: 13px; color: #ccc; line-height: 18px; } .lp post img, .lp post video, .lp post object { width: 100% !important; height: auto; border: none; vertical-align: bottom; display: block; } .lp #contentInner { width: 100% } .lp main { max-width: 100% } .lp .single-eye { max-width: 100% } /*media Queries タブレットサイズ ----------------------------------------------------*/ @media only screen and (max-width: 780px) { #gazou { display: none } #wrapper { position: relative; padding: 0; } .acordion_tree { padding: 0px 0px; display: none; overflow: hidden; background-color: #fff; } .acordion_tree li { float: inherit; font-size: 13px; padding-left: 0px; display: block; padding-right: 0px; border-left-width: 0px; border-left-style: dotted; border-left-color: #CCC; padding-top: 0px; padding-bottom: 0px; margin-bottom: 0px; } .acordion_tree li a { padding: 10px; border-bottom: 1px solid #eaeaea; float: inherit; display: block; color: #454545; } header { position: relative; border-bottom: 1px solid #eaeaea; padding: 9px 0 9px; text-align: left; background: #fff; } header .sitename { max-width: 780px; font-size: 21px; line-height: 24px; padding: 0 50px 0 10px; margin: 0; font-family: 'Josefin Sans', sans-serif !important; } header .descr { display: none } #s-navi .trigger { text-align: left; padding: 0px 0px; cursor: pointer; width: 30px; height: 24px; position: absolute; top: 10px; right: 10px; z-index: 999; } .menu-trigger, .menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box; } .menu-trigger { position: relative; width: 30px; height: 22px; } .menu-trigger span { position: absolute; left: 0; width: 100%; height: 4px; background-color: #454545; border-radius: 4px; } .menu-trigger span:nth-of-type(1) { top: 0 } .menu-trigger span:nth-of-type(2) { top: 9px } .menu-trigger span:nth-of-type(3) { bottom: 0 } .active .menu-trigger span:nth-of-type(1) { -webkit-transform: translateY(9px) rotate(-315deg); transform: translateY(9px) rotate(-315deg); } .active .menu-trigger span:nth-of-type(2) { opacity: 0 } .active .menu-trigger span:nth-of-type(3) { -webkit-transform: translateY(-9px) rotate(315deg); transform: translateY(-9px) rotate(315deg); } .single-eye { max-width: 100% } .post { word-wrap: break-word } .p-navi { margin-left: -10px; margin-right: -10px; margin-bottom: 0px; } .prev-next { width: 100%; margin-top: 50px; } .prev-next .prev-left { width: 50%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; border-top: 1px solid #ddd; border-right: 1px solid #ddd; } .prev-next .prev-left-link { padding: 15px 10px 15px } .prev-next .prev-left-link a { text-decoration: none; font-size: 14px; font-weight: bold; color: #454545; } .prev-next .prev-left-link a:hover { color: #b22222 } .prev-next .prev-right { width: 50%; float: right; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; border-top: 1px solid #ddd; } .prev-next .prev-right-link { padding: 15px 10px 15px; text-align: right; } .prev-next .prev-right-link a { text-decoration: none; font-size: 14px; font-weight: bold; color: #454545; } .prev-next .prev-right-link a:hover { color: #b22222 } .prev-next .prev-title { background-color: #eaeaea; padding: 5px 10px; margin: 0; } .prev-next .next-title { background-color: #eaeaea; padding: 5px 10px; margin: 0; text-align: right; } .ad { padding-top: 20px; padding-bottom: 20px; } #side aside #search { padding-bottom: 0px; position: relative; width: auto; margin-left: 10px; margin-right: 10px; } main { background-color: #fff; border-radius: 0px; padding: 10px 10px 0px 10px; margin: 0; } .entry-title { font-size: 18px; line-height: 24px; color: #333; margin: 10px 0 10px; } #side aside #mybox ul { margin-bottom: 0px } #scrollad { padding-top: 0px } #kanren { padding: 0px; background-color: #fff; margin-bottom: 0px; box-shadow: 0 0px 0px #eeeeef; } #kanren dl { padding: 10px } #kanren dl:last-child { margin-bottom: 0px; padding-bottom: 10px; } #side aside ul li ul li { padding: 10px } #side aside h4 { padding-left: 10px } .post .sns-share ul li a { padding-top: 7px; padding-bottom: 10px; } #socialarea_twitter { display: block; max-width: 35px; margin-left: auto; margin-right: auto; line-height: 18px; font-size: 12px; } #socialarea_facebook { display: block; max-width: 35px; margin-left: auto; margin-right: auto; line-height: 18px; font-size: 12px; } #socialarea_hatebu { display: block; max-width: 35px; margin-left: auto; margin-right: auto; line-height: 18px; font-size: 12px; } .rankstlink-l p a { border-top-right-radius: 3px; border-bottom-right-radius: 3px; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-top-right-radius: 3px; -moz-border-bottom-right-radius: 3px; } .rankstlink-r p a { border-top-left-radius: 3px; border-bottom-left-radius: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-top-left-radius: 3px; -moz-border-bottom-left-radius: 3px; } .sitename img { max-width: 300px; margin: 0; height: 24px; } #footer h3 { font-size: 12px; margin-bottom: 3px; color: #dddddd; font-weight: normal; padding: 0px 10px 0; } #footer p { font-size: 14px; margin-bottom: 3px; color: #dddddd; padding: 0px 10px 20px; } #footer .copy { font-size: 14px } #page-top a { background: #665e53; text-decoration: none; color: #fff; padding: 10px; text-align: center; display: block; -moz-opacity: 0.3; opacity: 0.3; border-radius: 100%; width: 20px; height: 20px; line-height: 20px !important; vertical-align: middle; } .textwidget { padding: 10px } .sns .snsb { display: none } } /*media Queries タブレットサイズ ----------------------------------------------------*/ @media only screen and (min-width: 381px) { .rankst-cont p { font-size: 16px; line-height: 22px; } main { background-color: #fff; border-radius: 0px; padding: 10px 10px 0px 10px; margin: 0; } .entry-title { font-size: 21px; line-height: 21px; color: #333; margin: 10px 0 10px; } } /*media Queries PCサイズ ----------------------------------------------------*/ @media only screen and (min-width: 781px) { p { font-size: 16px; line-height: 27px; margin-bottom: 20px; } #wrapper { padding: 0 0px } header { padding-top: 20px; background-color: #fff; box-shadow: 0 0px 3px #eeeeef; } header .sitename { max-width: 1090px; margin-left: auto; margin-right: auto; text-align: center; } header .descr { max-width: 1090px; margin-left: auto; margin-right: auto; margin-top: 0.67em; text-align: center; } #gazou { display: none } header .smanone { margin: 25px 0 0px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } header .smanone .menu { max-width: 1090px; margin: 0 auto 0; } nav { border: none; border-radius: 0px; padding: 0px; } nav li { position: relative; float: left; font-size: 14px; display: inline; border-left-width: 0px; border-left-style: dotted; border-left-color: #CCC; padding: 0px; } nav li a { color: #454545; padding: 13px 17px 12px; -webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; -moz-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; -o-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; -ms-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; } nav li a:before { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin: 0 0 0 -7px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; content: ''; background-color: #454545; } nav li a:hover { color: #454545; text-decoration: none; } nav li a:hover:before { position: absolute; background-color: #454545; -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; top: 0px; left: 0; width: 100%; height: 1px; margin: 0 0 0 0px; } nav li:nth-child(1) a:hover:before { background-color: #454545 } nav li:nth-child(2) a:before, nav li:nth-child(2) a:hover:before { background-color: #00C0E5 } nav li:nth-child(3) a:before, nav li:nth-child(3) a:hover:before { background-color: #5BD99A } nav li:nth-child(4) a:before, nav li:nth-child(4) a:hover:before { background-color: #7658F8 } nav li:nth-child(5) a:before, nav li:nth-child(5) a:hover:before { background-color: #EAC14D } nav li:nth-child(6) a:before, nav li:nth-child(6) a:hover:before { background-color: #E6567A } nav li:nth-child(7) a:before, nav li:nth-child(7) a:hover:before { background-color: #CB70D7 } #content { margin-right: auto; margin-left: auto; max-width: 1090px; padding: 35px 0px 35px; } #contentInner { max-width: 730px; box-shadow: 0 0px 3px #eeeeef; background-color: #fff; margin-right: 0px; } main { margin-right: 0; margin-left: 0; border-radius: 0; padding: 0px 0px 20px 0px; max-width: 670px; padding: 30px; } #side aside { float: right; width: 330px; padding: 0px; } .entry-title { font-size: 24px; line-height: 33px; margin-top: 0px; } .p-navi { margin-left: -30px; margin-right: -30px; margin-bottom: -30px; } .prev-next { width: 100%; margin-top: 50px; } .prev-next .prev-left { width: 50%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; border-top: 1px solid #ddd; border-right: 1px solid #ddd; } .prev-next .prev-left-link { padding: 15px 30px 15px } .prev-next .prev-left-link a { text-decoration: none; font-size: 14px; font-weight: bold; color: #454545; } .prev-next .prev-left-link a:hover { color: #b22222 } .prev-next .prev-right { width: 50%; float: right; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; border-top: 1px solid #ddd; } .prev-next .prev-right-link { padding: 15px 30px 15px; text-align: right; } .prev-next .prev-right-link a { text-decoration: none; font-size: 14px; font-weight: bold; color: #454545; } .prev-next .prev-right-link a:hover { color: #b22222 } .prev-next .prev-title { background-color: #eaeaea; padding: 5px 30px; margin: 0; } .prev-next .next-title { background-color: #eaeaea; padding: 5px 30px; margin: 0; text-align: right; } .post ul li { font-size: 16px; line-height: 27px; } .post ol li { font-size: 16px; line-height: 27px; } .sitename img { max-width: 300px; margin: 0 auto 0; } }
animate.css(追加)
以下のサイトより「Animate.css」をダウンロードして下さい。「Download Animate.css」からダウンロードできます。
そしてAnimate.cssをFTP等でテーマファイルの中にあるcssフォルダの中に格納。
header.php(修正)
header.phpを以下に上書きして下さい。scriptコードの追加やスマホメニューのhtmlを変更しています。
<!DOCTYPE html> <!--[if lt IE 7]> <html class="ie6" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 7]> <html class="i7" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 8]> <html class="ie" <?php language_attributes(); ?>> <![endif]--> <!--[if gt IE 8]><!--> <html <?php language_attributes(); ?>> <!--<![endif]--> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" > <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <meta name="format-detection" content="telephone=no" > <?php if ( is_home() ): ?> <meta name="robots" content="index,follow"> <?php elseif ( is_archive() ): ?> <meta name="robots" content="noindex,follow"> <?php elseif ( is_search() ): ?> <meta name="robots" content="noindex,follow"> <?php elseif ( is_tag() ): ?> <meta name="robots" content="noindex,follow"> <?php elseif ( is_paged() ): ?> <meta name="robots" content="noindex,follow"> <?php endif; ?> <title> <?php if ( is_home() ) { ?> <?php bloginfo( 'description' ); ?> - <?php bloginfo( 'name' ); ?> <?php } else { ?> <?php global $page, $paged; if ( is_front_page() ): elseif ( is_single() ): wp_title( '|', true, 'right' ); elseif ( is_page() ): wp_title( '|', true, 'right' ); elseif ( is_archive() ): wp_title( '|', true, 'right' ); elseif ( is_search() ): wp_title( '|', true, 'right' ); elseif ( is_404() ): echo '404 |'; endif; bloginfo( 'name' ); if ( $paged >= 2 || $page >= 2 ): echo '-' . sprintf( '%sページ', max( $paged, $page ) ); endif; ?> <?php } ?> </title> <link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() ); ?>/css/normalize.css"> <link rel="stylesheet" href="<?php echo esc_url( get_stylesheet_uri() ); ?>" type="text/css" media="screen" > <link rel="alternate" type="application/rss+xml" title="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?> RSS Feed" href="<?php bloginfo( 'rss2_url' ); ?>" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" > <link rel="shortcut icon" href="<?php echo esc_url( get_template_directory_uri() ); ?>/images/logo.ico" > <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() ); ?>/css/animate.css"> <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <script src="<?php echo esc_url( get_template_directory_uri() ) ; ?>/js/html5shiv.js"></script> <![endif]--> <?php wp_head(); ?> <?php if ( st_is_mobile() ) { ?> <link rel="apple-touch-icon-precomposed" href="<?php echo esc_url( get_template_directory_uri() ); ?>/images/apple-touch-icon-precomposed.png" /> <?php } else { ?> <?php } ?> <link href='http://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() ); ?>/custom.css"> <script type="text/javascript"> /*ソーシャルカウント*/ function get_social_count_facebook(url, counterId) { $.ajax({ url:'https://graph.facebook.com/', dataType:'jsonp', data:{ id:url }, success:function(res){ $('#' + counterId + ' .count').text( res.shares || 0 ); }, error:function(){ $('#' + counterId + ' .count').text('?'); } }); } // Twitterの反応(ツイートやリツイート数)を取得 function get_social_count_twitter(url, counterId) { $.ajax({ url:'http://urls.api.twitter.com/1/urls/count.json', dataType:'jsonp', data:{ url:url }, success:function(res){ $('#' + counterId + ' .count').text( res.count || 0 ); }, error:function(){ $('#' + counterId + ' .count').text('?'); } }); } // はてなブックマークでブックマークされている数を取得 function get_social_count_hatebu(url, counterId) { $.ajax({ url:'http://api.b.st-hatena.com/entry.count?callback=?', dataType:'jsonp', data:{ url:url }, success:function(res){ $('#' + counterId + ' .count').text( res || 0 ); }, error:function(){ $('#' + counterId + ' .count').text('?'); } }); } </script> </head> <body <?php body_class(); ?>> <?php include_once( "analyticstracking.php" ) //アナリティクスコード ?> <div id="wrapper" class="<?php st_wrap_class(); ?>"> <div class="acordion_tree"> <?php wp_nav_menu( array( 'theme_location' => 'navbar' ) ); ?> <div class="clear"></div> </div> <header> <!-- アコーディオン --> <nav id="s-navi" class="pcnone"> <div class="acordion"> <div class="trigger"> <a class="menu-trigger" href="#"><span></span><span></span><span></span></a> </div> </div> </nav> <!-- /アコーディオン --> <!-- ロゴ又はブログ名 --> <p class="sitename"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"> <?php if ( get_option( 'st_logo_image' ) ): //ロゴ画像がある時 ?> <img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( get_option( 'st_logo_image' ) ); ?>" > <?php else: //ロゴ画像が無い時 ?> <?php echo esc_attr( get_bloginfo( 'name' ) ); ?> <?php endif; ?> </a></p> <!-- キャプション --> <?php if ( is_home() ) { ?> <h1 class="descr"> <?php bloginfo( 'description' ); ?> </h1> <?php } else { ?> <p class="descr"> <?php bloginfo( 'description' ); ?> </p> <?php } ?> <!-- カスタムヘッダー画像 --> <div id="gazou"> <?php if ( get_header_image() ): ?> <p id="headimg"> <img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" > </p> <?php endif; ?> </div> <!-- /gazou --> <!-- メニュー --> <nav class="smanone clearfix"> <?php $defaults = array( 'theme_location' => 'navbar', ); wp_nav_menu( $defaults ); ?> </nav> </header>
single.php(修正)
single.phpを以下のコードに上書きして下さい。パンくずリストの位置やアイキャッチ画像の出力をするように追加しています。
<?php get_header(); ?> <div id="content" class="clearfix"> <div id="contentInner"> <!--ぱんくず --> <div id="breadcrumb" class="<?php $category = get_the_category(); echo $category[0]->slug;?>"> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo home_url(); ?>" itemprop="url"> <span itemprop="title">ホーム</span> </a> > </div> <?php $postcat = get_the_category(); ?> <?php $catid = $postcat[0]->cat_ID; ?> <?php $allcats = array( $catid ); ?> <?php while ( !$catid == 0 ) { $mycat = get_category( $catid ); $catid = $mycat->parent; array_push( $allcats, $catid ); } array_pop( $allcats ); $allcats = array_reverse( $allcats ); ?> <?php foreach ( $allcats as $catid ): ?> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo get_category_link( $catid ); ?>" itemprop="url"> <span itemprop="title"><?php echo esc_html( get_cat_name( $catid ) ); ?></span> </a> > </div> <?php endforeach; ?> </div> <!--/ ぱんくず --> <!--ループ開始 --> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <!--アイキャッチ --> <?php the_post_thumbnail('full', array('class' => 'single-eye')); ?> <!--/ アイキャッチ --> <main> <article> <div class="post"> <h1 class="entry-title"> <?php the_title(); //タイトル ?> </h1> <div class="blogbox"> <p><span class="kdate"><i class="fa fa-calendar"></i> <time class="entry-date" datetime="<?php the_time(DATE_W3C); ?>"> <?php the_time( 'Y/m/d' ); ?> </time> <?php if ( $mtime = st_get_mtime( 'Y/m/d' ) ) { echo ' <i class="fa fa-repeat"></i> ', $mtime; } ?> </span></p> </div> <?php the_content(); //本文 ?> <?php get_template_part( 'st-rank' ); ?> <?php wp_link_pages(); ?> <p class="tagst"><i class="fa fa-tags"></i> - <?php the_category( ', ' ) ?> <?php the_tags( '', ', ' ); ?> </p> <aside> <div style="padding:20px 0px;"> <?php get_template_part( 'ad' ); //アドセンス読み込み ?> <?php if ( st_is_mobile() ) { //スマホの場合 ?> <?php } else { //PCの場合 ?> <div class="smanone" style="padding-top:10px;"> <?php get_template_part( 'ad' ); //アドセンス読み込み ?> </div> <?php } ?> </div> <?php get_template_part( 'sns' ); //ソーシャルボタン読み込み ?> <?php endwhile; else: ?> <p>記事がありません</p> <?php endif; ?> <!--ループ終了--> <?php if ( ( $GLOBALS["stdata6"] ) === '' ) { ?> <?php if ( comments_open() || get_comments_number() ) { comments_template(); } ?> <?php } ?> <!--関連記事--> <h4 class="point"><i class="fa fa-th-list"></i> 関連記事</h4> <?php get_template_part( 'kanren' ); ?> <!--ページナビ--> <div class="p-navi clearfix"> <div class="prev-next"> <?php $prev_post = get_previous_post(); if ( !empty( $prev_post ) ): ?> <div class="prev-left"><p class="prev-title">前の記事</p> <div class="prev-left-link"> <a href="<?php echo esc_url( get_permalink( $prev_post->ID ) ); ?>"><?php echo $prev_post->post_title; ?></a> </div> </div> <?php endif; ?> <?php $next_post = get_next_post(); if ( !empty( $next_post ) ): ?> <div class="prev-right"><p class="next-title">次の記事</p> <div class="prev-right-link"> <a href="<?php echo esc_url( get_permalink( $next_post->ID ) ); ?>"><?php echo $next_post->post_title; ?></a> </div> </div> <?php endif; ?> </dl> </div> </aside> </div> <!--/post--> </article> </main> </div> <!-- /#contentInner --> <?php get_sidebar(); ?> </div> <!--/#content --> <?php get_footer(); ?>
sns.php(修正)
シェアボタンをオリジナルのデザインに変更。コードを上書きして下さい。
<script type="text/javascript"> $(function(){ get_social_count_facebook("<?php the_permalink(); ?>", "socialarea_facebook"); get_social_count_twitter("<?php the_permalink(); ?>", "socialarea_twitter"); get_social_count_hatebu("<?php the_permalink(); ?>", "socialarea_hatebu"); }); </script> <?php if ( $GLOBALS["stdata12"] == '' ) { ?> <div class="sns-share clearfix" id="sns-fade"> <ul> <li><a class="share_tw" href="https://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php the_title_attribute(); ?>" target="_blank"><i class="fa fa-twitter"></i> Twitter <div id="socialarea_twitter"><span class="count"><i class="fa fa-spinner fa-spin"></i></span></div></a></li> <li><a class="share_fb" href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" target="_blank"><i class="fa fa-facebook"></i> Facebook <div id="socialarea_facebook"><span class="count"><i class="fa fa-spinner fa-spin"></i></span></div></a></li> <li><a class="share_bookmark" href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" ><i class="fa-hatena fa"></i> Hatena <div id="socialarea_hatebu"><span class="count"><i class="fa fa-spinner fa-spin"></i></span></div></a></li> </ul> </div> <?php }
page.php(修正)
固定ページのパンくずの位置を修正しています。ソースコードを上書きして下さい。
<?php get_header(); ?> <div id="content" class="clearfix"> <div id="contentInner"> <!--ぱんくず --> <div id="breadcrumb" class="<?php $category = get_the_category(); echo $category[0]->slug;?>"> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo home_url(); ?>" itemprop="url"> <span itemprop="title">ホーム</span> </a> > </div> <?php $postcat = get_the_category(); ?> <?php $catid = $postcat[0]->cat_ID; ?> <?php $allcats = array( $catid ); ?> <?php while ( !$catid == 0 ) { $mycat = get_category( $catid ); $catid = $mycat->parent; array_push( $allcats, $catid ); } array_pop( $allcats ); $allcats = array_reverse( $allcats ); ?> <?php foreach ( $allcats as $catid ): ?> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo get_category_link( $catid ); ?>" itemprop="url"> <span itemprop="title"><?php echo esc_html( get_cat_name( $catid ) ); ?></span> </a> > </div> <?php endforeach; ?> </div> <!--/ ぱんくず --> <!--ループ開始 --> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <!--アイキャッチ --> <?php the_post_thumbnail('full', array('class' => 'single-eye')); ?> <!--/ アイキャッチ --> <main> <article> <div class="post" onSelectStart="return false;" onMouseDown="return false;" style="-moz-user-select: none; -khtml-user-select: none; user-select: none;"> <h1 class="entry-title"> <?php the_title(); //タイトル ?> </h1> <?php the_content(); //本文 ?> <?php get_template_part( 'st-rank' ); //ランキング ?> <?php get_template_part( 'st-childlink' ); //子ページへのリンク ?> </div> </article> <?php wp_link_pages(); ?> <div class="blog_info contentsbox"> <p>公開日: <time class="entry-date" datetime="<?php the_time(DATE_W3C); ?>"> <?php the_time( 'Y/m/d' ); ?> </time> <br> <?php if ( $mtime = st_get_mtime( 'Y/m/d' ) ) { echo '最終更新日:', $mtime; } ?> </p> </div> <?php endwhile; else: ?> <p>記事がありません</p> <?php endif; ?> <!--ループ終了 --> </main> </div> <!-- /#contentInner --> <?php get_sidebar(); ?> </div> <!--/#content --> <?php get_footer(); ?>
archive.php(修正)
パンくずの位置を修正しています。上書きして下さい。
<?php get_header(); ?> <div id="content" class="clearfix"> <div id="contentInner"> <div id="breadcrumb"> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" itemprop="url"> <span itemprop="title">ホーム</span> </a> > </div> <?php /*--- カテゴリーが階層化している場合に対応させる --- */ ?> <?php $postcat = get_the_category(); ?> <?php $catid = $postcat[0]->cat_ID; ?> <?php $allcats = array( $catid ); ?> <?php while ( !$catid == 0 ) { /* すべてのカテゴリーIDを取得し配列にセットするループ */ $mycat = get_category( $catid ); /* カテゴリーIDをセット */ $catid = $mycat->parent; /* 上で取得したカテゴリーIDの親カテゴリーをセット */ array_push( $allcats, $catid ); } array_pop( $allcats ); $allcats = array_reverse( $allcats ); ?> <?php /*--- 親カテゴリーがある場合は表示させる --- */ ?> <?php foreach ( $allcats as $catid ): ?> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo esc_url( get_category_link( $catid ) ); ?>" itemprop="url"> <span itemprop="title"><?php echo esc_html( get_cat_name( $catid ) ); ?></span> </a> > </div> <?php endforeach; ?> </div> <!--/kuzu--> <main> <article> <!--ループ開始--> <h2>「 <?php if ( is_category() ) { ?> <?php single_cat_title(); ?> <?php } elseif ( is_tag() ) { ?> <?php single_tag_title(); ?> <?php } elseif ( is_tax() ) { ?> <?php single_term_title(); ?> <?php } elseif ( is_day() ) { ?> 日別アーカイブ:<?php echo get_the_time( 'Y年m月d日' ); ?> <?php } elseif ( is_month() ) { ?> 月別アーカイブ:<?php echo get_the_time( 'Y年m月' ); ?> <?php } elseif ( is_year() ) { ?> 年別アーカイブ:<?php echo get_the_time( 'Y年' ); ?> <?php } elseif ( is_author() ) { ?> 投稿者アーカイブ:<?php echo esc_html( get_queried_object()->display_name ); ?> <?php } elseif ( isset( $_GET['paged'] ) && !empty( $_GET['paged'] ) ) { ?> ブログアーカイブ <?php } ?> 」 一覧 </h2> <?php get_template_part( 'itiran' ); ?> <!--ページナビ--> <?php if ( function_exists( "st_pagination" ) ) { st_pagination( $wp_query->max_num_pages ); } ?> </article> </main> </div> <!-- /#contentInner --> <?php get_sidebar(); ?> </div> <!--/#content --> <?php get_footer(); ?>
newpost.php(修正)
新着記事に日付及びカテゴリーの追加をしています。上書きして下さい。
<div id="kanren"> <?php $args = array( 'posts_per_page' => 5, ); $st_query = new WP_Query( $args ); ?> <?php if ( $st_query->have_posts() ): ?> <?php while ( $st_query->have_posts() ) : $st_query->the_post(); ?> <dl class="clearfix"> <dt><a href="<?php the_permalink() ?>"> <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?> <?php the_post_thumbnail( 'st_thumb150' ); ?> <?php else: // サムネイルを持っていないときの処理 ?> <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" /> <?php endif; ?> <div class="side-category-wrap"><div class="side-category <?php $category = get_the_category(); echo $category[0]->slug;?>"> <?php $category = get_the_category(); echo $category[0]->cat_name; ?> </div></div> </a></dt> <dd> <div class="side-time-wrap"> <div class="side-time"><?php the_time( 'Y/m/d' ); ?></div> </div> <h5><a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a></h5> <div class="smanone"> <?php the_excerpt(); //スマートフォンには表示しない抜粋文 ?> </div> </dd> </dl> <?php endwhile; ?> <?php else: ?> <p>新しい記事はありません</p> <?php endif; ?> <?php wp_reset_postdata(); ?> </div>
kanren.php(修正)
関連記事に日付及びカテゴリーの追加をしています。上書きして下さい。
<div id="kanren"> <?php $categories = get_the_category( $post->ID ); $category_ID = array(); foreach ( $categories as $category ): array_push( $category_ID, $category->cat_ID ); endforeach; $args = array( 'post__not_in' => array( $post->ID ), 'posts_per_page' => 10, 'category__in' => $category_ID, 'orderby' => 'rand', ); $st_query = new WP_Query( $args ); ?> <?php if ( $st_query->have_posts() ): ?> <?php while ( $st_query->have_posts() ) : $st_query->the_post(); ?> <dl class="clearfix"> <dt><a href="<?php the_permalink() ?>"> <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?> <?php the_post_thumbnail( 'st_thumb150' ); ?> <?php else: // サムネイルを持っていないときの処理 ?> <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" /> <?php endif; ?> <div class="archive-category <?php $category = get_the_category(); echo $category[0]->slug;?>"><?php the_category( ',' ); ?></div> </a></dt> <dd> <div class="blog_info"> <div class="archive-time"><?php the_time( 'Y/m/d' ); ?></div> </div> <h5><a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a></h5> <div class="smanone"> <?php the_excerpt(); //スマートフォンには表示しない抜粋文 ?> </div> </dd> </dl> <?php endwhile; ?> <?php else: ?> <p>関連記事はありませんでした</p> <?php endif; ?> <?php wp_reset_postdata(); ?> </div>
itiran.php(修正)
関連記事に日付及びカテゴリーの追加をしています。上書きして下さい。
<div id="kanren"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <dl class="clearfix"> <dt><a href="<?php the_permalink(); ?>"> <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?> <?php the_post_thumbnail( 'st_thumb150' ); ?> <?php else: // サムネイルを持っていないときの処理 ?> <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" /> <?php endif; ?> <div class="archive-category <?php $category = get_the_category(); echo $category[0]->slug;?>"><?php the_category( ',' ); ?></div> </a></dt> <dd> <div class="blog_info"> <div class="archive-time"><?php the_time( 'Y/m/d' ); ?></div> </div> <h3><a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a></h3> <div class="smanone"> <?php the_excerpt(); //スマートフォンには表示しない抜粋文 ?> </div> </dd> </dl> <?php endwhile; else: ?> <p>記事がありません</p> <?php endif; ?> </div>
comment.php(削除)
任意ですが、自分はコメント欄はいらないのでcomment.phpの"ファイルは残したまま”中身のコードだけ削除。
base.js(修正)
jsフォルダの中にあるbase.jsを以下のコードに上書きして下さい。スマホのアコーディオンメニューの部分を若干変更しております。
/*-------------------------------- フッターを最下部に -------------------------------*/ /*--------------------------------------------------------------------------* * * footerFixed.js * * MIT-style license. * * 2007 Kazuma Nishihata [to-R] * http://blog.webcreativepark.net * *--------------------------------------------------------------------------*/ new function(){ var footerId = "footer"; //メイン function footerFixed(){ //ドキュメントの高さ var dh = document.getElementsByTagName("body")[0].clientHeight; //フッターのtopからの位置 document.getElementById(footerId).style.top = "0px"; var ft = document.getElementById(footerId).offsetTop; //フッターの高さ var fh = document.getElementById(footerId).offsetHeight; //ウィンドウの高さ if (window.innerHeight){ var wh = window.innerHeight; }else if(document.documentElement && document.documentElement.clientHeight != 0){ var wh = document.documentElement.clientHeight; } if(ft+fh<wh){ document.getElementById(footerId).style.position = "relative"; document.getElementById(footerId).style.top = (wh-fh-ft-1)+"px"; } } //文字サイズ function checkFontSize(func){ //判定要素の追加 var e = document.createElement("div"); var s = document.createTextNode("S"); e.appendChild(s); e.style.visibility="hidden" e.style.position="absolute" e.style.top="0" document.body.appendChild(e); var defHeight = e.offsetHeight; //判定関数 function checkBoxSize(){ if(defHeight != e.offsetHeight){ func(); defHeight= e.offsetHeight; } } setInterval(checkBoxSize,1000) } //イベントリスナー function addEvent(elm,listener,fn){ try{ elm.addEventListener(listener,fn,false); }catch(e){ elm.attachEvent("on"+listener,fn); } } addEvent(window,"load",footerFixed); addEvent(window,"load",function(){ checkFontSize(footerFixed); }); addEvent(window,"resize",footerFixed); } /*------------- ページスクロール -----------*/ jQuery(function() { var pageTop = jQuery('#page-top'); pageTop.hide(); //スクロールが400に達したら表示 jQuery(window).scroll(function () { if(jQuery(this).scrollTop() > 400) { pageTop.fadeIn(); } else { pageTop.fadeOut(); } }); //スクロールしてトップ pageTop.click(function () { jQuery('body,html').animate({ scrollTop: 0 }, 800); return false; }); }); /*--------------------------- アコーディオン ------------------------------*/ jQuery(document).ready(function(){ //acordion_treeを一旦非表示に jQuery(".acordion_tree").css("display","none"); //triggerをクリックすると以下を実行 jQuery(".trigger").click(function(){ //もしもクリックしたtriggerの直後の.acordion_treeが非表示なら if(jQuery(".acordion_tree").css("display")=="none"){ //classにactiveを追加 jQuery(this).addClass("active"); //直後のacordion_treeをスライドダウン jQuery(".acordion_tree").slideDown("normal"); }else{ //classからactiveを削除 jQuery(this).removeClass("active"); //クリックしたtriggerの直後の.acordion_treeが表示されていればスライドアップ jQuery(".acordion_tree").slideUp("normal"); } }); }); /*--------------------------- ドロップダウン ------------------------------*/ jQuery(document).ready(function(){ jQuery(".menu ul.children").hide(); jQuery("li.page_item").hover(function() { jQuery("ul.children",this).slideDown("slow"); }, function() { jQuery("ul.children",this).slideUp("slow"); }); });
なんで公開するのか?
なんやかんやでちょっとだけデザイン変更しようと思ったら、ごちゃごちゃといじくりまわしてしまいました。作成者の@ENJIさんすみません。
自分はWeb制作の仕事がメインでアフィリはGoogleアドセンスをやってるだけなんですけど最近成果報酬系のA8周りで景気の良さそうな話しが聞こえてくるので大変羨ましく眺めております。
かといって、新しいサイト作って記事書きまくる時間がないという状況でして…。
しかしながら成果報酬系のアフィリ(詐欺まがいの情報商材は結構です!)もやってみたいのでどなたかゴリゴリ記事書きまくってアフィリやってる方組みませんか〜?サイトのコーディング、デザイン、保守は頑張りますので。誰でもOKというわけではございませんが、興味ある方はTwitter等で連絡下さい!ちなみに今回のAFFINGERのカスタマイズは1.5日でやりました。
というわけで若干やましい気持ちも込めてAFFINGERのデザインカスタマイズの記事を公開しました!是非使ってやって下さい!
不具合など
基本的には責任はもてないのですが、Twitter等で連絡をくれればできるだけ修正したいと思います。どうぞよろしくお願いいたします。