この『四つ這いおとな』を始めようとしたとき、初めて”WordPress”のいろいろな基礎知識や設定を勉強することになった。そして、サーバーを選んだり、サイトのアドレスを決めたりして、とりあえずサイトを公開するスタートラインにまでは立てたとき、次にこの『四つ這いおとな』の基本的なデザインの枠組み、「テーマ」って呼ばれてるものを選ぶために、いろいろ見て回ってたんだ。
まず、いちばん重視した条件は、「無料」だということ。一応広告を載せたり、投げ銭を受け付けたりはしているけど、できたばかりのサイトに、そんなたくさんの「支援者」が現れるなんてのは現実的じゃない。それに僕は現金収入にそれほどゆとりがあるわけじゃないから、まずは「できるだけ支出を抑える」ということ、これがとても大切だった。そのぶんサーバーと独自ドメインには、少しお金をかけたけどね。
そして、僕にとってもうひとつ大切な条件は、「シンプルで、設定がわかりやすい」ってことだった。僕は文系だし、数字とかコードとかも見てるだけで疲れてしまう感じだから、「文章を書く」ということ以外のことは、できるだけシンプルに済ませるのが理想だ。
それで、この条件に当てはまるテーマをいろいろ探し回ってたどり着いたのが、この『Simplicity』だったんだ。
簡単で、馴染みやすいのに高機能、そして無料。Simplicityは、ほとんど僕の理想そのものだった
そして見つけたSimplicityは、まさにその名前に表されているとおり、シンプルだった。それでいて高機能で、基本的な機能は初期設定のままでも盛り込まれているから、とりあえずはそのままでもなんの問題もない。そして開発者も日本人だし、利用者も既に多かったから情報も豊富にあるし、オプション機能もいろいろ試行錯誤しながら設定することができた。そして、すべての機能を最大限に活用しても無料だ。ここまで見ただけで、これはもうほとんど僕の理想そのものだと思った。それで迷わず、このSimplicityを導入させてもらうことにしたんだ。
作者の「わいひら」さんは、「ネタキリ系の人」だった
こんなにいいテーマを見つけた僕は、今度はその作者の「わいひら」さんってどんなひとなのかが、気になるようになった。そしてその「わいひら」さんの別サイト『寝ログ』を見つけたとき、そのプロフィール欄を見て、かなり驚いた。
ブログ運営者：わいひら（yhira）
事故って首の骨を折っちゃったネタキリ系の人。（C4-5）
このブログは、基本的に寝ながら出来るコトや使えるモノを紹介しています。主に、生活の中から気づいたこと、寝ながらでもできる仕事、便利グッズなどのレビュー、アニメ・漫画、ブログ運営、Wordpressなど、雑多なことを書いています。
頸髄損傷で手足は動かないのですが、今は以前よりデバイスが進んできたので、パソコン操作なら何とかすることができます。
そう、わいひらさんは「ネタキリ系の人」だったんだ。そしてこれを知った僕は、勝手ながらさらに親近感を持ってしまった。そしてなおさら、このSimplicityを大切に遣わせてもらおうと、そう思ったんだ。
備忘録も兼ねて、僕がSimplicityに施したカスタマイズを記録しておく
それで僕は、どうせならこのSimplicityを最大限自分らしく活用しようと、公式の情報以外にいくつかのサイトの情報を組み合わせて、自分なりにカスタマイズを施してみた。といってもただコピペしただけなんだけど、これからの自分のための備忘録も兼ねて、そのコードと情報元を、まとめておこうと思う。この内容は、今後も随時追加していくよ。
じゃあまずは、『四つ這いおとな』のタイトルロゴから。
これは
を参考に、
logo.squarespace.com
の機能を活用して作った。
次に、見出しの見た目は、これをそのままコピペしただけ。
.article h2 {
background-color: #1eae93;/* 見出し背景色 */
border-left: 0 none;
color: #fff;/* 文字の色 */
padding: 15px 30px;/* 文字の位置 */
margin-bottom: 35px;/* 見出し下の空白*/
}
.article h3 {
border-bottom: 10px solid #b5f2e7;
padding: 10px 0 0 0;
margin-bottom: 30px;
}
.article h4 {
border-left: 30px solid #b5f2e7;
border-bottom: 0px;
padding: 5px 0 5px 10px;
margin-bottom: 30px;
}
それから、段落の１字下げについては、いろいろ調べてみた結果、
#the-content.entry-content p {
padding-left:-1em;
text-indent:1em;
}
のコードで設定してるけど、今のところとりあえず快適だと思う。
あとは、サイトで本とか他のものを紹介するときに活用させてもらってる「ヨメレバ」や「カエレバ」については、このコードでボタンのデザインを変えている。
/*カエレバ・ヨメレバ（PC版）*/
.kaerebalink-box, .booklink-box {
border: 2px solid #CCCCCC;
padding: 20px;
width: 90%;
max-width:680px;
margin:0 auto;
}
.kaerebalink-image, .booklink-image {
width:20%;
float: left;
}
.kaerebalink-image a img,.booklink-image a img {
width:100%;
}
.kaerebalink-info, .booklink-info {
width:70%;
margin-left: 2em;
float: left;
}
.kaerebalink-name > a, .booklink-name > a {
font-size: 16px;
color: #256CC5;
text-decoration: underline;
}
.kaerebalink-powered-date, .booklink-powered-date {
font-size: 12px;
}
.kaerebalink-powered-date a, .booklink-powered-date a {
color: #256CC5;
text-decoration: underline;
}
.kaerebalink-link1, .booklink-link2 {
margin-top: 1em;
}
.kaerebalink-link1 div, .booklink-link2 div {
margin-right: 5px;
margin-bottom:3px;
text-align: center;
float:left;
width: 30%;
}
.kaerebalink-link1 div:active, .booklink-link2 div:active {
border-top:3px solid #FFFFFF;
margin-bottom: none;
box-shadow:none;
}
.kaerebalink-link1 div a, .booklink-link2 div a {
color: white;
text-decoration: none;
font-weight: bold;
display:block;
width: 100%;
height: 40px;
line-height: 40px;
}
.shoplinkamazon {
background: #FF9900;
box-shadow: 0 3px #B16A00;
}
.shoplinkamazon:hover {
background: #FFB23F;
}
.shoplinkkindle {
background: #0079BA;
box-shadow: 0 3px #015684;
}
.shoplinkkindle:hover {
background: #2797D4;
}
.shoplinkrakuten {
background: #BF0000;
box-shadow: 0 3px #7B0101;
}
.shoplinkrakuten:hover {
background: #DC3939;
}
.shoplinkkakakucom {
background: #25388E;
box-shadow: 0 3px #081658;
}
.shoplinkkakakucom:hover {
background: #485CB7;
}
.shoplinkyahoo {
background: #750992;
box-shadow: 0 3px #3F0250;
}
.shoplinkyahoo:hover {
background: #8F0FB3;
}
.booklink-footer {
height:0;
clear: left;
}
style type=text/css>
/*カエレバ・ヨメレバ（スマホ版）*/
.kaerebalink-box, .booklink-box {
border: 2px solid #CCCCCC;
padding: 20px;
width: 80%;
margin:0 auto;
}
.kaerebalink-image, .booklink-image {
margin:0 auto;
text-align:center;
}
.kaerebalink-info, .booklink-info {
margin:10px auto;
padding-top:10px;
border-top:1px solid #CCCCCC;
}
.kaerebalink-name > a, .booklink-name > a {
font-size: 16px;
color: #256CC5;
text-decoration: underline;
}
.kaerebalink-powered-date, .booklink-powered-date {
font-size: 12px;
}
.kaerebalink-powered-date a, .booklink-powered-date a {
color: #256CC5;
text-decoration: underline;
}
.kaerebalink-link1, .booklink-link2 {
margin-top: 1em;
}
.kaerebalink-link1 div, .booklink-link2 div {
margin:5px auto;
text-align: center;
width: 100%;
}
.kaerebalink-link1 div a, .booklink-link2 div a {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
display:block;
width: 100%;
height: 40px;
line-height: 40px;
}
.shoplinkamazon {
background: #FF9900;
}
.shoplinkkindle {
background: #0079BA;
}
.shoplinkrakuten {
background: #BF0000;
}
.shoplinkkakakucom {
background: #25388E;
}
.shoplinkyahoo {
background: #750992;
}
.booklink-footer {
height:0;
clear: left;
}
それとYouTube動画をAMPに対応させるための
remove_action( 'init', 'wpcom_youtube_embed_crazy_url_init' );
をfunctions.phpに追記している。
それにこのページに書かれてるコード（設定）も加えることで、サイト全体の高速化を図っている。
あと今のところ利用頻度は少ないけど、公式の追加機能の「検索ボックス」の表示も一応取り入れている。
/*******************************
* 続きはWEBで的な検索ボックス
********************************/
.search-form{
margin: 3em 0;
font-family: "Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
line-height: 170%;
}
.search-form div{
border: 1px solid #555;
border-radius: 2px;
padding: 5px;
margin-left: 10px;
display: inline-block;
}
.search-form div.sform{
min-width: 280px;
background-color: #fff;
}
.search-form div.sbtn{
background-color: #1155EE;
color: #fff;
padding-left: 20px;
padding-right: 30px;
position: absolute;
}
.search-form div.sbtn:after{
content: "\f25a";
font-family: FontAwesome;
color: #000;
position: absolute;
bottom: -28px;
font-size: 25px;
}
@media screen and (max-width:450px){
.search-form div{
padding: 3px 5px;
font-size: 75%;
}
.search-form div.sform{
min-width: 180px;
}
.search-form div.sbtn{
padding-left: 5px;
padding-right: 10px;
}
.search-form div.sbtn:after{
font-size: 20px;
margin-left: -10px;
}
}
とりあえず今はこれだけで、かなり満足のいくものができていると思う。これはわいひらさんや、みなさんのおかげだ。これからも僕も自分なりに試行錯誤しながら、よりよいサイトに、近づけていきたいと思う。
みなさん、いつもほんとにありがとうございます！
