FlatPress.info

リンク先の文字表示がマウスオーバーで斜めになっちゃうプラウグイン

変わったサイト作りがお好きなあなた、"マウスオーバーでリンク文字が斜めっちゃうプラグイン"はいかがですか？　CSS に関するサイトを眺めていたら、前述した機能を実現する CSS 記述の例が載ってました。まあ、自己フレンドリーかも知れませんが、他人には煩い感じを与える可能性も否定できませんけど。本サイトで紹介している Flatpress の情報は完全に自分のための情報を整理して備忘するのが目的です。なので、動きが欲しいと思った一部分の表示領域だけがそうなるようにしましょうかね。

さて、メイン表示部分は通常で、ヘッダーとメニュー部分のリンク表示文字がマウスオーバーで文字が斜めになる実例をお見せしましょう。

このプラグインを利用したい方は、本サイトからダウンロードして fp-plugins/ 配下に解凍して設置し、同プラグインを有効化してください。

どの部分のリンク文字をマウスオーバーで斜めにするか

ご存じのようにホームページの領域は CSS によって修飾されています。Flatpress においてもヘッダー部分、メニュー部分、メイン表示部分などについては、それぞれ、#head, #column, #main のようにユニークなIDが付与されています。そこでこの文字を下記のように設定してもらえば、その指定領域だけ、このプラグインが動作対象とするようにできます。

その他の固有部分だけ動作させたい場合は、ソースを改造して対応してください。以下が主要プログラムとなっています。plugin.tiltlink.php

<?php
/*
Plugin Name: Tilt Link
Version: 0.8
Plugin URI: http://flatpress.info/
Type: CSS
Description: Tilt Link line
Author: Flatpress.info
Author URI: http://flatpress.info
*/

function plugin_tiltlink_css() {
        global $tlcss;
        $tlcss = array();
        $lang = lang_load('plugin:tiltlink');
        $tlcss['subject'] = $lang['plugin']['tiltlink']['subject'];
        include 'tiltcss.php';
        $h=$tlcss['css'];
        echo '<style type="text/css">   <!-- ' . $h . ' --></style>';
        return;
}
add_action('wp_head', 'plugin_tiltlink_css');

if (class_exists('AdminPanelAction')){
        class admin_plugin_tiltlink extends AdminPanelAction {
                function setup() {
                        $this->smarty->assign('admin_resource', "plugin:tiltlink/admin.plugin.tiltlink");
                        $bc_config = plugin_getoptions('tiltlink');
                        if(!$bc_config['tiltlink']) {
                                $tiltlink = "body";
                                plugin_addoption('tiltlink', 'tiltlink', $tiltlink);
                                plugin_saveoptions('tiltlink');
                        }
                }
                function main() {
                        $bc_config = plugin_getoptions('tiltlink');
                        $this->smarty->assign('bc_config', $bc_config);
                }
                function onsubmit() {
                        if ($_POST['bc-tiltlink']){
                                $tiltlink = $_POST['bc-tiltlink'];
                                plugin_addoption('tiltlink', 'tiltlink', $tiltlink);
                                plugin_saveoptions('tiltlink');
                                $this->smarty->assign('success', 1);
                        } else {
                                $this->smarty->assign('success', -1);
                        }
                        return 2;
                }
        }
        admin_addpanelaction('plugin', 'tiltlink', true);
}
?>

 tiltcss.php

<?php
global $tlcss;

$time = <<<_EOT1_
 a {
     display: inline-block;
     -webkit-transition: 0.5s;
     -moz-transition: 0.5s;
     -o-transition: 0.5s;
     -ms-transition: 0.5s;
     transition: 0.5s;
 }
_EOT1_;

$rotate = <<<_EOT2_
 a:hover {
    -webkit-transform: rotate(10deg);
     -moz-transform: rotate(10deg);
     -o-transform: rotate(10deg);
     -ms-transform: rotate(10deg);
     transform: rotate(10deg);
}
_EOT2_;

$div = plugin_getoptions('tiltlink');
$div = preg_split('/[\s]+/', $div['tiltlink'], -1, PREG_SPLIT_NO_EMPTY);
$tlcss['css'] = '';
foreach ($div as $key => $value) {
    $tlcss['css'] .= $value . $time;
    $tlcss['css'] .= "\n";
    $tlcss['css'] .= $value . $rotate;
    $tlcss['css'] .= "\n";
}
?>