WordpressTheme Simplicity 1column idea
How do I make an wordpresstheme simplicity 1column idea?
What is a wordpresstheme simplicity 1column idea? How do you make a wordpresstheme simplicity 1column idea? This script and codes were developed by Hidekichi on 10 July 2022, Sunday.
WordpressTheme Simplicity 1column idea Previews
WordpressTheme Simplicity 1column idea - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>WordpressTheme Simplicity 1column idea</title> <link rel='stylesheet prefetch' href='https://wp-simplicity.com/wp-content/themes/simplicity-child-simplicity/style.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body class="home page page-id-17 page-template-default"> <div id="container"> <!-- header --> <div id="header" class="clearfix"> <div id="header-in"> <div id="h-top"> <!-- モバイルメニュー表示用のボタン --> <div id="mobile-menu"> <a id="mobile-menu-toggle" href="#"><span class="fa fa-bars fa-2x"></span></a> </div> <div class="alignleft top-title-catchphrase"> <!-- サイトのタイトル --> <h1 id="site-title"> <a href="#">Simplicity</a></h1> <!-- サイトの概要 --> <h2 id="site-description"> 内部SEO施策済みのシンプルな無料Wordpressテーマ</h2> </div> <div class="alignright top-sns-follows"> <!-- SNSページ --> <div class="sns-pages"> <p class="sns-follow-msg">フォローする</p> <ul class="snsp"> <li class="twitter-page"> <a href="#" target="_blank" title="Twitterをフォロー" rel="nofollow"><span class="fa fa-twitter-square"></span></a></li> <li class="facebook-page"> <a href="#" target="_blank" title="Facebookをフォロー" rel="nofollow"><span class="fa fa-facebook-square"></span></a></li> <li class="google-plus-page"> <a href="#" target="_blank" title="Google＋をフォロー" rel="nofollow publisher"><span class="fa fa-google-plus-square"></span></a></li> <li class="instagram-page"> <a href="#" target="_blank" title="Instagramをフォロー" rel="nofollow"><span class="fa fa-instagram"></span></a></li> <li class="feedly-page"> <a href="#" target="blank" title="feedlyで更新情報をフォロー" rel="nofollow"><span class="icon-feedly-square"></span></a></li> <li class="rss-page"> <a href="#" target="_blank" title="RSSで更新情報をフォロー" rel="nofollow"><span class="fa fa-rss-square fa-2x"></span></a></li> </ul> </div> </div> </div> <!-- /#h-top --> </div> <!-- /#header-in --> </div> <!-- /#header --> <!-- Navigation --> <nav> <div id="navi"> <div id="navi-in"> <div class="menu-%e3%83%a1%e3%82%a4%e3%83%b3%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc-container"> <ul id="menu-%e3%83%a1%e3%82%a4%e3%83%b3%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc" class="menu"> <li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-14"><a href="#">ホーム</a></li> <li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-15"><a href="#">ダウンロード</a> <ul class="sub-menu"> <li id="menu-item-9279" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9279"><a href="#">Simplicity</a></li> <li id="menu-item-1343" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1343"><a href="#">子テーマ</a></li> <li id="menu-item-1895" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1895"><a href="#">スキン</a></li> <li id="menu-item-27693" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27693"><a href="#">ロゴ</a></li> </ul> </li> <li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="#">初期設定</a></li> <li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"><a href="#">レイアウト見本</a></li> <li id="menu-item-266" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-266"><a href="#">NEWS</a></li> <li id="menu-item-267" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-267"><a href="#">設定いろいろ</a></li> <li id="menu-item-268" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-268"><a href="#">カスタマイザー設定</a></li> <li id="menu-item-269" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-269"><a href="#">テーマ改造</a></li> <li id="menu-item-141" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-141"><a href="#">参考・技術情報</a> <ul class="sub-menu"> <li id="menu-item-1154" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1154"><a href="#">導入サイト</a></li> </ul> </li> <li id="menu-item-9272" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-9272"><a href="#">サポート</a> <ul class="sub-menu"> <li id="menu-item-9280" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9280"><a href="#">フォーラム</a></li> <li id="menu-item-9273" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9273"><a href="#">トピックの作成</a></li> <li id="menu-item-25226" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-25226"><a href="#">テーマ利用前の注意点</a></li> <li id="menu-item-18106" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18106"><a href="#">動作不良時のガイドライン</a></li> <li id="menu-item-23521" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23521"><a href="#">既知の不具合</a></li> <li id="menu-item-17785" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17785"><a href="#">サポート対象外のもの</a></li> </ul> </li> </ul> </div> </div> <!-- /#navi-in --> </div> <!-- /#navi --> </nav> <!-- /Navigation --> <!-- 本体部分 --> <div id="body"> <div id="body-in"> <!-- main --> <div id="main"> <div id="post-17" class="post-17 page type-page status-publish has-post-thumbnail"> <div class="article"> <h1 class="entry-title">Simplicityの特徴</h1> <p class="post-meta"> <span class="post-date"><span class="fa fa-clock-o fa-fw"></span><span class="entry-date date published">2014/7/8</span></span> <span class="post-update"><span class="fa fa-history fa-fw"></span> <time class="entry-date date updated" datetime="2014-07-08T20:16:27+00:00">2015/6/12</time> </span> </p> <div id="sns-group-top" class="sns-group sns-group-top"> <div class="sns-buttons sns-buttons-pc"> <p class="sns-share-msg">シェアする</p> <ul class="snsb snsb-balloon clearfix"> <li class="balloon-btn twitter-balloon-btn"> <span class="balloon-btn-set"> <span class="arrow-box"> <a href="#" target="blank" class="arrow-box-link twitter-arrow-box-link" rel="nofollow"> <span class="social-count twitter-count">182</span> </a> </span> <a href="#" target="blank" class="balloon-btn-link twitter-balloon-btn-link" rel="nofollow"> <span class="icon-twitter"></span> </a> </span> </li> <li class="balloon-btn facebook-balloon-btn"> <span class="balloon-btn-set"> <span class="arrow-box"> <a href="#" target="blank" class="arrow-box-link facebook-arrow-box-link" rel="nofollow"> <span class="social-count facebook-count">216</span> </a> </span> <a href="#" target="blank" class="balloon-btn-link facebook-balloon-btn-link" rel="nofollow"> <span class="icon-facebook"></span> </a> </span> </li> <li class="balloon-btn googleplus-balloon-btn"> <span class="balloon-btn-set"> <span class="arrow-box"> <a href="#" target="blank" class="arrow-box-link googleplus-arrow-box-link" rel="nofollow"> <span class="social-count googleplus-count">16</span> </a> </span> <a href="#" target="blank" class="balloon-btn-link googleplus-balloon-btn-link" rel="nofollow"> <span class="icon-googleplus"></span> </a> </span> </li> <li class="balloon-btn hatena-balloon-btn"> <span class="balloon-btn-set"> <span class="arrow-box"> <a href="#" target="blank" class="arrow-box-link hatena-arrow-box-link" rel="nofollow"> <span class="social-count hatebu-count">371</span> </a> </span> <a href="#" target="blank" class="balloon-btn-link hatena-balloon-btn-link" rel="nofollow"> <span class="icon-hatena"></span> </a> </span> </li> <li class="balloon-btn pocket-balloon-btn"> <span class="balloon-btn-set"> <span class="arrow-box"> <a href="#" target="blank" class="arrow-box-link pocket-arrow-box-link" rel="nofollow"> <span class="social-count pocket-count">501</span> </a> </span> <a href="#" rel="nofollow"> <span class="icon-pocket"></span> </a> </span> </li> <li class="balloon-btn evernote-balloon-btn"> <span class="balloon-btn-set"> <span class="arrow-box"> <a href="#" target="blank" class="arrow-box-link evernote-arrow-box-link" rel="nofollow"> CLIP! </a> </span> <a href="#" target="blank" class="balloon-btn-link evernote-balloon-btn-link" rel="nofollow"> <span class="icon-evernote"></span> </a> </span> </li> <li class="balloon-btn feedly-balloon-btn"> <span class="balloon-btn-set"> <span class="arrow-box"> <a href="#" target="blank" class="arrow-box-link feedly-arrow-box-link" rel="nofollow"> <span class="social-count feedly-count">264</span> </a> </span> <a href="#" target="blank" class="balloon-btn-link feedly-balloon-btn-link" rel="nofollow"> <span class="icon-feedly"></span> </a> </span> </li> </ul> </div> </div> <div class="clear"></div> <div id="the-content" class="entry-content"> <p><img title="" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" alt="" src="//wp-simplicity.com/wp-content/uploads/2014/07/OH53_ipponnoki500.jpg" height="453" width="680"></p> <p>WordPressテーマ「Simplicity」を作成しました。</p> <p>Simplicityには主に、以下の7つの特徴があります。</p> <ol> <li>シンプル </li> <li>内部SEO施策済み </li> <li>拡散のための仕掛けが施されている </li> <li>端末に合わせた4つのレスポンシブスタイル </li> <li>手軽に収益化 </li> <li>ブログの主役はあくまで本文 </li> <li>カスタマイズがしやすい </li> </ol> <p>以下で詳しく説明します。</p> <h2>シンプル</h2> <p><img title="" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" alt="" src="//wp-simplicity.com/wp-content/uploads/2014/07/IMG_9577-1300x866.jpg" height="151" width="680"></p> <p>Simplicityは、とにかくシンプルなWordpressテーマを作ろうという考えの下作成しました。</p> <p>テーマの名前「Simplicity」には以下の意味があります。</p> <ul> <li>単純 </li> <li>簡単 </li> <li>容易 </li> <li>簡素 </li> <li>質素 </li> <li>飾り気のない </li> </ul> <p>よく言えばシンプル、悪く言えば地味なテーマです。</p> <p>余分な飾り気をすべて取り除き、ユーザーが自ら<strong>自由なスタイルで後からカスタマイズしやすい土台となるように</strong>考えて作りました。</p> <p>もちろんそのままでも十分使用できます。</p> <h2>検索エンジンへの最適化（SEO）</h2> <p><img title="" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" alt="" src="//wp-simplicity.com/wp-content/uploads/2014/07/IMG_4892-1300x866.jpg" height="144" width="680"></p> <p>最高のSEOはコンテンツの充実です。そして、自然な被リンクをもらうこと。これにはどんなSEO施策もかないません。</p> <p>ただ、同じ質のコンテンツなら多少なりとも、内部SEOによって検索エンジン上位表示されるようにSimplicityを作成しました。</p> <p>主に以下のような内部SEOをしています。</p> <ul> <li>デフォルト状態でW3CのHTML5バリデーションのエラー0 </li> <li>タイトルや見出しなど適切なHTML構造に </li> <li>アーカイブ、タグ、検索結果ページなどはNOINDEXに <br>（質の低いページと判断されないように。ただしリンクフォローはする） </li> <li>リッチスニペットを用いたパンくずリストによりサイト構造を適切に伝える </li> <li>TIMEタグを用いて記事の更新時間を検索エンジンに正確に伝える </li> <li>テーマに使っている画像などはできる限り圧縮して転送サイズを減らす </li> <li>hentryのマークアップに対応 </li> <li>ウェブマスターツールの構造化エラー0 </li> <li>Googleのモバイルフレンドリーテストに合格 </li> <li>PageSpeed Insightsのモバイルユーザエクスペリエンスが100点 </li> </ul> <p>実際に行っている事のいくつかは、以前詳しく記事に書きました。</p> <p><a href="#" class="liinternal">Simplicityが行っている内部SEO施策まとめ</a></p> <h2>拡散のための仕掛けが施されている</h2> <p><img title="" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" alt="" src="//wp-simplicity.com/wp-content/uploads/2014/07/IMG_6031-1300x866.jpg" height="161" width="680"></p> <p>今や、ブログには必要不可欠となったSNSのための設定が施されています。</p> <h3>SNSボタンとSNSページボタン</h3> <p>拡散用のボタンがデフォルトで設置されています。</p> <p>また、Wordpress管理画面上のから簡単な設定を行えば、SNSページ用のボタンも簡単に設定できます。</p> <p><img class="alignleft" title="SNSシェアボタンソーシャル独自ボタン" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" alt="SNSシェアボタンソーシャル独自ボタン" src="//wp-simplicity.com/wp-content/uploads/2015/06/SNS.png" height="114" width="495"></p> <p>シェアカウントをJavaScriptで非同期で取得するため、ページ表示スピードがアップする独自シェアボタンも2種類用意してあります。</p> <p><img class="alignright" title="SNSシェアボタンテーマカラータイプ" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" alt="SNSシェアボタンテーマカラータイプ" src="//wp-simplicity.com/wp-content/uploads/2015/06/SNS1.png" height="114" width="495"></p> <p><img class="alignleft" title="SNSシェアボタンTwitterタイプ" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" alt="SNSシェアボタンTwitterタイプ" src="//wp-simplicity.com/wp-content/uploads/2015/06/SNSTwitter.png" height="114" width="495"></p> <p>また、非同期で取得するバイラルタイプのシェアボタンも2種類用意してあります。</p> <p><img title="バイラルシェアボタンテーマカラータイプ" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" alt="バイラルシェアボタンテーマカラータイプ" src="//wp-simplicity.com/wp-content/uploads/2015/06/c1ccede80fd1.png" height="165" width="680"></p> <p><img title="バイラルシェアボタン白タイプ" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" alt="バイラルシェアボタン白タイプ" src="//wp-simplicity.com/wp-content/uploads/2015/06/2f449c313ecf.png" height="165" width="680"></p> <p>スマホデフォルトでは以下のように表示されるようになっています。</p> <p><img title="スマホ用シェアボタン" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" alt="スマホ用シェアボタン" src="//wp-simplicity.com/wp-content/uploads/2014/12/9c9883740c56.png" height="199" width="355"></p> <h3>Facebook OGPのタグがデフォルトで挿入</h3> <p>ブログの記事をソーシャルグラフに流すための規格のOGP情報が、プラグインを必要とせずデフォルトで挿入されます。</p> <p><img title="Facebook OGP情報" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" alt="Facebook OGP情報" src="//wp-simplicity.com/wp-content/uploads/2014/07/Facebook-OGP.png" height="274" width="680"></p> <h3>Twitter Cardsのタグがデフォルトで挿入</h3> <p>Twitterのつぶやきに、ページ説明が付加されるTwitter Cards情報をプラグインを必要とせずデフォルトで挿入されます。</p> <p><img title="Twitter Cards情報" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" alt="Twitter Cards情報" src="//wp-simplicity.com/wp-content/uploads/2014/07/Twitter-Cards.png" height="296" width="680"></p> <p>どのようなタグが挿入されるかは、当サイトのソースをご覧ください。</p> <p>詳細：<a href="#" class="liinternal">「SNSの設定」カスタマイズについての解説</a></p> <h2>PCとスマホ合わせて4つのスタイル</h2> <p><img title="" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" alt="" src="//wp-simplicity.com/wp-content/uploads/2014/07/IMG_3241-1300x866.jpg" height="146" width="680"></p> <p>Simplicityは、パソコンとモバイル（スマホ、タブレット端末）に対応しています。</p> <p>そして、パソコンとモバイルそれぞれに2つのレスポンシブスタイルがあり計4つのスタイルがあります。（広告が極力訪問者の邪魔にならないようにしつつも、高パフォーマンスを目指すSimplicityの広告配置では、完全なレスポンシブにすると、広告の表示が最適化されないので、広告の見せ方に合わせた4つのスタイルになっています。）</p> <p class="sp-success">※<a href="#" class="liinternal">完全レスポンシブ機能追加</a>により、完全なレスポンシブデザインで利用することもできます。</p> <p>それぞれについて説明すると以下のようになります。</p> <h3>パソコン（高解像度）</h3> <p> <a href="#" class="liimagelink" data-lightbox="image-set"><img title="パソコン（高解像度）" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" alt="パソコン（高解像度）" src="//wp-simplicity.com/wp-content/uploads/2015/02/thumb.jpg" height="509" width="680"></a> </p> <p>解像度の高いデスクトップPCやノートで適用されるスタイルです。解像度の幅は、1150px以上を想定してスタイルしてあります。</p> <h3>パソコン（低解像度）</h3> <p> <a href="#" class="liimagelink" data-lightbox="image-set"><img title="パソコン（低解像度）" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" alt="パソコン（低解像度）" src="//wp-simplicity.com/wp-content/uploads/2015/02/thumb1.jpg" height="511" width="680"></a> </p> <p>解像度のの低いノートパソコンなどで適用されるスタイルです。解像度の幅は、680～1150pxを想定してスタイルしてあります。</p> <h3>モバイル（高解像度：タブレットなど）</h3> <p> <a href="#" class="liimagelink" data-lightbox="image-set"><img title="モバイル（高解像度：タブレットなど）" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" alt="モバイル（高解像度：タブレットなど）" src="//wp-simplicity.com/wp-content/uploads/2015/02/thumb2.jpg" height="629" width="680"></a> </p> <p>比較的解像度の高いスマホやタブレットで適用されるスタイルです。解像度の幅、640px以上を想定してスタイルしてあります。</p> <h3>モバイル（低解像度：スマホなど）</h3> <p>縦向き。</p> <p> <a href="#" class="liimagelink" data-lightbox="image-set"><img class="alignright" title="モバイル（低解像度：スマホなど）縦" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" alt="モバイル（低解像度：スマホなど）縦" src="//wp-simplicity.com/wp-content/uploads/2015/02/thumb3.jpg" height="455" width="300"></a> </p> <p>横向き。</p> <p> <a href="#" class="liimagelink" data-lightbox="image-set"><img class="alignleft" title="モバイル（低解像度：スマホなど）横" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" alt="モバイル（低解像度：スマホなど）横" src="//wp-simplicity.com/wp-content/uploads/2015/02/thumb4.jpg" height="301" width="459"></a> </p> <p>解像度の低い旧スマホなどで適用されるスタイルです。解像度の幅は、320～640px未満を想定してスタイルしてあります。</p> <p>Simplicityは、これからさらに増えるであろうスマホユーザーにも読みやすいように、スマホなどでの使いやすさも考えて作成しました。その結果デフォルトの状態で、Googleサイト診断ツール「<a href="#" target="_blank" class="liexternal">PageSpeed Insights</a>」のモバイルサイトのユーザーエクスペリエンス診断（簡単に説明するとモバイルでの使い勝手診断）結果が100点満点中100点になっています。</p> <p> <a href="#" class="liimagelink" data-lightbox="image-set"><img title="PageSpeed Insightsのスマホユーザーエクスペリエンス" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" alt="PageSpeed Insightsのスマホユーザーエクスペリエンス" src="//wp-simplicity.com/wp-content/uploads/2015/02/PageSpeed-Insights_thumb.png" height="337" width="680"></a> </p> <p>ユーザーエクスペリエンスについての詳細は、<a href="#" target="_blank" class="liexternal">海外SEO情報ブログ記事</a>に詳しく書かれています。</p> <h2>簡単に収益化</h2> <p><img title="" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" alt="" src="//wp-simplicity.com/wp-content/uploads/2014/07/IMG_3750-1300x866.jpg" height="151" width="680"></p> <p>AdSense広告のレクタングル大（336×280px）とレクタングル中（300×250px）2つのタグを広告用ウイジェットに貼り付ければ、収益性の高い位置に広告が表示されます。</p> <p>デフォルトの広告位置は、パソコンだと記事下×2、関連記事下×1になります。</p> <p> <a href="//wp-simplicity.com/wp-content/uploads/2014/07/e56e00632a03.png"> <img title="デフォルトのパソコン広告配置" class="alignright" alt="デフォルトのパソコン広告配置" src="//wp-simplicity.com/wp-content/uploads/2014/07/e56e00632a03.png" height="640" width="400"> </a></p> <p> <a href="//wp-simplicity.com/wp-content/uploads/2014/07/e56e00632a03.png"> <img title="デフォルトのパソコン広告配置" class="alignleft" alt="デフォルトのパソコン広告配置" src="//wp-simplicity.com/wp-content/uploads/2014/07/e56e00632a03.png" height="640" width="400"> </a></p> <p>モバイルだと、記事下×1、関連記事下×1になります。</p> <p><a href="//wp-simplicity.com/wp-content/uploads/2014/07/3ada7e4edeec.png"><img title="デフォルトのスマホ広告配置" class="alignright" alt="デフォルトのスマホ広告配置" src="//wp-simplicity.com/wp-content/uploads/2014/07/3ada7e4edeec.png" height="640" width="300"></a></p> <p>Simplicityでは、Wordpress管理画面の「テーマカスタマイズ」からさらに収益性の高い広告位置を選択することもできます。</p> <p>テーマカスタマイズ画面から本文中広告を選択すれば、パソコンだと次のような広告位置になります。本文中（最初のH2見出し前）×1、記事下×2になります。</p> <p><img title="パソコン本文中広告の配置" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" alt="パソコン本文中広告の配置" src="//wp-simplicity.com/wp-content/uploads/2014/07/d061556e4f0e.png" height="640" width="400"></p> <p>モバイルだと、本文中（最初のH2見出し前）×1、記事下×1、関連記事下×1になります。</p> <p><img title="スマホ本文中広告の配置" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" alt="スマホ本文中広告の配置" src="//wp-simplicity.com/wp-content/uploads/2014/07/0410487d0372.png" height="640" width="300"></p> <p>僕自身が自分のブログで実践した広告テスト結果だと、本文中に広告を掲載する方がパフォーマンスは上がります。けれど、本文中広告に抵抗のある方もおられると思うので、デフォルトでは本文中に広告を掲載しない設定になっています。（パフォーマンスが悪かった時も管理画面から簡単に戻せます。）</p> <p>追記（2014/8/5）：広告位置を「サイドバートップ」にする機能も追加しました。</p> <p><img title="Simplicityの広告位置（サイドバートップ）" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" alt="Simplicityの広告位置（サイドバートップ）" src="//wp-simplicity.com/wp-content/uploads/2014/08/Simplicity2.png" height="463" width="680"></p> <p class="sp-success">※設定画面から<a href="#" class="liinternal">さらにパフォーマンスを追求した広告表示</a>にすることもできます。</p> <p>詳細：<a href="#" class="liinternal">Google AdSense広告を貼り付ける方法</a></p> <p>詳細：<a href="#" class="liinternal">「広告の設定」カスタマイズについての解説</a></p> <h2>ブログの主役は本文記事</h2> <p><img title="" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" alt="" src="//wp-simplicity.com/wp-content/uploads/2014/07/IMG_3242-1300x866.jpg" height="154" width="680"></p> <p>ブログの主役は本文記事です。</p> <p>ですので、本文記事が読みやすいよう、記事中の画像が読者に見やすいように作りました。</p> <p>具体的には、以下のようなデザインになっています。</p> <ul> <li>訪問者が文章を読みやすいように、余裕を持った余白 </li> <li>テーマより主役のコンテンツが目立つように </li> <li>ビッグイメージイズベター </li> </ul> <p>最後の「ビッグイメージイズベター」というのは、適度な大きさの画像がデフォルトで表示されていた方が、訪問者に優しいという個人的な考えからです。訪問者が、わざわざ「クリックして拡大」などの動作をしなくても、スクロールするだけで中身が理解できる、大きな画像が表示出来た方が、訪問者にとって使い勝手が良いと思います。</p> <p>そのためにメインカラムの幅を大きく取ってあります。（広告を2つ並べるためでもある）</p> <p>画像を大きく見せるためにお勧めな画像のサイズ設定は以下を参照してください。</p> <p><a href="#" class="liinternal">Simplicityでお勧めなメディアのサムネイルサイズ設定</a></p> <p>（※画像を大きくすると、もちろん転送サイズは多少増えますが、それを超える利点が訪問者にあると思います。）</p> <h2>カスタマイズがしやすい</h2> <p><img title="" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" alt="" src="//wp-simplicity.com/wp-content/uploads/2014/07/IMG_4893-1300x866.jpg" height="169" width="680"></p> <p>冒頭にも書きましたが、Simplicityは後からスタイルシートで自由にカスタマイズできるように作成しました。</p> <p>なるべく余計な装飾は省いてスタイルしてあるので、後からユーザー好みの色をつけていくなんてこともできると思います。</p> <p>ですので、<a href="#" class="liinternal">ダウンロード</a>では、すぐにスタイルシートでカスタマイズできるように子テーマも配布しています。<a href="#" class="liinternal">テーマ改造</a>では、テーマファイルのカスタマイズに役立つ情報も紹介しています。</p> <p>詳細：<a href="#" class="liinternal">Simplicityで子テーマをインストールする方法</a></p> <h3>管理画面からカスタマイズ</h3> <p>スタイルシートを編集ができない方のためにも、Wordpress管理画面からヘッダー画像を設定してブログのシンボルとできるようにもしてあります。</p> <p>また、Wordpressに慣れてない人でも簡単にできるよう、Wordpressの管理仮面から、広告やSNS拡散ボタン、SNSページボタン、Google Analytics、ウェブマスターツールタグの設置ができるようになっています。</p> <ul> <li><a href="#" class="liinternal">Simplicityにヘッダー画像を追加・変更をする方法</a> </li> <li><a href="#" class="liinternal">「SNSの設定」カスタマイズについての解説</a> </li> <li><a href="#" class="liinternal">Simplicityテーマ内にGoogle AdSense広告を貼り付ける方法</a> </li> <li><a href="#" class="liinternal">「広告の設定」カスタマイズについての解説</a> </li> <li><a href="#" class="liinternal">「アクセス解析」カスタマイズについての解説</a> </li> <li><a href="#" class="liinternal">SimplicityカスタマイズメニューからGoogleウェブマスターツールの所有者確認をする方法</a> </li> </ul> <p>これまでは、テーマファイルの編集やプラグインを導入しなければならなかった設定も手軽に行うことができます。</p> <p>ですので、ぜひ初めてWordpressを使うという方にも使っていただきたいテーマです。</p> <h3>スキン機能でスタイル変更</h3> <p>管理画面からカスタマイズせずとも、Wordpress初心者が手軽にデザインを変更できるように、<a href="#" class="liinternal">スキン機能</a>も実装されています。</p> <p>スキンを選択するだけで、以下のように手軽に外観を変更することができます。</p> <p><img alt="深紅きなり" src="//i0.wp.com/wp-simplicity.com/wp-content/uploads/2014/09/4fdfba5aabca0faecfed83a81b565f36.png?resize=300%2C201" height="204" width="304"><img alt="淡桜" src="//i0.wp.com/wp-simplicity.com/wp-content/uploads/2014/09/152850306e3d462aa972058504cecaa3.jpg?resize=300%2C204"></p> <p><img alt="瑠璃紺きなり" src="//i1.wp.com/wp-simplicity.com/wp-content/uploads/2014/09/25695a7d46cf39b662e5b435bbed9316.png?resize=300%2C202" height="204" width="303"><img alt="シック" src="//i0.wp.com/wp-simplicity.com/wp-content/uploads/2014/09/40bd21ab5ce977204a5d06dd86e8c09c.jpg?resize=300%2C204"></p> <p>スキンは今後も増やしていければと思います。</p> <p>詳細：<a href="#" class="liinternal">スキン機能の仕様</a></p> <h3>テーマファイルをカスタマイズ</h3> <p>もちろん、バリバリカスタマイズする人のためにソースコードもなるべくシンプルにしたつもりです。Ruby on RailsのDRY「Don’t repeat yourself（同じ記述を繰り返さない）」とまでにはいかないのですが、なるべく重複するコードを1ヶ所にまとめてテンプレート化しています。</p> <p>詳細：<a href="#" class="liinternal">Simplicityテーマのファイル構造について説明</a></p> <h2>ダウンロード</h2> <p>Simplicityは、<a href="#" class="liinternal">ダウンロードページ</a>からダウンロードできます。</p> </div> <!-- ページリンク --> <div id="widget-under-page-article" class="widgets"> <div class="widget facebook_page_like"> <div class="article-like"> <div class="article-like-thumb"> <img src="//wp-simplicity.com/wp-content/uploads/2014/07/OH53_ipponnoki500-100x100.jpg" class="article-like-entry-thumnail wp-post-image" alt="Simplicityの特徴" height="100" width="100"> </div> <div style="width: 566px;" class="article-like-arrow-box"> <div class="article-like-arrow-box-in"> <div class="article-like-button"> </div> <div class="article-like-body"> Simplicityの最新情報なども <br> お届けしている寝ログを、 <br> <span style="color: #F27C8E;font-weight: bold;font-size: 1.1em;">いいね</span>してチェック！ </div> </div> </div> <div class="clear"></div> </div> </div> <!-- /#facebook-page-like-widget --> </div> <!-- 文章下広告 --> <div class="ad-article-bottom ad-space"> <div class="ad-label">スポンサーリンク</div> <div class="ad-left ad-pc adsense-336"> <div class="widget-ad">アドセンス（大）</div> <div class="textwidget"> </div> </div> <div class="ad-right ad-pc adsense-336"> <div class="widget-ad">アドセンス（大）</div> <div class="textwidget"> </div> </div> <div class="clear"></div> </div> <div id="sns-group"> <div class="sns-buttons sns-buttons-pc"> <p class="sns-share-msg">シェアする</p> <ul class="snsb snsb-balloon clearfix"> <li class="balloon-btn twitter-balloon-btn"> <span class="balloon-btn-set"> <span class="arrow-box"> <a href="#" target="blank" class="arrow-box-link twitter-arrow-box-link" rel="nofollow"> <span class="social-count twitter-count">182</span> </a> </span> <a href="#" target="blank" class="balloon-btn-link twitter-balloon-btn-link" rel="nofollow"> <span class="icon-twitter"></span> </a> </span> </li> <li class="balloon-btn facebook-balloon-btn"> <span class="balloon-btn-set"> <span class="arrow-box"> <a href="#" target="blank" class="arrow-box-link facebook-arrow-box-link" rel="nofollow"> <span class="social-count facebook-count">216</span> </a> </span> <a href="#" target="blank" class="balloon-btn-link facebook-balloon-btn-link" rel="nofollow"> <span class="icon-facebook"></span> </a> </span> </li> <li class="balloon-btn googleplus-balloon-btn"> <span class="balloon-btn-set"> <span class="arrow-box"> <a href="#" target="blank" class="arrow-box-link googleplus-arrow-box-link" rel="nofollow"> <span class="social-count googleplus-count">16</span> </a> </span> <a href="#" target="blank" class="balloon-btn-link googleplus-balloon-btn-link" rel="nofollow"> <span class="icon-googleplus"></span> </a> </span> </li> <li class="balloon-btn hatena-balloon-btn"> <span class="balloon-btn-set"> <span class="arrow-box"> <a href="#" target="blank" class="arrow-box-link hatena-arrow-box-link" rel="nofollow"> <span class="social-count hatebu-count">371</span> </a> </span> <a href="#" target="blank" class="balloon-btn-link hatena-balloon-btn-link" rel="nofollow"> <span class="icon-hatena"></span> </a> </span> </li> <li class="balloon-btn pocket-balloon-btn"> <span class="balloon-btn-set"> <span class="arrow-box"> <a href="#" target="blank" class="arrow-box-link pocket-arrow-box-link" rel="nofollow"> <span class="social-count pocket-count">501</span> </a> </span> <a href="#" target="blank" class="balloon-btn-link pocket-balloon-btn-link" rel="nofollow"> <span class="icon-pocket"></span> </a> </span> </li> <li class="balloon-btn evernote-balloon-btn"> <span class="balloon-btn-set"> <span class="arrow-box"> <a href="#" target="blank" class="arrow-box-link evernote-arrow-box-link" rel="nofollow"> CLIP! </a> </span> <a href="#" target="blank" class="balloon-btn-link evernote-balloon-btn-link" rel="nofollow"> <span class="icon-evernote"></span> </a> </span> </li> <li class="balloon-btn feedly-balloon-btn"> <span class="balloon-btn-set"> <span class="arrow-box"> <a href="" target="blank" class="arrow-box-link feedly-arrow-box-link" rel="nofollow"> <span class="social-count feedly-count">264</span> </a> </span> <a href="" rel="nofollow"> <span class="icon-feedly"></span> </a> </span> </li> </ul> </div> <!-- SNSページ --> <div class="sns-pages"> <p class="sns-follow-msg">フォローする</p> <ul class="snsp"> <li class="twitter-page"><a href="#" target="_blank" title="Twitterをフォロー" rel="nofollow"><span class="fa fa-twitter-square"></span></a></li> <li class="facebook-page"><a href="#" target="_blank" title="Facebookをフォロー" rel="nofollow"><span class="fa fa-facebook-square"></span></a></li> <li class="google-plus-page"><a href="#" target="_blank" title="Google＋をフォロー" rel="nofollow publisher"><span class="fa fa-google-plus-square"></span></a></li> <li class="instagram-page"><a href="#" target="_blank" title="Instagramをフォロー" rel="nofollow"><span class="fa fa-instagram"></span></a></li> <li class="feedly-page"><a href="#" target="blank" title="feedlyで更新情報をフォロー" rel="nofollow"><span class="icon-feedly-square"></span></a></li> <li class="rss-page"><a href="#" target="_blank" title="RSSで更新情報をフォロー" rel="nofollow"><span class="fa fa-rss-square fa-2x"></span></a></li> </ul> </div> </div> <p class="footer-post-meta"> <span class="post-author vcard author"><span class="fn"><span class="fa fa-user fa-fw"></span><a href="#">わいひら</a> </span> </span> </p> </div> <!-- .article --> </div> <!-- .page --> </div> <!-- /#main --> <!-- sidebar --> <aside> <div style="position: static; margin: 0px 0px 30px;" id="sidebar"> <div id="sidebar-widget"> <!-- ウイジェット --> <div id="text-21" class="widget widget_text"> <h4 class="widgettitle">Googleサイト内検索</h4> <div class="textwidget"> </div> </div> <div id="text-12" class="widget widget_text"> <h4 class="widgettitle">Simplicityのダウンロード</h4> <div class="textwidget"> <p>ダウンロードはこちらから。</p> <p><a href="#" class="simplicity-download">最新版のダウンロード</a></p> <p><a href="#" class="simplicity-download">子テーマのダウンロード</a></p> <p><a href="#" class="simplicity-download">スキンのダウンロード</a></p> </div> </div> <div id="new-entries" class="widget widget_new_popular"> <h4>新着記事</h4> <ul class="new-entrys"> <li class="new-entry"> <div class="new-entry-thumb"> <a href="#" class="new-entry-image" title="Simplicity1.8.2公開。ページごとにnoindex、nofollowを設定できる機能を追加。"><img src="//wp-simplicity.com/wp-content/uploads/2015/08/Coverr-lamp1-100x100.jpg" class="attachment-thumb100 wp-post-image" alt="Simplicity1.8.2公開。ページごとにnoindex、nofollowを設定できる機能を追加。" height="100" width="100"></a> </div> <!-- /.new-entry-thumb --> <div class="new-entry-content"> <a href="#" class="new-entry-title" title="Simplicity1.8.2公開。ページごとにnoindex、nofollowを設定できる機能を追加。">Simplicity1.8.2公開。ページごとにnoindex、nofollowを設定できる機能を追加。</a> </div> <!-- /.new-entry-content --> </li> <!-- /.new-entry --> <li class="new-entry"> <div class="new-entry-thumb"> <a href="#" class="new-entry-image" title="投稿ページのパンくずリストにページタイトルを含める方法"><img src="//wp-simplicity.com/wp-content/uploads/2015/08/bread-breakfast-baguette-sliced-large1-100x100.jpg" class="attachment-thumb100 wp-post-image" alt="投稿ページのパンくずリストにページタイトルを含める方法" height="100" width="100"></a> </div> <!-- /.new-entry-thumb --> <div class="new-entry-content"> <a href="#" class="new-entry-title" title="投稿ページのパンくずリストにページタイトルを含める方法">投稿ページのパンくずリストにページタイトルを含める方法</a> </div> <!-- /.new-entry-content --> </li> <!-- /.new-entry --> <li class="new-entry"> <div class="new-entry-thumb"> <a href="#" class="new-entry-image" title="Simplicity1.8.1公開。ページごとにアドセンスの非表示機能追加。"><img src="//wp-simplicity.com/wp-content/uploads/2015/07/ec71407c6cef4809e064d3c8e050a9ea1-100x100.jpg" class="attachment-thumb100 wp-post-image" alt="Simplicity1.8.1公開。ページごとにアドセンスの非表示機能追加。" height="100" width="100"></a> </div> <!-- /.new-entry-thumb --> <div class="new-entry-content"> <a href="#" class="new-entry-title" title="Simplicity1.8.1公開。ページごとにアドセンスの非表示機能追加。">Simplicity1.8.1公開。ページごとにアドセンスの非表示機能追加。</a> </div> <!-- /.new-entry-content --> </li> <!-- /.new-entry --> <li class="new-entry"> <div class="new-entry-thumb"> <a href="#" class="new-entry-image" title="Simplicityとページキャシュプラグインを併用する方法"><img src="//wp-simplicity.com/wp-content/uploads/2015/07/HNCK1748_thumb1-100x100.jpg" class="attachment-thumb100 wp-post-image" alt="Simplicityとページキャシュプラグインを併用する方法" height="100" width="100"></a> </div> <!-- /.new-entry-thumb --> <div class="new-entry-content"> <a href="#" class="new-entry-title" title="Simplicityとページキャシュプラグインを併用する方法">Simplicityとページキャシュプラグインを併用する方法</a> </div> <!-- /.new-entry-content --> </li> <!-- /.new-entry --> <li class="new-entry"> <div class="new-entry-thumb"> <a href="#" class="new-entry-image" title="Simplicity1.8安定版公開。1.7→1.8変更点まとめ。"><img src="//wp-simplicity.com/wp-content/uploads/2015/07/spieker-11-100x100.jpg" class="attachment-thumb100 wp-post-image" alt="Simplicity1.8安定版公開。1.7→1.8変更点まとめ。" height="100" width="100"></a> </div> <!-- /.new-entry-thumb --> <div class="new-entry-content"> <a href="#" class="new-entry-title" title="Simplicity1.8安定版公開。1.7→1.8変更点まとめ。">Simplicity1.8安定版公開。1.7→1.8変更点まとめ。</a> </div> <!-- /.new-entry-content --> </li> <!-- /.new-entry --> </ul> <div class="clear"></div> </div> <!-- /#new-entries --> <div id="text-26" class="widget widget_text"> <h4 class="widgettitle">よく問い合わせがある症状</h4> <div class="textwidget"> <p>タイトルタグが表示されない場合は、Wordpressを最新版にアップデートしてください。（4.1以上）</p> <p>テーマアップデートで表示が崩れた場合は、ブラウザのリロードボタンを押すか、<a href="#">動作不良時のガイドライン</a>にあるキャッシュの削除を行ってください。</p> </div> </div> <div id="categories-2" class="widget widget_categories"> <h4 class="widgettitle">カテゴリー</h4> <ul> <li class="cat-item cat-item-3"><a href="#" title="新着情報Simplicityに関する新着情報です。バージョンアップ、追加機能の報告など。">NEWS</a> (120) </li> <li class="cat-item cat-item-5"><a href="#" title="Simplicity、Wordpressの設定全般Simplicityの設定はもとより、Simplicityを使う上で便利な、Wordpressの設定に関する情報です。">設定いろいろ</a> (40) <ul class="children"> <li class="cat-item cat-item-14"><a href="#" title="Simplicityのローカルテスト環境用の設定など。">ローカルテスト</a> (1) </li> <li class="cat-item cat-item-15"><a href="#" title="Simplicityとサーバーに関する情報です。">サーバー</a> (2) </li> <li class="cat-item cat-item-13"><a href="#" title="Simplicityの文章を彩る拡張クラスの紹介です。">拡張クラス</a> (2) </li> </ul> </li> <li class="cat-item cat-item-6"><a href="#" title="Wordpress管理画面からできるカスタマイズWordpress管理画面から「外観→カスタマイズ」で行える設定に関する情報です。">カスタマイザー設定</a> (27) </li> <li class="cat-item cat-item-4"><a href="#" title="テーマファイルのカスタマイズ方法などSimplicityのテーマファイルを編集してカスタマイズする方法の紹介です。テーマファイルのカスタマイズによる不具合、それに関する質問は、サポートできませんのでご了承ください。">テーマ改造</a> (31) <ul class="children"> <li class="cat-item cat-item-16"><a href="#" title="ちょっとしたテーマカスタマイズのTipsです。">Tips</a> (8) </li> </ul> </li> </ul> </div> <div id="text-6" class="widget widget_text"> <h4 class="widgettitle">お知らせ</h4> <div class="textwidget"> <p>このサイトは<a href="#">Simplicity最新版</a>を、ほぼデフォルトの状態で使用しています。 <br> お使いのSimplicityに不具合などありましたら、 <a href="#">フォーラム</a>にて、ご報告していただけると、ものすごく助かります。 <br> できる限りすぐに対処いたします。 </p> <p>また、説明文などに誤字脱字などありましたら、コメント欄で教えていただけると助かります。すぐに修正します。</p> </div> </div> <div id="archives-3" class="widget widget_archive"> <h4 class="widgettitle">アーカイブ</h4> <ul> <li><a href="#">2015年8月</a> (2)</li> <li><a href="#">2015年7月</a> (12)</li> <li><a href="#">2015年6月</a> (11)</li> <li><a href="#">2015年5月</a> (9)</li> <li><a href="#">2015年4月</a> (8)</li> <li><a href="#">2015年3月</a> (10)</li> <li><a href="#">2015年2月</a> (10)</li> <li><a href="#">2015年1月</a> (13)</li> <li><a href="#">2014年12月</a> (14)</li> <li><a href="#">2014年11月</a> (17)</li> <li><a href="#">2014年10月</a> (18)</li> <li><a href="#">2014年9月</a> (19)</li> <li><a href="#">2014年8月</a> (31)</li> <li><a href="#">2014年7月</a> (33)</li> </ul> </div> <div id="text-5" class="widget widget_text"> <h4 class="widgettitle">カスタマイズサンプル</h4> <div class="textwidget"> <p>作者<a href="#" target="_blank">@MrYhira</a>のサイト<a href="#" target="_blank">寝ログ</a>でもSimplicityを使用しています。 <br> <a href="#" target="_blank"><img src="//wp-simplicity.com/wp-content/uploads/2014/07/33ac82d86fb7d99d946e12ca21635f21.jpg" alt="寝ログ" style="border:1px solid #ccc;" height="215" width="298"></a> <br> スタイルシートを編集するだけで、Simplicityの基本形とはまた違ったデザインにカスタマイズしてみようと思います。 </p> </div> </div> <div id="blog_subscription-3" class="widget jetpack_subscription_widget"> <h4 class="widgettitle">ブログをメールで購読</h4> <div id="subscribe-text"> <p>メールアドレスを記入して購読すれば、更新をメールで受信できます。 </p> </div> <p>111人の購読者に加わりましょう</p> <p id="subscribe-email"> <label style="clip: rect(1px, 1px, 1px, 1px); position: absolute; height: 1px; width: 1px; overflow: hidden;" id="jetpack-subscribe-label" for="subscribe-field"> メールアドレス </label> <input name="email" required="required" class="required" value="" id="subscribe-field-blog_subscription-3" placeholder="メールアドレス" type="email"> </p> <p id="subscribe-submit"> <input name="action" value="subscribe" type="hidden"> <input name="source" value="//wp-simplicity.com/" type="hidden"> <input name="sub-type" value="widget" type="hidden"> <input name="redirect_fragment" value="blog_subscription-3" type="hidden"> <input value="購読" name="jetpack_subscriptions_widget" type="submit"> </p> </form> </div> <div id="bbp_topics_widget-2" class="widget widget_display_topics"> <h4 class="widgettitle">最近のトピック</h4> <ul> <li> <a class="bbp-forum-title" href="#">特定のアンテナサイトにだけRSSが正常に届きません</a> by <span class="topic-author"><img alt="" src="//2.gravatar.com/avatar/586b49ca0bff77a4ca0ca1585084a5da?s=14&d=mm&r=g" srcset="//2.gravatar.com/avatar/586b49ca0bff77a4ca0ca1585084a5da?s=28&d=mm&r=g 2x" class="avatar avatar-14 photo" height="14" width="14"> poppyyyyy</span> <div>12 分 前</div> </li> <li> <a class="bbp-forum-title" href="#">アイキャッチ画像が表示されません。</a> by <span class="topic-author"><img alt="" src="//0.gravatar.com/avatar/38e9561664b8650bb686b232b6a52bb2?s=14&d=mm&r=g" srcset="//0.gravatar.com/avatar/38e9561664b8650bb686b232b6a52bb2?s=28&d=mm&r=g 2x" class="avatar avatar-14 photo" height="14" width="14"> 堂島一郎</span> <div>2 時間, 34 分 前</div> </li> <li> <a class="bbp-forum-title" href="#">カスタムタクソノミーによる関連記事の表示</a> by <span class="topic-author"><img alt="" src="//2.gravatar.com/avatar/b7443d65a7f31aed3b95231f44168f81?s=14&d=mm&r=g" srcset="//2.gravatar.com/avatar/b7443d65a7f31aed3b95231f44168f81?s=28&d=mm&r=g 2x" class="avatar avatar-14 photo" height="14" width="14"> nktn8673</span> <div>3 時間, 24 分 前</div> </li> <li> <a class="bbp-forum-title" href="#">WordPress 4.2.3に合うテーマのバージョン</a> by <span class="topic-author"><img alt="" src="//0.gravatar.com/avatar/ff6b3fd5d1feb0c907e4e87a7ee26361?s=14&d=mm&r=g" srcset="//0.gravatar.com/avatar/ff6b3fd5d1feb0c907e4e87a7ee26361?s=28&d=mm&r=g 2x" class="avatar avatar-14 photo" height="14" width="14"> バンブースランプ</span> <div>4 時間, 8 分 前</div> </li> <li> <a class="bbp-forum-title" href="#">ヘッダーロゴ画像の右に文字のヘッダーロゴ+サイト概要にしたいのですが・・・</a> by <span class="topic-author"><img alt="" src="//2.gravatar.com/avatar/26a1051c95a1ea0219e24511a0a40093?s=14&d=mm&r=g" srcset="//2.gravatar.com/avatar/26a1051c95a1ea0219e24511a0a40093?s=28&d=mm&r=g 2x" class="avatar avatar-14 photo" height="14" width="14"> taka</span> <div>6 時間, 27 分 前</div> </li> <li> <a class="bbp-forum-title" href="#">子テーマでパーツスキンやCSSがうまく反映されない</a> by <span class="topic-author"><img alt="" src="//2.gravatar.com/avatar/83f1cc9e7cfb29deb51bd56e44c20f20?s=14&d=mm&r=g" srcset="//2.gravatar.com/avatar/83f1cc9e7cfb29deb51bd56e44c20f20?s=28&d=mm&r=g 2x" class="avatar avatar-14 photo" height="14" width="14"> よろし</span> <div>17 時間, 24 分 前</div> </li> <li> <a class="bbp-forum-title" href="#">グローバルナビの下の余白を調整したい（メインカラムをサイドバーと同じ高さに合わせたい）</a> by <span class="topic-author"><img alt="" src="//2.gravatar.com/avatar/e7a260b60ebeb96956896593682e4127?s=14&d=mm&r=g" srcset="//2.gravatar.com/avatar/e7a260b60ebeb96956896593682e4127?s=28&d=mm&r=g 2x" class="avatar avatar-14 photo" height="14" width="14"> マッサ</span> <div>20 時間 前</div> </li> <li> <a class="bbp-forum-title" href="#">スクロールで現れる「ページトップへ」の改造</a> by <span class="topic-author"><img alt="" src="//0.gravatar.com/avatar/f95ec9007354f3fc5a7372fb2570144f?s=14&d=mm&r=g" srcset="//0.gravatar.com/avatar/f95ec9007354f3fc5a7372fb2570144f?s=28&d=mm&r=g 2x" class="avatar avatar-14 photo" height="14" width="14"> 拳志郎</span> <div>22 時間, 56 分 前</div> </li> <li> <a class="bbp-forum-title" href="#">ウィジェット、最近の投稿、投稿日の表示でません</a> by <span class="topic-author"><img alt="" src="//0.gravatar.com/avatar/ffecb1e3f366e15cb495032ba18fc372?s=14&d=mm&r=g" srcset="//0.gravatar.com/avatar/ffecb1e3f366e15cb495032ba18fc372?s=28&d=mm&r=g 2x" class="avatar avatar-14 photo" height="14" width="14"> のりくん</span> <div>2 日, 16 時間 前</div> </li> <li> <a class="bbp-forum-title" href="#">固定ページに表示される「日付」「SNSボタン」「RSSボタン」を非表示の方法</a> by <span class="topic-author"><img alt="" src="//0.gravatar.com/avatar/0f764ccd7d4b2596413535de89f0bd12?s=14&d=mm&r=g" srcset="//0.gravatar.com/avatar/0f764ccd7d4b2596413535de89f0bd12?s=28&d=mm&r=g 2x" class="avatar avatar-14 photo" height="14" width="14"> Azu</span> <div>2 日, 23 時間 前</div> </li> </ul> </div> <div id="recentcomments" class="widget widget_recentcomments"> <h4 class="widgettitle">最近のコメント</h4> <ul style="cursor: auto;"> <li id="rc-comment-14023" class="rc-item rc-comment rc-clearfix"><img src="//1.gravatar.com/avatar/43082754a16a569fff1e160478a3f4c8?s=32&#038;d=mm&#038;r=g' srcset='//1.gravatar.com/avatar/43082754a16a569fff1e160478a3f4c8?s=64&d=mm&r=g 2x" alt="" class="rc-avatar rc-left" height="32" width="32"> <div class="rc-info"><a class="rc-reviewer" rel="nofollow external" href="#">deco</a> on <a class="rc-post" rel="nofollow" href="//wp-simplicity.com/ads-settings/#comment-14023">「広告の設定」カスタマイズについての解説</a></div> <div class="rc-timestamp"></div> <div class="rc-excerpt">はじめまして。Simplicityのテーマと子テーマを使用させて頂いております。初めてのブログなので<span class="rc-ellipsis">...</span></div> </li> <li id="rc-comment-14021" class="rc-item rc-comment rc-clearfix"><img src="//wp-simplicity.com/wp-content/uploads/2014/08/aa1ffc96abbea326cb9d2581937a2bc2-32x32.png" alt="" class="rc-avatar rc-left" height="32" width="32"> <div class="rc-info"><a class="rc-reviewer" rel="nofollow external" href="//nelog.jp/">わいひら</a> on <a class="rc-post" rel="nofollow" href="#">WordPressの「ブログ用の表示名」と「ユーザー名」は、別のものにしておこう</a></div> <div class="rc-timestamp"></div> <div class="rc-excerpt">完全なセキュリティーはないかもしれませんが、対策をしてないよりは、してあったほうが間違いなく良いと思<span class="rc-ellipsis">...</span></div> </li> <li id="rc-comment-14020" class="rc-item rc-comment rc-clearfix"><img src="//wp-simplicity.com/wp-content/uploads/2014/08/aa1ffc96abbea326cb9d2581937a2bc2-32x32.png" alt="" class="rc-avatar rc-left" height="32" width="32"> <div class="rc-info"><a class="rc-reviewer" rel="nofollow external" href="#">わいひら</a> on <a class="rc-post" rel="nofollow" href="#">「広告の設定」カスタマイズについての解説</a></div> <div class="rc-timestamp"></div> <div class="rc-excerpt">機能は、基本的に汎用的なものしか付ける予定はないです。何でも機能追加すると、設定項目が増えて、初めて<span class="rc-ellipsis">...</span></div> </li> <li id="rc-comment-14019" class="rc-item rc-comment rc-clearfix"><img src="//1.gravatar.com/avatar/?s=32&#038;d=mm&#038;r=g' srcset='//0.gravatar.com/avatar/?s=64&d=mm&r=g 2x" alt="" class="rc-avatar rc-left" height="32" width="32"> <div class="rc-info"><span class="rc-reviewer">Anonymous</span> on <a class="rc-post" rel="nofollow" href="#">WordPressの「ブログ用の表示名」と「ユーザー名」は、別のものにしておこう</a></div> <div class="rc-timestamp"></div> <div class="rc-excerpt">//www.adminweb.jp/wordpress-plugin/list/index<span class="rc-ellipsis">...</span></div> </li> <li id="rc-comment-14018" class="rc-item rc-comment rc-clearfix"><img src="//1.gravatar.com/avatar/7600f6d13219cc43a25c31cdf6a03d6e?s=32&#038;d=mm&#038;r=g' srcset='//1.gravatar.com/avatar/7600f6d13219cc43a25c31cdf6a03d6e?s=64&d=mm&r=g 2x" alt="" class="rc-avatar rc-left" height="32" width="32"> <div class="rc-info"><span class="rc-reviewer">sab</span> on <a class="rc-post" rel="nofollow" href="#">Simplicity1.8安定版公開。1.7→1.8変更点まとめ。</a></div> <div class="rc-timestamp"></div> <div class="rc-excerpt">教えて頂いた参考記事を確認したら、理解できました。ありがとうございました。</div> </li> <li class="rc-navi rc-clearfix"> <a href="" rel="nofollow" " class="rc-older ">Older »</a></li> </ul> </div> </div> <!--スクロール追従領域--> <div id="sidebar-scroll "> <div id="text-13 " class="widget widget_text "> <h4>おすすめサーバー</h4> <div class="textwidget ">当サイトは、<a href="#" target="_blank " rel="nofollow ">XSERVER</a><img src="//www15.a8.net/0.gif?a8mat=25J89X+7OUPPE+CO4+6AZAQ " alt=" " height="1 " width="1 ">で運営中です。 <a href="#" target="_blank " rel="nofollow "> <img alt=" " src="//www24.a8.net/svt/bgt?aid=130227621465&wid=007&eno=01&mid=s00000001642001052000&mc=1 " height="250 " width="300 "></a> <img src="//www16.a8.net/0.gif?a8mat=25J89X+7OUPPE+CO4+69HA9 " alt=" " height="1 " width="1 "></div> </div> <div class="widget facebook_page_like "> <h4>Facebookページ</h4> <div class="article-like "> <div class="article-like-thumb "> <img src="//wp-simplicity.com/wp-content/uploads/2014/07/OH53_ipponnoki500-100x100.jpg " class="article-like-entry-thumnail wp-post-image " alt="Simplicityの特徴 " height="100 " width="100 "> </div> <div style="width: 186px; " class="article-like-arrow-box "> <div class="article-like-arrow-box-in "> <div class="article-like-button "> </div> <div class="article-like-body "> Simplicityの最新情報なども <br> お届けしている寝ログを、 <br> <span style="color: #F27C8E;font-weight: bold;font-size: 1.1em; ">いいね</span>してチェック！ </div> </div> </div> <div class="clear "></div> </div> </div> <!-- /#facebook-page-like-widget --> </div> </div> </aside> <!-- /#sidebar --> </div> <!-- /#body-in --> </div> <!-- /#body --> <!-- footer --> <div id="footer"> <div id="footer-in"> <div id="footer-widget"> <div class="footer-left"> <div id="pages-2" class="widget widget_pages "> <h4>固定ページ</h4> <ul> <li class="page_item page-item-17 current_page_item "><a href="#">Simplicityの特徴</a></li> <li class="page_item page-item-7 page_item_has_children "><a href="#">Simplicityのダウンロード</a> <ul class="children "> <li class="page_item page-item-1339 "><a href="#">Simplicityの子テーマ</a></li> <li class="page_item page-item-1877 "><a href="#">Simplicityのスキン</a></li> <li class="page_item page-item-27687 "><a href="#">Simplicityのロゴ</a></li> </ul> </li> <li class="page_item page-item-43 "><a href="//wp-simplicity.com/initialization/ ">Simplicityの初期設定・おすすめの設定</a></li> <li class="page_item page-item-59 "><a href="//wp-simplicity.com/layout/ ">レイアウト見本</a></li> <li class="page_item page-item-139 page_item_has_children "><a href="//wp-simplicity.com/reference/ ">参考・技術情報</a> <ul class="children "> <li class="page_item page-item-1143 "><a href="//wp-simplicity.com/reference/adoption-sites/ ">Simplicity導入サイト</a></li> <li class="page_item page-item-21216 "><a href="//wp-simplicity.com/reference/crowdsourcing-service/ ">Simplicityカスタマイズ依頼向けのクラウドソーシングサービス</a></li> </ul> </li> <li class="page_item page-item-9262 page_item_has_children "><a href="//wp-simplicity.com/forums/ ">Simplicityサポートフォーラム</a> <ul class="children "> <li class="page_item page-item-9258 "><a href="#">トピックの作成</a></li> <li class="page_item page-item-13015 "><a href="#">サポート対象外のもの</a></li> </ul> </li> <li class="page_item page-item-71 "><a href="#">お問い合わせ</a></li> <li class="page_item page-item-3185 "><a href="#">サイトマップ</a></li> </ul> </div> </div> <div class="footer-center"> <div id="categories-3" class="widget widget_categories "> <h4>カテゴリー</h4> <ul> <li class="cat-item cat-item-3 "><a href="#" title="新着情報Simplicityに関する新着情報です。バージョンアップ、追加機能の報告など。 ">NEWS</a> (120) </li> <li class="cat-item cat-item-5 "><a href="#" title="Simplicity、Wordpressの設定全般Simplicityの設定はもとより、Simplicityを使う上で便利な、Wordpressの設定に関する情報です。 ">設定いろいろ</a> (40) <ul class="children "> <li class="cat-item cat-item-14 "><a href="#" title="Simplicityのローカルテスト環境用の設定など。 ">ローカルテスト</a> (1) </li> <li class="cat-item cat-item-15 "><a href="#" title="Simplicityとサーバーに関する情報です。 ">サーバー</a> (2) </li> <li class="cat-item cat-item-13 "><a href="#" title="Simplicityの文章を彩る拡張クラスの紹介です。 ">拡張クラス</a> (2) </li> </ul> </li> <li class="cat-item cat-item-6 "><a href="#" title="Wordpress管理画面からできるカスタマイズWordpress管理画面から「外観→カスタマイズ」で行える設定に関する情報です。 ">カスタマイザー設定</a> (27) </li> <li class="cat-item cat-item-4 "><a href="#" title="テーマファイルのカスタマイズ方法などSimplicityのテーマファイルを編集してカスタマイズする方法の紹介です。テーマファイルのカスタマイズによる不具合、それに関する質問は、サポートできませんのでご了承ください。 ">テーマ改造</a> (31) <ul class="children "> <li class="cat-item cat-item-16 "><a href="#" title="ちょっとしたテーマカスタマイズのTipsです。 ">Tips</a> (8) </li> </ul> </li> </ul> </div> </div> <div class="footer-right"> <div id="archives-4 " class="widget widget_archive "> <h4>アーカイブ</h4> <ul> <li><a href="#">2015年8月</a> (2)</li> <li><a href="#">2015年7月</a> (12)</li> <li><a href="#">2015年6月</a> (11)</li> <li><a href="#">2015年5月</a> (9)</li> <li><a href="#">2015年4月</a> (8)</li> <li><a href="#">2015年3月</a> (10)</li> <li><a href="#">2015年2月</a> (10)</li> <li><a href="#">2015年1月</a> (13)</li> <li><a href="#">2014年12月</a> (14)</li> <li><a href="#">2014年11月</a> (17)</li> <li><a href="#">2014年10月</a> (18)</li> <li><a href="#">2014年9月</a> (19)</li> <li><a href="#">2014年8月</a> (31)</li> <li><a href="#">2014年7月</a> (33)</li> </ul> </div> </div> </div> <div class="clear "></div> <div id="copyright " class="wrapper "> WordPress Theme <a href="#" rel="nofollow ">Simplicity</a> <br> <a href="#" rel="nofollow license ">CC BY-ND</a> <a href="#">Simplicity</a> Some Rights Reserved. </div> </div> <!-- /#footer-in --> </div> <!-- /#footer --> <div id="page-top "> <a id="move-page-top "><span class="fa fa-chevron-circle-up fa-2x "></span></a> </div> </div> <!-- /#container -->
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
WordpressTheme Simplicity 1column idea - Script Codes CSS Codes
.left { left: -310px;
}
.right { right: -310px;
}
.panel { top: 0; height: 100vh; width: 330px; position: fixed; background-color: #333; padding: 0 10px; -webkit-transition: .3s ease; transition: .3s ease; z-index: 99999;
}
.panel.menuon { overflow-y: auto;
}
.left.panel.menuon { -webkit-transform: translate3d(310px, 0, 0); transform: translate3d(310px, 0, 0);
}
.right.panel.menuon { -webkit-transform: translate3d(-310px, 0, 0); transform: translate3d(-310px, 0, 0);
}
.insertPanel { position: absolute; height: 100%; margin: 0; padding: 0; background-color: rgba(200, 180, 230, 0.3);
}
.insertPanel [class^="mvImg_"] { width: 100%; position: absolute; left: 0;
}
.insertPanel [class^="mvImg_"] img { width: 100%; height: 0; background-repeat: no-repeat; background-size: cover; background-position: center center; overflow: hidden;
}
.leftIP,
.rightIP { top: 0;
}
.leftIP { left: 0;
}
.rightIP { right: 0;
}
[class^=imgTarget_] { background-color: rgba(179, 10, 64, 0.73); color: #fff;
}
.bigImg { -webkit-transition: .3s ease; transition: .3s ease; height: 0; position: absolute; left: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); border: 2px solid rgba(255, 0, 0, 0.8); background-repeat: no-repeat; background-size: cover; background-position: center center; overflow: hidden;
}
*, *::before, *::after { box-sizing: border-box;
}
#main { float: none; margin: 0 auto; position: relative;
}
@media screen and (min-width: 320px) and (max-width: 767px) { #main { width: 100%; }
}
#header-in,
#body-in,
#navi-in,
#footer-in { position: relative; width: 90%;
}
@media screen and (min-width: 768px) and (max-width: 1024px) { #header-in, #body-in, #navi-in, #footer-in { width: 100%; }
}
@media screen and (min-width: 320px) and (max-width: 767px) { #header-in, #body-in, #navi-in, #footer-in { width: 100%; }
}WordpressTheme Simplicity 1column idea - Script Codes JS Codes
(function($) { //sidebarの移動先を左右どちらのパネルにするか var panelAlign = "right"; //resize 処理 $(window).resize(function() { if (window.innerWidth > 1070) { $(".insertPanel").show(); var bodyinWidth = $("#body-in").width(), mainWidth = $("#main").width(), padd = 30, insertPanelWidth = (bodyinWidth - ((padd * 2) + mainWidth)) / 2; $(".insertPanel").css({ width: insertPanelWidth }); } else { $(".insertPanel").hide(); } //paddingの調整 if (window.innerWidth < 768) { if ($(".panel").hasClass("left")) { $("#main").css({ "padding-left": 40 + "px" }); } else { $("#main").css({ "padding-right": 40 + "px" }); } } }); //window resize end //mainの左右に入れるパネル function insertPanel() { var bodyin_width = $("#body-in").width(), main_width = $("#main").width(), pad = 30, insertPanelWidth = (bodyin_width - (pad * 2 + main_width)) / 2; $(".insertPanel").css({ width: insertPanelWidth }); } //mainの左右のパネルの画像の高さ算出 function getPadding(size) { var x = size[0], y = size[1], aspect; aspect = y * 100 / x; //console.log("test: ",aspect); return aspect; } $(function() { $("body").prepend("<div class='" + panelAlign + " panel' />"); $("#main").append("<div class='bigImg' />"); $("#sidebar").appendTo(".panel"); $("#body-in") .prepend("<div class='leftIP insertPanel' />") .append("<div class='rightIP insertPanel' />"); var ww = window.innerWidth; //console.log(ww); if (ww > 1070) { insertPanel(); } if (ww < 768) { if ($(".panel").hasClass("left")) { $("#main").css({ "padding-left": 40 + "px" }); } else { $("#main").css({ "padding-right": 40 + "px" }); } } //move image $("#the-content").find("img").each(function(i, value) { var asrc = $(this).parent("a").attr("href"), isrc = $(this).attr("src"), originalOffset = $(this).offset().top, imageWidth = $(this).width(), imageHeight = $(this).height(), size = [], imgTarget = "imgTarget_" + i; //console.log("href: ", asrc); if ($(this).hasClass("alignleft")) { $(".leftIP").append("<div class='mvImg_" + i + "'></div>"); $(this).after("<div class='" + imgTarget + "' data-target='mvImg_" + i + "'>[image]</div>"); } else if ($(this).hasClass("alignright")) { $(".rightIP").append("<div class='mvImg_" + i + "'></div>"); $(this).after("<div class='" + imgTarget + "' data-target='mvImg_" + i + "'>[image]</div>"); } $(".leftIP, .rightIP").find("img").removeAttr("width height"); size.push(imageWidth, imageHeight) var imgpad = getPadding(size); //var originalOffset = $(this).offset().top; //var targetPosition = $("." + imgTarget).offset().top; var diff = $("#body-in").offset().top; $(".mvImg_" + i) .css({ top: originalOffset - diff }); if (asrc !== "undefined" || asrc !== "#" || asrc !== null) { $(".mvImg_" + i).append("<a href='" + asrc + "' />"); $(this).appendTo(".mvImg_" + i + " a"); } else { $(this).appendTo(".mvImg_" + i); } $(".mvImg_" + i + " img").css({ "background-image": "url(" + isrc + ")", padding: "0 0 " + imgpad + "%" }); }); $("[class^=imgTarget_]").hover(function() { var mvImgTgt = $(this).data("target"); $("." + mvImgTgt).css({ border: "2px solid #f00", "z-index": 99999 }); }, function() { var mvImgTgt = $(this).data("target"); $("." + mvImgTgt).css({ border: 0, "z-index": 0 }); }); $("[class^=mvImg_]").find("img").hover(function() { var imgSrc = $(this).attr("src"), iWidth = $(this).width(), iHeight = $(this).innerHeight(), offs = $(this).offset(), size = [iWidth, iHeight], pad = getPadding(size), nPersent = iHeight * 100 / iWidth; //console.log("iHeight: ", iHeight); $(".bigImg").css({ width: $("#main").innerWidth(), top: offs.top - $("#main").offset().top, padding: "0 0 " + ($("#main").width() * nPersent) / 100 + "px", "background-image": "url(" + imgSrc + ")" }); }, function() { $(".bigImg").fadeOut(function(){ $(this).removeAttr("style"); }); }); //暫定 $(".panel").on("click", function() { $(this).toggleClass("menuon"); }); });
})(jQuery);
| Developer | Hidekichi |
| Username | Hidekichi |
| Uploaded | July 10, 2022 |
| Rating | 3 |
| Size | 18,732 Kb |
| Views | 30,360 |
Do you need developer help for WordpressTheme Simplicity 1column idea?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Hidekichi (Hidekichi) Script Codes
Create amazing love letters with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Headroom.js demo | WickyNilliams | 3,982 Kb |
| Material design buttons | Fischaela | 4,381 Kb |
| CSS Link Icons with jQuery Titles | Nicwinn | 2,312 Kb |
| Flexbox Grid - equal height | DaveOrDead | 2,855 Kb |
| Pure CSS Read More Arrow | Zephyr | 1,747 Kb |
| Portfolio Landing Page | FDfranklin | 3,585 Kb |
| Em Test | Rodesco | 1,784 Kb |
| Mobile Sub Menu Concept | Berdejitendra | 2,790 Kb |
| Comment Jquery | SquishyAndroid | 2,421 Kb |
| Planet Awesome | Bartuc | 3,554 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!